MID-7963 small version of list group menu, improved css

Evolveum · Jun 10, 2022 · cf2b396 · cf2b396
1 parent 84cfcb6
commit cf2b396
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 18 deletions.
diff --git a/gui/admin-gui/src/frontend/scss/_list-group-menu.scss b/gui/admin-gui/src/frontend/scss/_list-group-menu.scss
@@ -5,6 +5,9 @@
  * and European Union Public License. See LICENSE file for details.
  */
 
+$list-group-item-padding-sm-y: 0.5rem;
+$list-group-item-padding-sm-x: 1rem;
+
 @mixin list-reset() {
   list-style: none;
   padding-left: 0;
@@ -33,7 +36,7 @@
   color: $list-group-color;
   background-color: $list-group-bg;
 
-  & > a {
+  & > a.item-link {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -76,6 +79,11 @@
       flex-grow: 1;
     }
   }
+
+  & > .form-control {
+    margin: 1rem;
+    width: auto;
+  }
 }
 
 .list-group-menu {
@@ -90,15 +98,15 @@
   &:first-child {
     @include border-top-radius(inherit);
 
-    & > a {
+    & > a.item-link {
       @include border-top-radius(inherit);
     }
   }
 
   &:last-child {
     @include border-bottom-radius(inherit);
 
-    & > a:last-child {
+    & > a.item-link:last-child {
       @include border-bottom-radius(inherit);
     }
   }
@@ -120,15 +128,36 @@
 .list-group-submenu-item {
   @include list-group-menu-item;
 
+  // 3rd level padding
   & .list-group-submenu > .list-group-submenu-item > a {
     padding-left: 3.25rem;
   }
 
-  & > a {
+  // 2nd level padding
+  & > a.item-link {
     padding-left: 2rem;
   }
 }
 
-@include dark-mode () {
+a.item-link > .form-control {
+  margin: 1rem;
+}
+
+.list-group-menu-sm {
+
+  & a.item-link {
+    padding: $list-group-item-padding-sm-y $list-group-item-padding-sm-x;
+  }
+
+  & .list-group-menu-item,
+  & .list-group-submenu-item {
+    & > .form-control {
+      margin: 0.5rem;
+      width: auto;
+    }
+  }
+}
+
+@include dark-mode() {
   // todo dark mode
 }
diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/self/PageRequestAccess.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/self/PageRequestAccess.html
@@ -13,81 +13,81 @@
 <wicket:extend>
 
     <div style="width:300px;">
-        <ul class="list-group-menu align-self-stretch align-self-md-start">
+        <ul class="list-group-menu list-group-menu-sm align-self-stretch align-self-md-start">
             <li class="list-group-menu-item">
-                <a href="#" class="active">
+                <a href="#" class="item-link active">
                     <i class="icon fa fa-fw fa-border-all"></i>
                     <span class="label">All roles</span>
                 </a>
             </li>
             <li class="list-group-menu-item">
-                <a href="#">
+                <a href="#" class="item-link">
                     <i class="icon fa fa-fw fa-users"></i>
                     <span class="label">Roles of team mate</span>
                     <span class="badge badge-primary badge-pill">14</span>
                 </a>
             </li>
             <li class="list-group-menu-item">
-                <a href="#">
+                <a href="#" class="item-link">
                     <i class="icon fa fa-fw fa-users"></i>
                     <span class="label">Roles of team mate</span>
                     <i class="fa fa-chevron-left"></i>
                 </a>
             </li>
             <li class="list-group-menu-item">
-                <a href="#" class="active">
+                <a href="#" class="item-link active">
                     <i class="icon fa fa-fw fa-users"></i>
                     <span class="label">Roles of team mate</span>
                     <i class="fa fa-chevron-down"></i>
                 </a>
-                <select class="form-control m-3 w-auto">
+                <select class="form-control">
                     <option>Option 1</option>
                 </select>
             </li>
             <li class="list-group-menu-item">
-                <a href="#" style="color: #495057;">
+                <a href="#" class="item-link">
                     <i class="icon fa fa-fw fa-puzzle-piece"></i>
                     <span class="label">Applications</span>
                     <i class="fa fa-chevron-left"></i>
                 </a>
             </li>
             <li class="list-group-menu-item">
-                <a href="#" class="active">
+                <a href="#" class="item-link active">
                     <i class="icon fa fa-fw fa-puzzle-piece"></i>
                     <span class="label">Applications</span>
                     <i class="fa fa-chevron-down"></i>
                 </a>
                 <ul class="list-group-submenu">
                     <li class="list-group-submenu-item">
-                        <a class="">
+                        <a href="#" class="item-link">
                             <i class="icon far fa-fw fa-circle"></i>
                             <span class="label">Microsoft</span>
                         </a>
                     </li>
                     <li class="list-group-submenu-item">
-                        <a class="">
+                        <a class="item-link">
                             <i class="icon far fa-fw fa-circle"></i>
                             <span class="label">Google</span>
                             <i class="fa fa-chevron-left"></i>
                         </a>
                     </li>
                     <li class="list-group-submenu-item">
-                        <a class="">
+                        <a class="item-link">
                             <i class="icon far fa-fw fa-circle"></i>
                             <span class="label">SAP</span>
                             <i class="fa fa-chevron-down"></i>
                         </a>
                         <ul class="list-group-submenu">
                             <li class="list-group-submenu-item">
-                                <a class="">
+                                <a class="item-link">
                                     <i class="icon far fa-fw fa-circle"></i>
                                     <span class="label">3rd level</span>
                                 </a>
                             </li>
                         </ul>
                     </li>
                     <li class="list-group-submenu-item">
-                        <a class="disabled">
+                        <a class="item-link disabled">
                             <i class="icon far fa-fw fa-circle"></i>
                             <span class="label">Unsorted</span>
                         </a>