MID-6271 some table fixes (column sizes), wip

Evolveum · Apr 19, 2022 · 4cae22f · 4cae22f
1 parent af08c3a
commit 4cae22f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/gui/admin-gui/src/frontend/scss/midpoint-theme-variables.scss b/gui/admin-gui/src/frontend/scss/midpoint-theme-variables.scss
@@ -5,6 +5,10 @@
  * and European Union Public License. See LICENSE file for details.
  */
 
+@import "../../../node_modules/admin-lte/node_modules/bootstrap/scss/functions.scss";
+@import "../../../node_modules/admin-lte/node_modules/bootstrap/scss/variables.scss";
+@import "../../../node_modules/admin-lte/node_modules/bootstrap/scss/mixins/breakpoints.scss";
+
 $text-label-color: #3c8dbc;
 $text-dimmed-color: #808080;
 $text-dark-dimmed-color: #595959;

diff --git a/gui/admin-gui/src/frontend/scss/midpoint-utils.scss b/gui/admin-gui/src/frontend/scss/midpoint-utils.scss
@@ -5,11 +5,23 @@
  * and European Union Public License. See LICENSE file for details.
  */
 
-//@mixin make-width-classes($steps: $grid-steps)
+@mixin make-grid-width($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
 
-// width utility classes
-@for $i from 1 through 20 {
-  .mp-w-#{$i} {
-    width: (100% / 20 * $i);
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .mp-w#{$infix}-#{$i} {
+            width: (100% / $columns * $i);
+          }
+        }
+      }
+    }
   }
 }
+
+@include make-grid-width();
+
diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/column/ColumnUtils.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/data/column/ColumnUtils.java
@@ -844,7 +844,7 @@ public void populateItem(Item<ICellPopulator<SelectableBean<CaseType>>> cellItem
 
             @Override
             public String getCssClass() {
-                return isDashboard ? "col-sm-2 col-lg-1" : super.getCssClass();
+                return isDashboard ? "mp-w-sm-2 mp-w-lg-1" : super.getCssClass();
             }
         };
         columns.add(column);
@@ -860,7 +860,7 @@ public void populateItem(Item<ICellPopulator<SelectableBean<CaseType>>> cellItem
 
                 @Override
                 public String getCssClass() {
-                    return isDashboard ? "col-sm-2 col-lg-1" : super.getCssClass();
+                    return isDashboard ? "mp-w-sm-2 mp-w-lg-1" : super.getCssClass();
                 }
             };
             columns.add(column);
@@ -892,15 +892,15 @@ protected Map<DisplayType, Integer> getIconDisplayType(IModel<SelectableBean<Cas
 
             @Override
             public String getCssClass() {
-                return "icon";
+                return "mp-w-lg-1";
             }
         };
         columns.add(column);
 
         column = new PropertyColumn<SelectableBean<CaseType>, String>(createStringResource("pageCases.table.state"), CaseType.F_STATE.getLocalPart(), "value.state") {
             @Override
             public String getCssClass() {
-                return "col-lg-1";
+                return "mp-w-lg-1";
             }
 
             @Override
@@ -935,7 +935,7 @@ public IModel<String> getDataModel(IModel<SelectableBean<CaseType>> rowModel) {
 
                 @Override
                 public String getCssClass() {
-                    return "col-lg-1";
+                    return "mp-w-lg-1";
                 }
 
             };