Cosmetics: Attempt to make news App minimally usable in NC 29

I am sure this can be done more professionally - but this is at least usable as opposed to the current useless situation of the app for current NextCloud version Signed-off-by: schucan <schucan@users.noreply.github.com>
nextcloud · Oct 3, 2024 · 33412c5 · 33412c5
1 parent 849ff5a
commit 33412c5
Showing 1 changed file with 99 additions and 14 deletions.
diff --git a/css/navigation.scss b/css/navigation.scss
@@ -34,6 +34,60 @@
     background-position: 14px center;
 }
 
+
+/* actual form content */
+#app-navigation .add-new-popup {
+    display: none;
+    padding: 10px;
+    width: 100%;
+    border-top: 1px solid var(--color-border-dark);
+    border-bottom: 1px solid var(--color-border-dark);
+}
+
+
+#app-navigation input.ng-invalid {
+    border: 1px solid var(--color-error);
+}
+
+#app-navigation .add-new-popup input,
+#app-navigation .add-new-popup select {
+    width: 100%;
+    height: 36px;
+    padding: 5px;
+    margin-right: 0;
+}
+
+#app-navigation .add-new-popup select,
+#app-navigation #new-feed [name="folderName"] {
+    width: calc(100% - 36px);
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    float: left;
+}
+
+#app-navigation .add-new-popup .add-new-folder-primary {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    width: 36px;
+    height: 36px;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+#app-navigation .add-new-popup .add-new-basicauth-toggle {
+    padding: 5px 0;
+}
+
+#app-navigation .add-new-popup .add-feed-basicauth {
+    width: 100%;
+    padding: 0 0 10px;
+}
+
+#app-navigation .add-new-popup .error {
+    padding: 0 0 10px 0;
+}
+
 /* navigation */
 #app-navigation ul.with-icon > li > a,
 #app-navigation ul.with-icon > li > ul > li > a {
@@ -64,6 +118,7 @@
     background-image: url('../img/twitter.svg') !important;
 }
 
+
 .col-4 {
     -ms-flex: 0 0 33.333333%;
     flex: 0 0 33.333333%;
@@ -79,7 +134,7 @@
     flex-wrap: wrap;
 }
 
-.icon-dropdown {
+.icon-dropdown{
     background-position: center !important;
     background-size: 24px;
     padding: 2em !important;
@@ -90,13 +145,14 @@
 .icon-full-text-enabled {
     background-image: url('../img/fulltext.svg');
     background-size: 50%;
-    opacity: 0.5;
+    opacity: .5;
 }
 
+
 .icon-full-text-disabled {
     background-image: url('../img/nonfulltext.svg');
     background-size: 50%;
-    opacity: 0.5;
+    opacity: .5;
 }
 
 #app-navigation .unread > a {
@@ -134,10 +190,10 @@
     white-space: nowrap;
 }
 
-// #app-navigation .error-message:hover .title
-// #app-navigation .error-message:hover .message {
+#app-navigation .error-message:hover .title
+#app-navigation .error-message:hover .message {
 
-// }
+}
 
 #app-navigation .error-message button {
     top: 0;
@@ -153,7 +209,7 @@
     background-image: url('../img/close.svg');
     background-repeat: no-repeat;
     background-position: right 5px top 5px;
-    opacity: 0.9;
+    opacity: .9;
 }
 
 #app-navigation .error-message button:hover {
@@ -169,7 +225,7 @@
 
 #app-navigation .animate-show.ng-hide-add-active,
 #app-navigation .animate-show.ng-hide-remove-active {
-    transition: 0.2s linear opacity;
+    transition: .2s linear opacity;
 }
 
 #app-navigation .animate-show {
@@ -188,8 +244,41 @@
     transform: rotate(180deg);
 }
 
-// #app-navigation .feed-normal-ordering {
-// }
+#app-navigation .feed-normal-ordering {
+}
+
+#app-navigation ul > li {
+	min-height: 4em;
+	position: relative;
+}
+
+#app-navigation ul > li .app-navigation-entry-utils {
+	top: 0;
+	position: absolute;
+	right: 0;
+}
+#app-navigation ul > li .app-navigation-entry-utils > ul {
+	display:flex;
+	flex-direction:row;
+	position: absolute;
+	right: 0;
+}
+.app-navigation-entry-utils > ul > li.app-navigation-entry-utils-counter {
+	padding: 9px;
+}
+#app-navigation li.feed > a {
+	background-repeat: no-repeat;
+	background-size: contain;
+}
+
+#app-navigation li.feed {
+	padding-left:44px;
+}
+
+#app-navigation [class*="icon-"]{
+	background-position:left;
+	background-position-x:13px;
+}
 
 #app-navigation .icon-pinned {
     background-image: url('../img/pinned.svg');
@@ -207,10 +296,6 @@
     background-image: url('../img/updatemodeunread.svg');
 }
 
-#app-navigation .icon-arrow {
-    background-image: url('../img/arrow.svg');
-}
-
 #app-navigation .updateerror a {
     background-color: var(--color-warning) !important;
 }