rework article header to use flexbox
This commit is contained in:
Andrew Dolgov
parent
3bf006abef
commit
26c074ed7e
|
|
@ -627,7 +627,8 @@ class Article extends Handler_Protected {
|
|||
|
||||
} else {
|
||||
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'] .= "<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"];
|
||||
|
||||
if ($entry_author) {
|
||||
$entry_author = __(" - ") . $entry_author;
|
||||
}
|
||||
$rv['content'] .= "<div class='header'>";
|
||||
$rv['content'] .= "<div class='row'>"; # row
|
||||
|
||||
//$entry_author = $line["author"] ? " - " . $line["author"] : "";
|
||||
$parsed_updated = make_local_datetime($line["updated"], true,
|
||||
$owner_uid, true);
|
||||
|
||||
if (!$zoom_mode)
|
||||
$rv['content'] .= "<div class=\"date\">$parsed_updated</div>";
|
||||
|
||||
if ($line["link"]) {
|
||||
$rv['content'] .= "<div class='title'><a target='_blank' rel='noopener noreferrer'
|
||||
title=\"".htmlspecialchars($line['title'])."\"
|
||||
href=\"" .
|
||||
htmlspecialchars($line["link"]) . "\">" .
|
||||
$line["title"] . "</a>" .
|
||||
"<span class='author'>$entry_author</span></div>";
|
||||
href=\"" .htmlspecialchars($line["link"]) . "\">" . $line["title"] . "</a></div>";
|
||||
} else {
|
||||
$rv['content'] .= "<div class='title'>" . $line["title"] . "$entry_author</div>";
|
||||
$rv['content'] .= "<div class='title'>" . $line["title"] . "</div>";
|
||||
}
|
||||
|
||||
if ($zoom_mode) {
|
||||
$feed_title = htmlspecialchars($line["feed_title"]);
|
||||
if (!$zoom_mode)
|
||||
$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_full = join(", ", $line["tags"]);
|
||||
|
||||
if (!$tags_str_full) $tags_str_full = __("no tags");
|
||||
|
||||
if (!$entry_comments) $entry_comments = " "; # placeholder
|
||||
|
||||
$rv['content'] .= "<div class='tags' style='float : right'>
|
||||
<img src='images/tag.png'
|
||||
class='tagsPic' alt='Tags' title='Tags'> ";
|
||||
$rv['content'] .= "<i class='material-icons'>label_outline</i><div>";
|
||||
|
||||
if (!$zoom_mode) {
|
||||
$rv['content'] .= "<span id=\"ATSTR-$id\">$tags_str</span>
|
||||
|
|
@ -734,22 +737,39 @@ class Article extends Handler_Protected {
|
|||
id=\"ATSTRTIP-$id\" connectId=\"ATSTR-$id\"
|
||||
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 {
|
||||
$tags_str = strip_tags($tags_str);
|
||||
$rv['content'] .= "<span id=\"ATSTR-$id\">$tags_str</span>";
|
||||
}
|
||||
|
||||
$rv['content'] .= "</div>";
|
||||
$rv['content'] .= "<div clear='both'>";
|
||||
|
||||
foreach (PluginHost::getInstance()->get_hooks(PluginHost::HOOK_ARTICLE_LEFT_BUTTON) as $p) {
|
||||
$rv['content'] .= $p->hook_article_left_button($line);
|
||||
/* buttons */
|
||||
|
||||
$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"]) {
|
||||
|
||||
|
|
@ -776,17 +796,7 @@ class Article extends Handler_Protected {
|
|||
}
|
||||
}
|
||||
|
||||
$rv['content'] .= "</div>";
|
||||
|
||||
$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']."\">";
|
||||
/* content body */
|
||||
|
||||
$rv['content'] .= $line["content"];
|
||||
|
||||
|
|
@ -797,9 +807,9 @@ class Article extends Handler_Protected {
|
|||
$line["hide_images"]);
|
||||
}
|
||||
|
||||
$rv['content'] .= "</div>";
|
||||
$rv['content'] .= "</div>"; # content
|
||||
|
||||
$rv['content'] .= "</div>";
|
||||
$rv['content'] .= "</div>"; # post
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -581,7 +581,7 @@ class Feeds extends Handler_Protected {
|
|||
|
||||
$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>
|
||||
<a title=\"".__('Edit tags for this article')."\"
|
||||
href=\"#\" onclick=\"Article.editTags($id)\">(+)</a>";
|
||||
|
|
|
|||
|
|
@ -148,11 +148,6 @@ div.cdm.active div.content {
|
|||
}
|
||||
|
||||
.cdm {
|
||||
div.content div.postEnclosures {
|
||||
margin-top: 1em;
|
||||
color: @default-text;
|
||||
}
|
||||
|
||||
div.feed-title {
|
||||
border: 0px solid @color-link;
|
||||
border-bottom-width: 1px;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ body.ttrss_main :focus {
|
|||
}
|
||||
body.ttrss_main div.post {
|
||||
padding: 0px;
|
||||
font-size: 13px;
|
||||
}
|
||||
body.ttrss_main div.post div.header {
|
||||
padding: 5px;
|
||||
|
|
@ -29,30 +30,39 @@ body.ttrss_main div.post div.header {
|
|||
border-bottom-width: 1px;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
text-rendering: optimizelegibility;
|
||||
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 {
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
|
|
@ -70,18 +80,6 @@ body.ttrss_main div.post div.content iframe {
|
|||
min-width: 50%;
|
||||
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 {
|
||||
background-color: #fff7d5;
|
||||
padding: 5px;
|
||||
|
|
@ -1148,10 +1146,6 @@ div.cdm.expanded.Unread div.content {
|
|||
div.cdm.active div.content {
|
||||
color: black;
|
||||
}
|
||||
.cdm div.content div.postEnclosures {
|
||||
margin-top: 1em;
|
||||
color: #555555;
|
||||
}
|
||||
.cdm div.feed-title {
|
||||
border: 0px solid #257aa7;
|
||||
border-bottom-width: 1px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -11,6 +11,7 @@ body.ttrss_main {
|
|||
|
||||
div.post {
|
||||
padding : 0px;
|
||||
font-size : 13px;
|
||||
|
||||
div.header {
|
||||
padding : 5px;
|
||||
|
|
@ -19,34 +20,43 @@ body.ttrss_main {
|
|||
border-bottom-width: 1px;
|
||||
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;
|
||||
float : right;
|
||||
}
|
||||
|
||||
div {
|
||||
padding-bottom : 3px;
|
||||
}
|
||||
|
||||
span.author {
|
||||
color : @default-text;
|
||||
font-size : 11px;
|
||||
font-weight : normal;
|
||||
}
|
||||
}
|
||||
|
||||
div.title {
|
||||
overflow : hidden;
|
||||
font-size : 15px;
|
||||
text-overflow: ellipsis;
|
||||
white-space : nowrap;
|
||||
align-self : flex-start;
|
||||
}
|
||||
|
||||
img, i {
|
||||
margin : 0px 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-grow : 2;
|
||||
align-self : flex-start;
|
||||
font-size : 15px;
|
||||
font-weight : 600;
|
||||
text-rendering: optimizelegibility;
|
||||
font-family : @fonts-ui-bold;
|
||||
}
|
||||
|
||||
div.date {
|
||||
padding-left : 10px;
|
||||
}
|
||||
|
||||
div.content {
|
||||
|
|
@ -69,21 +79,6 @@ body.ttrss_main {
|
|||
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue