Mobile - Patch v3.0.6

SlamTheDragon · Sep 15, 2023 · 9dbeb17 · 9dbeb17
1 parent 5c3ace2
commit 9dbeb17
Show file tree

Hide file tree

Showing 10 changed files with 201 additions and 38 deletions.
diff --git a/v3main/package-lock.json b/v3main/package-lock.json
diff --git 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
@@ -48,10 +48,10 @@ export default function Interface() {
     function renderInterface() {
         if (checkDevice()) {
             return (content) ?
-                <div className={style.innerInterface} style={{ filter: `blur(${(isNavOpen) ? 60 : 0}px)` }}>
+                <div className={style.innerInterface} style={{ filter: `blur(${(isNavOpen) ? 20 : 0}px)` }}>
                     <Gallery />
                 </div> :
-                <div className={style.innerInterface} style={{ filter: `blur(${(isNavOpen) ? 60 : 0}px)` }} onScroll={transferScrollData}>
+                <div className={style.innerInterface} style={{ filter: `blur(${(isNavOpen) ? 20 : 0}px)` }} onScroll={transferScrollData}>
                     <WelcomeHeaderMobile />
                     <CommissionPrices />
                 </div>

diff --git 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
@@ -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
@@ -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,38 +53,109 @@ export default function CommissionPrices() {
 			<section className={style.PricesWrapper + " snap"} id='offers'>
 				{/* background wrapper */}
 				<div className={style.pricesContainer}>
-					<div className={style.priceNavigator} style={{ width: `${getIsFolded ? 72.72 : 259.76}px` }}>
+					{(checkDevice()) ? <></> :
+						<div className={style.priceNavigator} style={{ width: `${getIsFolded ? 72.72 : 259.76}px` }}>
+
+							<div className={style.s1} style={{ padding: `40px ${getIsFolded ? 6.7 : 30}px` }}>
+								{/* hamburg */}
+								<Button onClick={toggleFold} titleTooltip='Toggle Menu'>
+									<Menu />
+								</Button>
+
+								<Button onClick={() => {
+									dispatch(setPanelTarget(0))
+									if (checkDevice()) {
+										dispatch(setPanelFold(true))
+									}
+								}}
+									classItem={target === 0 ? style.btnSelected : ''}
+									titleTooltip='About SlamTheDragon'>
+									<Logo />
+									<span>SlamTheDragon</span>
+								</Button>
+							</div>
+
+							<div className={style.s2} style={{ padding: `40px ${getIsFolded ? 6.7 : 30}px` }}>
+								{/* profile */}
+								<Button onClick={() => {
+									dispatch(setPanelTarget(1))
+									if (checkDevice()) {
+										dispatch(setPanelFold(true))
+									}
+								}}
+									classItem={target === 1 ? style.btnSelected : ''}
+									titleTooltip='Portraits'>
+									<Person />
+									<span>Portraits</span>
+								</Button>
+
+								{/* illustrations */}
+								<Button onClick={() => {
+									dispatch(setPanelTarget(2))
+									if (checkDevice()) {
+										dispatch(setPanelFold(true))
+									}
+								}}
+									classItem={target === 2 ? style.btnSelected : ''}
+									titleTooltip='Illustrations'>
+									<Panorama />
+									<span>Illustrations</span>
+								</Button>
+
+								{/* others */}
+								<Button onClick={() => {
+									dispatch(setPanelTarget(3))
+									if (checkDevice()) {
+										dispatch(setPanelFold(true))
+									}
+								}}
+									classItem={target === 3 ? style.btnSelected : ''}
+									titleTooltip='Others/Special Request'
+								>
+									<Apps />
+									<span>Others</span>
+								</Button>
+							</div>
+
+							<div className={style.s3} style={{ padding: `40px ${getIsFolded ? 6.7 : 30}px` }}></div>
+						</div>
+					}
+					{(!checkDevice()) ?
+						<div className={style.priceViewer} style={{ width: `${getIsFolded ? 1226.94 : 1041.6}px` }}>
+							{renderView()}
+						</div> :
+						<div className={style.priceViewer} onClick={() => { focusComponent('empty') }}>
+							{renderView()}
+						</div>
+					}
+				</div>
 
-						<div className={style.s1} style={{ padding: `40px ${getIsFolded ? 6.7 : 30}px` }}>
-							{/* hamburg */}
-							<Button onClick={toggleFold} titleTooltip='Toggle Menu'>
-								<Menu />
-							</Button>
+				{(!checkDevice()) ? <></> :
+					<div className={style.mobileNavigatorContainer}>
+						<div className={style.mobileDrawerSpace} id='empty' tabIndex={0}></div>
 
+						<div className={style.mobileDrawer} style={{ pointerEvents: 'all' }}>
+							<div className={style.mobileDrawerKnob}></div>
 							<Button onClick={() => {
 								dispatch(setPanelTarget(0))
 								if (checkDevice()) {
 									dispatch(setPanelFold(true))
 								}
 							}}
-								classItem={target === 0 ? style.btnSelected : ''}
+								classItem={target === 0 ? 'primary' : ''}
 								titleTooltip='About SlamTheDragon'>
-								<Logo />
-								<span>SlamTheDragon</span>
+								<span>About Me</span>
 							</Button>
-						</div>
 
-						<div className={style.s2} style={{ padding: `40px ${getIsFolded ? 6.7 : 30}px` }}>
 							{/* profile */}
 							<Button onClick={() => {
 								dispatch(setPanelTarget(1))
 								if (checkDevice()) {
 									dispatch(setPanelFold(true))
 								}
 							}}
-								classItem={target === 1 ? style.btnSelected : ''}
+								classItem={target === 1 ? 'primary' : ''}
 								titleTooltip='Portraits'>
-								<Person />
 								<span>Portraits</span>
 							</Button>
 
@@ -94,9 +166,8 @@ export default function CommissionPrices() {
 									dispatch(setPanelFold(true))
 								}
 							}}
-								classItem={target === 2 ? style.btnSelected : ''}
+								classItem={target === 2 ? 'primary' : ''}
 								titleTooltip='Illustrations'>
-								<Panorama />
 								<span>Illustrations</span>
 							</Button>
 
@@ -107,21 +178,15 @@ export default function CommissionPrices() {
 									dispatch(setPanelFold(true))
 								}
 							}}
-								classItem={target === 3 ? style.btnSelected : ''}
+								classItem={target === 3 ? 'primary' : ''}
 								titleTooltip='Others/Special Request'
 							>
-								<Apps />
 								<span>Others</span>
 							</Button>
-						</div>
-
-						<div className={style.s3} style={{ padding: `40px ${getIsFolded ? 6.7 : 30}px` }}></div>
-					</div>
 
-					<div className={style.priceViewer} style={{ width: `${getIsFolded ? 1226.94 : 1041.6}px` }}>
-						{renderView()}
+						</div>
 					</div>
-				</div>
+				}
 			</section>
 		</>
 	)

diff --git 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
@@ -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<boolean | undefined>(GetSnapshot.status);

diff --git a/v3status/package-lock.json b/v3status/package-lock.json
diff --git 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",