improving styles for details pages - navigation menu + details panel

Evolveum · Sep 27, 2021 · b79f98a · b79f98a
1 parent ba8dab0
commit b79f98a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/...ui/src/main/java/com/evolveum/midpoint/gui/impl/page/admin/AbstractPageObjectDetails.html b/...ui/src/main/java/com/evolveum/midpoint/gui/impl/page/admin/AbstractPageObjectDetails.html
@@ -21,19 +21,16 @@
                 </div>
 
                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-                    <div class="box box-solid">
-                        <div class="box-body">
-                            <div class="row">
-                                <div class="col-lg-3 col-md-2 col-sm-2 col-xs-2">
-                                    <div wicket:id="navigation"></div>
-                                </div>
-                                <div class="col-lg-9 col-md-10 col-sm-10 col-xs-10">
-                                    <div wicket:id="mainPanel"></div>
-                                </div>
-                            </div>
+                    <div class="details-panel">
+                        <div class="details-panel-navigation">
+                            <div wicket:id="navigation"></div>
+                        </div>
+                        <div class="details-panel-details-form">
+                            <div wicket:id="mainPanel"></div>
                         </div>
                     </div>
                 </div>
+
             </form>
 
         </div>

diff --git a/gui/admin-gui/src/main/resources/static/less/midpoint-theme.less b/gui/admin-gui/src/main/resources/static/less/midpoint-theme.less
@@ -2015,7 +2015,6 @@ th.composited-icon {
     z-index: 1;
     //top: 0;
     right: 0;
-    background-color: @sidebar-light-bg;
     overflow-x: hidden;
     padding-top: 16px;
 
@@ -2254,3 +2253,24 @@ fieldset.objectButtons {
   margin-left: 5px;
   font-weight: 400;
 }
+
+.details-panel {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  background-color: white;
+}
+
+.details-panel-navigation {
+  order: 1;
+  flex-grow: 1;
+  background-color: @sidebar-light-bg;
+
+}
+
+.details-panel-details-form {
+  order: 2;
+  flex-grow: 11;
+  padding-top: 5px;
+  padding-left: 20px;
+}