Browse Source

rework not-cdm headline rows to use flex-box

Andrew Dolgov 3 months ago
parent
commit
edd348b16c
7 changed files with 86 additions and 235 deletions
  1. 1 1
      classes/feeds.php
  2. 1 2
      css/cdm.less
  3. 23 73
      css/default.css
  4. 1 1
      css/default.css.map
  5. 36 84
      css/tt-rss.less
  6. 23 73
      themes/night.css
  7. 1 1
      themes/night.css.map

+ 1 - 1
classes/feeds.php

@@ -528,7 +528,7 @@ class Feeds extends Handler_Protected {
 
 					$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";
 
 					if (!get_pref("VFEED_GROUP_BY_FEED") && $line["feed_title"]) {

+ 1 - 2
css/cdm.less

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

+ 23 - 73
css/default.css

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

File diff suppressed because it is too large
+ 1 - 1
css/default.css.map


+ 36 - 84
css/tt-rss.less

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

+ 23 - 73
themes/night.css

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

File diff suppressed because it is too large
+ 1 - 1
themes/night.css.map