hjp
/
rss2html
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.
This commit is contained in:
Peter J. Holzer 2018-03-20 19:59:25 +01:00
parent 9c4fc46b05
commit f5a9184f89
2 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.cgi
View File

@ -234,7 +234,6 @@ sub list {
sub print_itemlist { sub print_itemlist {
my ($items, $feeds) = @_; my ($items, $feeds) = @_;
print "<div class='itemlist'>\n";
print "<form action='./'>\n"; print "<form action='./'>\n";
print "<select name='fis'>\n"; print "<select name='fis'>\n";
print "<option value=''>\n"; print "<option value=''>\n";
@ -248,6 +247,7 @@ sub print_itemlist {
print "<input type='hidden' name='sr' value='10'>\n"; print "<input type='hidden' name='sr' value='10'>\n";
print "<input type='submit' value='»'>\n"; print "<input type='submit' value='»'>\n";
print "</form>\n"; print "</form>\n";
print "<div class='itemlist'>\n";
my $n_items = 0; my $n_items = 0;
my $n_html_mcd = 0; my $n_html_mcd = 0;
my $n_scrub_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 .= "<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 .= "<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 .= "<div class='content'>" . $scrubbed_content . "</div>\n";
$html .= $mark_read_button; #$html .= $mark_read_button;
$html .= $mark_later_button; #$html .= $mark_later_button;
$html .= "<div class='end'></div>\n"; $html .= "<div class='end'></div>\n";
$html .= "</div\n>"; $html .= "</div\n>";
print $html; print $html;
@ -341,6 +341,8 @@ sub list_feeds {
my $other = $feed_list_show eq 'all' ? 'unread' : 'all'; my $other = $feed_list_show eq 'all' ? 'unread' : 'all';
$q1->param('fls', $other); $q1->param('fls', $other);
print "<div><a href='", $q->escapeHTML($q1->self_url), "'>$other</a></div>\n"; 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"; print "<div class='feedlist'>\n";
$dbh->begin_work; $dbh->begin_work;

47
rss2html.css
View File

@ -1,20 +1,24 @@
.item { .item {
border-style: none; border-style: solid;
border-width: 1px; border-width: 1px;
border-color: #88F;
border-radius: 0.2em 0.2em 0.2em 1.5em;
padding: 0.5em;
background-color: #F6F6FF; background-color: #F6F6FF;
margin: 1em; margin: 1em;
hyphens: auto; hyphens: auto;
-moz-hyphens: auto; -moz-hyphens: auto;
max-width: 40em;
} }
.item:after { // .item:after {
display: block; // display: block;
clear: both; // clear: both;
content: ""; // content: "";
background-color: #00F; // background-color: #00F;
height: 6px; // height: 6px;
background: linear-gradient(#F6F6FF, #EEEEFF); // background: linear-gradient(#F6F6FF, #EEEEFF);
} // }
.op { .op {
float: right; float: right;
@ -114,6 +118,14 @@ h2 {
padding: 0.2em; padding: 0.2em;
} }
input[type=checkbox]:checked ~ .feedlist {
display: block;
}
input[type=checkbox] ~ .feedlist {
display: none;
}
.feedlist a { .feedlist a {
text-decoration: none; text-decoration: none;
} }
@ -123,18 +135,18 @@ h2 {
} }
.itemlist { .itemlist {
background-color: #EEF; //background-color: #EEF;
max-width: 40em;
float: left;
font-family: "Quercus", sans-serif; 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 { .itemlist {
max-width: 48%; max-width: 68%;
} }
.feedlist { .feedlist {
max-width: 48%; max-width: 32%;
} }
} }
@ -160,3 +172,8 @@ body {
img { img {
max-width: 99%; max-width: 99%;
} }
.content {
max-height: 50vh;
overflow: auto;
}