Added Basic Order Screen

2021-11-21 20:44:44 +10:00
parent dd1ed266f8
commit a48c3a68e0
107 changed files with 678 additions and 307 deletions
--- a/wwwroot/styles/sass/dark.theme.sass
+++ b/wwwroot/styles/sass/dark.theme.sass
@@ -13,4 +13,5 @@
    --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
+    --void-button-background: red -webkit-gradient(linear, left top, left bottom, color-stop(3%,darkred), color-stop(51%,darkred), color-stop(100%,red)) 0 top

--- a/wwwroot/styles/sass/dredgepos.core.sass
+++ b/wwwroot/styles/sass/dredgepos.core.sass
@@ -1,8 +1,18 @@
+@font-face
+    font-family: "manrope"
+    src: url("/fonts/OpenSans-Regular.ttf") format('truetype')
+    font-style: normal
+
+
 *
    margin: 0
    padding: 0
    box-sizing: border-box
-    font-family: Arial, Helvetica, sans-serif
+    font-family: 'manrope', sans-serif
+    scroll-behavior: smooth
+
+.rtl
+    direction: rtl

 input[type=text], select, textarea
    padding-left: 1em
@@ -50,17 +60,15 @@ body
    background: var(--posbutton-background)
    text-shadow: 1px 1px #1f272b
    border: solid 1px var(--posbutton-border-color)
+    overflow: hidden
+    cursor: pointer
+    text-decoration: none

 .posHeader
    padding: 0.5em
    color: var(--pos-header-text-color)
    background: var(--pos-header-background)
-
-.posButton.active,.posButton:active, .posButton:focus
-    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 */
+    cursor: default

 #pageContainer
    @include flex
@@ -69,9 +77,12 @@ body
 .posButton, .posHeader
    @include flex
    text-align: center
-    cursor: default

 .posButton.active, .posButton:active
    border: inset 2px

+.posButton.voidButton
+    background: var(--void-button-background)

+.invisible
+    visibility: hidden
--- a/wwwroot/styles/sass/dredgepos.orderScreen.sass
+++ b/wwwroot/styles/sass/dredgepos.orderScreen.sass
@@ -0,0 +1,198 @@
+@import dredgepos.keyboards
+
+#leftColumn
+    @include flex-column
+    flex-basis: 30%
+    height: 100%
+    background-color: grey
+
+    > *
+        @include flex-column-item
+
+    .tableHeading
+        @include flex
+        color: black
+        background-color: white
+        flex-basis: 5%
+
+    .tableInfo
+        @include flex
+        flex-basis: 5%
+
+        > *
+            @include flex-item
+            @include flex
+
+    .orderBox
+        flex-basis: 75%
+        background: var(--global-bgcolor)
+
+    .orderBoxInfo
+        flex-basis: 5%
+        background-color: white
+
+    .orderBoxFooter
+        flex-basis: 10%
+
+#rightColumn
+    @include flex-column
+    height: 100%
+    flex-basis: 70%
+    background-color: var(--global-bgcolor)
+    border-left: 2px solid var(--global-border-color)
+
+    #topHalf
+        @include flex-column
+        @include flex-column-item
+        flex-basis: 30%
+        flex-grow:  0
+        flex-shrink: 0
+
+        .utilityButtons
+            @include flex-column-item
+            @include flex
+            flex-basis: 20%
+
+            > *
+                @include flex-item
+                @include flex
+                flex-basis: 30%
+
+            .logoutButton
+                flex-basis: 10%
+
+
+        .functionButtons
+            @include flex-column-item
+            @include flex
+            flex-basis: 80%
+
+            > *
+                @include flex-item
+                @include flex-column
+
+                > *
+                    @include flex-column-item
+
+
+    #pageList
+        @include flex
+        @include flex-column-item
+        flex-basis: 10%
+        background-color: magenta
+        flex-grow: 0
+        flex-shrink: 0
+
+        > *
+            @include flex-item
+            border-bottom: solid 2px var(--global-border-color)
+
+        .active
+            border-bottom: none
+
+    #pageContainer
+        @include flex-column
+        @include flex-column-item
+        justify-content: flex-end
+        flex-basis: 45%
+        height: 50%
+        scrollbar-width: none
+        -ms-overflow-style: none
+
+        ::-webkit-scrollbar
+             display: none
+
+        .pageGroup
+            /*display: inline-flex*/
+            @include flex-column-item
+            flex-basis: 100%
+            flex-grow: 0
+            overflow-x: auto
+            display: none
+
+            .gridPage
+                width: 100%
+                height: 100%
+                flex-shrink: 0
+                flex-grow: 0
+                display: grid
+                grid-template-columns: repeat(6, 1fr)
+                grid-template-rows: repeat(8, 1fr)
+
+                .doubleWidth
+                    width: calc(200%)
+                    z-index: 10
+
+                .doubleHeight
+                    height: calc(200%)
+                    z-index: 10
+
+                .hasImage
+                    .buttonImg
+                        background-repeat: no-repeat
+                        background-size: contain
+                        background-position: center
+                        background-origin: content-box
+
+                .hasImage.normal
+                    font-size: 0.8em
+                    .buttonImg
+                        flex-basis: 40%
+                        height: 100%
+                        padding: 0.7em
+                        justify-content: flex-end
+
+                    .text
+                        @include flex
+                        justify-content: flex-start
+                        flex-basis: 60%
+                        height: 100%
+
+                .hasImage.doubleHeight
+                    @include flex-column
+
+                    .buttonImg
+                        padding: 0.6em
+                        flex-basis: 80%
+                        width: 100%
+
+                    .text
+                        @include flex
+                        flex-basis: 20%
+                        width: 100%
+
+                .hasImage.doubleWidth
+                    flex-direction: row
+                    .buttonImg
+                        @include flex
+                        flex-basis: 30%
+                        height: 100%
+                        padding-top: 2%
+
+                    .text
+                        @include flex
+                        flex-basis: 70%
+                        height: 100%
+                        justify-content: flex-start
+
+                .hasImage.doubleHeight.doubleWidth
+                    flex-direction: row
+
+                    .buttonImg
+                        @include flex
+                        flex-basis: 50%
+                        height: 100%
+
+
+                    .text
+                        @include flex
+                        flex-basis: 50%
+                        height: 100%
+
+    .pageNavigation
+        @include flex
+        @include flex-column-item
+        flex-basis: 15%
+
+        > *
+            @include flex-item