feat: move style to dedicated files for better use in lib mode

gisaia · Jan 29, 2025 · ea1c2d2 · ea1c2d2
1 parent b650408
commit ea1c2d2
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 147 deletions.
diff --git a/src/styles.scss b/src/styles.scss
@@ -26,14 +26,15 @@
 @import 'styles/hopscotch/hopscotch.css';
 @import 'styles/swimlane.css';
 @import 'styles/donut.css';
-@import 'styles/resultlist.css';
+@import 'styles/resultlist.scss';
 @import 'styles/map.scss';
 @import 'styles/filter.scss';
 @import 'styles/variables.scss';
 @import 'styles/material-override.scss';
 @import 'styles/app/sizes.scss';
 @import 'styles/app/colors.scss';
 @import 'styles/app/mixin.scss';
+@import 'styles/analytics.scss';
 
 /* Material Icons */
 
@@ -93,58 +94,6 @@ button:focus {
   font-feature-settings: 'liga';
 }
 
-.analytics-board-card {
-  box-shadow: none !important;
-  padding: 1px !important;
-  margin: 3px 0 3px 0 !important;
-}
-
-.analytics-board-panel .mat-expansion-panel-header {
-  font-size: 16px;
-  font-weight: 300;
-  align-items: inherit;
-}
-
-.analytics-board-panel .mat-expansion-panel-body {
-  margin: 0 1px 0px;
-  padding: 0 5px 0 0 !important;
-  font-weight: 300;
-}
-
-.analytics-tabs .mat-mdc-tab-header {
-  position: sticky;
-  position: -webkit-sticky;
-  top: 0;
-  background-color: inherit;
-  z-index: 2;
-  border-bottom: none;
-}
-
-.analytics-board-card table.resultlist>tbody {
-  height: 400px !important;
-}
-
-
-.resultlist__preview {
-  table.resultlist>tbody {
-    height: calc(100vh - $top-menu-height) !important;
-  }
-
-  table.resultlist>thead,
-  table.resultlist .resultgrid__icon_check,
-  table.resultlist .resultlist-thumbnails-fit {
-    display: none;
-  }
-}
-
-.resultlist__wrapper .resultgrid__title-highlight- {
-  margin: unset !important;
-  display: flex;
-  padding: 0 5px;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .boxdraw {
   background: transparent;
   border: 2px solid black;
@@ -156,10 +105,6 @@ button:focus {
   height: 0;
 }
 
-.mat-mdc-dialog-container {
-  max-height: 85vh !important;
-}
-
 .share-option-check .mat-pseudo-checkbox {
   display: none !important;
 }
@@ -168,22 +113,6 @@ button:focus {
   overflow: hidden;
 }
 
-.map__layers-list--container {
-  z-index: 1;
-}
-
-.mapboxgl-ctrl-group-addgeobox, .mapboxgl-ctrl-group-removeaois, .mapboxgl-ctrl-group-pitch {
-  display: none;
-}
-
-.maplibregl-ctrl-group-addgeobox, .maplibregl-ctrl-group-removeaois, .maplibregl-ctrl-group-pitch {
-  display: none;
-}
-
-.mapboxgl-ctrl-group-layersswitcher {
-  visibility: hidden;
-}
-
 .tag-button {
   display: none !important;
 }
@@ -193,46 +122,6 @@ button:focus {
   left: calc(50vw - 100px) !important;
 }
 
-.arlas-analytics--container {
-  .arlas-metric-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: $default-spacing;
-    box-sizing: border-box;
-
-    .arlas-metric-value {
-      font-weight: 400;
-      font-size: $metric-value-font-size;
-      padding: $sm-spacing 0;
-    }
-
-    .arlas-metric-description {
-      font-size: $title-font-size;
-      font-weight: 100;
-      text-align: center;
-    }
-  }
-}
-
-.analytics-board-group {
-  justify-content: space-evenly;
-}
-
-.analytics-board-panel-title{
-  flex-basis: auto;
-}
-
-.analytics-board-panel:hover .export-csv-button {
-  display: block;
-  position: absolute;
-}
-
-.export-csv-button {
-  display: none;
-  cursor: pointer;
-}
-
 .arlas-search .full-width-input {
   font-size: .9rem;
 }
@@ -252,7 +141,6 @@ button:focus {
 }
 
 /* Walkthrough */
-
 div.hopscotch-bubble .hopscotch-nav-button.next {
   border-color: #FF4081;
   color: #ffffff;
@@ -327,14 +215,6 @@ div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-ar
   left: 5px !important;
 }
 
-.resultitem-list__actions {
-  cursor: pointer;
-}
-
-.resultitem-grid__actions {
-  cursor: pointer;
-}
-
 .gif {
   background-color: #FF4081;
   border-radius: 50%;

diff --git a/src/styles/analytics.scss b/src/styles/analytics.scss
@@ -0,0 +1,87 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@import 'app/sizes.scss';
+
+.analytics-board-card {
+  box-shadow: none !important;
+  padding: 1px !important;
+  margin: 3px 0 3px 0 !important;
+}
+
+.analytics-board-panel {
+  .mat-expansion-panel-header {
+    font-size: 16px;
+    font-weight: 300;
+    align-items: inherit;
+  }
+  .mat-expansion-panel-body {
+    margin: 0 1px 0px;
+    padding: 0 5px 0 0 !important;
+    font-weight: 300;
+  }
+
+  .export-csv-button {
+    display: none;
+    cursor: pointer;
+  }
+  &:hover .export-csv-button {
+    display: block;
+    position: absolute;
+  }
+}
+
+.analytics-tabs .mat-mdc-tab-header {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  background-color: inherit;
+  z-index: 2;
+  border-bottom: none;
+}
+
+.arlas-analytics--container {
+  .arlas-metric-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: $default-spacing;
+    box-sizing: border-box;
+
+    .arlas-metric-value {
+      font-weight: 400;
+      font-size: $metric-value-font-size;
+      padding: $sm-spacing 0;
+    }
+
+    .arlas-metric-description {
+      font-size: $title-font-size;
+      font-weight: 100;
+      text-align: center;
+    }
+  }
+}
+
+.analytics-board-group {
+  justify-content: space-evenly;
+}
+
+.analytics-board-panel-title{
+  flex-basis: auto;
+}
diff --git a/src/styles/map.scss b/src/styles/map.scss
@@ -21,6 +21,15 @@
 @import "app/sizes.scss";
 @import "app/mixin.scss";
 
+.mapboxgl-ctrl-group-addgeobox, .mapboxgl-ctrl-group-removeaois, .mapboxgl-ctrl-group-pitch,
+.maplibregl-ctrl-group-addgeobox, .maplibregl-ctrl-group-removeaois, .maplibregl-ctrl-group-pitch {
+  display: none;
+}
+
+.mapboxgl-ctrl-group-layersswitcher {
+  visibility: hidden;
+}
+
 .mapboxgl-ctrl-scale,
 .maplibregl-ctrl-scale {
   position: absolute;
@@ -36,6 +45,7 @@
   top: 50px !important;
   border-radius: 4px;
   right: 43px !important;
+  z-index: 1;
 }
 
 .main_content {

diff --git a/src/styles/material-override.scss b/src/styles/material-override.scss
@@ -60,3 +60,7 @@
 .mdc-evolution-chip-set .mdc-evolution-chip-set__chips {
   margin-left: 0 !important;
 }
+
+.mat-mdc-dialog-container {
+  max-height: 85vh !important;
+}
diff --git a/src/styles/resultlist.css → src/styles/resultlist.scss b/src/styles/resultlist.css → src/styles/resultlist.scss
@@ -17,12 +17,13 @@
  * under the License.
  */
 
+@import 'variables.scss';
+
 .analytics-board-card .resultlist__header--columns__geosort-action-button {
   width: 24px;
   height: 24px;
 }
 .resultlist__tools__td {
-  align-items: center !important;
   box-sizing: border-box;
 }
 
@@ -50,30 +51,6 @@
   color: #656565;
 }
 
-.mapboxgl-popup-content .resultdetaileditem-value {
-  font-family: "Roboto", "Helvetica Neue", sans-serif;
-  font-size: 0.9em;
-  font-weight: normal;
-  color: #656565;
-}
-
-.mapboxgl-popup-content .group-item-title {
-  color: #656565 !important;
-}
-
-.mapboxgl-popup-content .detail-item {
-  color: #ff4081 !important;
-  display: inline-block;
-}
-
-.mapboxgl-popup-content .resultdetaileditem-key {
-  color: #656565;
-}
-
-.mapboxgl-popup-content div {
-  overflow: auto;
-}
-
 .download-onhover-action {
   background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M0%200h24v24H0z%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M19.35%2010.04C18.67%206.59%2015.64%204%2012%204%209.11%204%206.6%205.64%205.35%208.04%202.34%208.36%200%2010.91%200%2014c0%203.31%202.69%206%206%206h13c2.76%200%205-2.24%205-5%200-2.64-2.05-4.78-4.65-4.96zM17%2013l-5%205-5-5h3V9h4v4h3z%27%20fill%3D%27%23000000%27%2F%3E%3C%2Fsvg%3E") !important;
   cursor: pointer;
@@ -123,3 +100,27 @@
   width: 18px;
   font-size: 18px !important;
 }
+
+.analytics-board-card table.resultlist>tbody {
+  height: 400px !important;
+}
+
+.resultlist__preview {
+  table.resultlist>tbody {
+    height: calc(100vh - $top-menu-height) !important;
+  }
+
+  table.resultlist>thead,
+  table.resultlist .resultgrid__icon_check,
+  table.resultlist .resultlist-thumbnails-fit {
+    display: none;
+  }
+}
+
+.resultlist__wrapper .resultgrid__title-highlight- {
+  margin: unset !important;
+  display: flex;
+  padding: 0 5px;
+  justify-content: space-between;
+  align-items: center;
+}