Merge pull request mbari-org#256 from ksalamy/main

Adding several new CSS files for the SMDB UI so that they are separate from project.css. mbari-org#255

smdb/smdb/static/css/filters.css

@@ -0,0 +1,211 @@
+#filters {
+  margin-left: 0;
+  margin-right: 0;
+  position: absolute;
+  top: 85px;  
+  left:0;
+  height: 70px;
+  width: 100%;
+  z-index: 600; 
+}
+
+#filter-left {
+  flex-direction: row;
+  background-color: white;
+  float: left;
+  width: 450px;
+  height: 75px;
+  padding-top: 6px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+  padding-left: 25px;
+  white-space: nowrap;
+  border-style: hidden;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  left: 0;
+  margin-left: 0
+}
+
+#filter-center {
+  flex-direction: row;
+  left: 0;
+  right: 0;
+  width: 50%;
+  margin: 0px;
+  background-color: white;
+  align-content: top;
+  float: center;
+  width: auto;
+  height: auto;
+  overflow: hidden;
+  padding-top: 20px;
+  padding-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-style: hidden;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+#filter-right {
+  width: 450px;
+  height: 75px;
+  display: flex;
+  align-items: center;
+  padding-bottom: 10px;
+  border-style: hidden;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+#searchBarForm {
+  padding-top: 10px;
+  width: 100%;
+}
+
+#searchbar {
+  padding-right: 3%;
+  margin-left: 3em;
+  text-align: left;
+  position:relative;
+}
+
+#searchbtn {
+  width: calc(100%);
+  height: calc(1.5em + .75rem + 2px);
+  font-size: 14px !important;
+  align-items: center;
+  margin-top: 0em !important;
+  align-content: center;
+}
+
+#loadBtn {
+padding-left: 20px;
+padding-right: 20px;
+}
+
+form {
+    top: 140px;
+    position: absolute;
+    width: 90%;
+    margin-left: 0rem;
+    margin-right: 3rem;
+}
+
+div.form-group.col-md,
+div.col-md {
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+form.leaflet-control-layers-list {
+    top: 0px;
+    margin-right: 0px;
+    width: max-content;
+}
+
+form
+div.row {
+    width: 100%;
+    height: 55px;
+}
+
+#div_id_name {
+    align-content: center;
+}
+
+#submit_id_submit, .btn, .btn-primary {
+    border: 1.75px solid;
+    border-color: black;
+    font: inherit;
+    height: calc(1.5em + .75rem + 2px);
+    align-content: center;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-left: 0px;
+    padding-right: 0px;
+    font-size: small;
+    margin: 0em;
+}
+
+div.col-md {
+  min-width: max-content;
+}
+
+div#tableContainers4.table-container {
+  position: absolute;
+  top: 700px;
+  width: 95%;
+}
+
+#slider-row {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.col-2 {
+    flex-direction: row;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.col-6 {
+    flex-direction: row;
+}
+
+.col-8
+#slider-current {
+    flex-direction: row;
+    width: 80%
+}
+
+form#searchBarForm {
+    top: 0px;
+    position: relative;
+    flex-direction: row;
+}
+form#searchBarForm.d-flex {
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+h2#mission_h2 {
+    position: absolute;
+    top: 84px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 1.5em;
+    height: 50px;
+    width: 100%;
+    background-color: white;
+    margin-left: 0rem;
+    margin-bottom: 0rem;
+}
+h2#expedition_h2 {
+    position: absolute;
+    top: 84px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 1.5em;
+    height: 50px;
+    width: 100%;
+    background-color: white;
+    margin-left: 0rem;
+    margin-bottom: 0rem;
+}
+h2#compilation_h2 {
+    position: absolute;
+    top: 84px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 1.5em;
+    height: 50px;
+    width: 100%;
+    background-color: white;
+    margin-left: 0rem;
+    margin-bottom: 0rem;
+}

smdb/smdb/static/css/leaflet-measure.css

@@ -0,0 +1,21 @@
+path.leaflet-interactive {
+  /* rust */
+  stroke: rgb(139, 64, 0); 
+  /* orange */
+  /* stroke: rgb(218, 135, 29); */
+  /* standard green */
+  /*stroke: #ABE67E; */
+  stroke-opacity: 100;
+  stroke-width: 3.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+
+path.leaflet-interactive:hover {
+  /*stroke: lightgoldenrodyellow;*/
+  stroke: yellow;
+}
+
+/*     activeColor: '#ABE67E', // base color for map features while actively measuring
+    completedColor: '#C8F2BE', // base color for permenant features generated from completed measure */

smdb/smdb/static/css/map.css

@@ -10,15 +10,69 @@ body {
 }
 
 #map {
+  top: 160px;
+  position: relative;
   width: 100%;
   height: 85%;
-  padding-top: 10%;
+  /* padding-top: 10%; */
+  z-index: 500;
   /*margin-left: 250px; - Testing with new proSidebar*/
 }
 
+#mapNav {
+  padding: 0px;
+  margin: 0px;
+  height: 80px;
+  max-height: 80px;
+  min-height: 80px;
+}
+
+
+/* #map {
+} */
+#map-bounds {
+  padding: 0px;
+  max-width: 100%;
+  max-height: 100vh;
+  margin: 0px;
+  color: #00008b;
+}
+
+#mapControls {
+  height: 80px;
+  min-height: 80px;
+  padding: 0px;
+  margin: 0px;
+  border: 2px solid darkgray;
+}
+
+#mapControlRow {
+  width: 100%;
+  height: 40px;
+  padding: 0px;
+}
+
+#mapControlHeader {
+  height: 100%;
+  min-height: 100%;
+  margin: 0px;
+  padding-right: 0px;
+  padding-left: 0px;
+}
+
+
+#coordinates {
+  margin-top: 10px;
+}
+
 .slider {
   width: 100%;
-  padding-bottom: 10%;
+  /* padding-bottom: 10%; */
+}
+
+.slider,
+.leaflet-control {
+  margin: 0%;
 }
 
 #leaflet-slider {

smdb/smdb/static/css/map_compilation_filter.css

@@ -5,8 +5,7 @@
 html,
 #map_compilation_filter {
   width: 100%;
-  height: 85%;
-  margin-left: 3rem;
+  top: 200px;
 }
 th,
 td {

smdb/smdb/static/css/map_expedition_filter.css

@@ -3,9 +3,9 @@
     margin-right: 20px;
 } */
 html,
-#map_expedition_filter {
+div#map_expedition_filter {
   width: 100%;
-  height: 85%;
+  top: 200px;
 }
 th,
 td {

smdb/smdb/static/css/map_mission_filter.css

@@ -1,7 +1,7 @@
 html,
 #map_mission_filter {
   width: 100%;
-  height: 85%;
+  top: 200px;
 }
 th,
 td {