Merge pull request #3 from SlamTheDragon/dev

Mobile Update 1 | Patch v3.0.4
SlamTheDragon · Sep 13, 2023 · 5b7d7f7 · 5b7d7f7
2 parents fc8072c + 115059a
commit 5b7d7f7
Show file tree

Hide file tree

Showing 76 changed files with 387 additions and 97 deletions.
diff --git a/static/css/main.css b/static/css/main.css
diff --git a/static/css/main.css.map b/static/css/main.css.map
diff --git a/static/js/main.js b/static/js/main.js
diff --git a/static/js/main.js.map b/static/js/main.js.map
diff --git a/static/js/status.js b/static/js/status.js
diff --git a/static/media/Placeholder.3df45ac6bcca5e589df2 copy.png b/static/media/Placeholder.3df45ac6bcca5e589df2 copy.png
diff --git a/static/media/Poppins-Black.5d04762a4d2605958eb6 copy.woff b/static/media/Poppins-Black.5d04762a4d2605958eb6 copy.woff
diff --git a/static/media/Poppins-Black.9f8a4a5f1e0fe91ec9f7 copy.woff2 b/static/media/Poppins-Black.9f8a4a5f1e0fe91ec9f7 copy.woff2
diff --git a/static/media/Poppins-BlackItalic.5853a96ec18aa08b3a15 copy.woff b/static/media/Poppins-BlackItalic.5853a96ec18aa08b3a15 copy.woff
diff --git a/static/media/Poppins-BlackItalic.8b2173d8ca7218c9aa98 copy.woff2 b/static/media/Poppins-BlackItalic.8b2173d8ca7218c9aa98 copy.woff2
diff --git a/static/media/Poppins-Bold.a6b628bdef91e927b77c copy.woff b/static/media/Poppins-Bold.a6b628bdef91e927b77c copy.woff
diff --git a/static/media/Poppins-Bold.dd24d10e037690f2bdcd copy.woff2 b/static/media/Poppins-Bold.dd24d10e037690f2bdcd copy.woff2
diff --git a/static/media/Poppins-BoldItalic.066192b3e079bf989a28 copy.woff b/static/media/Poppins-BoldItalic.066192b3e079bf989a28 copy.woff
diff --git a/static/media/Poppins-BoldItalic.18770f85e0c23fcc2822 copy.woff2 b/static/media/Poppins-BoldItalic.18770f85e0c23fcc2822 copy.woff2
diff --git a/static/media/Poppins-ExtraBold.5b57f3aae2d78f5ee992 copy.woff2 b/static/media/Poppins-ExtraBold.5b57f3aae2d78f5ee992 copy.woff2
diff --git a/static/media/Poppins-ExtraBold.ccb9c2051b79f6df27a2 copy.woff b/static/media/Poppins-ExtraBold.ccb9c2051b79f6df27a2 copy.woff
diff --git a/static/media/Poppins-ExtraBoldItalic.971d0eac32fdff44ef0a copy.woff2 b/static/media/Poppins-ExtraBoldItalic.971d0eac32fdff44ef0a copy.woff2
diff --git a/static/media/Poppins-ExtraBoldItalic.a0eb757c1156a6670626 copy.woff b/static/media/Poppins-ExtraBoldItalic.a0eb757c1156a6670626 copy.woff
diff --git a/static/media/Poppins-ExtraLight.52747ba12744d6335cc9 copy.woff b/static/media/Poppins-ExtraLight.52747ba12744d6335cc9 copy.woff
diff --git a/static/media/Poppins-ExtraLight.8a5423f83d49c5ba6eea copy.woff2 b/static/media/Poppins-ExtraLight.8a5423f83d49c5ba6eea copy.woff2
diff --git a/static/media/Poppins-ExtraLightItalic.55ba016002be15c32078 copy.woff2 b/static/media/Poppins-ExtraLightItalic.55ba016002be15c32078 copy.woff2
diff --git a/static/media/Poppins-ExtraLightItalic.7b781bcc5774b4ca3aef copy.woff b/static/media/Poppins-ExtraLightItalic.7b781bcc5774b4ca3aef copy.woff
diff --git a/static/media/Poppins-Italic.dce4482653df21326fb3 copy.woff b/static/media/Poppins-Italic.dce4482653df21326fb3 copy.woff
diff --git a/static/media/Poppins-Italic.f932365bae7a67562d50 copy.woff2 b/static/media/Poppins-Italic.f932365bae7a67562d50 copy.woff2
diff --git a/static/media/Poppins-Light.6f5b7a1c94cb6419bec4 copy.woff b/static/media/Poppins-Light.6f5b7a1c94cb6419bec4 copy.woff
diff --git a/static/media/Poppins-Light.9bec05ab7f83d34eb905 copy.woff2 b/static/media/Poppins-Light.9bec05ab7f83d34eb905 copy.woff2
diff --git a/static/media/Poppins-LightItalic.cbc254035fd2db12340f copy.woff b/static/media/Poppins-LightItalic.cbc254035fd2db12340f copy.woff
diff --git a/static/media/Poppins-LightItalic.f8fc4fd3d2ad4a00a9a2 copy.woff2 b/static/media/Poppins-LightItalic.f8fc4fd3d2ad4a00a9a2 copy.woff2
diff --git a/static/media/Poppins-Medium.563f976db73ca07d8fc3 copy.woff2 b/static/media/Poppins-Medium.563f976db73ca07d8fc3 copy.woff2
diff --git a/static/media/Poppins-Medium.7e588a26bdac2428f240 copy.woff b/static/media/Poppins-Medium.7e588a26bdac2428f240 copy.woff
diff --git a/static/media/Poppins-MediumItalic.38bd2f9c930011bc0e4f copy.woff b/static/media/Poppins-MediumItalic.38bd2f9c930011bc0e4f copy.woff
diff --git a/static/media/Poppins-MediumItalic.de07f277b373e75a16b2 copy.woff2 b/static/media/Poppins-MediumItalic.de07f277b373e75a16b2 copy.woff2
diff --git a/static/media/Poppins-Regular.387f9003f984ef1cec60 copy.woff b/static/media/Poppins-Regular.387f9003f984ef1cec60 copy.woff
diff --git a/static/media/Poppins-Regular.ad19729d6a0511212493 copy.woff2 b/static/media/Poppins-Regular.ad19729d6a0511212493 copy.woff2
diff --git a/static/media/Poppins-SemiBold.3c3f3613b59d581739fc copy.woff2 b/static/media/Poppins-SemiBold.3c3f3613b59d581739fc copy.woff2
diff --git a/static/media/Poppins-SemiBold.71da8e4f0d76b718897c copy.woff b/static/media/Poppins-SemiBold.71da8e4f0d76b718897c copy.woff
diff --git a/static/media/Poppins-SemiBoldItalic.6ad14e1bba33d088176b copy.woff2 b/static/media/Poppins-SemiBoldItalic.6ad14e1bba33d088176b copy.woff2
diff --git a/static/media/Poppins-SemiBoldItalic.ae7a11bcc58ca2e84f43 copy.woff b/static/media/Poppins-SemiBoldItalic.ae7a11bcc58ca2e84f43 copy.woff
diff --git a/static/media/Poppins-Thin.654968a8c2ee9e7c8bb6 copy.woff b/static/media/Poppins-Thin.654968a8c2ee9e7c8bb6 copy.woff
diff --git a/static/media/Poppins-Thin.852bafc278ec1d018963 copy.woff2 b/static/media/Poppins-Thin.852bafc278ec1d018963 copy.woff2
diff --git a/static/media/Poppins-ThinItalic.0996aa024c3d73abd3bb copy.woff2 b/static/media/Poppins-ThinItalic.0996aa024c3d73abd3bb copy.woff2
diff --git a/static/media/Poppins-ThinItalic.ed0c900126e6bfcf463c copy.woff b/static/media/Poppins-ThinItalic.ed0c900126e6bfcf463c copy.woff
diff --git a/static/media/SegoeUI-Bold.0ac1a7667d928aac19d9 copy.woff2 b/static/media/SegoeUI-Bold.0ac1a7667d928aac19d9 copy.woff2
diff --git a/static/media/SegoeUI-Bold.690474612e4b3b5c70af copy.woff b/static/media/SegoeUI-Bold.690474612e4b3b5c70af copy.woff
diff --git a/static/media/SegoeUI-BoldItalic.52ea3f2a9b61586c77f8 copy.woff b/static/media/SegoeUI-BoldItalic.52ea3f2a9b61586c77f8 copy.woff
diff --git a/static/media/SegoeUI-BoldItalic.9d97e295f15106b92820 copy.woff2 b/static/media/SegoeUI-BoldItalic.9d97e295f15106b92820 copy.woff2
diff --git a/static/media/SegoeUI-Italic.06058e4667b892bc38e1 copy.woff b/static/media/SegoeUI-Italic.06058e4667b892bc38e1 copy.woff
diff --git a/static/media/SegoeUI-Italic.80f5cd11cf880da16913 copy.woff2 b/static/media/SegoeUI-Italic.80f5cd11cf880da16913 copy.woff2
diff --git a/static/media/SegoeUI.40dea9899e829bfb595a copy.woff b/static/media/SegoeUI.40dea9899e829bfb595a copy.woff
diff --git a/static/media/SegoeUI.b55d28915ec9ca96c8fb copy.woff2 b/static/media/SegoeUI.b55d28915ec9ca96c8fb copy.woff2
diff --git a/static/media/SlamTheDragon Logo.d6f71469a6b4eaf4ccc7f89ee6da1cc9 copy.svg b/static/media/SlamTheDragon Logo.d6f71469a6b4eaf4ccc7f89ee6da1cc9 copy.svg
diff --git a/static/media/deviantartIcon.3dc541fd349fc545f33015104b28d612 copy.svg b/static/media/deviantartIcon.3dc541fd349fc545f33015104b28d612 copy.svg
diff --git a/static/media/discordIcon.705042aa107c5549d8758235313bf5e8 copy.svg b/static/media/discordIcon.705042aa107c5549d8758235313bf5e8 copy.svg
diff --git a/static/media/instagramIcon.8c812eacd61132e98e8a38696bbf5b3f copy.svg b/static/media/instagramIcon.8c812eacd61132e98e8a38696bbf5b3f copy.svg
diff --git a/static/media/kofiIcon.cb0c1ff86431efd42ca7136774f19b28 copy.svg b/static/media/kofiIcon.cb0c1ff86431efd42ca7136774f19b28 copy.svg
diff --git a/static/media/open_in_new.152ec273c24f4fa5e63d8fd4f74dcbef copy.svg b/static/media/open_in_new.152ec273c24f4fa5e63d8fd4f74dcbef copy.svg
diff --git a/static/media/threadsIcon.6a03c65776671963cecf17f0f25381c6 copy.svg b/static/media/threadsIcon.6a03c65776671963cecf17f0f25381c6 copy.svg
diff --git a/static/media/twitterIcon.6981b52aa845eca014559e1105c6d9d1 copy.svg b/static/media/twitterIcon.6981b52aa845eca014559e1105c6d9d1 copy.svg
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.3",
+  "version": "3.0.4",
   "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
@@ -1,3 +1,6 @@
+import { ReactComponent as Open } from '@material-design-icons/svg/outlined/open_in_new.svg';
+import { ReactComponent as Menu } from '@material-design-icons/svg/outlined/menu.svg'
+import { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { setScrollLayer } from '../slice/parallax-slices/parallaxScrollerSlice'
 import { checkDevice } from '../../utils/device-checker/checkDevice'
@@ -8,14 +11,19 @@ import CommissionPrices from '../widgets/ICommission/CPricesSection/CommissionPr
 import CommissionStatus from '../widgets/ICommission/CStatus/CommissionStatus'
 import Gallery from '../widgets/ICommission/Gallery/Gallery'
 import WelcomeHeaderMobile from '../widgets/ICommission/WelcomeHeader/WelcomeHeaderMobile'
+import FooterMobile from '../common/FooterMobile'
+import Button from '../common/Button'
 import style from './interface.module.scss'
 
+
 /**
  * This is your main interface, all components shall pass through here
  * @returns Interface
  */
 export default function Interface() {
     const dispatch = useDispatch()
+    const [isNavOpen, setNavOpen] = useState(false)
+    const [content, setContent] = useState(false)
 
     if (checkDevice()) {
         dispatch(setPanelFold(true))
@@ -25,14 +33,69 @@ export default function Interface() {
         dispatch(setScrollLayer(event.currentTarget.scrollTop))
     }
 
+    function toggleNav() {
+        setNavOpen(!isNavOpen)
+    }
+
+    function switchContent(origin: number) {
+        if (origin === 0) {
+            setContent(false)
+        } else {
+            setContent(true)
+        }
+    }
+
+    function renderInterface() {
+        if (checkDevice()) {
+            return (content) ?
+                <div className={style.innerInterface} style={{ filter: `blur(${(isNavOpen) ? 60 : 0}px)` }}>
+                    <Gallery />
+                </div> :
+                <div className={style.innerInterface} style={{ filter: `blur(${(isNavOpen) ? 60 : 0}px)` }} onScroll={transferScrollData}>
+                    <WelcomeHeaderMobile />
+                    <CommissionPrices />
+                </div>
+        } else {
+            return (
+                <div className={style.innerInterface} onScroll={transferScrollData}>
+                    <WelcomeHeaderDesktop />
+                    <CommissionPrices />
+                    <CommissionStatus />
+                    <Gallery />
+                    <Footer />
+                </div>
+            )
+        }
+    }
+
     return (
         <>
-            <div className={style.interface} onScroll={transferScrollData} id='view'>
-                {(checkDevice()) ? <WelcomeHeaderMobile /> : <WelcomeHeaderDesktop />}
-                <CommissionPrices />
-                {(checkDevice()) ? <></> : <CommissionStatus />}
-                <Gallery />
-                <Footer />
+            <div className={style.interface} id='view'>
+                <div className={style.navBtn}>
+                    <Button onClick={() => { toggleNav() }}>
+                        <Menu />
+                    </Button>
+                </div>
+                <div className={style.navContent} style={{ height: `${(isNavOpen) ? 100 : 0}%`, opacity: `${(isNavOpen) ? 1 : 0}` }} onClick={() => { toggleNav() }}>
+                    <h1>
+                        Menu
+                    </h1>
+                    <div className={style.navSelections}>
+                        <Button classItem={(content) ? '' : 'primary'} onClick={() => { switchContent(0); toggleNav() }}>
+                            Prices
+                        </Button>
+                        <Button classItem={(content) ? 'primary' : ''} onClick={() => { switchContent(1); toggleNav() }}>
+                            Finished Commissions
+                        </Button>
+                        <Button disabled={true}>
+                            Commission Queue <Open />
+                        </Button>
+                    </div>
+
+                    <FooterMobile />
+                </div>
+
+                {renderInterface()}
             </div>
         </>
     );

diff --git a/v3main/src/components/.Interface/interface.module.scss b/v3main/src/components/.Interface/interface.module.scss
@@ -1,27 +1,84 @@
 @import "../../index.scss";
 
 .interface {
-	$_thumb: $tone1;
-	$_track: $background-color;
+	.innerInterface {
+		@include transition-anim;
+		@include wight(100vw, 100vh);
 
-	@include wight(100vw, 100vh);
+		flex-direction: column;
 
-	flex-direction: column;
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: cover;
 
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
+		overflow-y: scroll;
+		overflow-x: hidden;
 
-	overflow-y: scroll;
-	overflow-x: hidden;
-
-	scroll-snap-type: unset;
-	scroll-snap-stop: unset;
+		scroll-snap-type: unset;
+		scroll-snap-stop: unset;
+	}
+	.navBtn,
+	.navContent {
+		display: none;
+	}
 }
 
 @media only screen and (max-width: 430px) {
 	.interface {
-		scroll-snap-type: y proximity;
-		scroll-snap-stop: normal;
+		.innerInterface {
+			scroll-snap-type: y proximity;
+			scroll-snap-stop: normal;
+		}
+		.navBtn {
+			width: 100%;
+			display: flex;
+			flex-direction: row;
+			justify-content: flex-end;
+			position: absolute;
+			z-index: 10000;
+			margin-top: 10px;
+
+			button {
+				box-shadow: unset;
+				-webkit-box-shadow: unset;
+				-moz-box-shadow: unset;
+				background-color: unset;
+			}
+		}
+
+		.navContent {
+			@include transition-anim;
+			@include wight(100%, 100%);
+			@include flex-center;
+
+			flex-direction: column;
+			justify-content: space-evenly;
+			position: absolute;
+			z-index: 9900;
+
+			overflow: hidden;
+
+			outline: 2px solid $tone1;
+			background-color: #0f182c5b;
+
+			.navSelections {
+				@include wight(80%, max-content);
+				@include flex-center;
+				flex-direction: column;
+
+				gap: 10px;
+
+				button {
+					// @include wight(100%, 100%);
+					@include flex-center;
+					gap: 10px;
+					width: 100%;
+
+					svg {
+						width: 14px;
+					}
+				}
+			}
+		}
 	}
 }
diff --git a/v3main/src/components/common/Button/button.module.scss b/v3main/src/components/common/Button/button.module.scss
@@ -34,5 +34,10 @@
 	&:disabled {
 		cursor: not-allowed;
 		background-color: $disabled;
+		color: $tone2;
+
+		svg {
+			fill: $tone2;
+		}
 	}
 }
diff --git a/v3main/src/components/common/Footer/Footer.tsx b/v3main/src/components/common/Footer/Footer.tsx
@@ -11,10 +11,9 @@ import style from './footer.module.scss'
 export default function Footer() {
 
     return (
-        <footer style={style}>
+        <footer>
             <div className={style.footerHeader}>
 
-                {/* <img draggable="false" alt='logo' src={logo} width={130} height={130} /> */}
                 <Logo />
 
                 <div className={style.footerText}>

diff --git a/v3main/src/components/common/FooterMobile/FooterMobile.tsx b/v3main/src/components/common/FooterMobile/FooterMobile.tsx
@@ -0,0 +1,53 @@
+import { ReactComponent as Logo } from '../../../assets/svg/SlamTheDragon Logo.svg'
+import { ReactComponent as Twitter } from '../../../assets/svg/twitterIcon.svg'
+import { ReactComponent as Kofi } from '../../../assets/svg/kofiIcon.svg'
+import { ReactComponent as Threads } from '../../../assets/svg/threadsIcon.svg'
+import { ReactComponent as Instagram } from '../../../assets/svg/instagramIcon.svg'
+import { ReactComponent as Deviant } from '../../../assets/svg/deviantartIcon.svg'
+import { ReactComponent as Discord } from '../../../assets/svg/discordIcon.svg'
+import style from './footermobile.module.scss'
+
+
+export default function FooterMobile() {
+
+    return (
+        <footer style={style}>
+            <Logo />
+            <div className={style.footerHeaderLinks}>
+                <div>
+                    <a className={style.discord} href="https://discord.gg/GSKdSPgjQb" target="_blank" rel="noreferrer"><Discord /></a>
+                </div>
+                <div>
+                    <a className={style.twitter} href="https://twitter.com/SlamTheDragon" target="_blank" rel="noreferrer"><Twitter /></a>
+                </div>
+                <div>
+                    <a className={style.kofi} href="https://ko-fi.com/slamthedragon" target="_blank" rel="noreferrer"><Kofi /></a>
+                </div>
+                <div>
+                    <a href="https://www.threads.net/@slamthedragon" target="_blank" rel="noreferrer"><Threads /></a>
+                </div>
+                <div>
+                    <a className={style.instagram} href="https://www.instagram.com/slamthedragon/" target="_blank" rel="noreferrer"><Instagram /></a>
+                </div>
+                <div>
+                    <a className={style.deviant} href="https://www.deviantart.com/slamdx16" target="_blank" rel="noreferrer"><Deviant /></a>
+                </div>
+            </div>
+            <div className={style.footerHeader}>
+
+                <div className={style.footerText}>
+                    <span style={{ display: 'flex', alignItems: 'center' }}>
+                        <a href="https://github.com/SlamTheDragon/SlamTheDragon.github.io" target="_blank" rel="noreferrer">Coded With Love <span style={{ fontSize: '7pt' }}>&nbsp;&nbsp;&#8226;&nbsp;&nbsp;</span> Powered By Github Pages</a>
+                    </span>
+                    <span>
+                        <a href="https://slamthedragon.me/service-and-agreement">Terms of Service & Commissioner Agreement</a>
+                    </span>
+                    <span>
+                        © 2023 Written By SlamTheDragon
+                    </span>
+                </div>
+
+            </div>
+        </footer>
+    )
+}