Merge pull request #39 from gemini-hlsw/ranker-tweaker-style

Changed ranker tweaker inputs style
gemini-hlsw · Jul 23, 2024 · ab2bcec · ab2bcec
2 parents fbd2467 + 4bdcc44
commit ab2bcec
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 36 deletions.
diff --git a/src/components/RankerTweaker/RankerTweaker.scss b/src/components/RankerTweaker/RankerTweaker.scss
@@ -0,0 +1,11 @@
+.ranker-tweaker {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 5px;
+}
+
+@media screen and (max-width: 768px) {
+  .ranker-tweaker {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
diff --git a/src/components/RankerTweaker/RankerTweaker.tsx b/src/components/RankerTweaker/RankerTweaker.tsx
@@ -1,38 +1,96 @@
-import React, { useContext } from "react";
-import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
-import { GlobalStateContext } from '../GlobalState/GlobalState'
+import { useContext } from "react";
+import {
+  InputNumber,
+  InputNumberValueChangeEvent,
+} from "primereact/inputnumber";
+import { GlobalStateContext } from "../GlobalState/GlobalState";
+import "./RankerTweaker.scss";
 
-export default function RankerTweaker () {
+export default function RankerTweaker() {
+  const {
+    thesis,
+    setThesis,
+    power,
+    setPower,
+    metPower,
+    setMetPower,
+    visPower,
+    setVisPower,
+    whaPower,
+    setWhaPower,
+  } = useContext(GlobalStateContext);
 
-    const { thesis, setThesis, 
-            power, setPower, 
-            metPower, setMetPower, 
-            visPower, setVisPower, 
-            whaPower, setWhaPower } = useContext(GlobalStateContext);
-
-
-    return (
-        <div className="card flex flex-wrap gap-3 p-fluid">
-            <div className="flex-auto">
-                <label htmlFor="thesis" className="font-bold block mb-2">Thesis factor</label>
-                <InputNumber inputId="thesis" value={thesis} onValueChange={(e: InputNumberValueChangeEvent) => setThesis(e.value)} useGrouping={false} minFractionDigits={2} maxFractionDigits={5} />
-            </div>
-            <div className="flex-auto">
-                <label htmlFor="power" className="font-bold block mb-2">Power factor</label>
-                <InputNumber inputId="power" value={power} onValueChange={(e: InputNumberValueChangeEvent) => setPower(e.value)} useGrouping={false} />
-            </div>
-            <div className="flex-auto">
-                <label htmlFor="metPower" className="font-bold block mb-2">MAT power</label>
-                <InputNumber inputId="metPower" value={metPower} onValueChange={(e: InputNumberValueChangeEvent) => setMetPower(e.value)} useGrouping={false} minFractionDigits={2} maxFractionDigits={5} />
-            </div>
-            <div className="flex-auto">
-                <label htmlFor="visPower" className="font-bold block mb-2">Visibility power</label>
-                <InputNumber inputId="visPower" value={visPower} onValueChange={(e: InputNumberValueChangeEvent) => setVisPower(e.value)} useGrouping={false} minFractionDigits={2} maxFractionDigits={5} />
-            </div>
-            <div className="flex-auto">
-                <label htmlFor="whaPower" className="font-bold block mb-2">WHA power</label>
-                <InputNumber inputId="whaPower" value={whaPower} onValueChange={(e: InputNumberValueChangeEvent) => setWhaPower(e.value)} useGrouping={false} minFractionDigits={2} maxFractionDigits={5} />
-            </div>
-        </div>
-    )
-}
+  return (
+    <div className="card flex flex-wrap gap-3 p-fluid ranker-tweaker">
+      <div className="flex-auto">
+        <label htmlFor="thesis" className="font-bold block mb-2">
+          Thesis factor
+        </label>
+        <InputNumber
+          inputId="thesis"
+          value={thesis}
+          onValueChange={(e: InputNumberValueChangeEvent) => setThesis(e.value)}
+          useGrouping={false}
+          minFractionDigits={2}
+          maxFractionDigits={5}
+        />
+      </div>
+      <div className="flex-auto">
+        <label htmlFor="power" className="font-bold block mb-2">
+          Power factor
+        </label>
+        <InputNumber
+          inputId="power"
+          value={power}
+          onValueChange={(e: InputNumberValueChangeEvent) => setPower(e.value)}
+          useGrouping={false}
+        />
+      </div>
+      <div className="flex-auto">
+        <label htmlFor="metPower" className="font-bold block mb-2">
+          MAT power
+        </label>
+        <InputNumber
+          inputId="metPower"
+          value={metPower}
+          onValueChange={(e: InputNumberValueChangeEvent) =>
+            setMetPower(e.value)
+          }
+          useGrouping={false}
+          minFractionDigits={2}
+          maxFractionDigits={5}
+        />
+      </div>
+      <div className="flex-auto">
+        <label htmlFor="visPower" className="font-bold block mb-2">
+          Visibility power
+        </label>
+        <InputNumber
+          inputId="visPower"
+          value={visPower}
+          onValueChange={(e: InputNumberValueChangeEvent) =>
+            setVisPower(e.value)
+          }
+          useGrouping={false}
+          minFractionDigits={2}
+          maxFractionDigits={5}
+        />
+      </div>
+      <div className="flex-auto">
+        <label htmlFor="whaPower" className="font-bold block mb-2">
+          WHA power
+        </label>
+        <InputNumber
+          inputId="whaPower"
+          value={whaPower}
+          onValueChange={(e: InputNumberValueChangeEvent) =>
+            setWhaPower(e.value)
+          }
+          useGrouping={false}
+          minFractionDigits={2}
+          maxFractionDigits={5}
+        />
+      </div>
+    </div>
+  );
+}