granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Another mobile hotfix

Browse source
This commit is contained in:
Justin Edmund 2022-12-26 15:03:08 -08:00
parent f1f776119d
commit 12ccc53126
10 changed files with 161 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
components/FilterBar/index.scss
View file

@ -1,10 +1,11 @@
.FilterBar { .FilterBar {
align-items: center; align-items: center;
background: var(--bar-bg); background: var(--bar-bg);
border-radius: 6px; border-radius: $card-corner;
box-sizing: border-box;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $unit * 2; gap: $unit-2x;
margin: 0 auto; margin: 0 auto;
margin-top: 7px; // Line up with HeaderMenu margin-top: 7px; // Line up with HeaderMenu
padding: $unit * 2; padding: $unit * 2;
@ -13,6 +14,26 @@
top: $unit * 4; top: $unit * 4;
width: 966px; width: 966px;
@media (max-width: $tablet) {
position: static;
flex-direction: column;
width: 100%;
}
.Filters {
display: flex;
box-sizing: border-box;
flex-direction: row;
flex-grow: 1;
gap: $unit;
width: auto;
@media (max-width: $tablet) {
flex-direction: column;
width: 100%;
}
}
&.shadow { &.shadow {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
} }
@ -41,6 +62,12 @@
&:hover { &:hover {
background-color: var(--select-contained-bg-hover); background-color: var(--select-contained-bg-hover);
} }
@media (max-width: $tablet) {
width: 100%;
max-width: inherit;
text-align: center;
}
} }
.SelectTrigger { .SelectTrigger {

138
components/FilterBar/index.tsx
View file

@ -68,76 +68,78 @@ const FilterBar = (props: Props) => {
return ( return (
<div className={classes}> <div className={classes}>
{props.children} {props.children}
<Select <div className="Filters">
value={`${props.element}`} <Select
open={elementOpen} value={`${props.element}`}
onOpenChange={() => onSelectChange('element')} open={elementOpen}
onValueChange={elementSelectChanged} onOpenChange={() => onSelectChange('element')}
onClick={openElementSelect} onValueChange={elementSelectChanged}
> onClick={openElementSelect}
<SelectItem data-element="all" key={-1} value={-1}> >
{t('elements.full.all')} <SelectItem data-element="all" key={-1} value={-1}>
</SelectItem> {t('elements.full.all')}
<SelectItem data-element="null" key={0} value={0}> </SelectItem>
{t('elements.full.null')} <SelectItem data-element="null" key={0} value={0}>
</SelectItem> {t('elements.full.null')}
<SelectItem data-element="wind" key={1} value={1}> </SelectItem>
{t('elements.full.wind')} <SelectItem data-element="wind" key={1} value={1}>
</SelectItem> {t('elements.full.wind')}
<SelectItem data-element="fire" key={2} value={2}> </SelectItem>
{t('elements.full.fire')} <SelectItem data-element="fire" key={2} value={2}>
</SelectItem> {t('elements.full.fire')}
<SelectItem data-element="water" key={3} value={3}> </SelectItem>
{t('elements.full.water')} <SelectItem data-element="water" key={3} value={3}>
</SelectItem> {t('elements.full.water')}
<SelectItem data-element="earth" key={4} value={4}> </SelectItem>
{t('elements.full.earth')} <SelectItem data-element="earth" key={4} value={4}>
</SelectItem> {t('elements.full.earth')}
<SelectItem data-element="dark" key={5} value={5}> </SelectItem>
{t('elements.full.dark')} <SelectItem data-element="dark" key={5} value={5}>
</SelectItem> {t('elements.full.dark')}
<SelectItem data-element="light" key={6} value={6}> </SelectItem>
{t('elements.full.light')} <SelectItem data-element="light" key={6} value={6}>
</SelectItem> {t('elements.full.light')}
</Select> </SelectItem>
</Select>
<RaidDropdown <RaidDropdown
currentRaid={props.raidSlug} currentRaid={props.raidSlug}
defaultRaid="all" defaultRaid="all"
showAllRaidsOption={true} showAllRaidsOption={true}
onChange={raidSelectChanged} onChange={raidSelectChanged}
/> />
<Select <Select
value={`${props.recency}`} value={`${props.recency}`}
trigger={'All time'} trigger={'All time'}
open={recencyOpen} open={recencyOpen}
onOpenChange={() => onSelectChange('recency')} onOpenChange={() => onSelectChange('recency')}
onValueChange={recencySelectChanged} onValueChange={recencySelectChanged}
onClick={openRecencySelect} onClick={openRecencySelect}
> >
<SelectItem key={-1} value={-1}> <SelectItem key={-1} value={-1}>
{t('recency.all_time')} {t('recency.all_time')}
</SelectItem> </SelectItem>
<SelectItem key={86400} value={86400}> <SelectItem key={86400} value={86400}>
{t('recency.last_day')} {t('recency.last_day')}
</SelectItem> </SelectItem>
<SelectItem key={604800} value={604800}> <SelectItem key={604800} value={604800}>
{t('recency.last_week')} {t('recency.last_week')}
</SelectItem> </SelectItem>
<SelectItem key={2629746} value={2629746}> <SelectItem key={2629746} value={2629746}>
{t('recency.last_month')} {t('recency.last_month')}
</SelectItem> </SelectItem>
<SelectItem key={7889238} value={7889238}> <SelectItem key={7889238} value={7889238}>
{t('recency.last_3_months')} {t('recency.last_3_months')}
</SelectItem> </SelectItem>
<SelectItem key={15778476} value={15778476}> <SelectItem key={15778476} value={15778476}>
{t('recency.last_6_months')} {t('recency.last_6_months')}
</SelectItem> </SelectItem>
<SelectItem key={31556952} value={31556952}> <SelectItem key={31556952} value={31556952}>
{t('recency.last_year')} {t('recency.last_year')}
</SelectItem> </SelectItem>
</Select> </Select>
</div>
</div> </div>
) )
} }

5
components/PartyDetails/index.scss
View file

@ -84,6 +84,11 @@
width: 60%; width: 60%;
height: 60%; height: 60%;
@media (max-width: $tablet) {
width: 100%;
height: 100%;
}
/* gradient */ /* gradient */
&::before { &::before {
content: ''; content: '';

5
components/PartySegmentedControl/index.scss
View file

@ -10,13 +10,16 @@
@media (max-width: $phone) { @media (max-width: $phone) {
gap: $unit; gap: $unit;
justify-content: flex-start;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
padding: 0 $unit; padding: 0 $unit;
max-width: auto; max-width: auto;
width: 100%; width: 100%;
&.Editable {
justify-content: flex-start;
}
.SegmentedControl { .SegmentedControl {
flex-grow: 1; flex-grow: 1;
} }

8
components/PartySegmentedControl/index.tsx
View file

@ -11,6 +11,7 @@ import ToggleSwitch from '~components/ToggleSwitch'
import { GridType } from '~utils/enums' import { GridType } from '~utils/enums'
import './index.scss' import './index.scss'
import classNames from 'classnames'
interface Props { interface Props {
selectedTab: GridType selectedTab: GridType
@ -64,7 +65,12 @@ const PartySegmentedControl = (props: Props) => {
) )
return ( return (
<div className="PartyNavigation"> <div
className={classNames({
PartyNavigation: true,
Editable: party.editable,
})}
>
<SegmentedControl elementClass={getElement()}> <SegmentedControl elementClass={getElement()}>
{/* <Segment {/* <Segment
groupName="grid" groupName="grid"

38
components/UncapStar/index.scss
View file

@ -1,12 +1,20 @@
.UncapStar { .UncapStar {
background-repeat: no-repeat; $size: 18px;
background-size: 18px 18px;
display: block;
height: 18px;
width: 18px;
&:hover { @media (max-width: $tablet) {
transform: scale(1.2); $size: 12px;
}
background-repeat: no-repeat;
background-size: $size;
display: block;
height: $size;
width: $size;
@media (min-width: $laptop) {
&:hover {
transform: scale(1.2);
}
} }
&.empty, &.empty,
@ -14,23 +22,23 @@
&.empty.flb, &.empty.flb,
&.empty.ulb, &.empty.ulb,
&.empty.special { &.empty.special {
background: url('/icons/uncap/empty.svg'); background-image: url('/icons/uncap/empty.svg');
&:hover { &:hover {
background: url('/icons/uncap/empty-hover.svg'); background-image: url('/icons/uncap/empty-hover.svg');
} }
} }
&.mlb { &.mlb {
background: url('/icons/uncap/yellow.svg'); background-image: url('/icons/uncap/yellow.svg');
&:hover { &:hover {
background: url('/icons/uncap/yellow-hover.svg'); background-image: url('/icons/uncap/yellow-hover.svg');
} }
} }
&.special { &.special {
background: url('/icons/uncap/red.svg'); background-image: url('/icons/uncap/red.svg');
&:hover { &:hover {
background: url('/icons/uncap/red-hover.svg'); background: url('/icons/uncap/red-hover.svg');
@ -38,7 +46,7 @@
} }
&.flb { &.flb {
background: url('/icons/uncap/blue.svg'); background-image: url('/icons/uncap/blue.svg');
&:hover { &:hover {
background: url('/icons/uncap/blue-hover.svg'); background: url('/icons/uncap/blue-hover.svg');
@ -46,10 +54,10 @@
} }
&.ulb { &.ulb {
background: url('/icons/uncap/purple.svg'); background-image: url('/icons/uncap/purple.svg');
&:hover { &:hover {
background: url('/icons/uncap/purple-hover.svg'); background-image: url('/icons/uncap/purple-hover.svg');
} }
} }
} }

20
components/WeaponGrid/index.scss
View file

@ -2,6 +2,11 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
@media (max-width: $phone) {
display: grid;
grid-template-columns: 1fr auto;
}
.grid_weapons { .grid_weapons {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
@ -15,12 +20,17 @@
#MainGrid, #MainGrid,
#ExtraGrid { #ExtraGrid {
.grid_weapons > * { .grid_weapons > * {
margin-bottom: $unit * 3; margin-bottom: $unit-3x;
margin-right: $unit * 3; margin-right: $unit-3x;
@media (max-width: $medium-screen) { @media (max-width: $tablet) {
margin-bottom: $unit * 2; margin-bottom: $unit-2x;
margin-right: $unit * 2; margin-right: $unit-2x;
}
@media (max-width: $phone) {
margin-bottom: $unit;
margin-right: $unit;
} }
&:nth-last-child(-n + 3) { &:nth-last-child(-n + 3) {

10
components/WeaponUnit/index.scss
View file

@ -25,11 +25,15 @@
} }
&.mainhand { &.mainhand {
margin-right: $unit * 3; margin-right: $unit-3x;
max-width: 200px; max-width: 200px;
@media (max-width: $medium-screen) { @media (max-width: $tablet) {
margin-right: $unit * 2; margin-right: $unit-2x;
}
@media (max-width: $phone) {
margin-right: $unit;
} }
&.editable .WeaponImage:hover { &.editable .WeaponImage:hover {

6
styles/globals.scss
View file

@ -303,9 +303,3 @@ i.tag {
transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);
} }
} }
@media (max-width: $phone) {
body {
padding: $unit !important;
}
}

1
styles/variables.scss
View file

@ -21,6 +21,7 @@ $unit: 8px;
$unit-fourth: calc($unit / 4); $unit-fourth: calc($unit / 4);
$unit-half: calc($unit / 2); $unit-half: calc($unit / 2);
$unit-2x: $unit * 2; $unit-2x: $unit * 2;
$unit-3x: $unit * 3;
$unit-4x: $unit * 4; $unit-4x: $unit * 4;
$unit-6x: $unit * 6; $unit-6x: $unit * 6;
$unit-8x: $unit * 8; $unit-8x: $unit * 8;