Merge pull request #186 from jedmund/fix-details-mobile

Fix various visual details on mobile

components/Alert/index.scss

@@ -22,6 +22,11 @@
   max-width: 30vw;
   padding: $unit * 4;
 
+  @include breakpoint(phone) {
+    max-width: inherit;
+    width: 60vw;
+  }
+
   .description {
     font-size: $font-regular;
     line-height: 1.4;

components/Button/index.scss

@@ -38,6 +38,15 @@
     &:hover {
       background: none;
     }
+
+    .Text {
+      font-size: $font-small;
+      font-weight: $bold;
+
+      @include breakpoint(phone) {
+        display: none;
+      }
+    }
   }
 
   &.Contained {
@@ -99,6 +108,17 @@
     padding: $unit * 1.5;
   }
 
+  @include breakpoint(phone) {
+    &.destructive {
+      background: $error;
+      color: $grey-100;
+
+      .Accessory svg {
+        fill: $grey-100;
+      }
+    }
+  }
+
   &.destructive:hover {
     background: $error;
     color: $grey-100;

components/DropdownMenuContent/index.scss

@@ -11,8 +11,7 @@
   z-index: 15;
 
   @include breakpoint(phone) {
-    left: $unit-2x;
-    right: $unit-2x;
+    min-width: 50vw;
   }
 }
 

components/GridRep/index.scss

@@ -137,7 +137,7 @@
 
     .Properties {
       .full_auto {
-        color: var(--full-auto-text);
+        color: var(--full-auto-label-text);
       }
     }
 

components/PartyDetails/index.scss

@@ -1,10 +1,23 @@
 .DetailsWrapper {
   display: flex;
   flex-direction: column;
+  gap: $unit-2x;
   margin: $unit-4x auto 0 auto;
   max-width: $grid-width;
 
+  @include breakpoint(phone) {
+    .Button:not(.IconButton) {
+      justify-content: center;
+      width: 100%;
+
+      .Text {
+        width: auto;
+      }
+    }
+  }
+
   .PartyDetails {
+    box-sizing: border-box;
     display: none;
     margin: 0 auto $unit-2x;
     max-width: $unit * 94;
@@ -24,6 +37,7 @@
 
       &.Visible {
         display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       }
 
       fieldset {
@@ -37,6 +51,7 @@
       }
 
       .SelectTrigger {
+        padding: $unit-2x;
         width: 100%;
       }
 
@@ -45,12 +60,16 @@
         grid-template-columns: 1fr 1fr 1fr;
         gap: $unit;
 
+        @include breakpoint(phone) {
+          grid-template-columns: 1fr;
+        }
+
         .ToggleSection,
         .InputSection {
           align-items: center;
           display: flex;
           background: var(--card-bg);
-          border-radius: $card-corner;
+          border-radius: $input-corner;
 
           & > label {
             align-items: center;
@@ -133,6 +152,11 @@
         flex-direction: row;
         gap: $unit;
 
+        @include breakpoint(phone) {
+          flex-direction: column;
+          width: 100%;
+        }
+
         .left {
           flex-grow: 1;
         }
@@ -141,6 +165,12 @@
           display: flex;
           flex-direction: row;
           gap: $unit;
+
+          @include breakpoint(phone) {
+            .Button {
+              flex-grow: 1;
+            }
+          }
         }
       }
     }
@@ -167,7 +197,8 @@
       .Details {
         display: flex;
         flex-direction: row;
-        gap: $unit-half;
+        flex-wrap: wrap;
+        gap: $unit;
         margin-bottom: $unit-2x;
       }
 
@@ -258,21 +289,21 @@
   }
 
   .PartyInfo {
-    align-items: center;
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
     gap: $unit;
     margin: 0 auto;
-    margin-bottom: $unit * 2;
     max-width: $unit * 94;
     width: 100%;
 
     @include breakpoint(phone) {
+      flex-direction: column;
+      gap: $unit;
       padding: 0 $unit;
     }
 
-    .Left {
+    & > .Left {
       flex-grow: 1;
 
       .Header {

components/PartyDetails/index.tsx

@@ -667,15 +667,20 @@ const PartyDetails = (props: Props) => {
   const readOnly = (
     <section className={readOnlyClasses}>
       <section className="Details">
-        {
-          <Token>
-            {`${t('party.details.labels.charge_attack')} ${
-              chargeAttack ? 'On' : 'Off'
-            }`}
-          </Token>
-        }
-        {fullAuto ? <Token>{t('party.details.labels.full_auto')}</Token> : ''}
-        {autoGuard ? <Token>{t('party.details.labels.auto_guard')}</Token> : ''}
+        <Token className={classNames({ ChargeAttack: true, On: chargeAttack })}>
+          {`${t('party.details.labels.charge_attack')} ${
+            chargeAttack ? 'On' : 'Off'
+          }`}
+        </Token>
+
+        <Token className={classNames({ FullAuto: true, On: fullAuto })}>
+          {`${t('party.details.labels.full_auto')} ${fullAuto ? 'On' : 'Off'}`}
+        </Token>
+
+        <Token className={classNames({ AutoGuard: true, On: autoGuard })}>
+          {`${t('party.details.labels.auto_guard')} ${fullAuto ? 'On' : 'Off'}`}
+        </Token>
+
         {turnCount ? (
           <Token>
             {t('party.details.turns.with_count', {
@@ -715,6 +720,7 @@ const PartyDetails = (props: Props) => {
                   <Button
                     className="IconButton Blended"
                     leftAccessoryIcon={<RemixIcon />}
+                    text={t('tokens.remix')}
                     onClick={() => goTo(party.sourceParty?.shortcode)}
                   />
                 </Tooltip>
@@ -737,17 +743,17 @@ const PartyDetails = (props: Props) => {
               )}
             </div>
           </div>
-          <div className="Right">
-            {party.editable ? (
+          {party.editable ? (
+            <div className="Right">
               <Button
                 leftAccessoryIcon={<EditIcon />}
                 text={t('buttons.show_info')}
                 onClick={toggleDetails}
               />
-            ) : (
-              <div />
-            )}
-          </div>
+            </div>
+          ) : (
+            ''
+          )}
         </div>
         {readOnly}
         {editable}

components/Token/index.scss

@@ -1,10 +1,25 @@
 .Token {
   background: var(--input-bg);
   border-radius: 99px;
-  display: inline;
+  display: inline-flex;
   font-size: $font-small;
   font-weight: $medium;
   min-width: 3rem;
   text-align: center;
-  padding: $unit-half $unit;
+  padding: $unit ($unit * 1.5);
+
+  &.ChargeAttack.On {
+    background: var(--charge-attack-bg);
+    color: var(--charge-attack-text);
+  }
+
+  &.FullAuto.On {
+    background: var(--full-auto-bg);
+    color: var(--full-auto-text);
+  }
+
+  &.AutoGuard.On {
+    background: var(--auto-guard-bg);
+    color: var(--auto-guard-text);
+  }
 }

components/WeaponGrid/index.scss

@@ -4,6 +4,10 @@
   flex-direction: column;
   justify-content: center;
 
+  @include breakpoint(phone) {
+    margin: 0 2px;
+  }
+
   #MainGrid {
     display: grid;
     gap: $unit-3x;

public/locales/en/common.json

@@ -399,6 +399,9 @@
   "toasts": {
     "copied": "This party's URL was copied to your clipboard"
   },
+  "tokens": {
+    "remix": "Remixed"
+  },
   "tooltips": {
     "remix": "Make a copy of this team",
     "save": "Save this team to your account",

public/locales/ja/common.json

@@ -400,6 +400,9 @@
   "toasts": {
     "copied": "この編成のURLはクリップボードにコピーされました"
   },
+  "tokens": {
+    "remix": "リミックスされた"
+  },
   "tooltips": {
     "remix": "この編成をコピーする",
     "save": "この編成をアカウントに保存する",

styles/themes.scss

@@ -9,7 +9,14 @@
 
   --link-text-hover: #{$text--link--hover--light};
 
-  --full-auto-text: #{$text--full--auto--light};
+  --charge-attack-bg: #{$charge--attack--bg};
+  --charge-attack-text: #{$charge--attack--text};
+  --full-auto-bg: #{$full--auto--bg};
+  --full-auto-text: #{$charge--attack--text};
+  --auto-guard-bg: #{$auto--guard--bg};
+  --auto-guard-text: #{$auto--guard--text};
+
+  --full-auto-label-text: #{$text--full--auto--light};
 
   --separator-bg: #{$separator--bg--light};
 
@@ -141,7 +148,13 @@
 
   --link-text-hover: #{$text--link--hover--dark};
 
-  --full-auto-text: #{$text--full--auto--dark};
+  --charge-attack-bg: #{$charge--attack--bg};
+  --charge-attack-text: #{$charge--attack--text};
+
+  --full-auto-bg: #{$full--auto--bg};
+  --full-auto-text: #{$charge--attack--text};
+
+  --full-auto-label-text: #{$text--full--auto--dark};
 
   --separator-bg: #{$separator--bg--dark};
 

styles/variables.scss

@@ -65,9 +65,11 @@ $purple-90: #ecebff;
 $orange-00: #201710;
 $orange-10: #6b401b;
 $orange-30: #825b39;
+$orange-35: #885243;
 $orange-40: #925a2a;
 $orange-50: #a8703f;
 $orange-70: #d08f57;
+$orange-75: #ffb461;
 $orange-80: #facea7;
 $orange-90: #ffebd9;
 
@@ -254,6 +256,15 @@ $subaura--orange--primary--dark: $orange-00;
 $subaura--orange--secondary--dark: $orange-10;
 $subaura--orange--text--dark: $orange-70;
 
+// Color Definitions: Tokens
+$charge--attack--bg: $orange-75;
+$charge--attack--text: $orange-35;
+
+$full--auto--bg: $yellow-text-20;
+
+$auto--guard--bg: $purple-30;
+$auto--guard--text: $purple-10;
+
 // Color Definitions: Element Toggle
 $toggle--bg--light: $grey-90;
 $toggle--bg--dark: $grey-15;