From 70fde2b83a05985697578e945d78b5fcf6b95d37 Mon Sep 17 00:00:00 2001 From: Robyn Thiessen-Bock Date: Wed, 19 Apr 2023 17:38:41 -0400 Subject: [PATCH] Improvements to catalog search styles [WIP] Issue #1720 --- src/css/catalog-search-view.css | 280 ++++++++++----------- src/css/metacatui-common.css | 4 +- src/js/templates/search/catalogSearch.html | 44 ++-- src/js/views/search/CatalogSearchView.js | 52 ++-- 4 files changed, 183 insertions(+), 197 deletions(-) diff --git a/src/css/catalog-search-view.css b/src/css/catalog-search-view.css index 76fa45363..95d8d6e69 100644 --- a/src/css/catalog-search-view.css +++ b/src/css/catalog-search-view.css @@ -1,198 +1,186 @@ -/****************************************** -** CatalogSearchView *** -******************************************/ - -/* -TODO: - - transfer over any other styles specific to this component - - make sure there are not conflicts with the old data catalog view - - see if there are any theme-specific overrides for this search view that we can eliminate. - - switch what we can to CSS variables - */ - -.catalog-search-view { - height: 100%; +/* ------ CSS VARS ------ */ +/* variables for the catalog search view ("cs") only */ +:root { + --cs-panel-shadow: 0px 0px 14px rgba(67, 68, 87, 0.35); + --cs-padding-top-bottom: 0.8rem; + --cs-padding-left-right: 1rem; + --cs-panel-padding: var(--cs-padding-top-bottom) var(--cs-padding-left-right); } -.catalog-search-inner { - height: 100%; +/* ------ CATALOG ELEMENTS ------ */ + +.catalog { display: grid; - justify-content: stretch; - align-items: stretch; - grid-template-columns: auto 1fr 1fr; + grid-template-columns: min-content 1fr 1fr; + grid-template-areas: + "filters results map"; grid-template-rows: 100%; + height: 100%; + overflow: hidden; } -.catalog-search-view .filter-groups-container { - width: 215px; - padding: var(--pad); - padding-bottom: 3rem; +.catalog__filters { + box-sizing: border-box; + grid-area: filters; overflow: scroll; + padding: var(--cs-panel-padding); + box-shadow: var(--cs-panel-shadow); } -.catalog-search-body.mapMode { - height: 100vh; - width: 100vw; - padding-bottom: 0px; +.catalog__results { + box-sizing: border-box; + grid-area: results; + overflow: scroll; + padding: var(--cs-panel-padding); + /* so that absolutely positioned map toggle is placed relative to this */ + position: relative; + /* position children */ display: grid; - align-items: stretch; - justify-content: stretch; - overflow: hidden; -} - -.catalog-search-body.mapMode .search-results-view .result-row:last-child { - margin-bottom: 100px; + width: 100%; + grid-template-columns: auto min-content; + grid-template-rows: min-content min-content 1fr; + grid-template-areas: + "summary summary" + "pager sorter" + "results results"; } - -.search-results-container { - overflow-y: scroll; - height: 100%; +.catalog__summary{ + grid-area: summary; } - -.search-results-panel-container { - display: grid; - grid-auto-columns: 1fr; - grid-template-columns: max-content 1fr; - grid-template-rows: min-content min-content min-content 1fr; - gap: 0px 0px; - grid-template-areas: - "map-toggle-container map-toggle-container" - "title-container title-container" - "pager-container sorter-container" - "search-results-container search-results-container"; +.catalog__pager{ + grid-area: pager; } - -.search-results-container { - grid-area: search-results-container; +.catalog_sorter{ + grid-area: sorter; } - -.pager-container { - grid-area: pager-container; +.catalog__results-list{ + grid-area: results; } -.sorter-container { - grid-area: sorter-container; - justify-self: end; - padding-right: var(--pad); -} -.title-container { - grid-area: title-container; +.catalog__map { + grid-area: map; + display: grid; + box-shadow: var(--cs-panel-shadow); + /* so that .catalog__map-filter-toggle is positioned relative to map */ + position: relative; } -.map-toggle-container { - grid-area: map-toggle-container; -} +/* MAP CONTROLS */ -.catalog-search-body.mapMode .search-results-panel-container .map-toggle-container { - display: none; +.catalog__map-toggle { + position: absolute; + right: var(--cs-padding-top-bottom); + top: var(--cs-padding-left-right); + /* remove button styles */ + border: none; + outline: none; + /* TODO: clean up styles and use vars */ + background-color: #19B36A; + color: white; + padding: 0.3rem 0.5rem; + cursor: pointer; + box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.15), 0 1px 14px -6px rgba(0, 0, 0, 0.28); + border-radius: 0.5rem; + letter-spacing: 0.02em; } -.catalog-search-body.listMode .catalog-search-inner { - grid-template-columns: auto 1fr 0; +.catalog__map-toggle:hover { + background-color: #1E9E5A; + color: white; + /* make a smaller darker box shadow than in the non-hover state */ + box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.3); } -.catalog-search-view .cesium-widget-view { - width: inherit; - margin-left: 0; +.catalog__map-filter-toggle{ + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 1rem; + display: flex; + z-index: 1; } -.search-results-view .result-row { - padding: var(--pad); +.map-filter-toggle__label { + color: white; } -.catalog-search-view .no-search-results { - padding: var(--pad); - text-align: center; +.catalog__map-filter-toggle input[type=checkbox]{ + margin: 0; + margin-right: 0.5rem; + transform: scale(1.2); + order: -1; + margin-right: 0.5rem; } +/* ------ PAGE LAYOUT ------ */ +/* organize the page elements that are outside of the catalog search view */ +/*body*/ +.catalog-search-view-body { + display: grid; + grid-template-columns: 100vw; + grid-template-rows: min-content 1fr; + grid-template-areas: + "nav-header" + "content"; + overflow: hidden; + height: 100vh; + padding: 0; + margin: 0; +} -.map-panel-container { +.catalog-search-view-body #Navbar { + grid-area: nav-header; position: relative; + z-index: 100; } -/* When map is hidden... */ -.listMode .map-panel-container { - position: unset; +.catalog-search-view-body #HeaderContainer, +.catalog-search-view-body #Navbar { + box-shadow: var(--cs-panel-shadow); } -.listMode .catalog-search-inner { - position: relative; +.catalog-search-view-body .navbar-inner { + margin: 0; } -.catalog-search-body.listMode .map-panel-container { - display: block; +.catalog-search-view-body #HeaderContainer { + grid-area: nav-header; } -.listMode .map-container { - display: none; +.catalog-search-view-body #Content { + grid-area: content; + padding: 0 !important; + margin: 0 !important; + height: 100%; } - - -/* map controls */ - -.map-controls { - position: absolute; - top: 1rem; - left: 1rem; - z-index: 1; - display: grid; - grid-template-columns: auto auto; - gap: 1rem; - align-items: center; -} -.listMode .map-controls { - right: 1.1rem; - left: auto; - top: 0.3rem; - gap: 0; +.catalog-search-view-body #Footer { + display: none; + position: relative; } -.show-hide-map-button { - background-color: #19B36A; - color: white; - padding: 0.3rem 0.5rem; - cursor: pointer; - box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.15), 0 1px 14px -6px rgba(0, 0, 0, 0.28); - border-radius: 0.5rem; - letter-spacing: 0.02em; -} +/* ------ LIST MODE ------ */ +/* catalog is styled as map mode by default. Modifications needed for list-mode +(map hidden) are below */ -.show-hide-map-button:hover { - background-color: #1E9E5A; - color: white; - /* make a smaller darker box shadow than in the non-hover state */ - box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -2px rgba(0, 0, 0, 0.3); +.catalog-search-view-body.catalog--list-mode { + overflow: scroll; + height: auto; } -/* Spatial Filter Toggle */ -.spatial-filter{ - display: grid; - grid-template-columns: auto auto; - background: var(--map-col-bkg, black); - color: var(--map-col-text, white); - border-radius: 0.5rem; - opacity: 0.8; - top: 0.5rem; - padding: 0.3rem 0.5rem; - box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.15), 0 1px 14px -6px rgba(0, 0, 0, 0.28); +.catalog--list-mode #Footer { + display: block; } -.listMode .spatial-filter { + +.catalog--list-mode .catalog__map { display: none; } -.spatial-filter-label{ - margin: 0; -} -/* rule is specific to overwrite bootstrap */ -input[type=checkbox].spatial-filter-checkbox{ - margin: 0; - margin-right: 0.5rem; - /* make it look nicer */ - transform: scale(1.2); - /* put it to the left of the label */ - order: -1; - margin-right: 0.5rem; -} \ No newline at end of file +.catalog--list-mode .catalog { + grid-template-columns: min-content auto; + grid-template-areas: + "filters results"; + overflow: scroll; +} diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css index f5dcdb110..1519b7d60 100644 --- a/src/css/metacatui-common.css +++ b/src/css/metacatui-common.css @@ -545,11 +545,11 @@ text-shadow: none; .data-tag-icon.crimson g{ fill: #800000; } - /****************************************** ** Results and Result Rows *** ******************************************/ .result-row{ + box-sizing: border-box; padding: 10px 20px; width: auto; border-top: 1px solid #EEE; @@ -6850,7 +6850,7 @@ body.mapMode{ .filter-groups.vertical .filters-header{ margin: 0px; border-bottom: 1px dashed #CCC; - margin-bottom: 1.5rem; + margin-bottom: 1.5rem; padding-bottom: 10px; } #portal-filters{ diff --git a/src/js/templates/search/catalogSearch.html b/src/js/templates/search/catalogSearch.html index ac061e3c4..ad287d7f0 100644 --- a/src/js/templates/search/catalogSearch.html +++ b/src/js/templates/search/catalogSearch.html @@ -1,27 +1,19 @@ -
-
-
-
-
-
-
+
+
+
+
+
+
+ +
+
+
+ +
-
-
- - Hide Map - - -
- - -
-
-
-
-
+ diff --git a/src/js/views/search/CatalogSearchView.js b/src/js/views/search/CatalogSearchView.js index 2aaf328e3..418762d97 100644 --- a/src/js/views/search/CatalogSearchView.js +++ b/src/js/views/search/CatalogSearchView.js @@ -54,7 +54,7 @@ define([ * @type {string} * @since 2.22.0 */ - className: "catalog-search-view", + className: "catalog", /** * The template to use for this view's element @@ -133,54 +133,54 @@ define([ sorterView: null, /** - * The CSS class to add to the body of the CatalogSearch. + * The CSS class to add to the body element when this view is rendered. * @type {string} * @since 2.22.0 - * @default "catalog-search-body" + * @default "catalog-search-view-body", */ - bodyClass: "catalog-search-body", + bodyClass: "catalog-search-view-body", /** * The jQuery selector for the FilterGroupsView container * @type {string} * @since 2.22.0 */ - filterGroupsContainer: ".filter-groups-container", + filterGroupsContainer: ".catalog__filters", /** * The query selector for the SearchResultsView container * @type {string} * @since 2.22.0 */ - searchResultsContainer: ".search-results-container", + searchResultsContainer: ".catalog__results-list", /** * The query selector for the CesiumWidgetView container * @type {string} * @since 2.22.0 */ - mapContainer: ".map-container", + mapContainer: ".catalog__map", /** * The query selector for the PagerView container * @type {string} * @since 2.22.0 */ - pagerContainer: ".pager-container", + pagerContainer: ".catalog__pager", /** * The query selector for the SorterView container * @type {string} * @since 2.22.0 */ - sorterContainer: ".sorter-container", + sorterContainer: ".catalog__sorter", /** * The query selector for the title container * @type {string} * @since 2.22.0 */ - titleContainer: ".title-container", + titleContainer: ".catalog__summary", /** * The query selector for button that is used to either show or hide the @@ -188,7 +188,12 @@ define([ * @type {string} * @since 2.22.0 */ - showHideMapButton: ".show-hide-map-button", + toggleMapButton: ".catalog__map-toggle", + + mapFilterToggle: ".catalog__map-filter-toggle", + + mapModeClass: "catalog--map-mode", + listModeClass: "catalog--list-mode", /** * The events this view will listen to and the associated function to @@ -197,10 +202,9 @@ define([ * @since 2.22.0 */ events: function () { - const e = { - "click .spatial-filter": "toggleMapFilter", - } - e[`click ${this.showHideMapButton}`] = "toggleMode"; + const e = {} + e[`click ${this.mapFilterToggle}`] = "toggleMapFilter"; + e[`click ${this.toggleMapButton}`] = "toggleMode"; return e; }, @@ -546,7 +550,7 @@ define([ renderMap: function () { try { // Add the map to the page and render it - this.$(this.mapContainer).empty().append(this.mapView.el); + this.$(this.mapContainer).append(this.mapView.el); this.mapView.render(); } catch (e) { console.error("Couldn't render map in search. ", e); @@ -625,17 +629,19 @@ define([ // the current mode newMode = newMode != "map" && newMode != "list" ? null : newMode; newMode = newMode || (this.mode == "map" ? "list" : "map"); + const mapClass = this.mapModeClass; + const listClass = this.listModeClass; if (newMode == "list") { this.mode = "list"; - classList.remove("mapMode"); - classList.add("listMode"); + classList.remove(mapClass); + classList.add(listClass); } else { this.mode = "map"; - classList.remove("listMode"); - classList.add("mapMode"); + classList.remove(listClass); + classList.add(mapClass); } - this.updateShowHideMapButton(); + this.updateToggleMapButton(); } catch (e) { console.error("Couldn't toggle search mode. ", e); } @@ -645,9 +651,9 @@ define([ * Change the content of the map toggle button to indicate whether * clicking it will show or hide the map. */ - updateShowHideMapButton: function () { + updateToggleMapButton: function () { try { - const mapToggle = this.el.querySelector(this.showHideMapButton); + const mapToggle = this.el.querySelector(this.toggleMapButton); if(!mapToggle) return; if (this.mode == "map") { mapToggle.innerHTML = 'Hide Map '