combined mode: use flex-box for header/footer layout

This commit is contained in:
Andrew Dolgov 2018-12-05 08:28:18 +03:00
parent a2e06410c2
commit 88c2da72d5
6 changed files with 47 additions and 100 deletions

View File

@ -468,7 +468,7 @@ class Feeds extends Handler_Protected {
id=\"RROW-$id\" data-content=\"$content_encoded\" data-article-id='$id' data-orig-feed-id='$feed_id' $mouseover_attrs>";
$tmp_content .= "<div class=\"header\">";
$tmp_content .= "<div style=\"vertical-align : middle\">";
$tmp_content .= "<div class=\"buttons\">";
$tmp_content .= "<input dojoType=\"dijit.form.CheckBox\"
type=\"checkbox\" onclick=\"Headlines.onRowChecked(this)\"
@ -597,7 +597,7 @@ class Feeds extends Handler_Protected {
$tags_str = Article::format_tags_string($tags, $id);
$tmp_content .= "<span class='left'>";
$tmp_content .= "<div class='left'>";
$tmp_content .= "<img src='images/tag.png' alt='Tags' title='Tags'>
<span id=\"ATSTR-$id\">$tags_str</span>
@ -625,8 +625,8 @@ class Feeds extends Handler_Protected {
if ($entry_comments) $tmp_content .= "&nbsp;($entry_comments)";
$tmp_content .= "</span>";
$tmp_content .= "<div>";
$tmp_content .= "</div>";
$tmp_content .= "<div class='right'>";
foreach (PluginHost::getInstance()->get_hooks(PluginHost::HOOK_ARTICLE_BUTTON) as $p) {
$tmp_content .= $p->hook_article_button($line);

View File

@ -1,30 +1,24 @@
.cdm {
//margin-right : 4px;
.header, .footer {
display : table;
}
.header img, .header input, .footer img {
vertical-align : middle;
}
.header > div, .footer > div {
white-space : nowrap;
}
.header > span, .footer > span.left {
width : 100%;
display : flex;
flex-direction : row;
flex-wrap : nowrap;
}
.header img, .footer img {
margin : 0px 4px;
vertical-align: middle;
}
.header {
> * {
display : table-cell;
align-self : center;
padding : 5px;
white-space : nowrap;
}
.titleWrap {
flex-grow : 2;
}
span.updated {
@ -32,21 +26,6 @@
font-weight : normal;
font-size : 11px;
white-space : nowrap;
vertical-align : middle;
}
input {
margin-right : 5px;
}
div.updPic {
width : 25px;
display : inline-block;
text-align : center;
}
div.updPic img {
vertical-align : middle;
}
input {
@ -63,8 +42,11 @@
clear : both;
> * {
display : table-cell;
vertical-align : middle;
align-self : center;
}
.left {
flex-grow : 2;
}
}
@ -360,7 +342,6 @@ div#floatingTitle.Unread a.title {
white-space : nowrap;
text-overflow : ellipsis;
overflow : hidden;
max-width : 500px;
}
.excerpt {

View File

@ -1040,46 +1040,28 @@ body.ttrss_main .dijitDialog h4:first-of-type {
}
.cdm .header,
.cdm .footer {
display: table;
}
.cdm .header img,
.cdm .header input,
.cdm .footer img {
vertical-align: middle;
}
.cdm .header > div,
.cdm .footer > div {
white-space: nowrap;
}
.cdm .header > span,
.cdm .footer > span.left {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.cdm .header img,
.cdm .footer img {
margin: 0px 4px;
vertical-align: middle;
}
.cdm .header > * {
display: table-cell;
align-self: center;
padding: 5px;
white-space: nowrap;
}
.cdm .header .titleWrap {
flex-grow: 2;
}
.cdm .header span.updated {
color: #555555;
font-weight: normal;
font-size: 11px;
white-space: nowrap;
vertical-align: middle;
}
.cdm .header input {
margin-right: 5px;
}
.cdm .header div.updPic {
width: 25px;
display: inline-block;
text-align: center;
}
.cdm .header div.updPic img {
vertical-align: middle;
}
.cdm .header input {
margin-left: 4px;
@ -1093,8 +1075,10 @@ body.ttrss_main .dijitDialog h4:first-of-type {
clear: both;
}
.cdm .footer > * {
display: table-cell;
vertical-align: middle;
align-self: center;
}
.cdm .footer .left {
flex-grow: 2;
}
.cdm .intermediate {
margin: 10px;
@ -1332,7 +1316,6 @@ div#floatingTitle.Unread a.title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 500px;
}
.cdm.expandable .excerpt {
white-space: nowrap;

File diff suppressed because one or more lines are too long

View File

@ -1040,46 +1040,28 @@ body.ttrss_main .dijitDialog h4:first-of-type {
}
.cdm .header,
.cdm .footer {
display: table;
}
.cdm .header img,
.cdm .header input,
.cdm .footer img {
vertical-align: middle;
}
.cdm .header > div,
.cdm .footer > div {
white-space: nowrap;
}
.cdm .header > span,
.cdm .footer > span.left {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.cdm .header img,
.cdm .footer img {
margin: 0px 4px;
vertical-align: middle;
}
.cdm .header > * {
display: table-cell;
align-self: center;
padding: 5px;
white-space: nowrap;
}
.cdm .header .titleWrap {
flex-grow: 2;
}
.cdm .header span.updated {
color: #555555;
font-weight: normal;
font-size: 11px;
white-space: nowrap;
vertical-align: middle;
}
.cdm .header input {
margin-right: 5px;
}
.cdm .header div.updPic {
width: 25px;
display: inline-block;
text-align: center;
}
.cdm .header div.updPic img {
vertical-align: middle;
}
.cdm .header input {
margin-left: 4px;
@ -1093,8 +1075,10 @@ body.ttrss_main .dijitDialog h4:first-of-type {
clear: both;
}
.cdm .footer > * {
display: table-cell;
vertical-align: middle;
align-self: center;
}
.cdm .footer .left {
flex-grow: 2;
}
.cdm .intermediate {
margin: 10px;
@ -1332,7 +1316,6 @@ div#floatingTitle.Unread a.title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 500px;
}
.cdm.expandable .excerpt {
white-space: nowrap;

File diff suppressed because one or more lines are too long