Fix some CSS issues with new data catalog view

Relates to #2071, #2065, #1720, #1520
NCEAS · Mar 17, 2023 · b36a55a · b36a55a
1 parent 4918749
commit b36a55a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css
@@ -547,15 +547,22 @@ text-shadow: none;
 /******************************************
 ** CatalogSearchView ***
 ******************************************/
-.catalog-search-view .catalog-search-inner{
+
+.catalog-search-view {
+	height: 100%;
+}
+.catalog-search-inner{
+	height: 100%;
 	display: grid;
 	justify-content: stretch;
 	align-items: stretch;
 	grid-template-columns: auto 1fr 1fr;
+	grid-template-rows: 100%;
 }
 .catalog-search-view .filter-groups-container {
 	width: 215px;
-	padding: var(--pad)
+	padding: var(--pad);
+	overflow: scroll;
 }	
 .catalog-search-view .search-results-container,
 .catalog-search-view .map-container {
@@ -569,17 +576,16 @@ text-shadow: none;
 	justify-content: stretch;
 	overflow: hidden;
 }
-.catalog-search-body.mapMode #Content{
-	padding: 40px 0px 0px 0px;
-}
-.catalog-search-body.mapMode .search-results-view .result-row:last-child{
-	margin-bottom: 100px;
+.catalog-search-body #Content{
+	padding: 0;
+
 }
-.catalog-search-body.mapMode .search-results-view {
+.search-results-container {
 	overflow-y: scroll;
-	height: 100vh;
-	padding-bottom: 200px; /* Leaving room for the last row to show */
-	padding-right: 15px; /* Padding for the scrollbar */
+	height: 100%;
+}
+.search-results-panel-container{
+	display: grid;
 }
 .catalog-search-body.mapMode .search-results-panel-container .map-toggle-container{
     display: none;

diff --git a/src/js/themes/dataone/css/metacatui.css b/src/js/themes/dataone/css/metacatui.css
@@ -97,6 +97,17 @@ article, aside, figure, footer, header, hgroup, menu, nav, section {
   margin-bottom: 0px;
 }
 
+/* Hide the footer in the new data catalog view when in map mode */
+.catalog-search-body.mapMode #Footer,
+.catalog-search-body.mapMode #map-mode-extra-padding.auto-height-member {
+  display: none;
+}
+
+/* when NOTE in map mode, add padding for the footer */
+.catalog-search-body:not(.mapMode) .search-results-panel-container {
+  margin-bottom: 15rem;
+}
+
 .container {
   width: 100%;
 }

diff --git a/src/js/themes/knb/css/metacatui.css b/src/js/themes/knb/css/metacatui.css
@@ -1,3 +1,11 @@
+/* KNB CSS vars
+-------------------------------------------------- */
+
+/* Footer height when it is fixed in place in the data catalog */
+:root {
+  --fixed-footer-height: 1.2em;
+}
+
 @font-face {
 	font-family: "Lato";
   	src: url('../../../../font/Lato-Light.ttf')  format('truetype'); /* Safari, Android, iOS */
@@ -39,6 +47,9 @@
     .mapMode > section > article{
     	padding-bottom: 0px;
     }
+    .catalog-search-body #Content {
+      height: calc(100% - var(--fixed-footer-height));
+    }
 
     a {
 		color: #006699;
@@ -328,12 +339,13 @@
       height: 250px; /* Keeps footer down */
     }
 
-    .mapMode #Footer{
+    .catalog-search-body #Footer{
     	position: fixed;
     	bottom: 0;
     	background-color: #3F3F3F;
     	color: #FFF;
-    	height: 1.2em;
+      min-height: var(--fixed-footer-height);
+    	height: var(--fixed-footer-height);
     	transition: min-height 1s ease-out;
     	-webkit-transition: min-height 1s ease-out;
     	transition-delay: .5s;