From 3c0078e4b29f7d503a25dc769caefe8dc413d58c Mon Sep 17 00:00:00 2001
From: pjanik <janikpiotrek@gmail.com>
Date: Thu, 22 Aug 2024 20:24:58 +0200
Subject: [PATCH] fix: make long input wider, add middle tick marks to sliders
 [PT-188059329]

---
 src/grasp-seasons/components/seasons.scss        | 13 ++++++++++---
 src/grasp-seasons/components/seasons.tsx         |  4 ++--
 .../slider/infinite-slider-jquery-ui-plugin.ts   |  2 --
 src/grasp-seasons/components/slider/slider.scss  | 10 ++++++++++
 src/grasp-seasons/components/slider/slider.tsx   | 16 +++++++++++++++-
 5 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/grasp-seasons/components/seasons.scss b/src/grasp-seasons/components/seasons.scss
index d4ca422..09fd5e0 100644
--- 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
index e50cad4..e35d6ce 100644
--- 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
index cbc4612..018a9d7 100644
--- 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
index 9dbbe65..0ea7241 100644
--- 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
index 49fdd1f..69b731d 100644
--- 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>
     );
   }
 }