Converted to SASS

.gitattributes

@@ -1,2 +1,3 @@
 # Auto detect text files and perform LF normalization
 * text=auto
+/wwwroot/scripts/js/external/* linguist-vendored

.gitignore

@@ -6,4 +6,5 @@
 /tables/*
 /Properties/
 /.idea/
-/wwwroot/scripts/js/*
+/wwwroot/scripts/js/*.js
+/wwwroot/styles/css/*

DredgePos.fsproj

@@ -63,6 +63,7 @@
       <Content Include="xslt\orderHtmltoXML.xslt" />
       <Content Include="xslt\htmlToEscPos.xslt" />
       <Content Include=".gitignore" />
+      <Folder Include="wwwroot\styles\css" />
     </ItemGroup>
 
     <ItemGroup>

PageController.fs

@@ -25,13 +25,13 @@ let loadFloorplan (ctx: HttpContext) : HttpHandler =
        "roomMenu", roomMenu
        "decorator", Decorations.generateDecorator()
    ]
-   let styles = ["tableMap.css"]
+   let styles = ["dredgepos.floorplan.css"]
    let scripts = ["external/konva.min.js" ; "dredgepos.floorplan.js"]
    let currentClerk = recordToMap <| Session.getCurrentClerk ctx
 
    let arrays = map["clerk", currentClerk]
 
-   htmlString <| Theme.loadTemplateWithVarsArraysScriptsAndStyles "tableMap" variables arrays scripts styles
+   htmlString <| Theme.loadTemplateWithVarsArraysScriptsAndStyles "floorplan" variables arrays scripts styles
 
 let loadContactPage id =
     Session.clerkLogin 1408 |> ignore

Theme.module.fs

@@ -10,7 +10,7 @@ open DredgeFramework
 let currentTheme = "restaurant"
 
 let getHTMLForFile file =
-    let stylePath = $"/styles/{file}"
+    let stylePath = $"/styles/css/{file}"
     let scriptPath = $"/scripts/js/{file}"
     let fileExtension = file |> getFileExtension
     let scriptFileExists =  File.Exists ("wwwroot"+stylePath) || File.Exists("wwwroot"+scriptPath)
@@ -26,7 +26,7 @@ let getHTMLForFile file =
 
 
 let ParseScriptsAndStylesheets files html =
-    let defaultScriptsAndStyles = ["external/jquery.js" ; "dredgepos.core.css"; "dredgepos.core.js"; "keyboards.js"; "theme.css"; "screen.css"; ]
+    let defaultScriptsAndStyles = ["dark.theme.css"; "external/jquery.js" ; "dredgepos.core.js"; "keyboards.js";]
     let scriptsAndStylesheets = defaultScriptsAndStyles @ files
 
     let scriptAndStylesheetHTML =

package-lock.json

@@ -51,6 +51,15 @@
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
             "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
+        "anymatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+            "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+            "requires": {
+                "normalize-path": "^3.0.0",
+                "picomatch": "^2.0.4"
+            }
+        },
         "aproba": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -70,6 +79,11 @@
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
             "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
         },
+        "binary-extensions": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+            "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+        },
         "brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -79,6 +93,14 @@
                 "concat-map": "0.0.1"
             }
         },
+        "braces": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+            "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+            "requires": {
+                "fill-range": "^7.0.1"
+            }
+        },
         "canvas": {
             "version": "2.8.0",
             "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.8.0.tgz",
@@ -89,6 +111,21 @@
                 "simple-get": "^3.0.3"
             }
         },
+        "chokidar": {
+            "version": "3.5.2",
+            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+            "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+            "requires": {
+                "anymatch": "~3.1.2",
+                "braces": "~3.0.2",
+                "fsevents": "~2.3.2",
+                "glob-parent": "~5.1.2",
+                "is-binary-path": "~2.1.0",
+                "is-glob": "~4.0.1",
+                "normalize-path": "~3.0.0",
+                "readdirp": "~3.6.0"
+            }
+        },
         "chownr": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -145,6 +182,14 @@
             "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
             "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
         },
+        "fill-range": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+            "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+            "requires": {
+                "to-regex-range": "^5.0.1"
+            }
+        },
         "fs-minipass": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -158,6 +203,12 @@
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
             "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
         },
+        "fsevents": {
+            "version": "2.3.2",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+            "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+            "optional": true
+        },
         "gauge": {
             "version": "2.7.4",
             "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -186,6 +237,14 @@
                 "path-is-absolute": "^1.0.0"
             }
         },
+        "glob-parent": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+            "requires": {
+                "is-glob": "^4.0.1"
+            }
+        },
         "has-unicode": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -214,6 +273,19 @@
             "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
             "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
         },
+        "is-binary-path": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+            "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+            "requires": {
+                "binary-extensions": "^2.0.0"
+            }
+        },
+        "is-extglob": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+            "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+        },
         "is-fullwidth-code-point": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
@@ -222,6 +294,19 @@
                 "number-is-nan": "^1.0.0"
             }
         },
+        "is-glob": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+            "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "requires": {
+                "is-extglob": "^2.1.1"
+            }
+        },
+        "is-number": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+        },
         "isarray": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -316,6 +401,11 @@
                 "abbrev": "1"
             }
         },
+        "normalize-path": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+            "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+        },
         "npmlog": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
@@ -350,6 +440,11 @@
             "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
             "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
         },
+        "picomatch": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+            "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
+        },
         "process-nextick-args": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -369,6 +464,14 @@
                 "util-deprecate": "~1.0.1"
             }
         },
+        "readdirp": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+            "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+            "requires": {
+                "picomatch": "^2.2.1"
+            }
+        },
         "rimraf": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -382,6 +485,14 @@
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
             "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         },
+        "sass": {
+            "version": "1.43.4",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.43.4.tgz",
+            "integrity": "sha512-/ptG7KE9lxpGSYiXn7Ar+lKOv37xfWsZRtFYal2QHNigyVQDx685VFT/h7ejVr+R8w7H4tmUgtulsKl5YpveOg==",
+            "requires": {
+                "chokidar": ">=3.0.0 <4.0.0"
+            }
+        },
         "semver": {
             "version": "7.3.5",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -454,6 +565,14 @@
                 "yallist": "^4.0.0"
             }
         },
+        "to-regex-range": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+            "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "requires": {
+                "is-number": "^7.0.0"
+            }
+        },
         "tr46": {
             "version": "0.0.3",
             "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",

package.json

@@ -6,6 +6,7 @@
         "canvas": "^2.8.0",
         "currency.js": "^2.0.4",
         "konva": "^8.2.2",
+        "sass": "^1.43.4",
         "typescript": "^4.4.4"
     },
     "description": "",

wwwroot/scripts/js/dredgepos.authenticate.js

@@ -1,6 +1,4 @@
-let showLoginBox = () => {
+let showLoginBox = () => showVirtualNumpad('Enter Login Code', 6, true, false, false, authenticate);
-    showVirtualNumpad('Enter Login Code', 6, true, false, false, authenticate);
-};
 let authenticate = (input) => {
     let login = ajaxSync('/ajax/authenticateClerk', input);
     if (login === 'success')

wwwroot/scripts/js/dredgepos.authenticate.js.map

@@ -1 +1 @@
-{"version":3,"file":"dredgepos.authenticate.js","sourceRoot":"","sources":["../ts/dredgepos.authenticate.ts"],"names":[],"mappings":"AAAA,IAAI,YAAY,GAAG,GAAG,EAAE;IACpB,iBAAiB,CAAC,kBAAkB,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAA;AAC9E,CAAC,CAAA;AAED,IAAK,YAAY,GAAG,CAAC,KAAc,EAAE,EAAE;IACnC,IAAI,KAAK,GAAG,QAAQ,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAA;IACtD,IAAG,KAAK,KAAK,SAAS;QAClB,QAAQ,CAAC,YAAY,CAAC,CAAA;;QAEtB,YAAY,EAAE,CAAA;AACtB,CAAC,CAAA;AAED,CAAC,CAAC,GAAG,EAAE;IACH,YAAY,EAAE,CAAA;AAClB,CAAC,CAAC,CAAA"}
+{"version":3,"file":"dredgepos.authenticate.js","sourceRoot":"","sources":["../ts/dredgepos.authenticate.ts"],"names":[],"mappings":"AAAA,IAAI,YAAY,GAAG,GAAG,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAA;AAEnG,IAAK,YAAY,GAAG,CAAC,KAAc,EAAE,EAAE;IACnC,IAAI,KAAK,GAAG,QAAQ,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAA;IACtD,IAAG,KAAK,KAAK,SAAS;QAClB,QAAQ,CAAC,YAAY,CAAC,CAAA;;QAEtB,YAAY,EAAE,CAAA;AACtB,CAAC,CAAA;AAED,CAAC,CAAC,GAAG,EAAE;IACH,YAAY,EAAE,CAAA;AAClB,CAAC,CAAC,CAAA"}

wwwroot/scripts/js/dredgepos.floorplan.js

@@ -35,6 +35,8 @@ const setupFloorplanEvents = () => {
 };
 const roomButtonClicked = (e) => {
     const button = $(e.target);
+    $('.roomButton').removeClass('active');
+    button.addClass('active');
     const roomId = button.data('value');
     loadRoom(getRoomById(roomId));
 };
@@ -458,7 +460,7 @@ const setupKonva = () => {
     if (Floorplan.stage !== null)
         Floorplan.stage.destroy();
     Floorplan.stage = new Konva.Stage({
-        container: 'tableMap',
+        container: 'floorplanCanvas',
         width: dimensions.width,
         height: dimensions.height,
     });
@@ -620,19 +622,17 @@ const tableTransferred = (tables) => {
     redrawTable(getTableGroupFromTableNumber(destination.table_number));
 };
 const getDimensions = () => {
-    Floorplan.floorplanDiv = $('#tableMap');
+    Floorplan.floorplanDiv = $('#floorplanCanvas');
-    const parentDiv = $('#mapContainer');
+    const parentDiv = $('#floorplanCenterColumn .middleCell');
     const outerWidth = parentDiv.outerWidth();
     const outerHeight = parentDiv.outerHeight();
-    let width = outerWidth;
-    let height = outerWidth;
     if (outerWidth >= outerHeight) {
-        width = outerHeight;
+        Floorplan.floorplanDiv.css('height', '100%');
-        height = outerHeight;
     }
-    Floorplan.floorplanDiv.height(height);
+    else {
-    Floorplan.floorplanDiv.width(width);
+        Floorplan.floorplanDiv.css('width', '100%');
-    Floorplan.visualScale = width / Floorplan.visualScaleBasis;
+    }
-    return { width: width, height: height };
+    Floorplan.visualScale = Floorplan.floorplanDiv.width() / Floorplan.visualScaleBasis;
+    return { width: Floorplan.floorplanDiv.width(), height: Floorplan.floorplanDiv.height() };
 };
 //# sourceMappingURL=dredgepos.floorplan.js.map

wwwroot/scripts/js/keyboards.js

@@ -102,9 +102,7 @@ let setupVirtualKeyboard = (keyboardLayouts) => {
     });
     setKeyboardLayout('default');
 };
-let showVirtualKeyboard = (heading, maxlength = 32, isPassword = false, submitFunction = () => {
+let showVirtualKeyboard = (heading, maxlength = 32, isPassword = false, submitFunction = () => { hideVirtualKeyboard(); }) => {
-    hideVirtualKeyboard();
-}) => {
     let keyboard = $('#virtualKeyboard');
     let inputBox = $('#virtualKeyboardInput');
     keyboard.css('display', 'flex');
@@ -114,12 +112,13 @@ let showVirtualKeyboard = (heading, maxlength = 32, isPassword = false, submitFu
     keyboard.data('maxlength', maxlength);
     keyboard.data('password', isPassword);
     keyboard.data('submitfunction', submitFunction);
-    $(document).off('keyup');
+    inputBox.trigger('focus');
     $(document).on('keyup', e => {
         let key = e.key;
-        if (key == 'Enter')
+        if (key == 'Enter' && inputBox.val().toString().length > 0) {
             key = 'submit';
-        virtualKeyboardInput(key);
+            virtualKeyboardInput(key);
+        }
     });
 };
 let virtualKeyboardInput = (input) => {
@@ -132,13 +131,13 @@ let virtualKeyboardInput = (input) => {
         case 'backspace':
         case 'delete':
             let newText = inputBox.text().slice(0, -1);
-            inputBox.text(newText);
+            inputBox.val(newText);
             keyboard.data('value', newText);
             break;
         case 'submit':
             hideVirtualKeyboard();
             let submitFunction = keyboard.data('submitfunction');
-            submitFunction(inputBox.text());
+            submitFunction(inputBox.val());
             break;
         case 'shift':
             if (Application.keyboard.capsLock)
@@ -162,15 +161,15 @@ let virtualKeyboardInput = (input) => {
     if (input.length == 1) {
         if (Application.keyboard.shift || Application.keyboard.capsLock) {
             input = input.toUpperCase();
+            //If shift, reload lowercase
+            if (Application.keyboard.shift) {
+                Application.keyboard.shift = false;
+                setKeyboardLayout('default');
+            }
         }
-        let newText = inputBox.text() + input;
+        let newText = inputBox.val() + input;
         keyboard.data('value', newText);
-        inputBox.text(newText);
+        inputBox.val(newText);
-        //If shift, reload lowercase
-        if (Application.keyboard.shift) {
-            Application.keyboard.shift = false;
-            setKeyboardLayout('default');
-        }
     }
 };
 let setKeyboardLayout = (layout, modifier = '') => {
@@ -184,6 +183,7 @@ let setKeyboardLayout = (layout, modifier = '') => {
         and translators making their own language packs
         */
         index = index + 1;
+        // @ts-ignore
         let currentRow = layoutToLoad[`row${index}${modifier}`];
         $(row).children('a').each((keyIndex, button) => {
             let key = $(button);

wwwroot/scripts/ts/dredgepos.authenticate.ts

@@ -1,6 +1,4 @@
-let showLoginBox = () => {
+let showLoginBox = () => showVirtualNumpad('Enter Login Code', 6, true, false, false, authenticate)
-    showVirtualNumpad('Enter Login Code', 6, true, false, false, authenticate)
-}
 
 let  authenticate = (input : string) => {
     let login = ajaxSync('/ajax/authenticateClerk', input)

wwwroot/scripts/ts/dredgepos.floorplan.ts

@@ -72,6 +72,8 @@ const setupFloorplanEvents = () => {
 
 const roomButtonClicked = (e: Event) => {
     const button = $(e.target)
+    $('.roomButton').removeClass('active')
+    button.addClass('active')
     const roomId = button.data('value')
     loadRoom(getRoomById(roomId))
 }
@@ -600,7 +602,7 @@ const setupKonva = () => {
     if(Floorplan.stage !== null) Floorplan.stage.destroy()
 
     Floorplan.stage = new Konva.Stage({
-        container: 'tableMap',
+        container: 'floorplanCanvas',
         width: dimensions.width,
         height: dimensions.height,
     })
@@ -802,22 +804,20 @@ const tableTransferred = (tables: Record<"origin"|"destination", table>) => {
 
 const getDimensions = () => {
 
-    Floorplan.floorplanDiv = $('#tableMap')
+    Floorplan.floorplanDiv = $('#floorplanCanvas')
-    const parentDiv = $('#mapContainer')
+    const parentDiv = $('#floorplanCenterColumn .middleCell')
     const outerWidth = parentDiv.outerWidth()
     const outerHeight = parentDiv.outerHeight()
 
-    let width = outerWidth;
+
-    let height = outerWidth;
 
     if (outerWidth >= outerHeight) {
-        width = outerHeight
+        Floorplan.floorplanDiv.css('height', '100%')
-        height = outerHeight
+    } else {
+        Floorplan.floorplanDiv.css('width','100%')
     }
 
-    Floorplan.floorplanDiv.height(height)
+    Floorplan.visualScale = Floorplan.floorplanDiv.width() / Floorplan.visualScaleBasis
-    Floorplan.floorplanDiv.width(width)
-    Floorplan.visualScale = width / Floorplan.visualScaleBasis
 
-    return {width: width, height:height}
+    return {width: Floorplan.floorplanDiv.width(), height:Floorplan.floorplanDiv.height()}
 }

wwwroot/scripts/ts/keyboards.ts

@@ -129,9 +129,7 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
         setKeyboardLayout('default')
     }
 
-     let showVirtualKeyboard = (heading: string, maxlength = 32, isPassword = false, submitFunction :Function = () => {
+     let showVirtualKeyboard = (heading: string, maxlength = 32, isPassword = false, submitFunction :Function = () => {hideVirtualKeyboard()}) => {
-        hideVirtualKeyboard()
-    }) => {
         let keyboard = $('#virtualKeyboard')
         let inputBox = $('#virtualKeyboardInput')
 
@@ -143,14 +141,13 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
         keyboard.data('maxlength', maxlength)
         keyboard.data('password', isPassword)
         keyboard.data('submitfunction', submitFunction)
-
+        inputBox.trigger('focus')
-        $(document).off('keyup')
         $(document).on('keyup', e => {
             let key = e.key
-            if (key == 'Enter')
+            if (key == 'Enter' && inputBox.val().toString().length > 0) {
                 key = 'submit'
-
+                virtualKeyboardInput(key)
-            virtualKeyboardInput(key)
+            }
         })
     }
 
@@ -166,13 +163,13 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
             case 'backspace':
             case 'delete':
                 let newText = inputBox.text().slice(0, -1);
-                inputBox.text(newText)
+                inputBox.val(newText)
                 keyboard.data('value', newText);
                 break;
             case 'submit':
                 hideVirtualKeyboard();
                 let submitFunction = keyboard.data('submitfunction')
-                submitFunction(inputBox.text());
+                submitFunction(inputBox.val());
                 break;
             case 'shift':
                 if (Application.keyboard.capsLock) break;
@@ -196,17 +193,17 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
         if (input.length == 1) {
             if (Application.keyboard.shift || Application.keyboard.capsLock) {
                 input = input.toUpperCase()
+
+                //If shift, reload lowercase
+                if (Application.keyboard.shift) {
+                    Application.keyboard.shift = false
+                    setKeyboardLayout('default');
+                }
             }
 
-            let newText = inputBox.text() + input;
+            let newText = inputBox.val() + input;
             keyboard.data('value', newText);
-            inputBox.text(newText)
+            inputBox.val(newText)
-
-            //If shift, reload lowercase
-            if (Application.keyboard.shift) {
-                Application.keyboard.shift = false
-                setKeyboardLayout('default');
-            }
         }
 
     }

wwwroot/styles/sass/dark.theme.sass

@@ -0,0 +1,16 @@
+\:root
+    --body-background: linear-gradient(137deg, #242424 25%, #2e2e2e 25%, #2e2e2e 50%, #242424 50%, #242424 75%, #2e2e2e 75%, #2e2e2e 100%)
+    --body-background-size: 58.65px 54.69px
+    --global-border-color: #eee
+    --global-bgcolor: #222
+    --global-secondary-bgcolor: #666
+    --global-text-color: #eee
+    --pos-header-background: #666
+    --pos-header-text-color: #fff
+    --posbutton-border-color: var(--global-bgcolor)
+    --posbutton-border-color-active: #fff
+    --posbutton-text-color: var(--global-text-color)
+    --posbutton-text-color-active: #fff
+    --posbutton-background: #232B30 -webkit-linear-gradient(top, #3D4850 3%, #000 4%, #333 100%)
+    --posbutton-background-active: #20282D -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)) 0 top
+

wwwroot/styles/sass/dredgepos.authenticate.sass

@@ -0,0 +1,2 @@
+@import dredgepos.keyboards
+

wwwroot/styles/sass/dredgepos.core.sass

@@ -0,0 +1,77 @@
+*
+    margin: 0
+    padding: 0
+    box-sizing: border-box
+    font-family: Arial, Helvetica, sans-serif
+
+input[type=text], select, textarea
+    padding-left: 1em
+    padding-right: 1em
+
+#alert, #decorator
+    display: none
+
+@mixin absoluteCenter
+    position: absolute
+    margin: auto
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+
+@mixin mobile
+    @media screen and (max-width: 900px)
+        @content
+
+@mixin flex
+    display: flex
+    justify-content: center
+    align-items: center
+
+@mixin flex-column
+    @include flex
+    flex-direction: column
+
+@mixin flex-item
+    height: 100%
+    flex: 1
+
+@mixin flex-column-item
+    width: 100%
+    flex: 1
+
+body
+    background-image: var(--body-background)
+    background-size: var(--body-background-size)
+    color: var(--global-text-color)
+
+.posButton
+    color: var(--posbutton-text-color)
+    background: var(--posbutton-background)
+    text-shadow: 1px 1px #1f272b
+    border: solid 1px var(--posbutton-border-color)
+
+.posHeader
+    padding: 0.5em
+    color: var(--pos-header-text-color)
+    background: var(--pos-header-background)
+
+.posButton.active,.posButton:active
+    border-color: var(--posbutton-border-color-active)
+    color: var(--posbutton-text-color-active)
+    background: var(--posbutton-background-active) /* webkit */
+    box-shadow: 1px 1px 1px rgba(255,255,255,0.1) /* CSS3 */
+
+#pageContainer
+    @include flex
+    height: 100vh !important
+
+.posButton, .posHeader
+    @include flex
+    text-align: center
+    cursor: default
+
+.posButton.active, .posButton:active
+    border: inset 2px
+
+

wwwroot/styles/sass/dredgepos.floorplan.sass

@@ -0,0 +1,140 @@
+@import dredgepos.keyboards
+
+#floorplanLeftColumn, #floorplanRightColumn
+    @include flex-column
+    flex-basis: 10%
+    height: 100%
+    background: var(--global-bgcolor)
+
+#floorplanCenterColumn
+    @include flex-column
+    height: 100%
+    flex-basis: 80%
+
+.topCell
+    @include flex
+    flex-basis: 10%
+    width: 100%
+
+    .posHeader
+        @include flex-item
+
+    .posHeader, .posButton
+        border-bottom: solid 2px
+
+    .roomButton
+        border-left: none
+        border-right: none
+
+    .roomButton.active, .roomButton.active
+        border-right: solid 1px var(--posbutton-border-color-active)
+        border-left: solid 1px var(--posbutton-border-color-active)
+        border-bottom: none
+
+    .logOut
+        font-size: 3em
+
+.bottomCell
+    @include flex
+    flex-basis: 15%
+    width: 100%
+    background: var(--global-bgcolor)
+
+.topCell, .bottomCell
+    .posButton
+        @include flex-item
+        flex: 1
+
+.bottomCell
+    .editControls
+        @include flex
+        @include flex-item
+
+    .currentTable
+        @include flex-column
+        @include flex-item
+
+.middleCell
+    @include flex-column
+    flex: 1
+    width: 100%
+
+    #floorplanCanvas
+        aspect-ratio: 1/1
+        background-repeat: no-repeat
+
+    > *:not(#floorplanCanvas)
+        @include flex-column-item
+        flex: 1
+
+    .floorplanControls, .mergeControls
+        @include flex-column
+        > *
+            @include flex-column-item
+
+
+#decorator
+    @include flex-column
+    @include absoluteCenter
+    border: solid 3px var(--global-border-color)
+    background-color: var(--global-bgcolor)
+    width: 30vw
+    height: 50vh
+
+    > *
+        @include flex-column-item
+
+    #decoratorHeader
+        @include flex
+        flex-basis: 10%
+        border-bottom: solid 1px var(--global-border-color)
+
+        h2
+            @include flex
+            @include flex-item
+            flex-basis: 90%
+
+        a
+            @include flex
+            @include flex-item
+            flex-basis: 10%
+
+    #decoratorContent
+        @include flex-column
+        justify-content: flex-start
+        flex-basis: 90%
+        overflow-y: auto
+
+        .decoratorRow
+            @include flex
+            justify-content: flex-start
+            flex-basis: 25%
+            width: 100%
+
+            .decoratorItem
+                @include flex-column
+                flex-basis: 25%
+                height: 100%
+                gap: 1em
+
+                > a
+                    width: 100%
+
+                > a:first-of-type
+                    background-size: contain
+                    background-repeat: no-repeat
+                    background-position: center
+                    flex-basis: 80%
+
+                > a:last-of-type
+                    text-align: center
+                    flex-basis: 20%
+                    font-weight: bold
+
+        .decoratorRow:nth-of-type(odd)
+            .decoratorItem:nth-of-type(odd)
+                background-color: var(--global-secondary-bgcolor)
+
+        .decoratorRow:nth-of-type(even)
+            .decoratorItem:nth-of-type(even)
+                background-color: var(--global-secondary-bgcolor)

wwwroot/styles/sass/dredgepos.keyboards.sass

@@ -0,0 +1,151 @@
+@import dredgepos.core
+
+#virtualNumpad, #virtualKeyboard
+    display: none
+
+    .headingRow
+        background-color: var(--global-bgcolor)
+        display: flex
+        flex-basis: 10%
+        border-bottom: solid 1px #fff
+
+        @include mobile
+            font-size: 1.5em
+
+        *
+            height: 100%
+            display: flex
+            align-items: center
+            justify-content: center
+            text-align: center
+
+        h3
+            flex: 1
+
+        .closeKeyboards
+            flex-basis: 20%
+
+#virtualNumpad
+    @include absoluteCenter
+    flex-direction: column
+    height: 70vh
+    width: 30vw
+    border: solid 2px var(--global-border-color)
+
+    @include mobile
+        height: 100vh
+        width: 100vw
+
+    #virtualNumpadInput
+        background-color: var(--global-secondary-bgcolor)
+        flex-basis: 10%
+        display: flex
+        align-items: center
+        justify-content: center
+        text-align: center
+        font-size: 3em
+
+
+    #virtualNumpadButtons
+        display: flex
+        flex-direction: column
+        flex-basis: 80%
+        background-color: var(--global-bgcolor)
+
+        .virtualNumpadRow
+            display: flex
+            flex: 1
+
+            > *
+                flex: 1
+                font-size: 1.5em
+
+#virtualKeyboard
+    @include absoluteCenter
+    flex-direction: column
+    width: 80vw
+    height: 40vh
+    background-color: var(--global-bgcolor)
+    border: solid 2px var(--global-border-color)
+
+    @include mobile
+        width: 100vw
+        height: 10vh
+        top: 0
+        bottom: auto
+
+
+    #virtualKeyboardInput
+        flex-basis: 15%
+        background-color: var(--global-secondary-bgcolor)
+        font-size: 1.5em
+        text-align: center
+        color: var(--global-text-color)
+
+        @include mobile
+            flex-basis: 50%
+            text-align: left
+
+
+    #virtualKeyboardButtons
+        @include flex-column
+        flex-basis: 75%
+
+        @include mobile
+            display: none
+
+    .headingRow
+        @include mobile
+            flex-basis: 50%
+            font-size: 1.2em
+
+        .closeKeyboards
+            flex-basis: 10%
+
+    .virtualKeyboardRow
+        @include flex
+        @include flex-column-item
+
+        > *
+            @include flex
+            @include flex-item
+            font-size: 1.5em
+
+        > [data-value=backspace]
+            flex-basis: 10%
+
+#alert
+    @include flex-column
+    @include absoluteCenter
+    display: none
+    width: 60vw
+    height: 40vh
+    background-color: var(--global-bgcolor)
+    border: solid 2px var(--global-border-color)
+
+    @include mobile
+        width: 100vw
+        height: 100vh
+
+    > *
+        @include flex
+        @include flex-column-item
+
+    #alertHeading
+        @include flex
+        width: 100%
+        flex-basis: 20%
+        font-size: 2em
+
+    #alertMessage
+        flex-basis: 60%
+        font-size: 1.5em
+        background-color: var(--global-secondary-bgcolor)
+
+    #alertButtons
+        @include flex
+        flex-basis: 20%
+
+        a
+            @include flex-item
+            font-size: 2em

wwwroot/styles/theme.css

@@ -15,7 +15,6 @@ body{
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-	
 }
 
 .rtl td.itemCell{
@@ -76,7 +75,7 @@ body.lightMode{
 
 .darkMode .posButton{
 	color: #eee;
-	background: #232B30 -webkit-linear-gradient(top, #3D4850 3%, #000 4%, #333 100%); 
+	background: #232B30 -webkit-linear-gradient(top, #3D4850 3%, #000 4%, #333 100%);
 	text-shadow: 1px 1px #1f272b;
 }
 

wwwroot/themes/restaurant/authenticate.tpl.htm

@@ -3,7 +3,7 @@
 <head>
 	<title><!--[var:title]--></title>
     <meta name="apple-mobile-web-app-capable" content="yes" />
-     <meta name = "viewport" content = "user-scalable = no, shrink-to-fit=yes"  />
+    <meta name = "viewport" content = "user-scalable = no, initial-scale=0.8,maximum-scale=0.8 ,shrink-to-fit=yes"  />
 </head>
 <body class="darkMode">
 	<div id="authenticator">

wwwroot/themes/restaurant/floorplan.tpl.htm

@@ -7,8 +7,8 @@
     <meta name = "viewport" content = "user-scalable = no, initial-scale=0.8,maximum-scale=0.8 ,shrink-to-fit=yes"  />
 </head>
 <body class="darkMode">
-		<div id="tableScreen">
+		<div id="pageContainer">
-			<div id="tablemapLeftColumn">
+			<div id="floorplanLeftColumn">
 				<div class="topCell">
 					<a class="posHeader">Logged in as <!--[arr:clerk|clerk_name]--></a>
 				</div>
@@ -19,14 +19,14 @@
 
 				</div>
 			</div>
-			<div id="tablemapCenterColumn">
+			<div id="floorplanCenterColumn">
-				<div id="centerTopRow">
+				<div class="topCell">
 					<!--[var:roomMenu]-->
 				</div>
-				<div id="mapContainer">
+				<div class="middleCell">
-					<div id="tableMap"></div>
+					<div id="floorplanCanvas"></div>
 				</div>
-				<div id="centerBottomRow">
+				<div class="bottomCell">
 					<div class="editControls" data-visible-in-mode='["tableSelected"]'>
                         <div class="posHeader currentTable">
                             <b class="selectedTableNumber"></b>
@@ -41,7 +41,7 @@
 					</div>
 				</div>
 			</div>
-			<div id="tablemapRightColumn">
+			<div id="floorplanRightColumn">
 				<div class="topCell">
 					<a class="posButton logOut" onclick="logout()">×</a>
 				</div>

wwwroot/themes/restaurant/virtualKeyboard.tpl.htm

@@ -3,7 +3,7 @@
 	<h3 id="virtualKeyboardHeading"></h3>
 	<a class="posButton closeKeyboards">X</a>
 	</div>
-	<div id="virtualKeyboardInput"></div>
+	<input type="text" name="virtualKeyboardInput" id="virtualKeyboardInput" />
 	<div id="virtualKeyboardButtons">
 		<div class="virtualKeyboardRow">
 			<a></a>
@@ -16,21 +16,6 @@
 			<a></a>
 			<a></a>
 			<a></a>
-			<a></a>				
-			<a></a>
-			<a></a>
-		</div>		
-		<div class="virtualKeyboardRow">
-			<a></a>
-			<a></a>
-			<a></a>
-			<a></a>
-			<a></a>
-			<a></a>
-			<a></a>
-			<a></a>
-			<a></a>
-			<a></a>				
 			<a></a>
 			<a></a>
 			<a></a>
@@ -46,9 +31,9 @@
 			<a></a>
 			<a></a>
 			<a></a>
-			<a></a>				
+			<a></a>
-			<a></a>				
+			<a></a>
-			<a></a>				
+			<a></a>
 		</div>
 		<div class="virtualKeyboardRow">
 			<a></a>
@@ -61,10 +46,25 @@
 			<a></a>
 			<a></a>
 			<a></a>
-			<a></a>				
+			<a></a>
-		</div>				
+			<a></a>
+			<a></a>
+		</div>
 		<div class="virtualKeyboardRow">
-			<a></a>			
+			<a></a>
-		</div>		
+			<a></a>
+			<a></a>
+			<a></a>
+			<a></a>
+			<a></a>
+			<a></a>
+			<a></a>
+			<a></a>
+			<a></a>
+			<a></a>
+		</div>
+		<div class="virtualKeyboardRow">
+			<a></a>
+		</div>
 	</div>
 </div>