Merge pull request #85 from jedmund/dialog-mobile

Mobile updates - Dialog, Characters, Selects

components/AboutModal/index.scss

@@ -3,6 +3,7 @@
   background: none;
   border: 0;
   inset: 0;
+  top: 0;
   display: grid;
   place-items: center;
   min-height: 100vh;
@@ -12,12 +13,19 @@
 }
 
 .About.Dialog {
-  width: $unit * 60;
   top: 0;
+  animation: none;
   transform: translate(-50%, 0);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   margin-top: $unit-10x;
+
+  @include breakpoint(phone) {
+    border-radius: 0;
+    transform: none;
+    margin: 0;
+  }
+
   section {
     margin-bottom: $unit;
 
@@ -102,4 +110,5 @@
   place-items: center;
   overflow-y: auto;
   z-index: 40;
+  padding-top: 10%;
 }

components/CharacterGrid/index.scss

@@ -7,24 +7,19 @@
 }
 
 #grid_characters {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: $unit;
   margin: 0;
   padding: 0;
   max-width: 761px;
+  isolation: isolate;
 
   @include breakpoint(tablet) {
     justify-content: space-between;
     width: 100%;
   }
 
-  & > * {
-    margin-right: $unit * 3;
-
-    @include breakpoint(tablet) {
-      margin-right: inherit;
-    }
-  }
-
   & > li:last-child {
     margin: 0;
   }

components/CharacterUnit/index.scss

@@ -1,9 +1,10 @@
 .CharacterUnit {
+  align-items: center;
   display: flex;
   flex-direction: column;
   gap: calc($unit / 2);
-  min-height: 320px;
-  max-width: 200px;
+  // min-height: 320px;
+  // max-width: 200px;
   margin-bottom: $unit * 4;
 
   &.editable .CharacterImage:hover {
@@ -35,6 +36,10 @@
     max-width: 131px;
     text-align: center;
     word-wrap: normal;
+
+    @include breakpoint(phone) {
+      font-size: $font-small;
+    }
   }
 
   img {
@@ -54,11 +59,7 @@
     overflow: hidden;
     transition: all 0.18s ease-in-out;
     height: auto;
-    width: 131px;
-
-    @include breakpoint(tablet) {
-      width: 17vw;
-    }
+    width: 100%;
 
     &:hover .icon svg {
       fill: var(--icon-secondary-hover);

components/Dialog/index.scss

@@ -2,9 +2,10 @@
   $multiplier: 4;
 
   animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running
-    openModal;
+    openModalDesktop;
   background: var(--dialog-bg);
   border-radius: $card-corner;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: $unit * $multiplier;
@@ -16,15 +17,22 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 21;
+  z-index: 40;
 
   a:hover {
     text-decoration: underline;
   }
 
   @include breakpoint(phone) {
+    animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running
+      openModalMobile;
     min-width: inherit;
-    min-height: inherit;
+    min-height: 80vh;
+    transform: initial;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: auto;
     width: 100%;
   }
 

components/Dialog/index.tsx

@@ -3,6 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog'
 import classNames from 'classnames'
 
 import './index.scss'
+import Overlay from '~components/Overlay'
 
 interface Props
   extends React.DetailedHTMLProps<
@@ -24,7 +25,6 @@ export const DialogContent = React.forwardRef<HTMLDivElement, Props>(
 
     return (
       <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="Overlay" />
         <DialogPrimitive.Content
           className={classes}
           {...props}
@@ -34,6 +34,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, Props>(
         >
           {children}
         </DialogPrimitive.Content>
+        <Overlay visible={true} open={true} />
       </DialogPrimitive.Portal>
     )
   }

components/HeaderMenu/index.scss

@@ -19,6 +19,10 @@
   color: var(--text-tertiary);
   font-weight: $normal;
 
+  @include breakpoint(phone) {
+    cursor: pointer;
+  }
+
   &:hover:not(.disabled) {
     background: var(--menu-bg-item-hover);
     color: var(--text-primary);

components/JobSection/index.scss

@@ -1,9 +1,10 @@
 #Job {
+  align-items: center;
   box-sizing: border-box;
   display: flex;
   margin-bottom: $unit * 3;
 
-  @include breakpoint(phone) {
+  @include breakpoint(tablet) {
     flex-direction: column;
     gap: $unit;
   }
@@ -45,6 +46,7 @@
     box-sizing: border-box;
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
     display: block;
+    isolation: isolate;
     flex-grow: 2;
     flex-shrink: 0;
     height: $height;
@@ -59,7 +61,7 @@
     @include breakpoint(phone) {
       aspect-ratio: 16/9;
       margin: 0;
-      width: inherit;
+      width: 100%;
       height: inherit;
     }
 

components/LoginModal/index.tsx

@@ -7,7 +7,6 @@ import axios, { AxiosError, AxiosResponse } from 'axios'
 import api from '~utils/api'
 import { accountState } from '~utils/accountState'
 
-import Alert from '~components/Alert'
 import Button from '~components/Button'
 import Input from '~components/Input'
 import {
@@ -28,12 +27,6 @@ interface ErrorMap {
   password: string
 }
 
-interface GranblueAxiosError {
-  response: AxiosResponse<any, any>
-  request: any
-  code: number
-}
-
 const emailRegex =
   /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 

components/Overlay/index.scss

@@ -0,0 +1,13 @@
+.Overlay {
+  isolation: isolate;
+  position: fixed;
+  z-index: 30;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  &.Visible {
+    background: rgba(0, 0, 0, 0.6);
+  }
+}

components/Overlay/index.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react'
+import classNames from 'classnames'
+import './index.scss'
+
+interface Props {
+  visible: boolean
+  open: boolean
+}
+
+const defaultProps = {
+  visible: true,
+}
+
+const Overlay = ({
+  visible: displayed,
+  open,
+}: {
+  visible: boolean
+  open: boolean
+}) => {
+  const [visible, setVisible] = useState(open)
+
+  const classes = classNames({
+    Overlay: true,
+    Visible: displayed,
+  })
+
+  useEffect(() => {
+    if (!open) {
+      const timer = setTimeout(() => {
+        setVisible(false)
+      }, 200)
+      return () => {
+        clearTimeout(timer)
+      }
+    }
+    setVisible(true)
+    return () => {}
+  }, [open])
+
+  function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    event.stopPropagation()
+  }
+
+  return visible ? <div className={classes} onClick={handleClick} /> : null
+}
+
+Overlay.defaultProps = defaultProps
+
+export default Overlay

components/PartySegmentedControl/index.scss

@@ -16,10 +16,6 @@
     padding: 0 $unit;
     max-width: auto;
     width: 100%;
-
-    &.Editable {
-      justify-content: flex-start;
-    }
   }
 
   .SegmentedControl {

components/SearchModal/index.scss

@@ -2,17 +2,16 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  min-height: 431px;
-  width: 600px;
+  min-height: 430px;
   height: 480px;
   gap: 0;
   padding: 0;
 
   @include breakpoint(phone) {
+    animation: none;
+    border-radius: 0;
     min-width: inherit;
-    min-height: inherit;
-    width: 96%; // is this even right
-    height: 96vh;
+    min-height: 100vh;
   }
 
   #Header {

components/Select/index.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
 import * as RadixSelect from '@radix-ui/react-select'
 import classNames from 'classnames'
 
+import Overlay from '~components/Overlay'
+
 import ArrowIcon from '~public/icons/Arrow.svg'
 
 import './index.scss'
@@ -76,19 +78,24 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
       </RadixSelect.Trigger>
 
       <RadixSelect.Portal className="Select">
-        <RadixSelect.Content
-          onCloseAutoFocus={onCloseAutoFocus}
-          onEscapeKeyDown={onEscapeKeyDown}
-          onPointerDownOutside={onPointerDownOutside}
-        >
-          <RadixSelect.ScrollUpButton className="Scroll Up">
-            <ArrowIcon />
-          </RadixSelect.ScrollUpButton>
-          <RadixSelect.Viewport>{props.children}</RadixSelect.Viewport>
-          <RadixSelect.ScrollDownButton className="Scroll Down">
-            <ArrowIcon />
-          </RadixSelect.ScrollDownButton>
-        </RadixSelect.Content>
+        <>
+          <Overlay open={open} visible={false} />
+
+          <RadixSelect.Content
+            className="Select"
+            onCloseAutoFocus={onCloseAutoFocus}
+            onEscapeKeyDown={onEscapeKeyDown}
+            onPointerDownOutside={onPointerDownOutside}
+          >
+            <RadixSelect.ScrollUpButton className="Scroll Up">
+              <ArrowIcon />
+            </RadixSelect.ScrollUpButton>
+            <RadixSelect.Viewport>{props.children}</RadixSelect.Viewport>
+            <RadixSelect.ScrollDownButton className="Scroll Down">
+              <ArrowIcon />
+            </RadixSelect.ScrollDownButton>
+          </RadixSelect.Content>
+        </>
       </RadixSelect.Portal>
     </RadixSelect.Root>
   )

components/SummonGrid/index.tsx

@@ -33,9 +33,6 @@ const SummonGrid = (props: Props) => {
   const accountData: AccountCookie = cookie
     ? JSON.parse(cookie as string)
     : null
-  const headers = accountData
-    ? { headers: { Authorization: `Bearer ${accountData.token}` } }
-    : {}
 
   // Localization
   const { t } = useTranslation('common')
@@ -112,19 +109,16 @@ const SummonGrid = (props: Props) => {
     if (summon.uncap.ulb) uncapLevel = 5
     else if (summon.uncap.flb) uncapLevel = 4
 
-    return await api.endpoints.summons.create(
-      {
-        summon: {
-          party_id: partyId,
-          summon_id: summon.id,
-          position: position,
-          main: position == -1,
-          friend: position == 6,
-          uncap_level: uncapLevel,
-        },
+    return await api.endpoints.summons.create({
+      summon: {
+        party_id: partyId,
+        summon_id: summon.id,
+        position: position,
+        main: position == -1,
+        friend: position == 6,
+        uncap_level: uncapLevel,
       },
-      headers
-    )
+    })
   }
 
   function storeGridSummon(gridSummon: GridSummon) {

components/WeaponSearchFilterBar/index.tsx

@@ -153,7 +153,7 @@ const WeaponSearchFilterBar = (props: Props) => {
   const renderSingleWeaponSeries = (id: number, slug: string) => {
     return (
       <SearchFilterCheckboxItem
-        key={id}
+        key={slug}
         onCheckedChange={handleSeriesChange}
         checked={seriesState[slug].checked}
         valueKey={slug}
@@ -171,6 +171,7 @@ const WeaponSearchFilterBar = (props: Props) => {
     <div className="SearchFilterBar">
       <SearchFilter
         label={t('filters.labels.rarity')}
+        key="rarity"
         numSelected={
           Object.values(rarityState)
             .map((x) => x.checked)
@@ -198,6 +199,7 @@ const WeaponSearchFilterBar = (props: Props) => {
 
       <SearchFilter
         label={t('filters.labels.element')}
+        key="element"
         numSelected={
           Object.values(elementState)
             .map((x) => x.checked)
@@ -225,6 +227,7 @@ const WeaponSearchFilterBar = (props: Props) => {
 
       <SearchFilter
         label={t('filters.labels.proficiency')}
+        key="proficiency"
         numSelected={
           Object.values(proficiencyState)
             .map((x) => x.checked)
@@ -278,6 +281,7 @@ const WeaponSearchFilterBar = (props: Props) => {
 
       <SearchFilter
         label={t('filters.labels.series')}
+        key="series"
         numSelected={
           Object.values(seriesState)
             .map((x) => x.checked)

styles/globals.scss

@@ -119,16 +119,6 @@ select {
   }
 }
 
-.Overlay {
-  background: rgba(0, 0, 0, 0.6);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 20;
-}
-
 .Hovercard {
   background: #222;
   border-radius: $unit;
@@ -298,7 +288,7 @@ i.tag {
   }
 }
 
-@keyframes openModal {
+@keyframes openModalDesktop {
   0% {
     opacity: 0;
     transform: translate(-50%, -48%) scale(0.96);
@@ -309,3 +299,15 @@ i.tag {
     transform: translate(-50%, -50%) scale(1);
   }
 }
+
+@keyframes openModalMobile {
+  0% {
+    opacity: 0;
+    transform: translate(0%, 100%);
+  }
+
+  100% {
+    // opacity: 1;
+    transform: translate(0, 30%);
+  }
+}

styles/mixins.scss

@@ -1,7 +1,7 @@
 // use with @include
 @mixin breakpoint($breakpoint) {
   $phone-width: 430px;
-  $phone-height: 850px;
+  $phone-height: 920px;
 
   $tablet-width: 1024px;
   $tablet-height: 1024px;