From 5b0b9ca250b9b956ee622adc22d3f015d1855a57 Mon Sep 17 00:00:00 2001
From: Steven Robertson <stever@hey.com>
Date: Wed, 28 Jun 2023 17:53:57 +0100
Subject: [PATCH] Improved mobile styling (removing border-radius etc)

---
 apps/web/package.json                   |  1 +
 apps/web/public/style.css               | 29 ++++++++++++-------------
 apps/web/src/components/App.jsx         |  5 ++++-
 apps/web/src/components/HomePage.jsx    |  4 +++-
 apps/web/src/components/Keyboard.jsx    | 14 ++++++++++--
 apps/web/src/components/Nav.jsx         |  7 ++++--
 apps/web/src/components/ProjectPage.jsx |  5 ++++-
 package-lock.json                       | 19 ++++++++++++++--
 8 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index eb8ae9d..14bd1ee 100644
--- 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
index 846311d..dc781cf 100644
--- 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,12 +102,7 @@ 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;
@@ -115,11 +110,15 @@ code {
     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
index 37c2533..b7787e5 100644
--- 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
index 46caaee..960a5df 100644
--- 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
index 484c2f8..0979c61 100644
--- a/apps/web/src/components/Keyboard.jsx
+++ b/apps/web/src/components/Keyboard.jsx
@@ -1,6 +1,7 @@
 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
@@ -8,22 +9,31 @@ Keyboard.propTypes = {
 
 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
index 415e9eb..22052f2 100644
--- 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
index 87ec147..634d69e 100644
--- 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
index f0c3396..1595655 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,10 +1,10 @@
 {
-  "name": "zxplay",
+  "name": "zxcoder",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "zxplay",
+      "name": "zxcoder",
       "workspaces": [
         "packages/*",
         "apps/*"
@@ -24,6 +24,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",
@@ -4577,6 +4578,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -16863,6 +16872,11 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -23035,6 +23049,7 @@
         "babel-jest": "^29.3.1",
         "babel-loader": "^9.1.0",
         "bas2tap": "^0.0.1-alpha.4",
+        "clsx": "^1.2.1",
         "codemirror": "^5.65.11",
         "copyfiles": "^2.4.1",
         "css-loader": "^6.7.3",