From 5ca220fe6a3e084b2ddd016d22d5f8adde574a6e Mon Sep 17 00:00:00 2001 From: rogup Date: Thu, 2 May 2024 16:25:24 +0100 Subject: [PATCH] Styling changes --- src/map-app/styles/style.css | 128 ++++++++++++++++++++--------------- 1 file changed, 75 insertions(+), 53 deletions(-) diff --git a/src/map-app/styles/style.css b/src/map-app/styles/style.css index 54b0402d..1ec5ebc9 100644 --- a/src/map-app/styles/style.css +++ b/src/map-app/styles/style.css @@ -127,10 +127,8 @@ body { } /* All */ -.sea-initiatives-list-sidebar.sea-field-all, -.sea-field-all .sea-initiatives-list-sidebar-content, -.sea-field-all:hover, -.sea-field-all.sea-field-active { +.sea-initiatives-list-sidebar, +.sea-initiatives-list-sidebar-content { background: var(--dark) !important; } @@ -163,8 +161,15 @@ body { color: #ccc; } -.sidebar-button-container{ - margin-top: 5px; +.apply-filters-button-container{ + margin-top: 28px; +} + +.apply-filters-button{ + border: solid; + border-width: 2px; + font-weight: 450; + font-size: 0.9rem; } /* Arts, Media, Culture & Leisure. */ @@ -376,7 +381,7 @@ body { transform: translateX(-100%); transition: transform 0.16s cubic-bezier(0.215, 0.61, 0.355, 1); font-family: var(--sea-font-family-sans-serif); - font-weight: 300; + font-weight: 250; color: var(--dark); background: white; } @@ -407,7 +412,7 @@ body { display: flex; flex-direction: column; padding: 0 0 1.4em; - font-weight: 400; + font-weight: 300; } .sea-initiatives-list-sidebar-content { height: 100%; @@ -433,10 +438,6 @@ body { transform: translateX(-100%); } -.sea-sidebar-open.sea-sidebar-list-initiatives .sea-initiatives-list-sidebar { - transform: translateX(var(--sidebar-width)); -} - .sea-initiatives-list-sidebar { right: 0; background-color: var(--dark); @@ -458,11 +459,12 @@ body { font-size: 1.4rem; } -.sea-sidebar h2.sea-field { - padding: 0.5rem 1rem 0.7rem; +.sea-sidebar p.filter-count { + padding: 0.5rem 1rem 0.7rem 1.25rem; margin: 0; - line-height: 1.3; font-size: 1.3rem; + font-weight: 500; + cursor: default; } .sea-sidebar h3 { @@ -471,9 +473,6 @@ body { } /* Map */ -.map-app-display-container { - z-index: 30; -} div.map-app-map-container { overflow: hidden; @@ -492,6 +491,10 @@ div.map-app-map-container { margin-top: 1em; } +.sea-sidebar-open.sea-sidebar-list-initiatives .map-app-sidebar-button { + transform: translateX(var(--sidebar-width)); +} + .map-app-sidebar-button button { padding: 0 0.45em; font-size: 2.4em; @@ -501,9 +504,12 @@ div.map-app-map-container { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } +.map-app-sidebar-button button:hover { + transform: translateX(0px); +} + .w3-btn:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); - transform: translateX(0px); } .map-app-sidebar-header { @@ -549,21 +555,21 @@ input[type="search"] { } .sea-directory-list, -.sea-initiative-list { +.sea-initiatives-list { list-style: none; font-size: 1.05em; padding: 0; margin: 0 0 1.6em; } -.sea-initiative-list { +.sea-initiatives-list { margin: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .sea-directory-list li, -.sea-initiative-list li { +.sea-initiatives-list li { margin: 0; padding: 0.4rem 1rem 0.4rem 1.25rem; user-select: none; @@ -574,10 +580,9 @@ input[type="search"] { color: white; background-color: var(--dark); cursor: pointer; - /* font-weight: 400; */ } -.sea-initiative-list li:hover, +.sea-initiatives-list li:hover, .sea-sidebar h2.sea-field:hover { color: var(--dark); background-color: white; @@ -589,11 +594,6 @@ input[type="search"] { background-color: white; } -.sea-search-initiative-active { - color: white; - background-color: var(--dark); -} - .ml-auto { margin-left: auto; } @@ -611,6 +611,15 @@ input[type="search"] { width: 100%; } +.map-app-search-filter-count p { + font-size: 1.2rem; + color: var(--dark); +} + +.map-app-search-filter-count .filter-count-value { + color: var(--maroon); +} + .sea-sidebar, .w3-modal { z-index: 40; @@ -707,7 +716,7 @@ input[type="search"] { .sea-initiative-popup p, .sea-initiative-sidebar-content p { - font-weight: 300; + font-weight: 250; font-size: 0.9rem; margin: 0.5rem 0; } @@ -723,28 +732,38 @@ input[type="search"] { margin-top: 0.7rem; } -@media (max-device-width: 1080px) { - .sea-initiatives-list-sidebar { +@media (min-width:1081px) { + .mobile-only { display:none!important } +} + +.sea-sidebar-open.sea-sidebar-list-initiatives .sea-initiatives-list-sidebar { + transform: translateX(var(--sidebar-width)); +} + +@media (max-width: 1080px) { + .sea-sidebar-open.sea-sidebar-list-initiatives { + /* on smaller screen, shift the main portion of the sidebar off the screen */ transform: translateX(-100%); z-index: 100; } - .sea-sidebar-list-initiatives .sea-initiatives-list-sidebar { - transform: translateX(0%); - } - - .sea-sidebar-open.sea-sidebar-list-initiatives .sea-initiatives-list-sidebar { - transform: translateX(0); + .sea-initiatives-list-sidebar { + transform: translateX(-100%); + z-index: 100; } } -@media (max-device-width: 800px) { +@media (max-width: 800px) { .sea-initiative-popup { display: none; } .sea-initiative-sidebar-open { - transform: translateX(0); + transform: translateX(0%); + } + + .sea-sidebar-open.sea-sidebar-list-initiatives .sea-initiative-sidebar-open { + transform: translateX(100%); } } @@ -830,21 +849,24 @@ input[type="search"] { text-align: center; } -.initiative-list-sidebar-btn-wrapper { - display: none; +.initiatives-list-sidebar-header { + display: flex; + justify-content: flex-start; + font-size: 1.4rem; + flex: 0 0 auto; + border-bottom: 1.5px solid var(--dark-gray); + margin-bottom: 0.7rem; } -@media (max-device-width: 1080px) { - .initiative-list-sidebar-btn-wrapper { - display: flex; - justify-content: flex-start; - font-size: 1.4em; - flex: 0 0 auto; - } +.clear-filters-button { + font-size: 1rem; + text-decoration: underline; + margin-right: 1.2rem; + cursor: pointer; +} - .sidebar-normal-size-close-btn { - display: none; - } +.clear-filters-button:active { + color: var(--gray); } #logo-holder { @@ -856,7 +878,7 @@ input[type="search"] { } /* Shrink the logo on small displays to avoit it overflowing */ -@media (max-device-width: 768px) { +@media (max-width: 768px) { #logo-holder { height: 2.5rem; }