Styling changes

DigitalCommons · May 2, 2024 · 5ca220f · 5ca220f
1 parent a96781c
commit 5ca220f
Showing 1 changed file with 75 additions and 53 deletions.
diff --git 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;
   }