rework article header to use flexbox

1 files changed, 31 insertions, 36 deletions

diff --git a/css/tt-rss.less b/css/tt-rss.less
index e2abcb81a..aac173d13 100755
--- a/css/tt-rss.less
+++ b/css/tt-rss.less
@@ -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 {
-				text-align : right;
-				float : right;
+			.left, .right {
+				display : flex;
 			}
 
-			div {
-				padding-bottom : 3px;
+			.row {
+				display : flex;
+				margin-bottom : 4px;
+				flex-wrap : nowrap;
+
+				> * {
+					align-self : center;
+				}
 			}
 
-			span.author {
-				color : @default-text;
-				font-size : 11px;
-				font-weight : normal;
+			.comments {
+				flex-grow : 2;
 			}
-		}
 
-		div.title {
-			overflow : hidden;
-			font-size : 15px;
-			text-overflow: ellipsis;
-			white-space : nowrap;
-			font-weight : 600;
-			text-rendering: optimizelegibility;
-			font-family : @fonts-ui-bold;
-		}
+			.date {
+				text-align : right;
+				white-space : nowrap;
+				align-self : flex-start;
+			}
 
-		div.date {
-			padding-left : 10px;
+			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.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 {