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 = ({ lang = "en_us", initialState = {}, log = (a
- +
= ({ lang = "en_us", initialState = {}, log = (a
- +
").addClass("ui-slider-tick").css({ - position: "absolute", left: percentValue + "%" }); const mark = $("
").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 = $("
").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 { } render() { + const { orientation } = this.props return ( -
+
+ { + (orientation === "horizontal" || !orientation) && +
+
+
+ } + { + orientation === "vertical" && +
+
+
+ } +
); } }