Fix segmented control styles

2023-06-23 19:14:34 -07:00 · 2023-06-23 19:14:34 -07:00 · 558a4e74a1
commit 558a4e74a1
parent 6051a814fa
12 changed files with 200 additions and 205 deletions
--- a/components/common/SegmentedControl/index.module.scss
+++ b/components/common/SegmentedControl/index.module.scss
@ -1,104 +1,112 @@
-.SegmentedControlWrapper {
+.wrapper {
  display: flex;
  justify-content: center;

  @include breakpoint(phone) {
    width: 100%;
  }
-}

-.SegmentedControl {
-  // border-radius: $unit * 3;
-  display: inline-flex;
-  padding: 3px;
-  position: relative;
-  user-select: none;
-  overflow: hidden;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  .segmentedControl {
+    // border-radius: $unit * 3;
+    display: inline-flex;
+    padding: 3px;
+    position: relative;
+    user-select: none;
+    overflow: hidden;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

-  @include breakpoint(phone) {
-    background: var(--card-bg);
-    border-radius: 100px;
-  }
-
-  &.Blended {
-    background: var(--input-bound-bg);
-    border-radius: $full-corner;
-
-    .Segment input:checked + label {
+    @include breakpoint(phone) {
      background: var(--card-bg);
-    }
-  }
-
-  &.fire {
-    .Segment input:checked + label {
-      background: var(--fire-bg);
-      color: var(--fire-text);
+      border-radius: 100px;
    }

-    .Segment:hover label {
-      background: var(--fire-hover-bg);
-      color: var(--fire-hover-text);
-    }
-  }
+    &.blended {
+      background: var(--input-bound-bg);
+      border-radius: $full-corner;

-  &.water {
-    .Segment input:checked + label {
-      background: var(--water-bg);
-      color: var(--water-text);
+      .Segment input:checked + label {
+        background: var(--card-bg);
+      }
    }

-    .Segment:hover label {
-      background: var(--water-hover-bg);
-      color: var(--water-hover-text);
-    }
-  }
-
-  &.earth {
-    .Segment input:checked + label {
-      background: var(--earth-bg);
-      color: var(--earth-text);
+    &.grow {
+      flex-grow: 1;
    }

-    .Segment:hover label {
-      background: var(--earth-hover-bg);
-      color: var(--earth-hover-text);
-    }
-  }
-
-  &.wind {
-    .Segment input:checked + label {
-      background: var(--wind-bg);
-      color: var(--wind-text);
+    &.gap {
+      gap: $unit;
    }

-    .Segment:hover label {
-      background: var(--wind-hover-bg);
-      color: var(--wind-hover-text);
-    }
-  }
+    &.fire {
+      .Segment input:checked + label {
+        background: var(--fire-bg);
+        color: var(--fire-text);
+      }

-  &.light {
-    .Segment input:checked + label {
-      background: var(--light-bg);
-      color: var(--light-text);
+      .Segment:hover label {
+        background: var(--fire-hover-bg);
+        color: var(--fire-hover-text);
+      }
    }

-    .Segment:hover label {
-      background: var(--light-hover-bg);
-      color: var(--light-hover-text);
-    }
-  }
+    &.water {
+      .Segment input:checked + label {
+        background: var(--water-bg);
+        color: var(--water-text);
+      }

-  &.dark {
-    .Segment input:checked + label {
-      background: var(--dark-bg);
-      color: var(--dark-text);
+      .Segment:hover label {
+        background: var(--water-hover-bg);
+        color: var(--water-hover-text);
+      }
    }

-    .Segment:hover label {
-      background: var(--dark-hover-bg);
-      color: var(--dark-hover-text);
+    &.earth {
+      .Segment input:checked + label {
+        background: var(--earth-bg);
+        color: var(--earth-text);
+      }
+
+      .Segment:hover label {
+        background: var(--earth-hover-bg);
+        color: var(--earth-hover-text);
+      }
+    }
+
+    &.wind {
+      .Segment input:checked + label {
+        background: var(--wind-bg);
+        color: var(--wind-text);
+      }
+
+      .Segment:hover label {
+        background: var(--wind-hover-bg);
+        color: var(--wind-hover-text);
+      }
+    }
+
+    &.light {
+      .Segment input:checked + label {
+        background: var(--light-bg);
+        color: var(--light-text);
+      }
+
+      .Segment:hover label {
+        background: var(--light-hover-bg);
+        color: var(--light-hover-text);
+      }
+    }
+
+    &.dark {
+      .Segment input:checked + label {
+        background: var(--dark-bg);
+        color: var(--dark-text);
+      }
+
+      .Segment:hover label {
+        background: var(--dark-hover-bg);
+        color: var(--dark-hover-text);
+      }
    }
  }
 }
--- a/components/common/SegmentedControl/index.tsx
+++ b/components/common/SegmentedControl/index.tsx
@ -6,6 +6,8 @@ interface Props {
  className?: string
  elementClass?: string
  blended?: boolean
+  grow?: boolean
+  gap?: boolean
  tabIndex?: number
 }

@ -13,19 +15,23 @@ const SegmentedControl: React.FC<Props> = ({
  className,
  elementClass,
  blended,
+  grow,
+  gap,
  tabIndex,
  children,
 }) => {
  const classes = classNames(
    {
-      SegmentedControl: true,
-      Blended: blended,
+      [styles.segmentedControl]: true,
+      [styles.blended]: blended,
+      [styles.grow]: grow,
+      [styles.gap]: gap,
    },
    className,
    elementClass
  )
  return (
-    <div className="SegmentedControlWrapper" tabIndex={tabIndex}>
+    <div className={styles.wrapper} tabIndex={tabIndex}>
      <div className={classes}>{children}</div>
    </div>
  )
@ -33,6 +39,8 @@ const SegmentedControl: React.FC<Props> = ({

 SegmentedControl.defaultProps = {
  blended: false,
+  grow: false,
+  gap: false,
 }

 export default SegmentedControl
--- a/components/party/PartySegmentedControl/index.module.scss
+++ b/components/party/PartySegmentedControl/index.module.scss
@ -1,4 +1,4 @@
-.PartyNavigation {
+.nav {
  align-items: center;
  box-sizing: border-box;
  display: flex;
@ -43,27 +43,3 @@
    }
  }
 }
-
-.ExtraSwitch {
-  color: #888;
-  display: flex;
-  font-weight: $normal;
-  gap: $unit;
-  line-height: 34px;
-  height: 100%;
-  position: absolute;
-  right: 0px;
-  top: 1px;
-
-  // prettier-ignore
-  @media only screen 
-    and (max-width: 550px) 
-    and (max-height: 920px) 
-    and (-webkit-min-device-pixel-ratio: 2) {
-    position: static;
-
-    .Text {
-      display: none;
-    }
-  }
-}
--- a/components/party/PartySegmentedControl/index.tsx
+++ b/components/party/PartySegmentedControl/index.tsx
@ -106,18 +106,17 @@ const PartySegmentedControl = (props: Props) => {
  }

  return (
-    <div
+    <nav
      className={classNames({
-        PartyNavigation: true,
-        Editable: party.editable,
+        [styles.nav]: true,
      })}
    >
-      <SegmentedControl elementClass={getElement()}>
+      <SegmentedControl gap={true} grow={true} elementClass={getElement()}>
        {characterSegment()}
        {weaponSegment()}
        {summonSegment()}
      </SegmentedControl>
-    </div>
+    </nav>
  )
 }

--- a/components/reps/CharacterRep/index.module.scss
+++ b/components/reps/CharacterRep/index.module.scss
@ -1,15 +1,27 @@
-.CharacterRep {
+.rep {
  aspect-ratio: 2/0.99;
  border-radius: $card-corner;
  grid-gap: $unit-half; /* add a gap of 8px between grid items */
  height: $rep-height;
+  transition: $duration-opacity-fade opacity ease-in;
+  opacity: 0.5;

-  .Character {
+  .character,
+  .protagonist {
+    aspect-ratio: 16 / 33;
    background: var(--card-bg);
    border-radius: 4px;
+    box-sizing: border-box;
+    display: grid;
+    overflow: hidden;
+
+    img[src*='jpg'] {
+      border-radius: 4px;
+      width: 100%;
+    }
  }

-  .GridCharacters {
+  .characters {
    display: grid; /* make the right-images container a grid */
    grid-template-columns: repeat(
      4,
@ -18,58 +30,46 @@
    gap: $unit-half;
  }

-  .Grid.Character {
-    aspect-ratio: 16 / 33;
-    box-sizing: border-box;
-    display: grid;
-    overflow: hidden;
+  .protagonist {
+    border-color: transparent;
+    border-width: 1px;
+    border-style: solid;
+    aspect-ratio: 32 / 66;

-    &.MC {
-      border-color: transparent;
-      border-width: 1px;
-      border-style: solid;
-      aspect-ratio: 32 / 66;
+    img {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }

-      img {
-        position: relative;
-        width: 100%;
-        height: 100%;
-      }
+    &.fire {
+      background: var(--fire-hover-bg);
+      border-color: var(--fire-bg);
+    }

-      &.fire {
-        background: var(--fire-hover-bg);
-        border-color: var(--fire-bg);
-      }
+    &.water {
+      background: var(--water-hover-bg);
+      border-color: var(--water-bg);
+    }

-      &.water {
-        background: var(--water-hover-bg);
-        border-color: var(--water-bg);
-      }
+    &.wind {
+      background: var(--wind-hover-bg);
+      border-color: var(--wind-bg);
+    }

-      &.wind {
-        background: var(--wind-hover-bg);
-        border-color: var(--wind-bg);
-      }
+    &.earth {
+      background: var(--earth-hover-bg);
+      border-color: var(--earth-bg);
+    }

-      &.earth {
-        background: var(--earth-hover-bg);
-        border-color: var(--earth-bg);
-      }
+    &.light {
+      background: var(--light-hover-bg);
+      border-color: var(--light-bg);
+    }

-      &.light {
-        background: var(--light-hover-bg);
-        border-color: var(--light-bg);
-      }
-
-      &.dark {
-        background: var(--dark-hover-bg);
-        border-color: var(--dark-bg);
-      }
+    &.dark {
+      background: var(--dark-hover-bg);
+      border-color: var(--dark-bg);
    }
  }
-
-  .Grid.Character img[src*='jpg'] {
-    border-radius: 4px;
-    width: 100%;
-  }
 }
--- a/components/reps/CharacterRep/index.tsx
+++ b/components/reps/CharacterRep/index.tsx
@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next'
 import 'fix-date'

 import styles from './index.module.scss'
+import classNames from 'classnames'

 interface Props {
  job?: Job
@ -109,17 +110,20 @@ const CharacterRep = (props: Props) => {

  // Render
  return (
-    <div className="CharacterRep Rep">
-      <ul className="GridCharacters">
+    <div className={styles.rep}>
+      <ul className={styles.characters}>
        <li
          key="characters-job"
-          className={`Grid Character MC ${numberToElement()}`}
+          className={classNames({
+            [styles.protagonist]: true,
+            [styles[`${numberToElement()}`]]: true,
+          })}
        >
          {generateMCImage()}
        </li>
        {Array.from(Array(CHARACTERS_COUNT)).map((x, i) => {
          return (
-            <li key={`characters-${i}`} className="Grid Character">
+            <li key={`characters-${i}`} className={styles.character}>
              {generateGridImage(i)}
            </li>
          )
--- a/components/reps/RepSegment/index.module.scss
+++ b/components/reps/RepSegment/index.module.scss
@ -1,4 +1,4 @@
-.RepSegment {
+.segment {
  border-radius: $card-corner;
  color: $grey-55;
  cursor: pointer;
@ -10,7 +10,7 @@
    background: var(--button-bg);
    color: var(--text-primary);

-    .Wrapper .Rep {
+    .wrapper > * {
      opacity: 1;
    }
  }
@ -22,7 +22,7 @@
      background: var(--button-bg);
      color: var(--text-primary);

-      .Rep {
+      .wrapper > * {
        opacity: 1;
      }
    }
@ -50,15 +50,10 @@
      padding-bottom: $unit;
    }

-    .Wrapper {
+    .wrapper {
      display: flex;
      flex-direction: column;
      gap: $unit;
-
-      .Rep {
-        transition: $duration-opacity-fade opacity ease-in;
-        opacity: 0.5;
-      }
    }
  }

@ -66,7 +61,7 @@
    min-width: initial;
    width: 100%;

-    .Rep {
+    .rep {
      display: none;
    }
  }
--- a/components/reps/RepSegment/index.tsx
+++ b/components/reps/RepSegment/index.tsx
@ -12,7 +12,7 @@ interface Props {

 const RepSegment = ({ children, ...props }: PropsWithChildren<Props>) => {
  return (
-    <div className="RepSegment">
+    <div className={styles.segment}>
      <input
        name={props.controlGroup}
        id={props.inputName}
@ -22,9 +22,9 @@ const RepSegment = ({ children, ...props }: PropsWithChildren<Props>) => {
        onChange={props.onClick}
      />
      <label htmlFor={props.inputName}>
-        <div className="Wrapper">
+        <div className={styles.wrapper}>
          {children}
-          <div className="Title">{props.name}</div>
+          <div className={styles.title}>{props.name}</div>
        </div>
      </label>
    </div>
--- a/components/reps/SummonRep/index.module.scss
+++ b/components/reps/SummonRep/index.module.scss
@ -1,23 +1,31 @@
-.SummonRep {
+.rep {
  aspect-ratio: 2/1.045;
  border-radius: $card-corner;
  display: grid;
  grid-template-columns: 1fr 2.25fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
  grid-gap: $unit-half; /* add a gap of 8px between grid items */
  height: $rep-height;
+  transition: $duration-opacity-fade opacity ease-in;
+  opacity: 0.5;

-  .Summon {
+  .summon,
+  .mainSummon {
    background: var(--card-bg);
    border-radius: 4px;
+
+    img[src*='jpg'] {
+      border-radius: 4px;
+      width: 100%;
+    }
  }

-  .Main.Summon {
+  .mainSummon {
    aspect-ratio: 56/97;
    display: grid;
    grid-column: 1 / 2; /* spans one column */
  }

-  .GridSummons {
+  .summons {
    display: grid; /* make the right-images container a grid */
    grid-template-columns: repeat(
      2,
@ -32,14 +40,8 @@
    // row-gap: $unit-2x;
  }

-  .Grid.Summon {
+  .summon {
    aspect-ratio: 184 / 138;
    display: grid;
  }
-
-  .Main.Summon img[src*='jpg'],
-  .Grid.Summon img[src*='jpg'] {
-    border-radius: 4px;
-    width: 100%;
-  }
 }
--- a/components/reps/SummonRep/index.tsx
+++ b/components/reps/SummonRep/index.tsx
@ -151,12 +151,12 @@ const SummonRep = (props: Props) => {

  // Render
  return (
-    <div className="SummonRep Rep">
-      <div className="Main Summon">{generateMainImage()}</div>
-      <ul className="GridSummons">
+    <div className={styles.rep}>
+      <div className={styles.mainSummon}>{generateMainImage()}</div>
+      <ul className={styles.summons}>
        {Array.from(Array(SUMMONS_COUNT)).map((x, i) => {
          return (
-            <li key={`summons-${i}`} className="Grid Summon">
+            <li key={`summons-${i}`} className={styles.summon}>
              {generateGridImage(i)}
            </li>
          )
--- a/components/reps/WeaponRep/index.module.scss
+++ b/components/reps/WeaponRep/index.module.scss
@ -1,23 +1,31 @@
-.WeaponRep {
+.rep {
  aspect-ratio: 2/0.955;
  border-radius: $card-corner;
  display: grid;
  grid-template-columns: 1fr 3.39fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
  grid-gap: $unit-half; /* add a gap of 8px between grid items */
  height: $rep-height;
+  transition: $duration-opacity-fade opacity ease-in;
+  opacity: 0.5;

-  .Weapon {
+  .mainhand,
+  .weapon {
    background: var(--card-bg);
    border-radius: 4px;
+
+    img[src*='jpg'] {
+      border-radius: 4px;
+      width: 100%;
+    }
  }

-  .Mainhand.Weapon {
+  .mainhand {
    aspect-ratio: 73/153;
    display: grid;
    grid-column: 1 / 2; /* spans one column */
  }

-  .GridWeapons {
+  .weapons {
    display: grid; /* make the right-images container a grid */
    grid-template-columns: repeat(
      3,
@ -32,14 +40,8 @@
    // row-gap: $unit-2x;
  }

-  .Grid.Weapon {
+  .weapon {
    aspect-ratio: 280 / 160;
    display: grid;
  }
-
-  .Mainhand.Weapon img[src*='jpg'],
-  .Grid.Weapon img[src*='jpg'] {
-    border-radius: 4px;
-    width: 100%;
-  }
 }
--- a/components/reps/WeaponRep/index.tsx
+++ b/components/reps/WeaponRep/index.tsx
@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'

 import styles from './index.module.scss'
+import classNames from 'classnames'

 interface Props {
  grid: {
@ -85,12 +86,12 @@ const WeaponRep = (props: Props) => {

  // Render
  return (
-    <div className="WeaponRep Rep">
-      <div className="Mainhand Weapon">{generateMainhandImage()}</div>
-      <ul className="GridWeapons">
+    <div className={styles.rep}>
+      <div className={styles.mainhand}>{generateMainhandImage()}</div>
+      <ul className={styles.weapons}>
        {Array.from(Array(WEAPONS_COUNT)).map((x, i) => {
          return (
-            <li key={`weapons-${i}`} className="Grid Weapon">
+            <li key={`weapons-${i}`} className={styles.weapon}>
              {generateGridImage(i)}
            </li>
          )