Github Issue #72: Enhance Missions Detail View

mbari-org · May 10, 2024 · d61b3cf · d61b3cf
1 parent b6efdf1
commit d61b3cf
Show file tree

Hide file tree

Showing 12 changed files with 134 additions and 27 deletions.
diff --git a/smdb/smdb/static/css/map_compilation_filter.css b/smdb/smdb/static/css/map_compilation_filter.css
@@ -1,12 +1,20 @@
+/* body {
+    margin-left: 20px;
+    margin-right: 20px;
+} */
 html,
 #map_compilation_filter {
   width: 100%;
   height: 85%;
+  margin-left: 3rem;
 }
 th,
 td {
   padding: 0 15px;
 }
+.table {
+  margin: 0 10px 0 10px;
+}
 .label-mission-name {
   font-size: 1.3em;
   text-align: left;

diff --git a/smdb/smdb/static/css/map_expedition_filter.css b/smdb/smdb/static/css/map_expedition_filter.css
@@ -1,3 +1,7 @@
+/* body {
+    margin-left: 20px;
+    margin-right: 20px;
+} */
 html,
 #map_expedition_filter {
   width: 100%;
@@ -7,6 +11,10 @@ th,
 td {
   padding: 0 15px;
 }
+.tab div {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
 .label-mission-name {
   font-size: 1.3em;
   text-align: left;

diff --git a/smdb/smdb/static/css/map_mission_filter.css b/smdb/smdb/static/css/map_mission_filter.css
@@ -7,6 +7,10 @@ th,
 td {
   padding: 0 15px;
 }
+.tab div {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
 .label-mission-name {
   font-size: 1.3em;
   text-align: left;

diff --git a/smdb/smdb/static/css/project.css b/smdb/smdb/static/css/project.css
@@ -12,10 +12,57 @@
   color: #b94a48;
 }
 
+#separator.row {
+  margin-left: 0;
+}
+
+#number-missions {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+div.row {
+  margin-left: 2rem;
+  margin-right: 1rem;
+}
+div.row
+div.col {
+  text-align: center;
+}
+#comp_detail {
+  margin-left: 2rem;
+  margin-right: 1rem;
+  text-align: left;
+}
+
+div.table-container {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
 a {
   font-size: 16px !important;
 }
 
+h2 {
+    margin-left: 3rem;
+    margin-bottom: 1rem;
+}
+
+form {
+    margin-left: 3rem;
+    margin-right: 3rem;
+}
+form.d-flex {
+      margin-left: 1rem;
+    margin-right: 1rem;
+}
+p {
+    margin-left: 3rem;
+    margin-right: 3rem;
+    margin-bottom: 1rem;
+}
+
 #coordinates {
   margin-top: 10px;
 }
@@ -89,6 +136,11 @@ a {
   box-shadow: inset 0 0 0 2em var(--hover);
 }
 
+#filters {
+    margin-left: 0;
+    margin-right: 0;
+}
+
 #filter-left {
   background-color: white;
   float: left;
@@ -103,6 +155,7 @@ a {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   left: 0;
+  margin-left: 0
 }
 
 #filter-center {
@@ -135,6 +188,10 @@ a {
   margin: 5px;
 }
 
+div#navBar {
+  padding-top: 4px;
+}
+
 
 div#borderDiv {
   bottom: 0;
@@ -171,6 +228,7 @@ div.width_fixed {
   height: 1px;
   right: 0;
   left: 0;
+  margin-right: 0rem;
 }
 
 #searchbar {
@@ -203,8 +261,8 @@ div.width_fixed {
 #searchbtn {
   font-size: 14px !important;
   vertical-align: center;
-  margin-left: 5px;
-  margin-right: 20px;
+  margin-left: 0px;
+  margin-right: 0px;
 }
 
 #split {
@@ -352,6 +410,11 @@ div.width_fixed {
   color: black;
 }
 
+.leaflet-control-layers-selector,
+span {
+  color:black
+}
+
 .leaflet-control-layers-selector,
 span:hover {
   color: white;
@@ -561,11 +624,11 @@ span:hover {
   border: 3px solid black;
 } */
 
-.leaflet-bar a,
-.leaflet-bar {
+/* .leaflet-bar a,
+.leaflet-bar { */
   /* a:hover { */
   /* border: 2px solid black; */
-}
+/* } */
 
 .leaflet-control,
 .leaflet-popup-pane {
@@ -728,6 +791,26 @@ div>#bounds {
   vertical-align: middle;
 }
 
+#id_name:hover {
+  border-color: cornflowerblue;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px cornflowerblue;
+}
+
+#id_expedition__name:hover {
+  border-color: cornflowerblue;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px cornflowerblue;
+}
+
+#id_has_thumbnail:hover {
+  border-color: cornflowerblue;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px cornflowerblue;
+}
+
+#id_has_missions:hover {
+  border-color: cornflowerblue;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px cornflowerblue;
+}
+
 /* #map {
 } */
 #map-bounds {

diff --git a/smdb/smdb/templates/pages/about.html b/smdb/smdb/templates/pages/about.html
@@ -16,7 +16,7 @@ <h1 class="center">
         <br>
 
         Seafloor Mapping Database
-        </h1>
+        </h1><br><br><br>
 
     <h2>About the database
         </h2>
@@ -40,15 +40,14 @@ <h2>About the database
             If you have suggestions for the SMDB, please contact one of the developers.</p>
 
         <p><strong>
-        Developers 
-            </strong><p>
-            <p>
+        Developers:  
+            </strong><br>
                 <a href="https://www.mbari.org/mccann-mike/" target="_blank">Mike McCann</a>, 
                 <a href="https://www.mbari.org/salamy-karen-a/" target="_blank">Karen Salamy</a>, 
-                <a href="https://www.mbari.org/paduan-jennifer" target="_blank">Jennifer Paduan</a>, 
+                <a href="https://www.mbari.org/person/jennifer-b-paduan/" target="_blank">Jennifer Paduan</a>, 
                 <a href="https://www.mbari.org/caress-dave/" target="_blank">David Caress</a>
-          </p>
-          <p><a href="https://github.com/mbari-org/SeafloorMappingDB" target="_blank"> GitHub repository</a><br>
+        <br><br>
+        <a href="https://github.com/mbari-org/SeafloorMappingDB" target="_blank"> GitHub repository</a><br><br>
             <a href="https://github.com/mbari-org/SeafloorMappingDB/tree/main/smdb/docs/original" target="_blank">>> 
                 Schema and Use Cases on file at GitHub</a> (still evolving)</p>
 
@@ -170,7 +169,7 @@ <h2>About the database
     <p><a href="https://www.mbari.org/technology/seafloor-mapping/" target="_blank">Seafloor Mapping Lab</a> <br>
     <a href="https://www.mbari.org/technology/ocean-imaging/" target="_blank">Ocean Imaging Project</a> <br>
     <a href="https://www.mbari.org/science/seafloor-processes/geological-changes/" target="_blank">Geological Changes Group</a> <br>
-    <a href="https://www.mbari.org/science/seafloor-processes/volcanoes/" target="_blank">Submarine Volcanism Project</a> <br><br><br><br>
+    <a href="https://www.mbari.org/project/submarine-volcanism/" target="_blank">Submarine Volcanism Project</a> <br><br><br><br>
     </p>
 
 </div>

diff --git a/smdb/smdb/templates/pages/home.html b/smdb/smdb/templates/pages/home.html
@@ -112,7 +112,7 @@
 {% block content %}
 {#  Number of Missions and Load Log Output #}
 
-<div class="row">
+<div id="filters" class="row">
   <div class="col-3-sm column" id="filter-left">
     <font size="3px" border-style="solid" border-thickness="1px"><strong>
         Viewing <span id="num-missions">{{ num_missions }}</span> Missions</strong></font>

diff --git a/smdb/smdb/templates/smdb/compilation_detail.html b/smdb/smdb/templates/smdb/compilation_detail.html
@@ -28,12 +28,12 @@ <h2>Missions making up this Compilation:</h2>
       </div>
     </div>
   </div>
-
-<div>
-  <span class=" font-weight-bold">View full resolution image:</span>
+<br>
+<div id="comp_detail">
+  <span class="font-weight-bold">View full resolution image:</span>
   <a href="{{ thumbnail_fullrez_url }}">{{ thumbnail_fullrez_url }}</a>
 </div>
-<div>
+<div id="comp_detail">
   <span class="font-weight-bold">Thumbnail filename:</span>
   {{ compilation.thumbnail_filename }}
   <br>

diff --git a/smdb/smdb/templates/smdb/compilation_filter.html b/smdb/smdb/templates/smdb/compilation_filter.html
@@ -32,10 +32,10 @@ <h2>Compilations</h2>
     <form method="get">
         {{ filter.form.as_table }}
         <input type="submit"></>
-    </form>
+    </form><br>
     {% endif %}
     {{ missions|json_script:"missions-data" }}
-    <div id="map_compilation_filter" style="height: 500px;"></div>
+    <div id="map_compilation_filter" style="height: 500px"></div>
     <script src="{% static 'js/map_compilation_filter.js' %}"></script>
     {% if table %}
         {% render_table table "smdb_tables2_bootstrap4.html" %}

diff --git a/smdb/smdb/templates/smdb/expedition_detail.html b/smdb/smdb/templates/smdb/expedition_detail.html
@@ -14,10 +14,14 @@
 
 {% block content %}
   <tab>
-    <h2>{{ expedition.name }}</h2>
-    <h2>Missions:</h2>
-    <div>
-      {% render_table table %}
-    </div>>
+    <div class="row">
+      <div class="col">
+        <h2>{{ expedition.name }}</h2>
+          <h2>Missions:</h2>
+        <div>
+        {% render_table table %}
+        </div>
+      </div>
+    </div>
   </tab>
 {% endblock %}
diff --git a/smdb/smdb/templates/smdb/expedition_filter.html b/smdb/smdb/templates/smdb/expedition_filter.html
@@ -32,7 +32,7 @@ <h2>Expeditions</h2>
     <form method="get">
         {{ filter.form.as_table }}
         <input type="submit" />
-    </form>
+    </form><br>
     {% endif %}
     {{ missions|json_script:"missions-data" }}
     <div id="map_expedition_filter" style="height: 500px;"></div>

diff --git a/smdb/smdb/templates/smdb/mission_detail.html b/smdb/smdb/templates/smdb/mission_detail.html
@@ -44,6 +44,7 @@ <h2>Used in Compilations:</h2>
       </div>
     </div>
   </div>
+  <br><br>
   <div class="row">
     <h3>Notes:</h3>
     <pre>{{ mission.notes_text }}</pre>

diff --git a/smdb/smdb/templates/smdb/mission_filter.html b/smdb/smdb/templates/smdb/mission_filter.html
@@ -32,7 +32,7 @@ <h2>Missions</h2>
     <form method="get">
         {{ filter.form.as_table }}
         <input type="submit" />
-    </form>
+    </form><br>
     {% endif %}
     {{ missions|json_script:"missions-data" }}
     <div id="map_mission_filter" style="height: 500px;"></div>