YDA-5938: Metadata form header sticks to the top of the page

UtrechtUniversity · Oct 1, 2024 · 53e894b · 53e894b
1 parent 6ac3550
commit 53e894b
Show file tree

Hide file tree

Showing 8 changed files with 16,230 additions and 20 deletions.
diff --git a/research/metadata-form/src/index.js b/research/metadata-form/src/index.js
@@ -731,6 +731,11 @@ function loadForm() {
                     $('#metadata-form').removeClass('hide');
                 }
 
+                // If maintenance banner is visible, add padding to metadata form header
+                if ($('div[name="banner head"]').length) {
+                    $('#metadata-form .card-header').addClass('pt-4 pb-3')
+                }
+
                 // Specific required textarea handling
                 $('textarea').each(function() {
                     if ($(this).attr('required')) {

diff --git a/research/static/research/css/metadata/form.css b/research/static/research/css/metadata/form.css
@@ -22,3 +22,7 @@
 #metadata-form .d-flex, #metadata-form  .col {
     padding: 0 15px;
 }
+
+.metadata-card {
+    background-color: rgba(var(--bs-body-bg-rgb), 1);
+}
diff --git a/research/static/research/js/metadata-form.js b/research/static/research/js/metadata-form.js
diff --git a/research/templates/research/metadata-form.html b/research/templates/research/metadata-form.html
@@ -75,7 +75,7 @@ <h5 class="card-title float-start">
 <div id="metadata-form" class="row hide">
     <div class="col-md-12">
         <div class="card">
-            <div class="card-header">
+            <div class="card-header sticky-top metadata-card">
                 <h5 class="card-title float-start">
                     Metadata form - {{ path | trim }}
                 </h5>
@@ -97,7 +97,7 @@ <h5 class="card-title float-start">
                     <p>Loading metadata <i class="fa-solid fa-spinner fa-spin fa-fw"></i></p>
                 </div>
             </div>
-            <div class="card-footer">
+            <div class="card-footer metadata-card">
                 <h5 class="card-title float-start">
                     Metadata form - {{ path | trim }}
                 </h5>

diff --git a/vault/metadata-form/src/index.js b/vault/metadata-form/src/index.js
@@ -681,6 +681,11 @@ function loadForm() {
                 $('#metadata-form').removeClass('hide');
             }
 
+            // If maintenance banner is visible, add padding to metadata form header
+            if ($('div[name="banner head"]').length) {
+                $('#metadata-form .card-header').addClass('pt-4 pb-3')
+            }
+
             // Specific required textarea handling
             $('textarea').each(function() {
                 if ($(this).attr('required')) {

diff --git a/vault/static/vault/css/metadata/form.css b/vault/static/vault/css/metadata/form.css
@@ -22,3 +22,7 @@
 #metadata-form .d-flex, #metadata-form  .col {
     padding: 0 15px;
 }
+
+.metadata-card {
+    background-color: rgba(var(--bs-body-bg-rgb), 1);
+}
diff --git a/vault/static/vault/js/metadata-form.js b/vault/static/vault/js/metadata-form.js
diff --git a/vault/templates/vault/metadata-form.html b/vault/templates/vault/metadata-form.html
@@ -43,7 +43,7 @@ <h3 class="card-title float-start">
 <div id="metadata-form" class="row hide">
     <div class="col-md-12">
         <div class="card">
-            <div class="card-header">
+            <div class="card-header sticky-top metadata-card">
                 <h5 class="card-title float-start">
                     Metadata form - {{ path | trim }}
                 </h5>
@@ -60,7 +60,7 @@ <h5 class="card-title float-start">
                     <p>Loading metadata <i class="fa-solid fa-spinner fa-spin fa-fw"></i></p>
                 </div>
             </div>
-            <div class="card-footer">
+            <div class="card-footer metadata-card">
                 <h5 class="card-title float-start">
                     Metadata form - {{ path | trim }}
                 </h5>