Rewind: make the settings a bit more accessible on smol screens

chrissxMedia · Jan 31, 2024 · 9af6a5a · 9af6a5a
1 parent 9529903
commit 9af6a5a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -5,6 +5,6 @@ export default function Input({ error, placeholder, value, setValue, className }
  return <div className={className}>
  <input type="text" spellcheck={false} autocorrect="false"
  placeholder={placeholder} value={value} onInput={(e) => setValue(e.target.value)} />
- <span style={{ color: "red" }}>{error}</span>
+ {error && <span style={{ color: "red" }}>{error}</span>}
  </div>;
 }
diff --git a/src/components/Kink.tsx b/src/components/Kink.tsx
@@ -8,7 +8,7 @@ export default function Kink({ kink: [kink, positions, , description], ratings,
  <tr class={styles.tr}>
  <td class={styles.td}>
  <span>{kink}</span>
- <span class={styles.desc}>{description}</span>
+ {description && <span class={styles.desc}>{description}</span>}
  </td>
  {positions.map((pos, p) => (
  <td class={styles.td}>

diff --git a/src/components/Rewind.module.css b/src/components/Rewind.module.css
@@ -13,12 +13,21 @@
 }
 
 .settings {
- flex-wrap: wrap;
+ display: flex;
+ flex-flow: row wrap;
  width: 63.2em;
  justify-content: space-between;
  padding: 1em 0;
 }
 
+@media screen and (width <= 600px) {
+ .settings {
+ flex-direction: column;
+ font-size: 2.5em;
+ width: 25.28em;
+ }
+}
+
 .sexrewind {
  width: 7.5em;
  height: 7.5em;

diff --git a/src/components/Rewind.tsx b/src/components/Rewind.tsx
@@ -8,7 +8,7 @@ export default function Rewind() {
  const [sexmins, setSexmins] = useState("0");
  const [sexpartners, setSexpartners] = useState("0");
  return <main class={styles.main}>
- <div class={styles.settings + " " + styles.row}>
+ <div class={styles.settings}>
  <Input placeholder="You had sex" value={sextimes} setValue={setSextimes} />
  <Input placeholder="Description" value={sexdesc} setValue={setSexdesc} />
  <Input placeholder="Minutes had sex" value={sexmins} setValue={setSexmins} />