1
0
mirror of https://git.tt-rss.org/git/tt-rss.git synced 2025-12-15 23:45:55 +00:00

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

View File

@@ -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;

View File

@@ -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

View File

@@ -11,6 +11,7 @@ body.ttrss_main {
div.post {
padding : 0px;
font-size : 13px;
div.header {
padding : 5px;
@@ -19,36 +20,45 @@ 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;
white-space : nowrap;
align-self : flex-start;
}
div {
padding-bottom : 3px;
img, i {
margin : 0px 4px;
vertical-align: middle;
}
span.author {
color : @default-text;
font-size : 11px;
font-weight : normal;
.title {
flex-grow : 2;
align-self : flex-start;
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 {
padding : 10px;
font-size : 16px;
@@ -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 {