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

138
components/FilterBar/index.tsx
View file

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

5
components/PartyDetails/index.scss
View file

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

5
components/PartySegmentedControl/index.scss
View file

@ -10,13 +10,16 @@
@media (max-width: $phone) {
gap: $unit;
justify-content: flex-start;
margin-left: 0;
margin-right: 0;
padding: 0 $unit;
max-width: auto;
width: 100%;
&.Editable {
justify-content: flex-start;
}
.SegmentedControl {
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 './index.scss'
import classNames from 'classnames'
interface Props {
selectedTab: GridType
@ -64,7 +65,12 @@ const PartySegmentedControl = (props: Props) => {
)
return (
<div className="PartyNavigation">
<div
className={classNames({
PartyNavigation: true,
Editable: party.editable,
})}
>
<SegmentedControl elementClass={getElement()}>
{/* <Segment
groupName="grid"

38
components/UncapStar/index.scss
View file

@ -1,12 +1,20 @@
.UncapStar {
background-repeat: no-repeat;
background-size: 18px 18px;
display: block;
height: 18px;
width: 18px;
$size: 18px;
&:hover {
transform: scale(1.2);
@media (max-width: $tablet) {
$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,
@ -14,23 +22,23 @@
&.empty.flb,
&.empty.ulb,
&.empty.special {
background: url('/icons/uncap/empty.svg');
background-image: url('/icons/uncap/empty.svg');
&:hover {
background: url('/icons/uncap/empty-hover.svg');
background-image: url('/icons/uncap/empty-hover.svg');
}
}
&.mlb {
background: url('/icons/uncap/yellow.svg');
background-image: url('/icons/uncap/yellow.svg');
&:hover {
background: url('/icons/uncap/yellow-hover.svg');
background-image: url('/icons/uncap/yellow-hover.svg');
}
}
&.special {
background: url('/icons/uncap/red.svg');
background-image: url('/icons/uncap/red.svg');
&:hover {
background: url('/icons/uncap/red-hover.svg');
@ -38,7 +46,7 @@
}
&.flb {
background: url('/icons/uncap/blue.svg');
background-image: url('/icons/uncap/blue.svg');
&:hover {
background: url('/icons/uncap/blue-hover.svg');
@ -46,10 +54,10 @@
}
&.ulb {
background: url('/icons/uncap/purple.svg');
background-image: url('/icons/uncap/purple.svg');
&: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;
justify-content: center;
@media (max-width: $phone) {
display: grid;
grid-template-columns: 1fr auto;
}
.grid_weapons {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
@ -15,12 +20,17 @@
#MainGrid,
#ExtraGrid {
.grid_weapons > * {
margin-bottom: $unit * 3;
margin-right: $unit * 3;
margin-bottom: $unit-3x;
margin-right: $unit-3x;
@media (max-width: $medium-screen) {
margin-bottom: $unit * 2;
margin-right: $unit * 2;
@media (max-width: $tablet) {
margin-bottom: $unit-2x;
margin-right: $unit-2x;
}
@media (max-width: $phone) {
margin-bottom: $unit;
margin-right: $unit;
}
&:nth-last-child(-n + 3) {

10
components/WeaponUnit/index.scss
View file

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

6
styles/globals.scss
View file

@ -303,9 +303,3 @@ i.tag {
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-half: calc($unit / 2);
$unit-2x: $unit * 2;
$unit-3x: $unit * 3;
$unit-4x: $unit * 4;
$unit-6x: $unit * 6;
$unit-8x: $unit * 8;