From f5a9184f891b3216d49d92390e54eaf0f970eff1 Mon Sep 17 00:00:00 2001
From: "Peter J. Holzer" <hjp@hjp.at>
Date: Tue, 20 Mar 2018 19:59:25 +0100
Subject: [PATCH] Use flexbox to display multiple entries per line

Also limit the vertical size of the entries for nicer layout. This means
that we can get rid of the second button row at the bottom.
---
 index.cgi    |  8 +++++---
 rss2html.css | 47 ++++++++++++++++++++++++++++++++---------------
 2 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/index.cgi b/index.cgi
index f4434ab..946c784 100755
--- a/index.cgi
+++ b/index.cgi
@@ -234,7 +234,6 @@ sub list {
 
 sub print_itemlist {
     my ($items, $feeds) = @_;
-    print "<div class='itemlist'>\n";
     print "<form action='./'>\n";
     print "<select name='fis'>\n";
     print "<option value=''>\n";
@@ -248,6 +247,7 @@ sub print_itemlist {
     print "<input type='hidden' name='sr' value='10'>\n";
     print "<input type='submit' value='»'>\n";
     print "</form>\n";
+    print "<div class='itemlist'>\n";
     my $n_items = 0;
     my $n_html_mcd = 0;
     my $n_scrub_mcd = 0;
@@ -291,8 +291,8 @@ sub print_itemlist {
         $html .= "<div class='feed'>" . $q->escapeHTML($item->{feed_title}) . "</div>\n";
         $html .= "<h2><a href='./?redir=" . $q->escapeHTML($item->{item_id}) . "'>" . $q->escapeHTML($item->{item_title}) . "</a></h2>\n";
         $html .= "<div class='content'>" . $scrubbed_content . "</div>\n";
-        $html .= $mark_read_button;
-        $html .= $mark_later_button;
+        #$html .= $mark_read_button;
+        #$html .= $mark_later_button;
         $html .= "<div class='end'></div>\n";
         $html .= "</div\n>";
         print $html;
@@ -341,6 +341,8 @@ sub list_feeds {
     my $other = $feed_list_show eq 'all' ? 'unread' : 'all';
     $q1->param('fls', $other);
     print "<div><a href='", $q->escapeHTML($q1->self_url), "'>$other</a></div>\n";
+    print "<input type='checkbox' id='feedlist_toggle'>\n";
+    print "<label for='feedlist_toggle' id='feedlist_toggle_menu'>...</label>\n";
     print "<div class='feedlist'>\n";
     $dbh->begin_work;
 
diff --git a/rss2html.css b/rss2html.css
index 5c344c7..bb8f389 100644
--- a/rss2html.css
+++ b/rss2html.css
@@ -1,20 +1,24 @@
 .item {
-    border-style: none;
+    border-style: solid;
     border-width: 1px;
+    border-color: #88F;
+    border-radius: 0.2em 0.2em 0.2em 1.5em;
+    padding: 0.5em;
     background-color: #F6F6FF;
     margin: 1em;
     hyphens: auto;
     -moz-hyphens: auto;
+    max-width: 40em;
 }
 
-.item:after {
-    display: block;
-    clear: both;
-    content: "";
-    background-color: #00F;
-    height: 6px;
-    background: linear-gradient(#F6F6FF, #EEEEFF);
-}
+// .item:after {
+//     display: block;
+//     clear: both;
+//     content: "";
+//     background-color: #00F;
+//     height: 6px;
+//     background: linear-gradient(#F6F6FF, #EEEEFF);
+// }
 
 .op {
     float: right;
@@ -114,6 +118,14 @@ h2 {
     padding: 0.2em;
 }
 
+input[type=checkbox]:checked ~ .feedlist {
+    display: block;
+}
+
+input[type=checkbox] ~ .feedlist {
+    display: none;
+}
+
 .feedlist a {
     text-decoration: none;
 }
@@ -123,18 +135,18 @@ h2 {
 }
 
 .itemlist {
-    background-color: #EEF;
-    max-width: 40em;
-    float: left;
+    //background-color: #EEF;
     font-family: "Quercus", sans-serif;
+    display: flex;
+    flex-flow: row wrap;
 }
 
-@media screen and (min-width: 60em) and (max-width: 80em) {
+@media screen and (min-width: 45em) and (max-width: 60em) {
     .itemlist {
-        max-width: 48%;
+        max-width: 68%;
     }
     .feedlist {
-        max-width: 48%;
+        max-width: 32%;
     }
 }
 
@@ -160,3 +172,8 @@ body {
 img {
     max-width: 99%;
 }
+
+.content {
+    max-height: 50vh;
+    overflow: auto;
+}