@haniffalab/cherita-react 0.2.0 → 0.2.1-dev.2025-02-19.e6d8aac6

package/scss/cherita.scss

@@ -1,3 +1,8 @@
+@import "components/layouts";
+@import "components/plots";
+@import "components/scrollbars";
+@import "components/plotly";
+
 .loading-spinner {
   @extend .bg-light;
 
@@ -24,25 +29,6 @@
   overflow: hidden;
 }
 
-.cherita-navbar {
-  @extend .mx-1;
-  @extend .my-2;
-  @extend .d-block;
-  @extend .d-xl-none;
-
-  position: absolute;
-  z-index: 11;
-  top: 0;
-  left: 0;
-  right: 0;
-  border-radius: 0.25rem;
-}
-
-.cherita-container .cherita-navbar-item > .dropdown-menu {
-  height: var(--dropdown-height);
-  overflow: hidden scroll;
-}
-
 /* Scrollbar styling */
 
 /* Works on Firefox */
@@ -79,14 +65,6 @@
   height: 100%;
 }
 
-.cherita-spatial-controls {
-  position: absolute;
-  z-index: 10;
-  top: 1rem;
-  left: 1rem;
-  width: 3rem;
-}
-
 .cherita-spatial-footer {
   position: absolute;
   z-index: 10;
@@ -258,12 +236,6 @@
   margin: 0;
 }
 
-.cherita-app {
-  @extend .container-fluid;
-
-  position: relative;
-}
-
 .cherita-app-plot {
   @extend .col;
   @extend .col-12;
@@ -275,19 +247,6 @@
   max-height: 100%;
 }
 
-.cherita-app-obs {
-  @extend .col;
-  @extend .d-none;
-  @extend .d-lg-block;
-  @extend .col-lg-4;
-  @extend .col-xl-3;
-  @extend .col-xxl-3;
-
-  border-right: 5px solid #f5f5f5;
-  overflow-y: scroll;
-  height: 100%;
-}
-
 .cherita-app-var {
   @extend .p-3;
   @extend .col;
@@ -352,3 +311,64 @@
 .deck-tooltip {
   z-index: 100 !important;
 }
+
+.pseudospatial-reference-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain; /* Keeps the image inside its allocated space */
+}
+
+.cherita-pseudospatial-controls {
+  position: absolute;
+  z-index: 10;
+  bottom: 1rem;
+  left: 1rem;
+}
+
+/* Styling the obs-accordion-header */
+.obs-accordion {
+  margin-bottom: 10px; /* Space between each accordion */
+}
+
+.obs-accordion-header {
+  @extend .btn;
+  @extend .btn-light-primary !optional;
+  @extend .btn-light;
+  @extend .text-primary;
+
+  display: flex;
+  align-items: center; /* Center the content vertically */
+  margin: 10px 10px 0 10px;
+  padding: 8px 12px; /* Adjust padding for spacing */
+  border-radius: 8px; /* Optional: rounded corners */
+  transition: background-color 0.3s ease; /* Smooth transition for background change */
+  cursor: pointer;
+
+  .obs-accordion-header-chevron {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 20px; /* Fixed width to prevent layout shifts */
+    height: 20px; /* Ensures a consistent square */
+    margin-right: 10px;
+  }
+  .obs-accordion-header-title {
+    font-size: 1rem;
+  }
+
+  &.active {
+    @extend .btn-primary;
+    @extend .text-light;
+  }
+  &:hover {
+    background-color: var(--geeks-btn-hover-bg);
+    border-color: var(--geeks-btn-hover-border-color);
+  }
+}
+
+.obs-accordion-body {
+  @extend .card;
+
+  margin: 10px;
+  position: relative;
+}

package/scss/components/layouts.scss

@@ -0,0 +1,101 @@
+.cherita-app {
+  position: relative;
+}
+
+.cherita-app .cherita-navbar {
+  @extend .m-3;
+  @extend .d-block;
+  @extend .d-xl-none;
+
+  position: absolute;
+  z-index: 11;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 0.25rem;
+  @media (min-width: 992px) and (max-width: 1199px) {
+    margin-left: calc(33.33333333% + 1rem) !important;
+  }
+}
+
+.cherita-app-canvas {
+  position: relative;
+}
+
+.cherita-app-obs {
+  @extend .col;
+  @extend .d-none;
+  @extend .d-lg-block;
+  @extend .col-lg-4;
+  @extend .col-xl-3;
+  @extend .col-xxl-3;
+
+  overflow-y: scroll;
+}
+
+.cherita-app-sidebar {
+  @extend .d-none;
+  @extend .d-xl-flex;
+
+  width: 20%;
+  position: relative;
+
+  .card {
+    width: 100%;
+  }
+
+  .card-body {
+    overflow-y: hidden;
+  }
+
+  .sidebar-pseudospatial {
+    padding: 10px;
+    border-bottom: 1px solid #dee2e6;
+
+    .cherita-legend {
+      margin: 0 auto;
+    }
+  }
+
+  .sidebar-features {
+    padding: 10px;
+    margin-bottom: 10px;
+    overflow-y: auto;
+  }
+
+  .accordion-header-wrapper {
+    cursor: pointer;
+    padding: var(--geeks-accordion-btn-padding-y)
+      var(--geeks-accordion-btn-padding-x);
+    color: var(--geeks-accordion-btn-color);
+    background-color: var(--geeks-accordion-btn-bg);
+    border: 0;
+    border-radius: 0;
+    transition: var(--geeks-accordion-transition);
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    &:after {
+      content: "";
+      flex-shrink: 0;
+      width: var(--geeks-accordion-btn-icon-width);
+      height: var(--geeks-accordion-btn-icon-width);
+      margin-left: 8px;
+      background-image: var(--geeks-accordion-btn-icon);
+      background-repeat: no-repeat;
+      background-size: var(--geeks-accordion-btn-icon-width);
+      transition: var(--geeks-accordion-btn-icon-transition);
+    }
+  }
+
+  .accordion-header-wrapper:not(.collapsed) {
+    color: var(--geeks-accordion-active-color);
+    background-color: var(--geeks-accordion-active-bg);
+
+    &:after {
+      background-image: var(--geeks-accordion-btn-active-icon);
+      transform: var(--geeks-accordion-btn-icon-transform);
+    }
+  }
+}

package/scss/components/plotly.scss

@@ -0,0 +1,30 @@
+.js-plotly-plot .plotly .modebar {
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 0 4px !important;
+
+  .modebar-group {
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: transparent !important;
+
+    .modebar-btn {
+      fill: white !important; /* Ensures white icons */
+      color: white !important; /* Ensures text/icons are visible */
+      position: relative;
+      font-size: 16px;
+      padding: 4px;
+      height: auto;
+      cursor: pointer;
+      line-height: normal;
+
+      svg {
+        position: relative;
+        top: auto;
+        bottom: auto;
+        left: auto;
+        right: auto;
+      }
+    }
+  }
+}

package/scss/components/plots.scss

@@ -0,0 +1,13 @@
+.cherita-spatial-controls {
+  position: absolute;
+  z-index: 10;
+  top: 1rem;
+  left: 1rem;
+  width: 3rem;
+}
+
+@media (max-width: 1199.98px) {
+  .cherita-spatial-controls {
+    top: 5rem;
+  }
+}

package/scss/components/scrollbars.scss

@@ -0,0 +1,18 @@
+.modern-scrollbars::-webkit-scrollbar {
+  width: 20px;
+}
+
+.modern-scrollbars::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.modern-scrollbars::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+.modern-scrollbars::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}