Following #1410: navbar and spacing consistency

orbeon · Dec 17, 2022 · 573e353 · 573e353
1 parent 8202dd6
commit 573e353
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 21 deletions.
diff --git a/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-base.less b/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-base.less
@@ -38,29 +38,66 @@
         }
     }
 
+    .container, .container-fluid {
+        padding: 0 0.75em;
+        .row, .row-fluid {
+        }
+    }
+
     .navbar {
 
         &.navbar-fixed-top {
-            margin-top: 0;
+            margin: 0;
         }
 
-        .navbar-inner .container {
+        .navbar-inner {
+            padding-top: .5em;
+            padding-bottom: .5em;
+            min-height: 0;
+            .container {
 
-            display: flex;
+                display: flex;
+                align-items: center;
+                padding-left: .75em;
+                padding-right: .75em;
+                line-height: normal;
 
-            .fr-language-choice {
-                margin-left: auto; // So this and what follows aligned to the left
-            }
+                .fr-language-choice {
+                    margin-left: auto; // So this and what follows aligned to the left
+                }
 
-            .fr-status-icons {
-                display: block;
-                i { margin-left: 5px; }
-            }
+                .fr-status-icons {
+                    display: block;
+                    i { margin-left: 5px; }
+                }
+
+                .badge { margin-left: 5px; }
 
-            .badge { margin-left: 5px; }
+                .navbar-brand {
+                    margin-top: 0.3125em;
+                    margin-bottom: 0.3125em;
+                    margin-right: 15px;
+                    img {
+                        vertical-align: middle;
+                    }
+                }
+                h1 {
+                    //flex-grow: 1;
+                    margin-left: 0;
+                    line-height: normal;
+                }
 
-            img { margin-right: 15px; }
-            h1 { margin-left: 0; }
+                .nav {
+                    &> li {
+                        padding-top: 0.25em;
+                        padding-bottom: 0.25em;
+                        &> a {
+                            padding-top: 0.375em;
+                            padding-bottom: 0.375em;
+                        }
+                    }
+                }
+            }
         }
     }
 
@@ -279,8 +316,6 @@
 
     #fr-view {
 
-        margin-bottom: 10px;    // otherwise buttons at the bottom touch the viewport
-
         .fr-grid .fr-grid-body .fr-grid-td {
 
             // Custom control widths

diff --git a/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-bootstrap-override.less b/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-bootstrap-override.less
@@ -46,24 +46,38 @@ body.orbeon {
         border           : 1px solid #e3e3e3;
     }
 
-    .row-fluid [class*="span"] {
+    .row, .row-fluid [class*="span"] {
+        &:empty {
+            display: none;
+        }
         min-height: 1px; // Bootstrap has 30px, which is different from `.row` where it is 1px
     }
 
     .navbar-inverse {
+
+        &.navbar-fixed-top .container {
+            width: auto;
+        }
+
         .navbar-inner {
-            #gradient > .vertical(@gray, @grayDarker);
+
+            // No gradient to match Bootstrap 5
+            color: rgb(33, 37, 41); // temporary, copied from the default Bootstrap 5 theme
+            background-color: rgb(33, 37, 41); // temporary, copied from the default Bootstrap 5 theme
+            background-image: none;
+
             border: none;
             border-radius: 0;
+
             .container {
                 line-height: @navbarHeight;             // Get the content of the navbar to be vertically aligned
                 img, h1 { vertical-align: middle }      // See: http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Center-content-vertically-inside-a-box
                 img { max-height: @navbarHeight }       // So the navbar height isn't increased if users select a larger logo image
                 h1 {
                     margin: 0 0 0 15px;                 // Space between image and title
                     padding: 0;
-                    font-size: 16px;
-                    font-weight: normal;
+                    font-size: 1.75em;
+                    font-weight: @frNavBarFontWeight;
                     color: @frNavBarTextColor;
                     text-shadow: none;
                     text-decoration: none;

diff --git a/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-common.less b/form-runner/jvm/src/main/assets/apps/fr/style/form-runner-common.less
@@ -21,7 +21,8 @@
 @frBackground:  #F3F3F3;                                // Light gray background
 @frHeaderColor: #555;                                   // Light gray for headings
 @frBorderColor: #DDDDEE;
-@frNavBarTextColor: #bbb;                               // Gray for title and other text in the inverse navbar
+@frNavBarTextColor: rgba(255, 255, 255, .5);            // Match Bootstrap 5
+@frNavBarFontWeight: 500;
 @frSectionTitleLeftPadding: 20px;
 @frGridCellPadding: 4px;
 @frGridPlusMinusIconWidth: 14px;

diff --git a/form-runner/jvm/src/main/resources/apps/fr/components/view.xsl b/form-runner/jvm/src/main/resources/apps/fr/components/view.xsl
@@ -468,7 +468,7 @@
                 xxf:element="div"
                 model="fr-form-model"
                 ref=".[not(xxf:property(string-join(('oxf.fr.detail.hide-header', fr:app-name(), fr:form-name()), '.')))]"
-                class="navbar navbar-inverse">
+                class="navbar navbar-inverse navbar-fixed-top">
             <xh:div class="navbar-inner">
                 <xh:div class="container">
                     <xsl:variable name="default-objects" as="element()+">