From 9dbeb17554e24731485410dd71db63c96258ab13 Mon Sep 17 00:00:00 2001 From: SlamTheDragon <98795769+SlamTheDragon@users.noreply.github.com> Date: Fri, 15 Sep 2023 19:15:45 +0800 Subject: [PATCH] Mobile - Patch v3.0.6 --- v3main/package-lock.json | 2 +- v3main/package.json | 2 +- .../src/components/.Interface/Interface.tsx | 4 +- .../PanelPortraits/Portraits.tsx | 1 - .../PanelPortraits/portraits.module.scss | 31 ++++- .../CPricesSection/CommissionPrices.tsx | 113 ++++++++++++++---- .../commissionPrices.module.scss | 81 ++++++++++++- .../WelcomeHeaderDesktop/Splash.tsx | 1 - v3status/package-lock.json | 2 +- v3status/package.json | 2 +- 10 files changed, 201 insertions(+), 38 deletions(-) diff --git a/v3main/package-lock.json b/v3main/package-lock.json index b976ada..5b1a48b 100644 --- a/v3main/package-lock.json +++ b/v3main/package-lock.json @@ -1,6 +1,6 @@ { "name": "slamthedragon-webapp-main", - "version": "3.0.5", + "version": "3.0.6", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/v3main/package.json b/v3main/package.json index 5a469af..14b3cd6 100644 --- a/v3main/package.json +++ b/v3main/package.json @@ -1,6 +1,6 @@ { "name": "slamthedragon-webapp-main", - "version": "3.0.5", + "version": "3.0.6", "private": true, "dependencies": { "@material-design-icons/svg": "^0.14.10", diff --git a/v3main/src/components/.Interface/Interface.tsx b/v3main/src/components/.Interface/Interface.tsx index f225118..bdc2ff7 100644 --- a/v3main/src/components/.Interface/Interface.tsx +++ b/v3main/src/components/.Interface/Interface.tsx @@ -48,10 +48,10 @@ export default function Interface() { function renderInterface() { if (checkDevice()) { return (content) ? -
+
: -
+
diff --git a/v3main/src/components/widgets/ICommission/CPricesPanels/PanelPortraits/Portraits.tsx b/v3main/src/components/widgets/ICommission/CPricesPanels/PanelPortraits/Portraits.tsx index 3678629..d07157d 100644 --- a/v3main/src/components/widgets/ICommission/CPricesPanels/PanelPortraits/Portraits.tsx +++ b/v3main/src/components/widgets/ICommission/CPricesPanels/PanelPortraits/Portraits.tsx @@ -1,5 +1,4 @@ import { useEffect, useState } from 'react' -import { ModalOperation } from '../../../../../utils/component-utils/modalOperation' import { GetSnapshot, SnapshotNotify } from '../../../../../utils/firebase/getsnapshot' import Button from '../../../../common/Button' import PortraitHeader from './PortraitHeader' diff --git a/v3main/src/components/widgets/ICommission/CPricesPanels/PanelPortraits/portraits.module.scss b/v3main/src/components/widgets/ICommission/CPricesPanels/PanelPortraits/portraits.module.scss index 01ba410..534295f 100644 --- a/v3main/src/components/widgets/ICommission/CPricesPanels/PanelPortraits/portraits.module.scss +++ b/v3main/src/components/widgets/ICommission/CPricesPanels/PanelPortraits/portraits.module.scss @@ -127,10 +127,6 @@ $_gap: 20px; gap: $_gap - 5; flex-direction: row; width: 100%; - - // button { - // width: 100%; - // } } button { @@ -145,3 +141,30 @@ $_gap: 20px; } } } + +@media only screen and (max-width: 430px) { + .PortraitsContainer { + .navigator { + @include wight(100%, 80px); + + justify-content: flex-start; + + border-radius: unset; + overflow: hidden; + overflow-x: scroll; + + gap: $_gap - 7; + + .subNavigator { + gap: $_gap - 12; + border-radius: unset; + } + + button { + border-radius: $global-border-radius; + text-overflow: ellipsis; + text-wrap: nowrap; + } + } + } +} diff --git a/v3main/src/components/widgets/ICommission/CPricesSection/CommissionPrices.tsx b/v3main/src/components/widgets/ICommission/CPricesSection/CommissionPrices.tsx index e8bc50e..0563228 100644 --- a/v3main/src/components/widgets/ICommission/CPricesSection/CommissionPrices.tsx +++ b/v3main/src/components/widgets/ICommission/CPricesSection/CommissionPrices.tsx @@ -6,6 +6,7 @@ import { ReactComponent as Apps } from '@material-design-icons/svg/outlined/apps import { ReactComponent as Logo } from '../../../../assets/svg/SlamTheDragon Logo.svg' import { getTarget, setPanelTarget } from '../../../slice/commission-panel-slices/panelViewSlice' import { getFoldState, setPanelFold } from '../../../slice/commission-panel-slices/collapseNavSlice' +import { focusComponent } from '../../../../utils/focus-element/focusElement' import { checkDevice } from '../../../../utils/device-checker/checkDevice' import AboutMe from '../CPricesPanels/PanelAboutMe/' import Portraits from '../CPricesPanels/PanelPortraits/' @@ -52,28 +53,100 @@ export default function CommissionPrices() {
{/* background wrapper */}
-
+ {(checkDevice()) ? <> : +
+ +
+ {/* hamburg */} + + + +
+ +
+ {/* profile */} + + + {/* illustrations */} + + + {/* others */} + +
+ +
+
+ } + {(!checkDevice()) ? +
+ {renderView()} +
: +
{ focusComponent('empty') }}> + {renderView()} +
+ } +
-
- {/* hamburg */} - + {(!checkDevice()) ? <> : +
+
+
+
-
-
{/* profile */} @@ -94,9 +166,8 @@ export default function CommissionPrices() { dispatch(setPanelFold(true)) } }} - classItem={target === 2 ? style.btnSelected : ''} + classItem={target === 2 ? 'primary' : ''} titleTooltip='Illustrations'> - Illustrations @@ -107,21 +178,15 @@ export default function CommissionPrices() { dispatch(setPanelFold(true)) } }} - classItem={target === 3 ? style.btnSelected : ''} + classItem={target === 3 ? 'primary' : ''} titleTooltip='Others/Special Request' > - Others -
- -
-
-
- {renderView()} +
-
+ }
) diff --git a/v3main/src/components/widgets/ICommission/CPricesSection/commissionPrices.module.scss b/v3main/src/components/widgets/ICommission/CPricesSection/commissionPrices.module.scss index ed53c57..0f1a021 100644 --- a/v3main/src/components/widgets/ICommission/CPricesSection/commissionPrices.module.scss +++ b/v3main/src/components/widgets/ICommission/CPricesSection/commissionPrices.module.scss @@ -16,8 +16,6 @@ } span { - // @include flex-center; - text-overflow: ellipsis; width: 100%; margin-left: 20px; @@ -52,6 +50,10 @@ background-color: $background-color; + .mobileNavigator { + display: none; + } + .pricesContainer { @include ext-a-container; @include flex-center; @@ -180,3 +182,78 @@ } } } + +@media only screen and (max-width: 1030px) { + .PricesWrapper { + .pricesContainer { + margin: 0; + width: 100%; + max-width: 100%; + + .priceViewer { + @include wight(100%, 80%); //FIXME: make inner views for comms 95% + } + } + + .mobileNavigatorContainer { + @include wight(100%, 100vh); + @include max-wight(100%, 100vh); + + z-index: 10000; + justify-content: flex-end; + position: absolute; + overflow: hidden; + overflow-y: scroll; + top: 0; + + outline: 1px solid $tone2; + scroll-snap-type: y mandatory; + pointer-events: none; + + .mobileDrawerSpace { + @include wight(100%, 90%); + scroll-snap-align: center; + + &:focus-visible { + outline: unset; + } + } + + .mobileDrawer { + @include wight(100%, max-content); + @include flex-center; + + // margin-top: 20px; + padding: 0 0 100px 0; + flex-direction: column; + background-color: $tone1; + scroll-snap-align: center; + gap: 10px; + + border-radius: $global-border-radius $global-border-radius 0 0; + + pointer-events: all; + + .mobileDrawerKnob { + @include wight(15%, 5px); + + margin: 10px auto 60px auto; + + background-color: $tone3; + + border-radius: $global-border-radius; + pointer-events: all; + } + + button { + @include buttonContent(); + width: 80%; + + span { + margin: unset; + } + } + } + } + } +} diff --git a/v3main/src/components/widgets/ICommission/WelcomeHeader/WelcomeHeaderDesktop/Splash.tsx b/v3main/src/components/widgets/ICommission/WelcomeHeader/WelcomeHeaderDesktop/Splash.tsx index f541331..236cc96 100644 --- a/v3main/src/components/widgets/ICommission/WelcomeHeader/WelcomeHeaderDesktop/Splash.tsx +++ b/v3main/src/components/widgets/ICommission/WelcomeHeader/WelcomeHeaderDesktop/Splash.tsx @@ -5,7 +5,6 @@ import { useEffect, useState } from 'react'; import Button from '../../../../common/Button' import ChipLoader from '../../../../common/ChipLoader/ChipLoader'; import style from './welcomeheader.module.scss' -import { Logging } from '../../../../../utils/logger'; export default function Splash() { const [status, setStatus] = useState(GetSnapshot.status); diff --git a/v3status/package-lock.json b/v3status/package-lock.json index b976ada..5b1a48b 100644 --- a/v3status/package-lock.json +++ b/v3status/package-lock.json @@ -1,6 +1,6 @@ { "name": "slamthedragon-webapp-main", - "version": "3.0.5", + "version": "3.0.6", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/v3status/package.json b/v3status/package.json index a762b2f..cb062a3 100644 --- a/v3status/package.json +++ b/v3status/package.json @@ -1,6 +1,6 @@ { "name": "slamthedragon-webapp-main", - "version": "3.0.5", + "version": "3.0.6", "private": true, "dependencies": { "@material-design-icons/svg": "^0.14.10",