From ced4c35dbdd659fb4bc7b1862ca727e6ca195d4a Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 27 Dec 2022 14:54:04 -0800 Subject: [PATCH 01/14] Add new mixin for media query breakpoints --- styles/mixins.scss | 28 ++++++++++++++++++++++++++++ styles/variables.scss | 1 + 2 files changed, 29 insertions(+) create mode 100644 styles/mixins.scss diff --git a/styles/mixins.scss b/styles/mixins.scss new file mode 100644 index 00000000..c96a367f --- /dev/null +++ b/styles/mixins.scss @@ -0,0 +1,28 @@ +// use with @include +@mixin breakpoint($breakpoint) { + $phone-width: 430px; + $phone-height: 850px; + + $tablet-width: 1024px; + $tablet-height: 1024px; + + @if $breakpoint == tablet { + // prettier-ignore + @media only screen + and (max-width: $tablet-width) + and (max-height: $tablet-height) + and (-webkit-min-device-pixel-ratio: 2) { + @content; + } + } + + @if $breakpoint == phone { + // prettier-ignore + @media only screen + and (max-width: $phone-width) + and (max-height: $phone-height) + and (-webkit-min-device-pixel-ratio: 2) { + @content; + } + } +} diff --git a/styles/variables.scss b/styles/variables.scss index 2664dab6..e602b20d 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -1,4 +1,5 @@ // @import 'include-media/dist/_include-media'; +@import 'mixins.scss'; // Breakpoints $breakpoints: ( From 3cf889cd431897d924808b5a72e3e112539d449c Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 27 Dec 2022 14:54:24 -0800 Subject: [PATCH 02/14] Replace media query usage with mixin --- components/CharacterGrid/index.scss | 4 ++-- components/CharacterUnit/index.scss | 2 +- components/Dialog/index.scss | 2 +- components/ExtraSummons/index.scss | 2 +- components/ExtraWeapons/index.scss | 2 +- components/FilterBar/index.scss | 6 +++--- components/GridRepCollection/index.scss | 4 ++-- components/Header/index.scss | 2 +- components/JobSection/index.scss | 4 ++-- components/PartyDetails/index.scss | 4 ++-- components/PartySegmentedControl/index.scss | 20 ++++++++++---------- components/SearchModal/index.scss | 4 ++-- components/Segment/index.scss | 2 +- components/SummonGrid/index.scss | 2 +- components/SummonUnit/index.scss | 6 +++--- components/UncapStar/index.scss | 5 +---- components/WeaponGrid/index.scss | 6 +++--- components/WeaponUnit/index.scss | 11 ++++++----- styles/globals.scss | 4 ++-- 19 files changed, 45 insertions(+), 47 deletions(-) diff --git a/components/CharacterGrid/index.scss b/components/CharacterGrid/index.scss index 4a45134f..be6aa48e 100644 --- a/components/CharacterGrid/index.scss +++ b/components/CharacterGrid/index.scss @@ -12,7 +12,7 @@ padding: 0; max-width: 761px; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { justify-content: space-between; width: 100%; } @@ -20,7 +20,7 @@ & > * { margin-right: $unit * 3; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { margin-right: inherit; } } diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss index e2f2736d..d2f611e5 100644 --- a/components/CharacterUnit/index.scss +++ b/components/CharacterUnit/index.scss @@ -56,7 +56,7 @@ height: auto; width: 131px; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { width: 17vw; } diff --git a/components/Dialog/index.scss b/components/Dialog/index.scss index 3ffd9616..5ca5967f 100644 --- a/components/Dialog/index.scss +++ b/components/Dialog/index.scss @@ -22,7 +22,7 @@ text-decoration: underline; } - @media (max-width: $phone) { + @include breakpoint(phone) { min-width: inherit; min-height: inherit; width: 100%; diff --git a/components/ExtraSummons/index.scss b/components/ExtraSummons/index.scss index f8dad9c6..86a7c794 100644 --- a/components/ExtraSummons/index.scss +++ b/components/ExtraSummons/index.scss @@ -10,7 +10,7 @@ position: relative; left: 9px; - @media (max-width: $medium-screen) { + @include breakpoint(phone) { left: auto; max-width: auto; width: 100%; diff --git a/components/ExtraWeapons/index.scss b/components/ExtraWeapons/index.scss index eedc2514..8bdcfdaf 100644 --- a/components/ExtraWeapons/index.scss +++ b/components/ExtraWeapons/index.scss @@ -10,7 +10,7 @@ position: relative; left: 8px; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { left: auto; max-width: auto; width: 100%; diff --git a/components/FilterBar/index.scss b/components/FilterBar/index.scss index 88c2c3ea..c0b2623d 100644 --- a/components/FilterBar/index.scss +++ b/components/FilterBar/index.scss @@ -15,7 +15,7 @@ width: 100%; max-width: 996px; - @media (max-width: $tablet) { + @include breakpoint(tablet) { position: static; flex-direction: column; width: 100%; @@ -29,7 +29,7 @@ gap: $unit; width: auto; - @media (max-width: $tablet) { + @include breakpoint(tablet) { flex-direction: column; width: 100%; } @@ -64,7 +64,7 @@ background-color: var(--select-contained-bg-hover); } - @media (max-width: $tablet) { + @include breakpoint(tablet) { width: 100%; max-width: inherit; text-align: center; diff --git a/components/GridRepCollection/index.scss b/components/GridRepCollection/index.scss index c3f58057..93098ba3 100644 --- a/components/GridRepCollection/index.scss +++ b/components/GridRepCollection/index.scss @@ -9,13 +9,13 @@ width: auto; max-width: 996px; - @media (max-width: $tablet) { + @include breakpoint(tablet) { grid-template-columns: minmax(320px, 1fr); max-width: inherit; width: 100%; } - @media (max-width: $phone) { + @include breakpoint(tablet) { grid-template-columns: 1fr; max-width: inherit; width: 100%; diff --git a/components/Header/index.scss b/components/Header/index.scss index 9832669b..b80b650e 100644 --- a/components/Header/index.scss +++ b/components/Header/index.scss @@ -36,7 +36,7 @@ margin-left: auto; } - @media (max-width: $phone) { + @include breakpoint(phone) { .Button .Text { display: none; } diff --git a/components/JobSection/index.scss b/components/JobSection/index.scss index f2d49b57..6d95238b 100644 --- a/components/JobSection/index.scss +++ b/components/JobSection/index.scss @@ -3,7 +3,7 @@ display: flex; margin-bottom: $unit * 3; - @media (max-width: $phone) { + @include breakpoint(phone) { flex-direction: column; gap: $unit; } @@ -56,7 +56,7 @@ width: $width; transition: box-shadow 0.15s ease-in-out; - @media (max-width: $phone) { + @include breakpoint(phone) { aspect-ratio: 16/9; margin: 0; width: inherit; diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss index 2a6b1c13..34e81f90 100644 --- a/components/PartyDetails/index.scss +++ b/components/PartyDetails/index.scss @@ -3,7 +3,7 @@ flex-direction: column; margin-top: $unit-4x; - @media (max-width: $phone) { + @include breakpoint(phone) { padding: 0 $unit; } @@ -86,7 +86,7 @@ width: 60%; height: 60%; - @media (max-width: $tablet) { + @include breakpoint(tablet) { width: 100%; height: 100%; } diff --git a/components/PartySegmentedControl/index.scss b/components/PartySegmentedControl/index.scss index 2a665786..96c414ab 100644 --- a/components/PartySegmentedControl/index.scss +++ b/components/PartySegmentedControl/index.scss @@ -9,7 +9,7 @@ max-width: 760px; position: relative; - @media (max-width: $phone) { + @include breakpoint(phone) { gap: $unit; margin-left: 0; margin-right: 0; @@ -20,16 +20,16 @@ &.Editable { justify-content: flex-start; } + } - .SegmentedControl { + .SegmentedControl { + flex-grow: 1; + + @include breakpoint(phone) { flex-grow: 1; - - @media (max-width: $phone) { - flex-grow: 1; - width: 100%; - display: grid; - grid-template-columns: auto auto auto; - } + width: 100%; + display: grid; + grid-template-columns: auto auto auto; } } } @@ -44,7 +44,7 @@ position: absolute; right: 0px; - @media (max-width: $phone) { + @include breakpoint(phone) { position: static; .Text { diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss index 08e428a5..c2b51741 100644 --- a/components/SearchModal/index.scss +++ b/components/SearchModal/index.scss @@ -8,7 +8,7 @@ gap: 0; padding: 0; - @media (max-width: $phone) { + @include breakpoint(phone) { min-width: inherit; min-height: inherit; width: 96%; // is this even right @@ -68,7 +68,7 @@ padding: 0 ($unit * 1.5); overflow-y: scroll; - @media (max-width: $phone) { + @include breakpoint(phone) { max-height: inherit; } diff --git a/components/Segment/index.scss b/components/Segment/index.scss index 73bb4084..fa148d4e 100644 --- a/components/Segment/index.scss +++ b/components/Segment/index.scss @@ -34,7 +34,7 @@ } } - @media (max-width: $phone) { + @include breakpoint(phone) { min-width: initial; width: 100%; } diff --git a/components/SummonGrid/index.scss b/components/SummonGrid/index.scss index c030ad78..dca045b5 100644 --- a/components/SummonGrid/index.scss +++ b/components/SummonGrid/index.scss @@ -14,7 +14,7 @@ text-overflow: ellipsis; overflow: hidden; - @media (max-width: $phone) { + @include breakpoint(phone) { &.Friend { max-width: 78px; } diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss index afd9840f..b67a81fe 100644 --- a/components/SummonUnit/index.scss +++ b/components/SummonUnit/index.scss @@ -9,7 +9,7 @@ width: 182px; height: auto; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { width: 20.3vw; } } @@ -19,7 +19,7 @@ // min-height: 141px; min-height: 180px; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { min-height: 16.5vw; } @@ -29,7 +29,7 @@ width: 148px; height: auto; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { width: 20vw; } } diff --git a/components/UncapStar/index.scss b/components/UncapStar/index.scss index eb1cc882..ff0a7370 100644 --- a/components/UncapStar/index.scss +++ b/components/UncapStar/index.scss @@ -53,11 +53,8 @@ background-image: url('/icons/uncap/purple-hover@3x.png'); } } -} -// Phone up to iPhone 14 Pro Max -@media only screen and (max-width: 430px) and (max-height: 850px) and (-webkit-device-pixel-ratio: 3) { - .UncapStar { + @include breakpoint(phone) { background-size: cover; height: 14px; width: 14px; diff --git a/components/WeaponGrid/index.scss b/components/WeaponGrid/index.scss index 3d563baf..e50bd027 100644 --- a/components/WeaponGrid/index.scss +++ b/components/WeaponGrid/index.scss @@ -2,7 +2,7 @@ display: flex; justify-content: center; - @media (max-width: $phone) { + @include breakpoint(phone) { display: grid; grid-template-columns: 1fr auto; } @@ -23,12 +23,12 @@ margin-bottom: $unit-3x; margin-right: $unit-3x; - @media (max-width: $tablet) { + @include breakpoint(tablet) { margin-bottom: $unit-2x; margin-right: $unit-2x; } - @media (max-width: $phone) { + @include breakpoint(tablet) { margin-bottom: $unit; margin-right: $unit; } diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss index 5b74454d..fbe832d8 100644 --- a/components/WeaponUnit/index.scss +++ b/components/WeaponUnit/index.scss @@ -5,7 +5,7 @@ min-height: 139px; position: relative; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { min-height: auto; } @@ -28,11 +28,12 @@ margin-right: $unit-3x; max-width: 200px; - @media (max-width: $tablet) { + @include breakpoint(tablet) { margin-right: $unit-2x; } - @media (max-width: $phone) { + @include breakpoint(phone) { + margin-right: $unit-2x; margin-right: $unit; } @@ -62,7 +63,7 @@ } } - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { width: 25vw; } } @@ -94,7 +95,7 @@ } } - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { width: 20vw; } } diff --git a/styles/globals.scss b/styles/globals.scss index e41e773a..79055b8a 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -113,7 +113,7 @@ select { margin-top: $unit * 3; min-width: 752px; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { min-width: auto; width: 100%; } @@ -291,7 +291,7 @@ i.tag { gap: $unit; padding: 0 ($unit * 3); - @media (max-width: $phone) { + @include breakpoint(phone) { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; From adf7f42fc06e2984f5e135cd2d608a66a5e27702 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 27 Dec 2022 14:54:29 -0800 Subject: [PATCH 03/14] Fix textarea height --- components/PartyDetails/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss index 34e81f90..5fc40f84 100644 --- a/components/PartyDetails/index.scss +++ b/components/PartyDetails/index.scss @@ -30,7 +30,7 @@ width: 100%; textarea { - min-height: $unit * 20; + min-height: $unit * 22; width: 100%; } } From 0b0af6f4cd9c9fd236a0aefdafb39e5bad7b8094 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 27 Dec 2022 17:07:58 -0800 Subject: [PATCH 04/14] Move TopHeader to Header This is a remnant of an old design where there was a BottomHeader as well --- components/Header/index.scss | 29 ++--- components/Header/index.tsx | 186 ++++++++++++++++++++++++++++++-- components/TopHeader/index.scss | 0 components/TopHeader/index.tsx | 180 ------------------------------- 4 files changed, 186 insertions(+), 209 deletions(-) delete mode 100644 components/TopHeader/index.scss delete mode 100644 components/TopHeader/index.tsx diff --git a/components/Header/index.scss b/components/Header/index.scss index b80b650e..6599906d 100644 --- a/components/Header/index.scss +++ b/components/Header/index.scss @@ -1,23 +1,24 @@ -.Header { +#Header { display: flex; + flex-direction: row; margin-bottom: $unit; + justify-content: space-between; width: 100%; - &.bottom { - position: sticky; - bottom: $unit * 2; - } - - #right > div { + #Right > div { display: flex; - gap: 8px; + gap: $unit; } - .dropdown { + #DropdownWrapper { display: inline-block; - position: relative; padding-bottom: $unit; + &:hover .Menu, + .Menu.open { + display: block; + } + &:hover { padding-right: $unit-4x; @@ -25,17 +26,9 @@ background: var(--button-bg-hover); color: var(--button-text-hover); } - - .Menu { - display: block; - } } } - .push { - margin-left: auto; - } - @include breakpoint(phone) { .Button .Text { display: none; diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 16ec9bea..ad34982e 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -1,19 +1,183 @@ -import React from 'react' +import React, { useState } from 'react' +import { useSnapshot } from 'valtio' +import { deleteCookie } from 'cookies-next' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' + +import clonedeep from 'lodash.clonedeep' + +import api from '~utils/api' +import { accountState, initialAccountState } from '~utils/accountState' +import { appState, initialAppState } from '~utils/appState' + +import Button from '~components/Button' +import HeaderMenu from '~components/HeaderMenu' + +import AddIcon from '~public/icons/Add.svg' +import LinkIcon from '~public/icons/Link.svg' +import MenuIcon from '~public/icons/Menu.svg' +import SaveIcon from '~public/icons/Save.svg' +import classNames from 'classnames' import './index.scss' -interface Props { - position: 'top' | 'bottom' - left: JSX.Element - right: JSX.Element -} +const Header = () => { + // Localization + const { t } = useTranslation('common') + + // Router + const router = useRouter() + + // State management + + // Snapshots + const { account } = useSnapshot(accountState) + const { party } = useSnapshot(appState) + + function onClickOutsideMenu() { + setOpen(!open) + } + + function copyToClipboard() { + const el = document.createElement('input') + el.value = window.location.href + el.id = 'url-input' + document.body.appendChild(el) + + el.select() + document.execCommand('copy') + el.remove() + } + + function newParty() { + // Push the root URL + router.push('/') + + // Clean state + const resetState = clonedeep(initialAppState) + Object.keys(resetState).forEach((key) => { + appState[key] = resetState[key] + }) + + // Set party to be editable + appState.party.editable = true + } + + function logout() { + deleteCookie('account') + deleteCookie('user') + + // Clean state + const resetState = clonedeep(initialAccountState) + Object.keys(resetState).forEach((key) => { + if (key !== 'language') accountState[key] = resetState[key] + }) + + if (router.route != '/new') appState.party.editable = false + + router.push('/') + return false + } + + function toggleFavorite() { + if (party.favorited) unsaveFavorite() + else saveFavorite() + } + + function saveFavorite() { + if (party.id) + api.saveTeam({ id: party.id, params: headers }).then((response) => { + if (response.status == 201) appState.party.favorited = true + }) + else console.error('Failed to save team: No party ID') + } + + function unsaveFavorite() { + if (party.id) + api.unsaveTeam({ id: party.id, params: headers }).then((response) => { + if (response.status == 200) appState.party.favorited = false + }) + else console.error('Failed to unsave team: No party ID') + } + + const copyButton = () => { + if (router.route === '/p/[party]') + return ( +