fix: make long input wider, add middle tick marks to sliders [PT-1880…

…59329]
concord-consortium · Aug 22, 2024 · 3c0078e · 3c0078e
1 parent fcc3125
commit 3c0078e
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 8 deletions.
diff --git a/src/grasp-seasons/components/seasons.scss b/src/grasp-seasons/components/seasons.scss
@@ -174,17 +174,24 @@ body {
         align-items: center;
         margin-bottom: 17px;
 
-        input {
+        .lat-input, .long-input {
           border-radius: 3px;
           border: solid 1px rgba(23, 121, 145, 0.75);
           background-color: #fff;
-          width: 45px;
           height: 24px;
           padding: 3px 6px;
         }
+
+        .lat-input {
+          width: 45px;
+        }
+        .long-input {
+          width: 49px;
+          margin-right: 4px;
+          margin-left: -5px;
+        }
       }
     }
-
   }
 
   .btn {

diff --git a/src/grasp-seasons/components/seasons.tsx b/src/grasp-seasons/components/seasons.tsx
@@ -343,7 +343,7 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
             <div className="top-row">
               <SquareButton onClick={handleLatIncrement(-5)}><ForwardBackIcon /></SquareButton>
               <label>{ t("~LATITUDE", simLang) }</label>
-              <input type="text" value={latitude} onChange={handleLatInputChange} />
+              <input className="lat-input" type="text" value={latitude} onChange={handleLatInputChange} />
               <SquareButton onClick={handleLatIncrement(5)}><ForwardBackIcon style={{transform: "rotate(180deg"}} /></SquareButton>
             </div>
           <Slider
@@ -360,7 +360,7 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
             <div className="top-row">
               <SquareButton onClick={handleLongIncrement(-5)}><ForwardBackIcon /></SquareButton>
               <label>{ t("~LONGITUDE", simLang) }</label>
-              <input type="text" value={longitude} onChange={handleLongInputChange} />
+              <input className="long-input" type="text" value={longitude} onChange={handleLongInputChange} />
               <SquareButton onClick={handleLongIncrement(5)}><ForwardBackIcon style={{transform: "rotate(180deg"}} /></SquareButton>
             </div>
             <Slider

diff --git a/src/grasp-seasons/components/slider/infinite-slider-jquery-ui-plugin.ts b/src/grasp-seasons/components/slider/infinite-slider-jquery-ui-plugin.ts
@@ -17,14 +17,12 @@ const TICK_WIDTH = 1;
       value.forEach(function(this: any, t: any) {
         const percentValue = t.value / valueTotal * 100;
         const tick = $("<div></div>").addClass("ui-slider-tick").css({
-          position: "absolute",
           left: percentValue + "%"
         });
         const mark = $("<div></div>").addClass("ui-slider-tick-mark").css({
           height: this.element.height(),
           width: TICK_WIDTH + "px",
           "margin-left": (-0.5 * TICK_WIDTH) + "px",
-          background: "#aaaaaa"
         });
         const label = $("<div></div>").addClass("ui-slider-tick-label").text(t.name);
         mark.appendTo(tick);

diff --git a/src/grasp-seasons/components/slider/slider.scss b/src/grasp-seasons/components/slider/slider.scss
@@ -28,6 +28,16 @@
     margin-bottom: 25px;
   }
 
+  .ui-slider-tick {
+    position: absolute;
+
+    .ui-slider-tick-mark {
+      background-color: $borderColor;
+      width: 1px;
+      height: 100%;
+    }
+  }
+
   .ui-slider-tick-label {
     margin-top: 15px;
 

diff --git a/src/grasp-seasons/components/slider/slider.tsx b/src/grasp-seasons/components/slider/slider.tsx
@@ -80,8 +80,22 @@ export default class Slider extends Component<IProps> {
   }
 
   render() {
+    const { orientation } = this.props
     return (
-      <div ref={this.containerRef} className="grasp-slider"></div>
+      <div ref={this.containerRef} className="grasp-slider">
+        {
+          (orientation === "horizontal" || !orientation) &&
+          <div className="ui-slider-tick" style={{ left: "50%", height: "100%" }}>
+            <div className="ui-slider-tick-mark"></div>
+          </div>
+        }
+        {
+          orientation === "vertical" &&
+          <div className="ui-slider-tick" style={{ bottom: "50%", width: "100%", height: 1 }}>
+            <div className="ui-slider-tick-mark" style={{ width: "100%" }}></div>
+          </div>
+        }
+      </div>
     );
   }
 }