Added updates to filters.css, expedition_detail.html, mission_detail.…

…html and forms.py to fix Issue mbari-org#261 - Content of detail views hidden behind page header mbari-org#261.
ksalamy · Oct 23, 2024 · 3a750c5 · 3a750c5
1 parent e1746bd
commit 3a750c5
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 16 deletions.
diff --git a/smdb/smdb/forms.py b/smdb/smdb/forms.py
@@ -1,5 +1,5 @@
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Layout, Submit, Row, Column, Reset
+from crispy_forms.layout import Layout, Submit, Div, Row, Column, Reset
 
 
 class MissionFilterFormHelper(FormHelper):
@@ -13,11 +13,12 @@ class MissionFilterFormHelper(FormHelper):
             Column("repeat_survey", css_class="form-group col-md mb-0"),
             Column("mgds_compilation", css_class="form-group col-md mb-0"),
             Column("expedition__name", css_class="form-group col-md mb-0"),
-            Column(Submit("submit", "Filter", css_class="col-md mb-0 btn-primary")),
+            Column(Submit("submit", "Filter", css_id="missionFilterSubmit", css_class="col-md mb-0 btn-primary")),
             Column(
                 Reset(
                     "clear",
                     "Clear",
+                    css_id="missionFilterCancel",
                     css_class="col-md mb-0 btn-secondary",
                     onclick="this.form.reset()",
                     type="button",
@@ -31,13 +32,14 @@ class ExpeditionFilterFormHelper(FormHelper):
     form_method = "GET"
     layout = Layout(
         Row(
-            Column("name", css_class="form-group col-md mb-0"),
-            Column(Submit("submit", "Filter", css_class="col-md mb-0 btn-primary")),
+            Column("name", css_id="expeditionFilterName", css_class="form-group col-md-3 mb-0"),
+            Column(Submit("submit", "Filter", css_id="expeditionFilterSubmit", css_class="col-sm-2 mb-0 btn-primary")),
             Column(
                 Reset(
                     "clear",
                     "Clear",
-                    css_class="col-md mb-0 btn-secondary",
+                    css_id="expeditionFilterCancel",
+                    css_class="col-sm-2 mb-0 btn-secondary",
                     onclick="this.form.reset()",
                     type="button",
                 )
@@ -50,13 +52,14 @@ class CompilationFilterFormHelper(FormHelper):
     form_method = "GET"
     layout = Layout(
         Row(
-            Column("name", css_class="form-group col-md mb-0"),
-            Column(Submit("submit", "Filter", css_class="col-md mb-0 btn-primary")),
+            Column("name", css_id="compilationFilterName", css_class="form-group col-md-3 mb-0"),
+            Column(Submit("submit", "Filter", css_id="compilationFilterSubmit", css_class="col-md-2 mb-0 btn-primary")),
             Column(
                 Reset(
                     "clear",
                     "Clear",
-                    css_class="col-md mb-0 btn-secondary",
+                    css_id="compilationFilterCancel",
+                    css_class="col-md-2 mb-0 btn-secondary",
                     onclick="this.form.reset()",
                     type="button",
                 )

diff --git a/smdb/smdb/static/css/filters.css b/smdb/smdb/static/css/filters.css
@@ -102,6 +102,14 @@ div.col-md {
     margin-top: 10px;
 }
 
+/* Buttons */
+div.form-group.col-md-2,
+div.col-md-2 {
+  width: 30%;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
 form.leaflet-control-layers-list {
     top: 0px;
     margin-right: 0px;
@@ -114,9 +122,9 @@ div.row {
     height: 55px;
 }
 
-#div_id_name {
+/* #div_id_name {
     align-content: center;
-}
+} */
 
 #submit_id_submit, .btn, .btn-primary {
     border: 1.75px solid;
@@ -142,6 +150,13 @@ div#tableContainers4.table-container {
   width: 95%;
 }
 
+div#div_id_name.mb-3 {
+  width: 100%;
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+
 #slider-row {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -163,6 +178,57 @@ div#tableContainers4.table-container {
     width: 80%
 }
 
+.mb-0 
+#missionFilterSubmit {
+  margin-bottom: 0.5rem !important;
+  margin-top: 0.5rem !important;
+}
+
+#mission_detail_row {
+  position: relative;
+  padding-top: 100px;
+  padding-bottom: 25px;
+}
+
+#mission_detail_notes_row, h3 {
+  position: relative;
+  padding-right: 25px;
+  top: 10px;
+}
+
+.mb-0 
+#expeditionFilterSubmit {
+  margin-bottom: 0.5rem !important;
+  margin-top: 0.5rem !important;
+}
+
+.col-md
+#expeditionFilterSubmit {
+  width: 30%
+}
+
+#expedition_detail_row {
+  width: 30%;
+}
+
+#expedition_detail_row {
+  position: relative;
+  padding-top: 100px;
+  padding-bottom: 25px;
+}
+
+.mb-0 
+#compilationFilterSubmit {
+  margin-bottom: 0.5rem !important;
+  margin-top: 0.5rem !important;
+}
+
+#compilation_detail_row {
+  position: relative;
+  padding-top: 100px;
+  padding-bottom: 25px;
+}
+
 form#searchBarForm {
     top: 0px;
     position: relative;

diff --git a/smdb/smdb/templates/smdb/expedition_detail.html b/smdb/smdb/templates/smdb/expedition_detail.html
@@ -14,8 +14,8 @@
 
 {% block content %}
   <tab>
-    <div class="row">
-      <div class="col">
+    <div class="row" id="expedition_detail_row">
+      <div class="col-md-3" id="expedition_detail_col">
         <h2>{{ expedition.name }}</h2>
           <h2>Missions:</h2>
         <div>

diff --git a/smdb/smdb/templates/smdb/mission_detail.html b/smdb/smdb/templates/smdb/mission_detail.html
@@ -15,8 +15,8 @@
 {% block content %}
 
 <!-- A Bootstrap two column presentation-->
-  <div class="row">
-    <div class="col">
+  <div class="row" id="mission_detail_row">
+    <div class="col" id="mission_detail_col">
       <h2>Mission {{ mission.name }}</h2>
       <a href="{{ thumbnail_fullrez_url }}"><img src="{{ thumbnail_url }}" /></a>
       <div>
@@ -66,8 +66,7 @@ <h2>Used in Compilations:</h2>
       </div>
     </div>
   </div>
-  <br><br>
-  <div class="row">
+  <div class="row" id="mission_detail_notes_row">
     <h3>Notes:</h3>
     <pre>{{ mission.notes_text }}</pre>
   </div>