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/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