further styling improvements

conestack · May 24, 2024 · acba061 · acba061
1 parent 31c9232
commit acba061
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 47 deletions.
diff --git a/scss/colors.scss b/scss/colors.scss
@@ -17,7 +17,7 @@ $color-mode-type: data;
     background-color: $dark;
   }
 
-  #navbar-content {
+  #navbar-content-wrapper {
     color: $light;
     background-color: $dark;
   }
@@ -44,7 +44,7 @@ $color-mode-type: data;
       background-color: $gray-100;
     }
 
-    #navbar-content {
+    #navbar-content-wrapper {
         color: $dark;
         background-color: $white;
     }

diff --git a/scss/styles.scss b/scss/styles.scss
@@ -32,7 +32,8 @@ body {
             white-space: nowrap;
 
             &.active {
-                box-shadow: 0px 2px 4px rgb(0 0 0 / 16%);
+                background-color: transparent;
+                font-weight: bold;
             }
 
             i.bi-chevron-right {
@@ -150,8 +151,11 @@ body {
 #header-main {
     height: 50px;
 
-    #navbar-content {
+    #navbar-content-wrapper {
+        min-width: 0;
         z-index: 3000;
+    }
+    #navbar-content {
         min-width: 0;
     }
     #colortoggle-switch {
@@ -160,19 +164,27 @@ body {
     }
     #mainmenu {
         > ul {
+            padding-left: 8px;
             white-space: nowrap;
         }
         .nav-item.active .nav-link {
             color: $primary;
         }
     }
-    #personaltools .dropdown-toggle.show {
-        background-color: $dropdown-border-color;
+    @include media-breakpoint-up(sm) {
+        #personaltools .dropdown-toggle {
+            &.show {
+                background-color: $dropdown-border-color;
+            }
+            &::after {
+                margin-right: 10px;
+                margin-left: 0;
+            }
+        }
     }
 
     @include media-breakpoint-down(lg) {
-        #navbar-content.show, #navbar-content.collapsing {
-            display: flex;
+        #navbar-content {
             flex-direction: column;
         }
         #mainmenu {
@@ -196,16 +208,17 @@ body {
             .dropdown-menu {
                 position: relative;
                 width: 200%;
+                transform: translateX(-50%);
             }
         }
     }
     @include media-breakpoint-up(lg) {
-        #navbar-content, #mainmenu {
-            height: 100%;
-        }
-        #navbar-content {
+        #navbar-content-wrapper {
             box-shadow:none!important;
         }
+        #navbar-content-wrapper, #navbar-content, #mainmenu {
+            height: 100%;
+        }
         #personaltools-dropdown {
             order:2;
         }
@@ -214,11 +227,17 @@ body {
         }
     }
     @include media-breakpoint-between(lg, xxl) {
-        #navbar-content {
+        #navbar-content-wrapper {
             margin-left: 200px;
         }
     }
 }
+#personaltools-dropdown {
+    .dropdown-item a {
+        text-decoration: none;
+        color: $form-text-color;
+    }
+}
 
 /* content */
 #content {
@@ -227,6 +246,29 @@ body {
 #main-area {
     width: 0!important; /* prevent 'jumping' between 1400 and 1440px */
 }
+#contextmenu {
+    li.nav-item.dropdown .nav-link.dropdown-toggle.show {
+        background-color: $dropdown-border-color;
+    }
+    a {
+        padding: 0 8px;
+        text-decoration: none;
+        color: $form-text-color;
+    }
+    .dropdown-item {
+        &:active {
+            background-color: var(--bs-dropdown-link-hover-bg);
+        }
+
+        a {
+            padding: 0;
+
+            &.selected {
+                color: $primary;
+            }
+        }
+    }
+}
 
 /* scrollbar */
 .scrollable-x, .scrollable-y {

diff --git a/src/cone/app/browser/actions.py b/src/cone/app/browser/actions.py
@@ -274,7 +274,6 @@ class ActionUp(LinkAction):
     event = 'contextchanged:#layout'
     text = _('action_one_level_up', default='One level up')
     path = 'href'
-    css_class = 'nav-link py-0'
 
     @property
     def display(self):
@@ -311,7 +310,6 @@ class ActionView(LinkAction):
     text = _('action_view', default='View')
     href = LinkAction.target
     path = 'href'
-    css_class = 'p-0'
 
     @property
     def action(self):
@@ -356,7 +354,6 @@ class ActionList(LinkAction):
     action = 'listing:#content:inner'
     path = 'href'
     text = _('action_listing', default='Listing')
-    css_class = 'p-0'
 
     @property
     def href(self):
@@ -409,7 +406,6 @@ class ActionAdd(TileAction):
     """Add dropdown action.
     """
     tile = 'add_dropdown'
-    css_class = 'nav-link p-0'
 
     @property
     def display(self):
@@ -424,7 +420,6 @@ class ActionEdit(LinkAction):
     action = 'edit:#content:inner'
     path = 'href'
     text = _('action_edit', default='Edit')
-    css_class = 'p-0'
 
     @property
     def href(self):
@@ -448,7 +443,6 @@ class ActionDelete(LinkAction):
     confirm = _('delete_item_confirm',
                 default='Do you really want to delete this Item?')
     text = _('action_delete', default='Delete')
-    css_class = 'p-0'
 
     @property
     def display(self):

diff --git a/src/cone/app/browser/static/cone/cone.app.css b/src/cone/app/browser/static/cone/cone.app.css
@@ -4,7 +4,7 @@
   color: #f8f9fa;
   background-color: #212529;
 }
-[data-bs-theme=dark] #navbar-content {
+[data-bs-theme=dark] #navbar-content-wrapper {
   color: #f8f9fa;
   background-color: #212529;
 }
@@ -25,7 +25,7 @@
   color: #212529;
   background-color: #f8f9fa;
 }
-[data-bs-theme=light] #navbar-content {
+[data-bs-theme=light] #navbar-content-wrapper {
   color: #212529;
   background-color: #fff;
 }
@@ -71,7 +71,8 @@ body {
   white-space: nowrap;
 }
 #sidebar_left #navtree .nav-link.active {
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
+  background-color: transparent;
+  font-weight: bold;
 }
 #sidebar_left #navtree .nav-link i.bi-chevron-right {
   vertical-align: text-bottom;
@@ -172,26 +173,35 @@ body {
 #header-main {
   height: 50px;
 }
-#header-main #navbar-content {
+#header-main #navbar-content-wrapper {
+  min-width: 0;
   z-index: 3000;
+}
+#header-main #navbar-content {
   min-width: 0;
 }
 #header-main #colortoggle-switch {
   width: 2rem;
   height: 1rem;
 }
 #header-main #mainmenu > ul {
+  padding-left: 8px;
   white-space: nowrap;
 }
 #header-main #mainmenu .nav-item.active .nav-link {
   color: #4e7bba;
 }
-#header-main #personaltools .dropdown-toggle.show {
-  background-color: var(--bs-border-color-translucent);
+@media (min-width: 576px) {
+  #header-main #personaltools .dropdown-toggle.show {
+    background-color: var(--bs-border-color-translucent);
+  }
+  #header-main #personaltools .dropdown-toggle::after {
+    margin-right: 10px;
+    margin-left: 0;
+  }
 }
 @media (max-width: 991.98px) {
-  #header-main #navbar-content.show, #header-main #navbar-content.collapsing {
-    display: flex;
+  #header-main #navbar-content {
     flex-direction: column;
   }
   #header-main #mainmenu {
@@ -215,15 +225,16 @@ body {
   #header-main #personaltools-dropdown .dropdown-menu {
     position: relative;
     width: 200%;
+    transform: translateX(-50%);
   }
 }
 @media (min-width: 992px) {
-  #header-main #navbar-content, #header-main #mainmenu {
-    height: 100%;
-  }
-  #header-main #navbar-content {
+  #header-main #navbar-content-wrapper {
     box-shadow: none !important;
   }
+  #header-main #navbar-content-wrapper, #header-main #navbar-content, #header-main #mainmenu {
+    height: 100%;
+  }
   #header-main #personaltools-dropdown {
     order: 2;
   }
@@ -232,11 +243,16 @@ body {
   }
 }
 @media (min-width: 992px) and (max-width: 1399.98px) {
-  #header-main #navbar-content {
+  #header-main #navbar-content-wrapper {
     margin-left: 200px;
   }
 }
 
+#personaltools-dropdown .dropdown-item a {
+  text-decoration: none;
+  color: var(--bs-secondary-color);
+}
+
 /* content */
 #content {
   height: calc(100% - 40px);
@@ -246,6 +262,24 @@ body {
   width: 0 !important; /* prevent 'jumping' between 1400 and 1440px */
 }
 
+#contextmenu li.nav-item.dropdown .nav-link.dropdown-toggle.show {
+  background-color: var(--bs-border-color-translucent);
+}
+#contextmenu a {
+  padding: 0 8px;
+  text-decoration: none;
+  color: var(--bs-secondary-color);
+}
+#contextmenu .dropdown-item:active {
+  background-color: var(--bs-dropdown-link-hover-bg);
+}
+#contextmenu .dropdown-item a {
+  padding: 0;
+}
+#contextmenu .dropdown-item a.selected {
+  color: #4e7bba;
+}
+
 /* scrollbar */
 .scrollable-x, .scrollable-y {
   position: relative;

diff --git a/src/cone/app/browser/static/cone/cone.app.min.css b/src/cone/app/browser/static/cone/cone.app.min.css
diff --git a/src/cone/app/browser/templates/contextmenu_dropdown.pt b/src/cone/app/browser/templates/contextmenu_dropdown.pt
@@ -1,8 +1,8 @@
 <tal:block xmlns:tal="http://xml.zope.org/namespaces/tal"
            omit-tag="True">
 
-  <li class="nav-item dropdown py-2">
-    <a class="nav-link dropdown-toggle py-0 px-3" href="#" role="button" data-bs-toggle="dropdown">
+  <li class="nav-item dropdown py-0">
+    <a class="nav-link dropdown-toggle py-2 px-3" href="#" role="button" data-bs-toggle="dropdown">
       <span tal:condition="context.icon"
             class="${context.icon}"></span>
       <span tal:content="context.title">Title</span>

diff --git a/src/cone/app/browser/templates/layout.pt b/src/cone/app/browser/templates/layout.pt
@@ -80,25 +80,25 @@
                 replace="structure tile('personaltools')" />
 
               <button class="navbar-toggler border-0 shadow-none h-100"
-                      data-bs-target="#navbar-content"
+                      data-bs-target="#navbar-content-wrapper"
                       data-bs-toggle="collapse"
                       type="button">
                 <span class="navbar-toggler-icon"></span>
               </button>
 
-              <div id="navbar-content"
+              <div id="navbar-content-wrapper"
                    class="collapse shadow navbar-collapse p-3 p-lg-0">
+                <div id="navbar-content" class="d-flex align-items-center">
+                  <tal:mainmenu
+                    condition="config.mainmenu"
+                    replace="structure tile('mainmenu')" />
 
-                <tal:mainmenu
-                  condition="config.mainmenu"
-                  replace="structure tile('mainmenu')" />
-
-                <tal:livesearch
-                  condition="config.livesearch"
-                  replace="structure tile('livesearch')" />
-
-                <tal:language replace="structure tile('language')" />
+                  <tal:livesearch
+                    condition="config.livesearch"
+                    replace="structure tile('livesearch')" />
 
+                  <tal:language replace="structure tile('language')" />
+                </div>
               </div>
             </div>