dredgy/DredgePos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructured files, made build script

Browse Source
This commit is contained in:
Josh
2022-02-14 16:31:08 +10:00
parent c73184808c
commit 6892b3d34c
58 changed files with 222 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
sass/dark.theme.sass Normal file
View File

@@ -0,0 +1,26 @@
\: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
--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
/** Order Screen **/
--orderbox-header-background: #888
--orderbox-row-background: var(--pos-header-background)
--orderbox-selected-row-background: #dd7f37
/** Order Box/Payment Splitter Box **/
--pulse-first-color: #ffa93e
--pulse-second-color: #dd7f37
--pulse-final-color: var(--orderbox-row-background)

2
sass/dredgepos.authenticate.sass Normal file
View File

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

125
sass/dredgepos.core.sass Normal file
View File

@@ -0,0 +1,125 @@
@font-face
font-family: "manrope"
src: url("/fonts/OpenSans-Regular.ttf") format('truetype')
font-style: normal
@font-face
font-family: "manrope"
src: url("/fonts/OpenSans-SemiBold.ttf") format('truetype')
font-weight: bold
@font-face
font-family: "manrope"
src: url("/fonts/OpenSans-Light.ttf") format('truetype')
font-weight: 100
*
margin: 0
padding: 0
box-sizing: border-box
font-family: 'manrope', sans-serif
scroll-behavior: smooth
*:not(input, textarea)
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
.rtl
direction: rtl
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
z-index: 999
@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)
overflow: hidden
cursor: pointer
text-decoration: none
.posHeader
padding: 0.5em
color: var(--pos-header-text-color)
background: var(--pos-header-background)
cursor: default
#pageContainer
@include flex
height: 100vh
.posButton, .posHeader
@include flex
text-align: center
.posButton.active, .posButton:active
border: inset 2px
background: var(--posbutton-background-active)
.posButton.voidButton
background: var(--void-button-background)
.invisible
visibility: hidden
.hidden
display: none
.pulse
animation-name: color
animation-duration: 300ms
animation-iteration-count: 1
@keyframes color
0%
background-color: var(--pulse-first-color)
50%
background-color: var(--pulse-second-color)
100%
background-color: var(--pulse-final-color)

142
sass/dredgepos.floorplan.sass Normal file
View File

@@ -0,0 +1,142 @@
@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
background: var(--global-secondary-bgcolor)
> *:not(#floorplanCanvas)
@include flex-column-item
flex: 1
.floorplanControls, .mergeControls
@include flex-column
> *
@include flex-column-item
#decorator
@include flex-column
@include absoluteCenter
display: none
border: solid 3px var(--global-border-color)
background-color: var(--global-bgcolor)
width: 30%
height: 50%
> *
@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)

151
sass/dredgepos.keyboards.sass Normal file
View File

@@ -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: 70%
width: 25%
border: solid 2px var(--global-border-color)
@include mobile
height: 100%
width: 100%
#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: 80%
height: 40%
background-color: var(--global-bgcolor)
border: solid 2px var(--global-border-color)
@include mobile
width: 100%
height: 10%
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: 60%
height: 40%
background-color: var(--global-bgcolor)
border: solid 2px var(--global-border-color)
@include mobile
width: 100%
height: 100%
> *
@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

343
sass/dredgepos.orderScreen.sass Normal file
View File

@@ -0,0 +1,343 @@
@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)
overflow-y: auto
.orderBoxInfo
@include flex
flex-basis: 5%
background-color: white
.voidModeWarning
@include flex
@include flex-item
color: red
font-weight: bold
.orderBoxFooter
flex-basis: 10%
@include flex-column
> *
@include flex
@include flex-column-item
justify-content: flex-end
padding: 0 0.7em
> .orderBoxTotal
align-items: flex-end
font-size: 1.3em
> .orderBoxSelectedTotal
align-items: flex-start
font-size: 0.9em
#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
.functionButtons
@include flex-column-item
@include flex
flex-basis: 100%
> .functionColumn
@include flex-item
@include flex-column
flex-basis: 25%
> *
@include flex-column-item
> .printGroupButtons
flex-basis: 25%
height: 100%
display: grid
grid-template-columns: repeat(2, 1fr)
grid-auto-rows: auto
> *
padding: 0.5em
#pageList
@include flex
@include flex-column-item
flex-basis: 10%
background-color: var(--global-secondary-bgcolor)
flex-grow: 0
flex-shrink: 0
> *
@include flex-item
border-bottom: solid 2px var(--global-border-color)
.active
border-bottom: none
#pageGroupContainer
@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
.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: 65%
width: 100%
flex-shrink: 0
flex-grow: 0
.text
@include flex
align-items: flex-start
flex-grow: 0
flex-shrink: 0
flex-basis: 35%
width: 100%
overflow: hidden
font-size: 0.9em
.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
> *
@include flex-item
.coverSelector
display: flex
flex-wrap: wrap
border: 2px solid var(--global-border-color)
background: var(--global-bgcolor)
position: absolute
z-index: 100
.coverSelectorButton
flex-basis: 50%
.coverSelectorButton:first-of-type
flex-basis: 100%
.orderBoxTable
width: 100%
border-collapse: collapse
tr
background: var(--orderbox-row-background)
.selected
background: var(--orderbox-selected-row-background)
thead tr
background: var(--orderbox-header-background)
th
font-weight: normal
text-align: center
padding: 0.2em 0.5em
tr
td, th
text-align: center
font-size: 0.9em
td
padding: 1em 0.5em
font-weight: bold
.itemCell
text-align: center
width: 60%
.qtyCell
width: 10%
.printGroupCell
width: 20%
.totalPriceCell
width: 10%
td.itemCell
text-align: left
display: flex
flex-direction: column
tr.instructionRow
td
font-weight: 100
td.itemCell
padding-left: 2em
small
font-size: 0
.qtyCell, .printGroupCell
font-size: 0
.gridContainer
background: var(--global-bgcolor)
border: var(--global-border-color) solid 2px
z-index: 500
margin: auto
position: absolute
left: 0
right: 0
top: 50%
transform: translateY(-50%)
.gridContainerHeader
height: 3em
width: 100%
@include flex
background-color: var(--global-secondary-bgcolor)
border-bottom: solid 1px var(--global-border-color)
> *
@include flex
height: 100%
span
flex-basis: 90%
.closeGrid
flex-basis: 10%
.gridContainerGrid
width: 100%
@include flex-column
scrollbar-width: none
-ms-overflow-style: none
::-webkit-scrollbar
display: none
.pageGroup
display: inline-flex
flex-basis: 100%
flex-grow: 0
overflow-x: auto
.gridPage
width: 100%
height: 100%
flex-shrink: 0
flex-grow: 0
display: grid