valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rework article header to use flexbox

This commit is contained in:
Andrew Dolgov 2018-12-06 16:35:57 +03:00
parent 3bf006abef
commit 26c074ed7e
6 changed files with 122 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
classes/article.php
View File

@ -627,7 +627,8 @@ class Article extends Handler_Protected {
} else { } else {
if ($line["comments"] && $line["link"] != $line["comments"]) { if ($line["comments"] && $line["link"] != $line["comments"]) {
$entry_comments = "<a class=\"comments\" target='_blank' rel=\"noopener noreferrer\" href=\"".htmlspecialchars($line["comments"])."\">".__("comments")."</a>"; $entry_comments = "<a class=\"comments\" target='_blank' rel=\"noopener noreferrer\" href=\"".
htmlspecialchars($line["comments"])."\">".__("comments")."</a>";
} }
} }
@ -676,54 +677,56 @@ class Article extends Handler_Protected {
$rv['content'] .= "<meta property=\"og:image\" content=\"" . htmlspecialchars($og_image) . "\"/>"; $rv['content'] .= "<meta property=\"og:image\" content=\"" . htmlspecialchars($og_image) . "\"/>";
} }
$rv['content'] .= "<body class=\"claro ttrss_utility ttrss_zoom\">"; $rv['content'] .= "<body class='flat ttrss_utility ttrss_zoom'>";
} }
$rv['content'] .= "<div class=\"post\" id=\"POST-$id\">"; $rv['content'] .= "<div class='post post-$id'>";
$rv['content'] .= "<div class=\"header\">"; /* header */
$entry_author = $line["author"]; $rv['content'] .= "<div class='header'>";
$rv['content'] .= "<div class='row'>"; # row
if ($entry_author) {
$entry_author = __(" - ") . $entry_author;
}
//$entry_author = $line["author"] ? " - " . $line["author"] : "";
$parsed_updated = make_local_datetime($line["updated"], true, $parsed_updated = make_local_datetime($line["updated"], true,
$owner_uid, true); $owner_uid, true);
if (!$zoom_mode)
$rv['content'] .= "<div class=\"date\">$parsed_updated</div>";
if ($line["link"]) { if ($line["link"]) {
$rv['content'] .= "<div class='title'><a target='_blank' rel='noopener noreferrer' $rv['content'] .= "<div class='title'><a target='_blank' rel='noopener noreferrer'
title=\"".htmlspecialchars($line['title'])."\" title=\"".htmlspecialchars($line['title'])."\"
href=\"" . href=\"" .htmlspecialchars($line["link"]) . "\">" . $line["title"] . "</a></div>";
htmlspecialchars($line["link"]) . "\">" .
$line["title"] . "</a>" .
"<span class='author'>$entry_author</span></div>";
} else { } else {
$rv['content'] .= "<div class='title'>" . $line["title"] . "$entry_author</div>"; $rv['content'] .= "<div class='title'>" . $line["title"] . "</div>";
} }
if ($zoom_mode) { if (!$zoom_mode)
$feed_title = htmlspecialchars($line["feed_title"]); $rv['content'] .= "<div class='date'>$parsed_updated<br/></div>";
$rv['content'] .= "<div class=\"feed-title\">$feed_title</div>"; $rv['content'] .= "</div>"; # row
$rv['content'] .= "<div class=\"date\">$parsed_updated</div>"; $rv['content'] .= "<div class='row'>"; # row
/* left buttons */
$rv['content'] .= "<div class='buttons left'>";
foreach (PluginHost::getInstance()->get_hooks(PluginHost::HOOK_ARTICLE_LEFT_BUTTON) as $p) {
$rv['content'] .= $p->hook_article_left_button($line);
} }
$rv['content'] .= "</div>";
/* comments */
$rv['content'] .= "<div class='comments'>$entry_comments</div>";
$rv['content'] .= "<div class='author'>".$line['author']."</div>";
/* tags */
$tags_str = Article::format_tags_string($line["tags"], $id); $tags_str = Article::format_tags_string($line["tags"], $id);
$tags_str_full = join(", ", $line["tags"]); $tags_str_full = join(", ", $line["tags"]);
if (!$tags_str_full) $tags_str_full = __("no tags"); if (!$tags_str_full) $tags_str_full = __("no tags");
if (!$entry_comments) $entry_comments = "&nbsp;"; # placeholder $rv['content'] .= "<i class='material-icons'>label_outline</i><div>";
$rv['content'] .= "<div class='tags' style='float : right'>
<img src='images/tag.png'
class='tagsPic' alt='Tags' title='Tags'>&nbsp;";
if (!$zoom_mode) { if (!$zoom_mode) {
$rv['content'] .= "<span id=\"ATSTR-$id\">$tags_str</span> $rv['content'] .= "<span id=\"ATSTR-$id\">$tags_str</span>
@ -734,22 +737,39 @@ class Article extends Handler_Protected {
id=\"ATSTRTIP-$id\" connectId=\"ATSTR-$id\" id=\"ATSTRTIP-$id\" connectId=\"ATSTR-$id\"
position=\"below\">$tags_str_full</div>"; position=\"below\">$tags_str_full</div>";
foreach (PluginHost::getInstance()->get_hooks(PluginHost::HOOK_ARTICLE_BUTTON) as $p) {
$rv['content'] .= $p->hook_article_button($line);
}
} else { } else {
$tags_str = strip_tags($tags_str); $tags_str = strip_tags($tags_str);
$rv['content'] .= "<span id=\"ATSTR-$id\">$tags_str</span>"; $rv['content'] .= "<span id=\"ATSTR-$id\">$tags_str</span>";
} }
$rv['content'] .= "</div>"; $rv['content'] .= "</div>";
$rv['content'] .= "<div clear='both'>";
foreach (PluginHost::getInstance()->get_hooks(PluginHost::HOOK_ARTICLE_LEFT_BUTTON) as $p) { /* buttons */
$rv['content'] .= $p->hook_article_left_button($line);
$rv['content'] .= "<div class='buttons right'>";
foreach (PluginHost::getInstance()->get_hooks(PluginHost::HOOK_ARTICLE_BUTTON) as $p) {
$rv['content'] .= $p->hook_article_button($line);
} }
$rv['content'] .= "</div>";
$rv['content'] .= "$entry_comments</div>"; $rv['content'] .= "</div>"; # row
$rv['content'] .= "</div>"; # header
/* note */
$rv['content'] .= "<div id=\"POSTNOTE-$id\">";
if ($line['note']) {
$rv['content'] .= Article::format_article_note($id, $line['note'], !$zoom_mode);
}
$rv['content'] .= "</div>";
/* content */
$lang = $line['lang'] ? $line['lang'] : "en";
$rv['content'] .= "<div class=\"content\" lang=\"$lang\">";
/* originally from */
if ($line["orig_feed_id"]) { if ($line["orig_feed_id"]) {
@ -776,17 +796,7 @@ class Article extends Handler_Protected {
} }
} }
$rv['content'] .= "</div>"; /* content body */
$rv['content'] .= "<div id=\"POSTNOTE-$id\">";
if ($line['note']) {
$rv['content'] .= Article::format_article_note($id, $line['note'], !$zoom_mode);
}
$rv['content'] .= "</div>";
if (!$line['lang']) $line['lang'] = 'en';
$rv['content'] .= "<div class=\"content\" lang=\"".$line['lang']."\">";
$rv['content'] .= $line["content"]; $rv['content'] .= $line["content"];
@ -797,9 +807,9 @@ class Article extends Handler_Protected {
$line["hide_images"]); $line["hide_images"]);
} }
$rv['content'] .= "</div>"; $rv['content'] .= "</div>"; # content
$rv['content'] .= "</div>"; $rv['content'] .= "</div>"; # post
} }

8
classes/feeds.php
View File

@ -581,10 +581,10 @@ class Feeds extends Handler_Protected {
$tmp_content .= "<div class='left'>"; $tmp_content .= "<div class='left'>";
$tmp_content .= "<img src='images/tag.png' alt='Tags' title='Tags'> $tmp_content .= "<i class='material-icons'>label_outline</i>
<span id=\"ATSTR-$id\">$tags_str</span> <span id=\"ATSTR-$id\">$tags_str</span>
<a title=\"".__('Edit tags for this article')."\" <a title=\"".__('Edit tags for this article')."\"
href=\"#\" onclick=\"Article.editTags($id)\">(+)</a>"; href=\"#\" onclick=\"Article.editTags($id)\">(+)</a>";
$num_comments = (int) $line["num_comments"]; $num_comments = (int) $line["num_comments"];
$entry_comments = ""; $entry_comments = "";

5
css/cdm.less
View File

@ -148,11 +148,6 @@ div.cdm.active div.content {
} }
.cdm { .cdm {
div.content div.postEnclosures {
margin-top: 1em;
color: @default-text;
}
div.feed-title { div.feed-title {
border: 0px solid @color-link; border: 0px solid @color-link;
border-bottom-width: 1px; border-bottom-width: 1px;

62
css/default.css
View File

@ -21,6 +21,7 @@ body.ttrss_main :focus {
} }
body.ttrss_main div.post { body.ttrss_main div.post {
padding: 0px; padding: 0px;
font-size: 13px;
} }
body.ttrss_main div.post div.header { body.ttrss_main div.post div.header {
padding: 5px; padding: 5px;
@ -29,30 +30,39 @@ body.ttrss_main div.post div.header {
border-bottom-width: 1px; border-bottom-width: 1px;
background: #f0f0f0; background: #f0f0f0;
} }
body.ttrss_main div.post div.header div.date { body.ttrss_main div.post div.header .left,
body.ttrss_main div.post div.header .right {
display: flex;
}
body.ttrss_main div.post div.header .row {
display: flex;
margin-bottom: 4px;
flex-wrap: nowrap;
}
body.ttrss_main div.post div.header .row > * {
align-self: center;
}
body.ttrss_main div.post div.header .comments {
flex-grow: 2;
}
body.ttrss_main div.post div.header .date {
text-align: right; text-align: right;
float: right;
}
body.ttrss_main div.post div.header div {
padding-bottom: 3px;
}
body.ttrss_main div.post div.header span.author {
color: #555555;
font-size: 11px;
font-weight: normal;
}
body.ttrss_main div.post div.title {
overflow: hidden;
font-size: 15px;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
align-self: flex-start;
}
body.ttrss_main div.post div.header img,
body.ttrss_main div.post div.header i {
margin: 0px 4px;
vertical-align: middle;
}
body.ttrss_main div.post div.header .title {
flex-grow: 2;
align-self: flex-start;
font-size: 15px;
font-weight: 600; font-weight: 600;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
body.ttrss_main div.post div.date {
padding-left: 10px;
}
body.ttrss_main div.post div.content { body.ttrss_main div.post div.content {
padding: 10px; padding: 10px;
font-size: 16px; font-size: 16px;
@ -70,18 +80,6 @@ body.ttrss_main div.post div.content iframe {
min-width: 50%; min-width: 50%;
max-width: 98%; max-width: 98%;
} }
body.ttrss_main div.post div.postEnclosures {
color: #555555;
}
body.ttrss_main div.post img.tagsPic {
width: 16px;
height: 16px;
margin-left: 4px;
vertical-align: middle;
}
body.ttrss_main div.post span.author {
font-size: 12px;
}
body.ttrss_main div.articleNote { body.ttrss_main div.articleNote {
background-color: #fff7d5; background-color: #fff7d5;
padding: 5px; padding: 5px;
@ -1148,10 +1146,6 @@ div.cdm.expanded.Unread div.content {
div.cdm.active div.content { div.cdm.active div.content {
color: black; color: black;
} }
.cdm div.content div.postEnclosures {
margin-top: 1em;
color: #555555;
}
.cdm div.feed-title { .cdm div.feed-title {
border: 0px solid #257aa7; border: 0px solid #257aa7;
border-bottom-width: 1px; border-bottom-width: 1px;

2
css/default.css.map
View File

File diff suppressed because one or more lines are too long

69
css/tt-rss.less
View File

@ -11,6 +11,7 @@ body.ttrss_main {
div.post { div.post {
padding : 0px; padding : 0px;
font-size : 13px;
div.header { div.header {
padding : 5px; padding : 5px;
@ -19,36 +20,45 @@ body.ttrss_main {
border-bottom-width: 1px; border-bottom-width: 1px;
background: #f0f0f0; background: #f0f0f0;
div.date { .left, .right {
display : flex;
}
.row {
display : flex;
margin-bottom : 4px;
flex-wrap : nowrap;
> * {
align-self : center;
}
}
.comments {
flex-grow : 2;
}
.date {
text-align : right; text-align : right;
float : right; white-space : nowrap;
align-self : flex-start;
} }
div { img, i {
padding-bottom : 3px; margin : 0px 4px;
vertical-align: middle;
} }
span.author { .title {
color : @default-text; flex-grow : 2;
font-size : 11px; align-self : flex-start;
font-weight : normal; font-size : 15px;
font-weight : 600;
text-rendering: optimizelegibility;
font-family : @fonts-ui-bold;
} }
} }
div.title {
overflow : hidden;
font-size : 15px;
text-overflow: ellipsis;
white-space : nowrap;
font-weight : 600;
text-rendering: optimizelegibility;
font-family : @fonts-ui-bold;
}
div.date {
padding-left : 10px;
}
div.content { div.content {
padding : 10px; padding : 10px;
font-size : 16px; font-size : 16px;
@ -69,21 +79,6 @@ body.ttrss_main {
max-width : 98%; max-width : 98%;
} }
} }
div.postEnclosures {
color : @default-text;
}
img.tagsPic {
width : 16px;
height : 16px;
margin-left : 4px;
vertical-align : middle;
}
span.author {
font-size : 12px;
}
} }
div.articleNote { div.articleNote {