Summary and Admin pages: improve styling

- more consistent spacing - better use of `display: flex` - Summary: pager at consistent location - Admin: fix double table border - Admin: use badge for selection count
orbeon · Nov 11, 2022 · 7233edb · 7233edb
1 parent c56b4c8
commit 7233edb
Show file tree

Hide file tree

Showing 4 changed files with 447 additions and 410 deletions.
diff --git a/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-home.less b/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-home.less
@@ -12,11 +12,32 @@
 
 @import (reference) "form-runner-common";
 
+@spacing: 10px; // same as .fr-border
+
 .orbeon {
 
+    .fr-admin-top {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: @spacing;
+        margin: 0 0 @spacing 0;
+    }
+
+    .xbl-fr-pager {
+        .pagination {
+            margin: 0;
+            &> ul {
+                display: block;
+            }
+        }
+    }
+
     .btn-toolbar {
         display: inline-block;
         vertical-align: middle;
+        margin: 0;
     }
 
     .fr-reindex-status {
@@ -95,6 +116,7 @@
     .fr-forms-table {
 
         clear: both;
+        border-collapse: collapse;
         // Make the table stand out from background, as done on the summary page
         background-color: white;
 
@@ -167,4 +189,9 @@
 
         img { float: left; margin: 5px 10px 0 10px }
     }
+
+    .fr-buttons {
+        margin-top: 7px;
+        margin-bottom: 0;
+    }
 }
diff --git a/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-summary.less b/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-summary.less
@@ -21,33 +21,37 @@
         width: auto;
     }
 
-    .fr-summary-search, .fr-summary-table-div, .fr-summary-search-count {
+    .fr-summary-search, .fr-summary-table-div {
         display: block;
-        margin: @spacing 0;   // use margin so we have margin collapsing
+        margin: 0 0 @spacing 0;
     }
 
     .fr-summary-search {
 
         .fr-summary-search-top {
             display: flex;
+            justify-content: space-between;
             flex-wrap: wrap;
             align-items: center;
+            gap: @spacing;
         }
 
-        .fr-summary-selection, .fr-summary-form-version, .fr-summary-search-free-input, .fr-summary-search-search-button, .fr-summary-search-show-button {
-            margin-right: 10px;
+        .fr-summary-selection,
+        .fr-summary-form-version,
+        .fr-summary-search-free-input,
+        .fr-summary-search-search-button,
+        .fr-summary-search-show-button {
         }
 
         .fr-summary-search-free-input {
             flex-grow: 1;
-
             input {
                 width: 100%;
             }
         }
 
         .fr-summary-search-show-button {
-            margin-right: 0;
+            //margin-right: 0;
         }
 
         .fr-search-options {
@@ -98,6 +102,7 @@
 
         overflow: auto;
         background: white;
+        border-collapse: collapse;
 
         .alert  {
             display: block;
@@ -185,12 +190,12 @@
     }
 
     .pagination {
-        margin-top: 0;
-        margin-bottom: 0;
-        float: left;
-
+        margin: 0;
+        &> ul {
+            display: block;
+        }
         .fr-paging-numbers > span {
-            min-width: 125px; // try to allow at least 3 times 3 digits so the size doesn't change too much when paging
+            min-width: 105px; // try to allow at least 3 times 3 digits so the size doesn't change too much when paging
             text-align: center;
         }
     }