Revert "Revert "another attempt at flex-based feed tree""

This reverts commit 43744412f46d04cf2920264b4f9cc09b43d79924.

1 files changed, 29 insertions, 9 deletions

diff --git a/themes/compact_night.css b/themes/compact_night.css
index 64e19c99c..5510f9498 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -526,11 +526,10 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNod
   display: inline;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
-  left: 2px;
+  left: -2px;
   height: 14px;
   width: 14px;
   position: relative;
-  top: -1px;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode {
   height: 11px;
@@ -538,6 +537,7 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loa
   margin-left: 4px;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
+  order: 2;
   font-weight: bold;
   display: none;
   font-size: 9px;
@@ -569,8 +569,17 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow[data-feed-i
   background-color: #3ea447;
   border-color: #307f37;
 }
+body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeContent {
+  display: flex;
+  align-items: center;
+  flex-grow: 2;
+  min-width: 0;
+}
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel {
   cursor: pointer;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .dijitTreeLabel.Unread {
   font-weight: bold;
@@ -1722,12 +1731,16 @@ body.ttrss_utility fieldset > label.checkbox {
   display: inline;
   font-weight: normal;
 }
+.flat {
+  /*#feedTree {
+		.dijitTreeContent .dijitInline {
+			vertical-align : baseline;
+		}
+	}*/
+}
 .flat li {
   padding: 2px;
 }
-.flat #feedTree .dijitTreeContent .dijitInline {
-  vertical-align: baseline;
-}
 .flat .dijitButton i.material-icons {
   position: relative;
   top: -1px;
@@ -1799,6 +1812,17 @@ body.ttrss_utility fieldset > label.checkbox {
 .flat .dijitAccordionInnerContainer:not(.dijitSelected) i.material-icons {
   color: #b87d2c;
 }
+.flat .dijitTree {
+  /*.dijitTreeRow .dijitTreeExpando {
+			position : relative;
+			top : -2px;
+		}*/
+}
+.flat .dijitTree .dijitTreeRowFlex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 .flat .dijitTree .dijitFolderClosed,
 .flat .dijitTree .dijitFolderOpened {
   display: none;
@@ -1812,10 +1836,6 @@ body.ttrss_utility fieldset > label.checkbox {
 .flat .dijitTree .dijitTreeNode .dijitTreeRow.dijitTreeRowSelected {
   color: white;
 }
-.flat .dijitTree .dijitTreeRow .dijitTreeExpando {
-  position: relative;
-  top: -2px;
-}
 .flat .dijitTree .labelParam {
   float: right;
   margin-right: 16px;