diff --git a/components/about/AboutHead/index.tsx b/components/about/AboutHead/index.tsx index 0aa45ec7..e4092694 100644 --- a/components/about/AboutHead/index.tsx +++ b/components/about/AboutHead/index.tsx @@ -26,7 +26,7 @@ const AboutHead = ({ page }: Props) => { name="description" content={t(`page.descriptions.${currentPage}`)} /> - + {/* OpenGraph */} diff --git a/components/common/DialogContent/index.module.scss b/components/common/DialogContent/index.module.scss index 375acb76..92df55c2 100644 --- a/components/common/DialogContent/index.module.scss +++ b/components/common/DialogContent/index.module.scss @@ -13,6 +13,14 @@ color: inherit; z-index: 10; + @include breakpoint(phone) { + place-items: flex-end; + overflow-y: hidden; + + &.filter { + } + } + .dialogContent { $multiplier: 4; @@ -51,11 +59,11 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; min-width: inherit; - min-height: 90vh; + min-height: inherit; transform: initial; left: 0; right: 0; - top: 5vh; + top: $unit-10x; height: auto; width: 100%; } @@ -101,110 +109,6 @@ overflow-y: auto; } } - - &.Conflict { - $weapon-diameter: 14rem; - - .Content { - display: flex; - flex-direction: column; - gap: $unit-4x; - padding: $unit-4x $unit-4x $unit-2x $unit-4x; - - & > p { - font-size: $font-regular; - line-height: 1.4; - - strong { - font-weight: $bold; - } - - &:lang(ja) { - line-height: 1.4; - } - } - } - - .weapon, - .character { - display: flex; - flex-direction: column; - gap: $unit; - text-align: center; - width: $weapon-diameter; - font-weight: $medium; - - img { - border-radius: 1rem; - width: $weapon-diameter; - height: auto; - } - - span { - line-height: 1.3; - } - } - - .Diagram { - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: flex-start; - - &.CharacterDiagram { - align-items: center; - } - - ul { - align-items: center; - display: flex; - flex-direction: column; - gap: $unit-2x; - } - - .wrapper { - display: flex; - justify-content: center; - width: 100%; - } - - .arrow { - align-items: center; - color: $grey-55; - display: flex; - font-size: 4rem; - text-align: center; - height: $weapon-diameter; - justify-content: center; - } - } - - footer { - display: flex; - flex-direction: row; - gap: $unit; - - .Button { - font-size: $font-regular; - padding: ($unit * 1.5) ($unit * 2); - width: 100%; - - &.btn-disabled { - background: $grey-90; - color: $grey-70; - cursor: not-allowed; - } - - &:not(.btn-disabled) { - background: $grey-90; - color: $grey-50; - - &:hover { - background: $grey-80; - } - } - } - } - } } @keyframes openModalDesktop { @@ -221,11 +125,20 @@ @keyframes slideUp { 0% { - transform: translate(0%, 100%); + transform: translateY(400px); + animation-timing-function: ease-out; + } + 60% { + transform: translateY(-30px); + animation-timing-function: ease-in; + } + 80% { + transform: translateY(10px); + animation-timing-function: ease-out; } - 100% { - transform: translate(0, 0%); + transform: translateY(0px); + animation-timing-function: ease-in; } } } diff --git a/components/common/DialogContent/index.tsx b/components/common/DialogContent/index.tsx index 53703c7d..44823b3b 100644 --- a/components/common/DialogContent/index.tsx +++ b/components/common/DialogContent/index.tsx @@ -11,6 +11,7 @@ interface Props React.DialogHTMLAttributes, HTMLDivElement > { + wrapperClassName?: string headerref?: React.RefObject footerref?: React.RefObject scrollable?: boolean @@ -127,7 +128,16 @@ const DialogContent = React.forwardRef(function Dialog( return ( - + styles[className]) + )} + > { max={props.max} step={props.step} value={[props.value ? props.value : 0]} + className="table" onValueChange={handleValueChange} onValueCommit={handleValueCommit} /> diff --git a/components/common/TableField/index.module.scss b/components/common/TableField/index.module.scss index de900793..e48b5328 100644 --- a/components/common/TableField/index.module.scss +++ b/components/common/TableField/index.module.scss @@ -36,6 +36,14 @@ } } + &.switch { + @include breakpoint(phone) { + align-items: center; + flex-direction: row; + justify-content: space-between; + } + } + .left { align-items: center; display: flex; diff --git a/components/filters/FilterModal/index.module.scss b/components/filters/FilterModal/index.module.scss index e2b68ed2..c1a55e87 100644 --- a/components/filters/FilterModal/index.module.scss +++ b/components/filters/FilterModal/index.module.scss @@ -39,5 +39,6 @@ @include breakpoint(phone) { gap: $unit-4x; + margin-bottom: $unit * 24; } } diff --git a/components/filters/FilterModal/index.tsx b/components/filters/FilterModal/index.tsx index d46cd0cb..ce73f588 100644 --- a/components/filters/FilterModal/index.tsx +++ b/components/filters/FilterModal/index.tsx @@ -402,7 +402,8 @@ const FilterModal = (props: Props) => { {props.children} { {/* HTML */} {t('page.titles.new')} - + {/* OpenGraph */} diff --git a/components/head/ProfileHead/index.tsx b/components/head/ProfileHead/index.tsx index 293cab5a..7e3b61a8 100644 --- a/components/head/ProfileHead/index.tsx +++ b/components/head/ProfileHead/index.tsx @@ -20,7 +20,7 @@ const ProfileHead = ({ user }: Props) => { username: user.username, })} /> - + {/* OpenGraph */} diff --git a/components/head/SavedHead/index.tsx b/components/head/SavedHead/index.tsx index 75821047..b87f349f 100644 --- a/components/head/SavedHead/index.tsx +++ b/components/head/SavedHead/index.tsx @@ -9,7 +9,7 @@ const SavedHead = () => { return ( {t('page.titles.saved')} - + diff --git a/components/head/TeamsHead/index.tsx b/components/head/TeamsHead/index.tsx index 66624a2f..a2aca1d2 100644 --- a/components/head/TeamsHead/index.tsx +++ b/components/head/TeamsHead/index.tsx @@ -11,7 +11,6 @@ const TeamsHead = () => { {/* HTML */} {t('page.titles.discover')} - {/* OpenGraph */} diff --git a/components/party/PartyHead/index.tsx b/components/party/PartyHead/index.tsx index 7971de81..34590904 100644 --- a/components/party/PartyHead/index.tsx +++ b/components/party/PartyHead/index.tsx @@ -32,7 +32,7 @@ const PartyHead = ({ party, meta }: Props) => { raidName: party.raid ? party.raid.name[locale] : '', })} /> - + {/* OpenGraph */} diff --git a/pages/_app.tsx b/pages/_app.tsx index 60381287..6f3c64eb 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,5 @@ import { appWithTranslation } from 'next-i18next' +import Head from 'next/head' import Link from 'next/link' import { useTranslation } from 'next-i18next' import { get } from 'local-storage' @@ -131,20 +132,28 @@ function MyApp({ Component, pageProps }: AppProps) { } return ( - - - - - {!appState.version ? ( - serverUnavailable() - ) : ( - - )} - - - - - + <> + + + + + + + + {!appState.version ? ( + serverUnavailable() + ) : ( + + )} + + + + + + ) }