tab effect styling

concord-consortium · Aug 19, 2024 · 6d71f05 · 6d71f05
1 parent dd6f43c
commit 6d71f05
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 53 deletions.
diff --git a/src/assets/scss/App.scss b/src/assets/scss/App.scss
@@ -1,12 +1,14 @@
 @import "./vars";
 
 .App {
-  padding: 10px;
+  //padding: 10px;
   box-sizing: border-box;
   font-family: "Montserrat", sans-serif;
   font-size: 12px;
   font-weight: 500;
   color: #222222;
+  background-color: white;
+  border-bottom: 1px solid #222222;
 
   input {
     font-family: "Montserrat", sans-serif;
@@ -24,15 +26,21 @@
     margin-top: 7px;
   }
 
+  .location-tab, .simulation-tab, .about-tab {
+    box-sizing: border-box;
+    margin-top:7px;
+    padding: 10px;
+    background-color: white;
+  }
+
   .tab-content {
     //display: none; would be easier, but it somehow Seasons 3D view doesn't initialize itself properly
     // when display: none; is used.
     visibility: hidden;
     width: 0;
     height: 0;
     position: absolute;
-    padding: 3px;
-    border-top: 1px solid #777777;
+    top: 26px;
 
     &.active {
       visibility: visible;

diff --git a/src/assets/scss/header.scss b/src/assets/scss/header.scss
@@ -1,15 +1,13 @@
 @import "./vars.scss";
 
+$location-tab-width: 76px;
+$simulation-tab-width: 87px;
+$about-tab-width: 76px;
+
 .header {
   p {
     margin: 0;
   }
-
-  .info-icon {
-    position: absolute;
-    top: 7px;
-    right: 7px;
-  }
 }
 
 .tab-container {
@@ -19,25 +17,44 @@
   position: relative;
   z-index: 1;
   justify-content: flex-start;
+  padding-top: 6px;
+  margin-left:3px;
+  height: 25.5px;
 
   .tab {
-    flex: 0 0 auto;
+    box-sizing: border-box;
     text-align: center;
-    padding: 10px 20px;
+    padding: 5px 10px;
     cursor: pointer;
-    color: #666;
-    border: 1px solid $codap-teal;
-    border-bottom: none;
-    margin-right: -1px;
-    position: relative;
-    border-radius: 8px 8px 0 0;
+    color: #222;
+    border:1px solid #222;
+    border-radius: 5px 5px 0 0;
     background-color: #e9e9e9;
+    position: absolute;
+
+    &.location {
+      left: 0;
+      width:$location-tab-width;
+    }
+
+    &.simulation {
+      left:$location-tab-width - 1px;
+      width:$simulation-tab-width;
+    }
+
+    &.about {
+      left: $simulation-tab-width + $location-tab-width - 2px;
+      width:$about-tab-width;
+    }
 
     &.active {
       background-color: white;
-      color: $codap-teal;
-      border-bottom: 1px solid white;
+      font-weight: bold;
       z-index: 2;
+      border-bottom:1px solid white;
+      height: 29.5px;
+      top: 3px;
+      padding-top:7px;
     }
 
     &:hover:not(.active) {

diff --git a/src/assets/scss/location-tab.scss b/src/assets/scss/location-tab.scss
@@ -1,8 +1,11 @@
 @import "./vars";
 
 .location-tab {
-  width: 350px;
-  padding:10px;
+  // width: 375px; // should match plugin config width
+  // padding:10px;
+  background-color: white;
+  position: relative;
+  // left:-10px; // there is a space coming from CODAP (outside iframe) on the left side
 
   hr {
     width: 100%;
@@ -13,7 +16,13 @@
 
   .latitude,
   .longitude {
-    justify-content: space-between;
+    display: flex;
+    align-items: center;
+    label {
+      margin-left: auto;
+      text-align: right;
+      margin-right: 10px;
+    }
     input {
       width: 250px;
       padding: 5px;
@@ -23,13 +32,22 @@
     }
   }
 
+  .or-container {
+    position: relative;
+    text-align: left;
+    margin: 15px 0;
+  }
+
   .or {
-    display: none; // TODO: bring this or element back
+    display: inline-block;
     background-color: white;
-    width: 40px;
-    padding:0px 10px;
+    padding: 0 10px;
     color: $codap-teal;
     font-weight: bold;
+    position: absolute;
+    left: 0px;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   .latitude {

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -9,34 +9,25 @@ interface IHeaderProps {
 
 export const Header: React.FC<IHeaderProps> = ({ activeTab, onTabClick }) => {
   return (
-    <>
-      <div className="plugin-row header">
-        <p>
-          How long is a day?<br />
-          Enter a location or coordinates to retrieve data
-        </p>
+    <div className="tab-container">
+      <div
+        className={`tab location ${activeTab === "location" ? "active" : ""}`}
+        onClick={() => onTabClick("location")}
+      >
+        Location
       </div>
-      <hr />
-      <div className="tab-container">
-        <div
-          className={`tab ${activeTab === "location" ? "active" : ""}`}
-          onClick={() => onTabClick("location")}
-        >
-          Location
-        </div>
-        <div
-          className={`tab ${activeTab === "simulation" ? "active" : ""}`}
-          onClick={() => onTabClick("simulation")}
-        >
-          Simulation
-        </div>
-        <div
-          className={`tab ${activeTab === "about" ? "active" : ""}`}
-          onClick={() => onTabClick("about")}
-        >
-          About
-        </div>
+      <div
+        className={`tab simulation ${activeTab === "simulation" ? "active" : ""}`}
+        onClick={() => onTabClick("simulation")}
+      >
+        Simulation
       </div>
-    </>
+      <div
+        className={`tab about ${activeTab === "about" ? "active" : ""}`}
+        onClick={() => onTabClick("about")}
+      >
+        About
+      </div>
+    </div>
   );
 };
diff --git a/src/components/location-tab.tsx b/src/components/location-tab.tsx
@@ -102,12 +102,22 @@ export const LocationTab: React.FC<LocationTabProps> = ({
 
   return (
     <div className="location-tab">
+      <div className="plugin-row header">
+        <p>
+          How long is a day?<br />
+          Enter a location or coordinates to retrieve data
+        </p>
+      </div>
+      <hr />
       <LocationPicker
         onLocationSelect={handleLocationSelect}
         searchValue={locationSearch}
         onSearchChange={handleLocationSearchChange}
       />
-      <div className="or">OR</div>
+      <div className="or-container">
+        <hr />
+        <span className="or">OR</span>
+      </div>
       <hr />
       <div className="plugin-row latitude">
         <label>Latitude</label>