combined mode: use flex-box for header/footer layout
This commit is contained in:
parent
a2e06410c2
commit
88c2da72d5
|
@ -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 .= " ($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);
|
||||
|
|
49
css/cdm.less
49
css/cdm.less
|
@ -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 {
|
||||
|
|
|
@ -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
|
@ -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
Loading…
Reference in New Issue