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

rework not-cdm headline rows to use flex-box

This commit is contained in:
Andrew Dolgov 2018-12-05 09:08:02 +03:00
parent 88c2da72d5
commit edd348b16c
7 changed files with 87 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
classes/feeds.php
View File

@ -528,7 +528,7 @@ class Feeds extends Handler_Protected {
$tmp_content .= "<span class='updated' title='$date_entered_fmt'>$updated_fmt</span>"; $tmp_content .= "<span class='updated' title='$date_entered_fmt'>$updated_fmt</span>";
$tmp_content .= "<div style=\"vertical-align : middle\">"; $tmp_content .= "<div class='right'>";
$tmp_content .= "$score_pic"; $tmp_content .= "$score_pic";
if (!get_pref("VFEED_GROUP_BY_FEED") && $line["feed_title"]) { if (!get_pref("VFEED_GROUP_BY_FEED") && $line["feed_title"]) {

3
css/cdm.less
View File

@ -29,8 +29,7 @@
} }
input { input {
margin-left : 4px; margin : 0px 4px;
margin-right : 4px;
} }
} }

96
css/default.css
View File

@ -21,26 +21,6 @@ body.ttrss_main {
border-top-width : 1px; border-top-width : 1px;
border-style : solid; border-style : solid;
} */ } */
/*
#headlines-frame .dijitCheckBoxHover,
#headlines-frame .dijitCheckBoxChecked {
opacity : 1;
}
#feedTree .dijitTreeRow img.dijitTreeExpandoLeaf {
width : 16px;
height : 16px;
vertical-align : middle;
position : relative;
}
.dijitDropDownButton.attachments .dijitButtonText {
font-size : 12px;
}
.dijitDropDownButton.attachments {
display : inline-block;
} */
} }
body.ttrss_main :focus { body.ttrss_main :focus {
outline: none; outline: none;
@ -202,80 +182,57 @@ body.ttrss_main .notify.notify_error {
body.ttrss_main .hl { body.ttrss_main .hl {
border: 0px solid #ddd; border: 0px solid #ddd;
border-bottom-width: 1px; border-bottom-width: 1px;
padding: 1px;
transition: color 0.2s, background 0.2s; transition: color 0.2s, background 0.2s;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
body.ttrss_main .hl > * {
align-self: center;
white-space: nowrap;
padding: 5px;
}
body.ttrss_main .hl img {
vertical-align: middle;
} }
body.ttrss_main .hl div.title { body.ttrss_main .hl div.title {
display: table-cell;
cursor: pointer; cursor: pointer;
width: 100%; flex-grow: 2;
vertical-align: middle;
overflow: hidden; overflow: hidden;
white-space: nowrap;
max-width: 500px;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 4px 6px; padding-left: 5px;
}
body.ttrss_main .hl div.left {
display: table-cell;
vertical-align: middle;
white-space: nowrap;
} }
body.ttrss_main .hl div.right { body.ttrss_main .hl div.right {
display: table-cell;
white-space: nowrap;
text-align: right;
vertical-align: middle;
}
body.ttrss_main .hl div.right img {
max-width: 16px;
max-height: 16px;
}
body.ttrss_main .hl span.feed {
display: table-cell;
vertical-align: middle;
text-align: right; text-align: right;
} }
body.ttrss_main .hl span.feed a { body.ttrss_main .hl span.feed a {
border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
padding: 1px 4px 1px 4px; padding: 1px 4px;
font-size: 11px; font-size: 11px;
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
color: #555555; color: #555555;
white-space: nowrap;
} }
body.ttrss_main .hl span.feed a:hover { body.ttrss_main .hl span.feed a:hover {
color: #257aa7; color: #257aa7;
} }
body.ttrss_main .hl span.updated { body.ttrss_main .hl span.updated {
color: #555555; color: #555555;
display: table-cell;
vertical-align: middle;
text-align: right; text-align: right;
font-size: 11px; font-size: 11px;
white-space: nowrap;
padding-left: 10px; padding-left: 10px;
} }
body.ttrss_main .hl span.updated div { body.ttrss_main .hl span.updated div {
display: inline-block; display: inline-block;
} }
body.ttrss_main .hl div.left {
padding-left: 8px;
}
body.ttrss_main .hl div.left input { body.ttrss_main .hl div.left input {
margin-left: 4px; margin: 0px 4px;
margin-right: 4px;
} }
body.ttrss_main .hl div.left img, body.ttrss_main .hl div.left img,
body.ttrss_main .hl div.right img { body.ttrss_main .hl div.right img {
margin: 0px 4px; margin: 0px 4px;
} }
body.ttrss_main .hl div.left img {
width: 16px;
height: 16px;
}
body.ttrss_main .hl div.title a { body.ttrss_main .hl div.title a {
font-weight: 600; font-weight: 600;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
@ -370,13 +327,6 @@ body.ttrss_main .alert {
border: 1px solid #fbeed5; border: 1px solid #fbeed5;
border-radius: 4px; border-radius: 4px;
} }
body.ttrss_main .alert,
body.ttrss_main .alert h4 {
color: #c09853;
}
body.ttrss_main .alert h4 {
margin: 0;
}
body.ttrss_main .alert .close { body.ttrss_main .alert .close {
position: relative; position: relative;
top: -2px; top: -2px;
@ -384,6 +334,13 @@ body.ttrss_main .alert .close {
line-height: 20px; line-height: 20px;
cursor: pointer; cursor: pointer;
} }
body.ttrss_main .alert,
body.ttrss_main .alert h4 {
color: #c09853;
}
body.ttrss_main .alert h4 {
margin: 0;
}
body.ttrss_main .alert-success { body.ttrss_main .alert-success {
color: #468847; color: #468847;
background-color: #dff0d8; background-color: #dff0d8;
@ -615,18 +572,12 @@ body.ttrss_main div.autocomplete ul li {
cursor: pointer; cursor: pointer;
} }
body.ttrss_main div#headlines-frame.wide .title { body.ttrss_main div#headlines-frame.wide .title {
max-width: none;
overflow: visible; overflow: visible;
white-space: normal; white-space: normal;
} }
body.ttrss_main div#headlines-frame.wide .hl .feed { body.ttrss_main div#headlines-frame.wide .hl .feed {
display: none; display: none;
} }
body.ttrss_main img.score-pic {
vertical-align: middle;
width: 16px;
height: 16px;
}
body.ttrss_main div.dlgSec { body.ttrss_main div.dlgSec {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@ -1064,8 +1015,7 @@ body.ttrss_main .dijitDialog h4:first-of-type {
white-space: nowrap; white-space: nowrap;
} }
.cdm .header input { .cdm .header input {
margin-left: 4px; margin: 0px 4px;
margin-right: 4px;
} }
.cdm .footer { .cdm .footer {
height: 30px; height: 30px;

2
css/default.css.map
View File

File diff suppressed because one or more lines are too long

122
css/tt-rss.less
View File

@ -204,54 +204,41 @@ body.ttrss_main {
.hl { .hl {
border: 0px solid #ddd; border: 0px solid #ddd;
border-bottom-width: 1px; border-bottom-width: 1px;
padding : 1px;
transition : color 0.2s, background 0.2s; transition : color 0.2s, background 0.2s;
display : flex;
flex-direction : row;
flex-wrap : nowrap;
div.title { > * {
display : table-cell; align-self : center;
cursor : pointer;
width : 100%;
vertical-align : middle;
overflow : hidden;
white-space : nowrap; white-space : nowrap;
max-width : 500px; padding : 5px;
text-overflow : ellipsis;
padding: 4px 6px;
} }
div.left { img {
display : table-cell;
vertical-align : middle; vertical-align : middle;
white-space: nowrap; }
div.title {
cursor : pointer;
flex-grow : 2;
overflow : hidden;
text-overflow : ellipsis;
padding-left : 5px;
} }
div.right { div.right {
display : table-cell;
white-space: nowrap;
text-align : right;
vertical-align : middle;
}
div.right img {
max-width : 16px;
max-height : 16px;
}
span.feed {
display : table-cell;
vertical-align : middle;
text-align : right; text-align : right;
} }
span.feed a { span.feed a {
border-radius : 4px; border-radius : 4px;
display : inline-block; display : inline-block;
padding : 1px 4px 1px 4px; padding : 1px 4px;
font-size : 11px; font-size : 11px;
font-style : italic; font-style : italic;
font-weight : normal; font-weight : normal;
color : @default-text; color : @default-text;
white-space : nowrap;
} }
span.feed a:hover { span.feed a:hover {
@ -260,11 +247,8 @@ body.ttrss_main {
span.updated { span.updated {
color : @default-text; color : @default-text;
display : table-cell;
vertical-align : middle;
text-align : right; text-align : right;
font-size : 11px; font-size : 11px;
white-space : nowrap;
padding-left : 10px; padding-left : 10px;
} }
@ -272,24 +256,14 @@ body.ttrss_main {
display : inline-block; display : inline-block;
} }
div.left {
padding-left : 8px;
}
div.left input { div.left input {
margin-left : 4px; margin : 0px 4px;
margin-right : 4px;
} }
div.left img, div.right img { div.left img, div.right img {
margin : 0px 4px; margin : 0px 4px;
} }
div.left img {
width : 16px;
height : 16px;
}
div.title a { div.title a {
font-weight : 600; font-weight : 600;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
@ -390,6 +364,14 @@ body.ttrss_main {
background-color: #fcf8e3; background-color: #fcf8e3;
border: 1px solid #fbeed5; border: 1px solid #fbeed5;
border-radius: 4px; border-radius: 4px;
.close {
position: relative;
top: -2px;
right: -21px;
line-height: 20px;
cursor : pointer;
}
} }
.alert, .alert,
@ -401,14 +383,6 @@ body.ttrss_main {
margin: 0; margin: 0;
} }
.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: 20px;
cursor : pointer;
}
.alert-success { .alert-success {
color: #468847; color: #468847;
background-color: #dff0d8; background-color: #dff0d8;
@ -435,10 +409,10 @@ body.ttrss_main {
color: #3a87ad; color: #3a87ad;
background-color: #d9edf7; background-color: #d9edf7;
border-color: #bce8f1; border-color: #bce8f1;
}
.alert-info h4 { h4 {
color: #3a87ad; color: #3a87ad;
}
} }
ul.nomarks { ul.nomarks {
@ -691,20 +665,19 @@ body.ttrss_main {
} }
div#headlines-frame.wide .title { div#headlines-frame.wide {
max-width : none; .title {
overflow : visible; overflow: visible;
white-space : normal; white-space: normal;
} }
div#headlines-frame.wide .hl .feed { .hl .feed {
display : none; display: none;
}
} }
img.score-pic { img.score-pic {
vertical-align : middle;
width : 16px;
height : 16px;
} }
div.dlgSec { div.dlgSec {
@ -1087,27 +1060,6 @@ body.ttrss_main {
margin-right : 4px; margin-right : 4px;
} }
/*
#headlines-frame .dijitCheckBoxHover,
#headlines-frame .dijitCheckBoxChecked {
opacity : 1;
}
#feedTree .dijitTreeRow img.dijitTreeExpandoLeaf {
width : 16px;
height : 16px;
vertical-align : middle;
position : relative;
}
.dijitDropDownButton.attachments .dijitButtonText {
font-size : 12px;
}
.dijitDropDownButton.attachments {
display : inline-block;
} */
#editTagsDlg{ #editTagsDlg{
overflow: visible; overflow: visible;
} }

96
themes/night.css
View File

@ -21,26 +21,6 @@ body.ttrss_main {
border-top-width : 1px; border-top-width : 1px;
border-style : solid; border-style : solid;
} */ } */
/*
#headlines-frame .dijitCheckBoxHover,
#headlines-frame .dijitCheckBoxChecked {
opacity : 1;
}
#feedTree .dijitTreeRow img.dijitTreeExpandoLeaf {
width : 16px;
height : 16px;
vertical-align : middle;
position : relative;
}
.dijitDropDownButton.attachments .dijitButtonText {
font-size : 12px;
}
.dijitDropDownButton.attachments {
display : inline-block;
} */
} }
body.ttrss_main :focus { body.ttrss_main :focus {
outline: none; outline: none;
@ -202,80 +182,57 @@ body.ttrss_main .notify.notify_error {
body.ttrss_main .hl { body.ttrss_main .hl {
border: 0px solid #ddd; border: 0px solid #ddd;
border-bottom-width: 1px; border-bottom-width: 1px;
padding: 1px;
transition: color 0.2s, background 0.2s; transition: color 0.2s, background 0.2s;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
body.ttrss_main .hl > * {
align-self: center;
white-space: nowrap;
padding: 5px;
}
body.ttrss_main .hl img {
vertical-align: middle;
} }
body.ttrss_main .hl div.title { body.ttrss_main .hl div.title {
display: table-cell;
cursor: pointer; cursor: pointer;
width: 100%; flex-grow: 2;
vertical-align: middle;
overflow: hidden; overflow: hidden;
white-space: nowrap;
max-width: 500px;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 4px 6px; padding-left: 5px;
}
body.ttrss_main .hl div.left {
display: table-cell;
vertical-align: middle;
white-space: nowrap;
} }
body.ttrss_main .hl div.right { body.ttrss_main .hl div.right {
display: table-cell;
white-space: nowrap;
text-align: right;
vertical-align: middle;
}
body.ttrss_main .hl div.right img {
max-width: 16px;
max-height: 16px;
}
body.ttrss_main .hl span.feed {
display: table-cell;
vertical-align: middle;
text-align: right; text-align: right;
} }
body.ttrss_main .hl span.feed a { body.ttrss_main .hl span.feed a {
border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
padding: 1px 4px 1px 4px; padding: 1px 4px;
font-size: 11px; font-size: 11px;
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
color: #555555; color: #555555;
white-space: nowrap;
} }
body.ttrss_main .hl span.feed a:hover { body.ttrss_main .hl span.feed a:hover {
color: #257aa7; color: #257aa7;
} }
body.ttrss_main .hl span.updated { body.ttrss_main .hl span.updated {
color: #555555; color: #555555;
display: table-cell;
vertical-align: middle;
text-align: right; text-align: right;
font-size: 11px; font-size: 11px;
white-space: nowrap;
padding-left: 10px; padding-left: 10px;
} }
body.ttrss_main .hl span.updated div { body.ttrss_main .hl span.updated div {
display: inline-block; display: inline-block;
} }
body.ttrss_main .hl div.left {
padding-left: 8px;
}
body.ttrss_main .hl div.left input { body.ttrss_main .hl div.left input {
margin-left: 4px; margin: 0px 4px;
margin-right: 4px;
} }
body.ttrss_main .hl div.left img, body.ttrss_main .hl div.left img,
body.ttrss_main .hl div.right img { body.ttrss_main .hl div.right img {
margin: 0px 4px; margin: 0px 4px;
} }
body.ttrss_main .hl div.left img {
width: 16px;
height: 16px;
}
body.ttrss_main .hl div.title a { body.ttrss_main .hl div.title a {
font-weight: 600; font-weight: 600;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
@ -370,13 +327,6 @@ body.ttrss_main .alert {
border: 1px solid #fbeed5; border: 1px solid #fbeed5;
border-radius: 4px; border-radius: 4px;
} }
body.ttrss_main .alert,
body.ttrss_main .alert h4 {
color: #c09853;
}
body.ttrss_main .alert h4 {
margin: 0;
}
body.ttrss_main .alert .close { body.ttrss_main .alert .close {
position: relative; position: relative;
top: -2px; top: -2px;
@ -384,6 +334,13 @@ body.ttrss_main .alert .close {
line-height: 20px; line-height: 20px;
cursor: pointer; cursor: pointer;
} }
body.ttrss_main .alert,
body.ttrss_main .alert h4 {
color: #c09853;
}
body.ttrss_main .alert h4 {
margin: 0;
}
body.ttrss_main .alert-success { body.ttrss_main .alert-success {
color: #468847; color: #468847;
background-color: #dff0d8; background-color: #dff0d8;
@ -615,18 +572,12 @@ body.ttrss_main div.autocomplete ul li {
cursor: pointer; cursor: pointer;
} }
body.ttrss_main div#headlines-frame.wide .title { body.ttrss_main div#headlines-frame.wide .title {
max-width: none;
overflow: visible; overflow: visible;
white-space: normal; white-space: normal;
} }
body.ttrss_main div#headlines-frame.wide .hl .feed { body.ttrss_main div#headlines-frame.wide .hl .feed {
display: none; display: none;
} }
body.ttrss_main img.score-pic {
vertical-align: middle;
width: 16px;
height: 16px;
}
body.ttrss_main div.dlgSec { body.ttrss_main div.dlgSec {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@ -1064,8 +1015,7 @@ body.ttrss_main .dijitDialog h4:first-of-type {
white-space: nowrap; white-space: nowrap;
} }
.cdm .header input { .cdm .header input {
margin-left: 4px; margin: 0px 4px;
margin-right: 4px;
} }
.cdm .footer { .cdm .footer {
height: 30px; height: 30px;

2
themes/night.css.map
View File

File diff suppressed because one or more lines are too long