Converted to SASS

2021-11-11 17:56:20 +10:00
parent 81cdcd17c3
commit 150a6aced8
26 changed files with 604 additions and 103 deletions
--- a/wwwroot/scripts/js/dredgepos.authenticate.js
+++ b/wwwroot/scripts/js/dredgepos.authenticate.js
@@ -1,6 +1,4 @@
-let showLoginBox = () => {
-    showVirtualNumpad('Enter Login Code', 6, true, false, false, authenticate);
-};
+let showLoginBox = () => showVirtualNumpad('Enter Login Code', 6, true, false, false, authenticate);
 let authenticate = (input) => {
    let login = ajaxSync('/ajax/authenticateClerk', input);
    if (login === 'success')
--- a/wwwroot/scripts/js/dredgepos.authenticate.js.map
+++ b/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"}
--- a/wwwroot/scripts/js/dredgepos.floorplan.js
+++ b/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');
-    const parentDiv = $('#mapContainer');
+    Floorplan.floorplanDiv = $('#floorplanCanvas');
+    const parentDiv = $('#floorplanCenterColumn .middleCell');
    const outerWidth = parentDiv.outerWidth();
    const outerHeight = parentDiv.outerHeight();
-    let width = outerWidth;
-    let height = outerWidth;
    if (outerWidth >= outerHeight) {
-        width = outerHeight;
-        height = outerHeight;
+        Floorplan.floorplanDiv.css('height', '100%');
    }
-    Floorplan.floorplanDiv.height(height);
-    Floorplan.floorplanDiv.width(width);
-    Floorplan.visualScale = width / Floorplan.visualScaleBasis;
-    return { width: width, height: height };
+    else {
+        Floorplan.floorplanDiv.css('width', '100%');
+    }
+    Floorplan.visualScale = Floorplan.floorplanDiv.width() / Floorplan.visualScaleBasis;
+    return { width: Floorplan.floorplanDiv.width(), height: Floorplan.floorplanDiv.height() };
 };
 //# sourceMappingURL=dredgepos.floorplan.js.map
--- a/wwwroot/scripts/js/dredgepos.floorplan.js.map
+++ b/wwwroot/scripts/js/dredgepos.floorplan.js.map
--- a/wwwroot/scripts/js/keyboards.js
+++ b/wwwroot/scripts/js/keyboards.js
@@ -102,9 +102,7 @@ let setupVirtualKeyboard = (keyboardLayouts) => {
    });
    setKeyboardLayout('default');
 };
-let showVirtualKeyboard = (heading, maxlength = 32, isPassword = false, submitFunction = () => {
-    hideVirtualKeyboard();
-}) => {
+let showVirtualKeyboard = (heading, maxlength = 32, isPassword = false, submitFunction = () => { 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);
-        //If shift, reload lowercase
-        if (Application.keyboard.shift) {
-            Application.keyboard.shift = false;
-            setKeyboardLayout('default');
-        }
+        inputBox.val(newText);
    }
 };
 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);
--- a/wwwroot/scripts/js/keyboards.js.map
+++ b/wwwroot/scripts/js/keyboards.js.map
--- a/wwwroot/scripts/ts/dredgepos.authenticate.ts
+++ b/wwwroot/scripts/ts/dredgepos.authenticate.ts
@@ -1,6 +1,4 @@
-let showLoginBox = () => {
-    showVirtualNumpad('Enter Login Code', 6, true, false, false, authenticate)
-}
+let showLoginBox = () => showVirtualNumpad('Enter Login Code', 6, true, false, false, authenticate)

 let  authenticate = (input : string) => {
    let login = ajaxSync('/ajax/authenticateClerk', input)
--- a/wwwroot/scripts/ts/dredgepos.floorplan.ts
+++ b/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')
-    const parentDiv = $('#mapContainer')
+    Floorplan.floorplanDiv = $('#floorplanCanvas')
+    const parentDiv = $('#floorplanCenterColumn .middleCell')
    const outerWidth = parentDiv.outerWidth()
    const outerHeight = parentDiv.outerHeight()

-    let width = outerWidth;
-    let height = outerWidth;
+

    if (outerWidth >= outerHeight) {
-        width = outerHeight
-        height = outerHeight
+        Floorplan.floorplanDiv.css('height', '100%')
+    } else {
+        Floorplan.floorplanDiv.css('width','100%')
    }

-    Floorplan.floorplanDiv.height(height)
-    Floorplan.floorplanDiv.width(width)
-    Floorplan.visualScale = width / Floorplan.visualScaleBasis
+    Floorplan.visualScale = Floorplan.floorplanDiv.width() / Floorplan.visualScaleBasis

-    return {width: width, height:height}
+    return {width: Floorplan.floorplanDiv.width(), height:Floorplan.floorplanDiv.height()}
 }
--- a/wwwroot/scripts/ts/keyboards.ts
+++ b/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 = () => {
-        hideVirtualKeyboard()
-    }) => {
+     let showVirtualKeyboard = (heading: string, maxlength = 32, isPassword = false, submitFunction :Function = () => {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)
-
-        $(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)
+            }
        })
    }

@@ -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)
-
-            //If shift, reload lowercase
-            if (Application.keyboard.shift) {
-                Application.keyboard.shift = false
-                setKeyboardLayout('default');
-            }
+            inputBox.val(newText)
        }

    }
--- a/wwwroot/styles/sass/dark.theme.sass
+++ b/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
+
--- a/wwwroot/styles/sass/dredgepos.authenticate.sass
+++ b/wwwroot/styles/sass/dredgepos.authenticate.sass
@@ -0,0 +1,2 @@
+@import dredgepos.keyboards
+
--- a/wwwroot/styles/sass/dredgepos.core.sass
+++ b/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
+
+
--- a/wwwroot/styles/sass/dredgepos.floorplan.sass
+++ b/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)
--- a/wwwroot/styles/sass/dredgepos.keyboards.sass
+++ b/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
--- a/wwwroot/styles/theme.css
+++ b/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;
 }

--- a/wwwroot/themes/restaurant/authenticate.tpl.htm
+++ b/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">
--- a/wwwroot/themes/restaurant/floorplan.tpl.htm
+++ b/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="tablemapLeftColumn">
+		<div id="pageContainer">
+			<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="centerTopRow">
+			<div id="floorplanCenterColumn">
+				<div class="topCell">
 					<!--[var:roomMenu]-->
 				</div>
-				<div id="mapContainer">
-					<div id="tableMap"></div>
+				<div class="middleCell">
+					<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>
--- a/wwwroot/themes/restaurant/virtualKeyboard.tpl.htm
+++ b/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>				
-		</div>				
+			<a></a>
+			<a></a>
+			<a></a>
+		</div>
 		<div class="virtualKeyboardRow">
-			<a></a>			
-		</div>		
+			<a></a>
+			<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>