So, I made a new order screen. I had a bit of inspiration from mcdonalds hahaha @pauln you might be able to notice the similarity. I had to make a new screen because customers were finidning it hard to read, so heres a preview of it. It tracks Free Items and applys different formating.
If anyone wants me to post it I can
Ok here it is
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="orders/new.css">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
{ORDERS}
</table>
<hr>
<table width="100%">
<tr>
<td><h1>Total</h1></td>
<td><h1>{TICKET TOTAL}</h1></td>
</tr>
{PAYMENTS}
{CHANGES}
</table>
[ORDERS]
<tr >
<td><h1>{QUANTITY}x {NAME}</h1></td>
[=TN('{PRICE}') == 0 ? '<td><h1 id="free">Free</h1></td>' : '<td><h1>$ {PRICE}</h1></td>' ]
</tr>
{ORDER TAGS}
[ORDER TAGS]
<tr>
<td><h4 id="special">{ORDER TAG QUANTITY}x {ORDER TAG NAME}</h4></td>
[=TN('{ORDER TAG PRICE}') == 0 ? '<td><h4 id="special">Free</h4></td>' : '<td><h4 id="special">${ORDER TAG PRICE}</h4></td>' ]
</tr>
[PAYMENTS]
<tr>
<td><h1>Tendered ({PAYMENT NAME})</h1></td>
<td><h1>${TENDERED}</h1></td>
</tr>
<tr>
<td><h1>Change ({PAYMENT NAME})</h1></td>
<td><h1>${CHANGE}</h1></td>
</tr>
[CHANGES]
<tr>
<td><h1>Change ({CHANGE PAYMENT NAME})</h1></td>
<td><h1>${CHANGE PAYMENT AMOUNT}</h1></td>
</tr>
<tr>
<td width="152"></td>
<td width="124">Change Due</td>
<td width="62" style="text-align:right">{CHANGE PAYMENT NAME} </td>
</tr>
</body>
</html>
#CSS HERE. MAKE A FILE IN YOUR documents/SambaPOS/orders/new.css with this
body {
height: 100%;
background-color: #000;
font: 400 15px Lato, sans-serif;
}
body {
overflow: auto;
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
#free{
color: #faff23;
}
#special{
color: #ff00ba;
}
tr td + td {
width: 20%;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table {
margin-left: 2%;
margin-top: 2%;
margin-right: 2%;
padding-bottom: 0em;
}
that’s pretty cool. So I can use this in my customer display using html printer thingy?
Yep you can. You just need to make this file in your documents/SambaPOS/orders/new.css
and paste in the css
Then its all good
You should try @QMcKay’s customer display screen. This is really like magic. I open it in my cell phone to demonstrate it and people amazes while watching it works.
The GraphQL One? You mean, do you have a gif example
