Improved mobile styling (removing border-radius etc)

zxplay · Jun 28, 2023 · 5b0b9ca · 5b0b9ca
1 parent d9335de
commit 5b0b9ca
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 24 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -34,6 +34,7 @@
     "@lagunovsky/redux-react-router": "^4.3.0",
     "axios": "^1.2.1",
     "bas2tap": "^0.0.1-alpha.4",
+    "clsx": "^1.2.1",
     "codemirror": "^5.65.11",
     "date-fns": "^2.29.3",
     "file-dialog": "^0.0.8",

diff --git a/apps/web/public/style.css b/apps/web/public/style.css
@@ -77,15 +77,15 @@ code {
     align-items: center;
 }
 
-.p-tabview,
-.p-tabview > .p-tabview-nav-container,
-.p-tabview > .p-tabview-nav-container > .p-tabview-nav-content,
-.p-tabview > .p-tabview-nav-container > .p-tabview-nav-content > .p-tabview-nav,
-.p-tabview > .p-tabview-nav-container > .p-tabview-nav-content > .p-tabview-nav > .p-tabview-selected,
-.p-tabview > .p-tabview-nav-container > .p-tabview-nav-content > .p-tabview-nav > .p-tabview-selected > a,
-#jsspeccy-screen > div,
-#jsspeccy-screen > div > div,
-#jsspeccy-screen > div > div > canvas {
+.desktop .p-tabview,
+.desktop .p-tabview > .p-tabview-nav-container,
+.desktop .p-tabview > .p-tabview-nav-container > .p-tabview-nav-content,
+.desktop .p-tabview > .p-tabview-nav-container > .p-tabview-nav-content > .p-tabview-nav,
+.desktop .p-tabview > .p-tabview-nav-container > .p-tabview-nav-content > .p-tabview-nav > .p-tabview-selected,
+.desktop .p-tabview > .p-tabview-nav-container > .p-tabview-nav-content > .p-tabview-nav > .p-tabview-selected > a,
+.desktop #jsspeccy-screen > div,
+.desktop #jsspeccy-screen > div > div,
+.desktop #jsspeccy-screen > div > div > canvas {
     border-radius: 5px 5px 0 0;
 }
 
@@ -102,24 +102,23 @@ code {
     image-rendering: crisp-edges;
 }
 
-#virtkeys {
-    border-radius: 0 0 5px 5px;
-}
-
 .CodeMirror {
-    border-radius: 5px;
     font-family: monospace !important;
     font-size: 16px !important;
     height: calc(100vh - 177px) !important;
     max-height: 736px !important;
     border: 1px solid #5B5B5B;
 }
 
+.desktop .CodeMirror {
+    border-radius: 5px;
+}
+
 .CodeMirror-scrollbar-filler {
     background-color: #424242 !important;
 }
 
-.p-button {
+.desktop .p-button {
     border-radius: 5px !important;
 }
 

diff --git a/apps/web/src/components/App.jsx b/apps/web/src/components/App.jsx
@@ -22,16 +22,19 @@ import YourProfilePage from "./YourProfilePage";
 import YourProjectsPage from "./YourProjectsPage";
 import ErrorNotFoundPage from "./ErrorNotFoundPage";
 import ErrorPage from "./ErrorPage";
+import clsx from "clsx";
 
 export default function App() {
     const err = useSelector(state => state?.error.msg);
+    const isMobile = useSelector(state => state?.window.isMobile);
+    const className = clsx('pb-1', isMobile ? 'mobile' : 'desktop');
 
     return (
         <Titled title={() => 'ZX Coder'}>
             <RenderEmulator/>
             <LoadingScreen/>
             <LockScreen/>
-            <div className="pb-1">
+            <div className={className}>
                 <Nav/>
                 {err &&
                     <ErrorPage msg={err}/>

diff --git a/apps/web/src/components/HomePage.jsx b/apps/web/src/components/HomePage.jsx
@@ -38,10 +38,12 @@ export default function HomePage() {
         return () => {};
     }, [errorItems, toast.current]);
 
+    const mainClassName = isMobile ? '' : 'mx-2 my-1';
+
     return (
         <>
             <Toast ref={toast}/>
-            <div className="mx-2 my-1">
+            <div className={mainClassName}>
                 <div className="grid" style={{width: "100%", padding: 0, margin: 0}}>
                     {isMobile && (
                         <>

diff --git a/apps/web/src/components/Keyboard.jsx b/apps/web/src/components/Keyboard.jsx
@@ -1,29 +1,39 @@
 import React, {useEffect} from "react";
 import PropTypes from "prop-types";
 import {ImageButton, SingleWindow} from "../lib/canvasgui";
+import {useSelector} from "react-redux";
 
 Keyboard.propTypes = {
     width: PropTypes.number
 }
 
 export function Keyboard(props) {
     const width = props.width || 960;
+    const isMobile = useSelector(state => state?.window.isMobile);
 
     useEffect(() => {
         renderKeyboard(width);
     }, []);
 
+    let style = {
+        imageRendering: 'auto'
+    };
+
+    if (!isMobile) {
+        style.borderRadius = '0 0 5px 5px';
+    }
+
     return (
         <div id="guiparent" style={{
             width: `${width}px`,
             margin: 0,
             backgroundColor: "#444",
-            padding: 0
+            padding: 0,
         }}>
             <canvas
                 id="virtkeys"
                 width={width}
-                style={{imageRendering: "auto"}}
+                style={style}
             />
         </div>
     )

diff --git a/apps/web/src/components/Nav.jsx b/apps/web/src/components/Nav.jsx
@@ -21,6 +21,7 @@ export default function Nav() {
     const selectedDemoTab = useSelector(state => state?.demo.selectedTabIndex);
     const userId = useSelector(state => state?.identity.userId);
     const lang = useSelector(state => state?.project.lang);
+    const isMobile = useSelector(state => state?.window.isMobile);
 
     const emuVisible = (pathname === '/' && selectedDemoTab === 0) || pathname.startsWith('/projects/');
 
@@ -30,13 +31,15 @@ export default function Nav() {
 
     const items = getMenuItems(navigate, userId, dispatch, lang, emuVisible);
 
+    const mainClassName = isMobile ? '' : 'mx-2 my-1';
+
     return (
-        <div className="px-2 pt-2">
+        <div className={mainClassName}>
             <Menubar
                 model={items}
                 start={<img alt="logo" src="/logo.png" height={"40"} className="mx-2"/>}
                 style={{
-                    borderRadius: '5px',
+                    borderRadius: isMobile ? 0 : '5px',
                     borderColor: '#1E1E1E'
                 }}
             />

diff --git a/apps/web/src/components/ProjectPage.jsx b/apps/web/src/components/ProjectPage.jsx
@@ -20,6 +20,7 @@ export default function ProjectPage() {
     const lang = useSelector(state => state?.project.lang);
     let title = useSelector(state => state?.project.title);
     const errorItems = useSelector(state => state?.project.errorItems);
+    const isMobile = useSelector(state => state?.window.isMobile);
 
     const toast = useRef(null);
 
@@ -71,10 +72,12 @@ export default function ProjectPage() {
             throw `unexpected case: ${lang}`;
     }
 
+    const mainClassName = isMobile ? '' : 'mx-2 my-1';
+
     return (
         <Titled title={(s) => `${title} ${sep} Project ${sep} ${s}`}>
             <Toast ref={toast}/>
-            <div className="mx-2 my-1">
+            <div className={mainClassName}>
                 <div className="grid" style={{width: "100%", padding: 0, margin: 0}}>
                     <div className="col p-0 mr-2" style={{maxWidth: `calc(100vw - ${width + 41}px`}}>
                         <TabView

diff --git a/package-lock.json b/package-lock.json