kalipso/zineshop
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

responsive print dialog
Some checks failed
Go / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
kalipso
2025-07-02 15:02:17 +02:00
parent a6e7baf087
commit 9b67dd7955
2 changed files with 97 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
static/output.css
View File

@@ -587,10 +587,22 @@ video {
grid-column: span 12 / span 12;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-7 {
grid-column: span 7 / span 7;
}
.-m-1\.5 {
margin: -0.375rem;
}
@@ -603,6 +615,10 @@ video {
margin: 1rem;
}
.m-8 {
margin: 2rem;
}
.-mx-2 {
margin-left: -0.5rem;
margin-right: -0.5rem;
@@ -770,6 +786,10 @@ video {
width: 100%;
}
.w-16 {
width: 4rem;
}
.min-w-full {
min-width: 100%;
}
@@ -834,6 +854,10 @@ video {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@@ -842,6 +866,10 @@ video {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
@@ -854,6 +882,10 @@ video {
align-items: center;
}
.items-stretch {
align-items: stretch;
}
.justify-center {
justify-content: center;
}
@@ -917,6 +949,12 @@ video {
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -949,10 +987,6 @@ video {
overflow-wrap: break-word;
}
.break-all {
word-break: break-all;
}
.rounded {
border-radius: 0.25rem;
}
@@ -1107,11 +1141,6 @@ video {
background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
--tw-bg-opacity: 1;
background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
@@ -1202,11 +1231,6 @@ video {
background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
@@ -1307,6 +1331,16 @@ video {
background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
--tw-bg-opacity: 1;
background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.fill-red-50 {
fill: #fef2f2;
}
@@ -1371,11 +1405,6 @@ video {
padding-bottom: 0.125rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
@@ -1421,6 +1450,11 @@ video {
padding-bottom: 2rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
@@ -1655,11 +1689,6 @@ video {
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
--tw-text-opacity: 1;
color: rgb(22 101 52 / var(--tw-text-opacity, 1));
@@ -1835,6 +1864,11 @@ video {
color: rgb(39 39 42 / var(--tw-text-opacity, 1));
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -2139,6 +2173,10 @@ video {
display: flex;
}
.sm\:grid {
display: grid;
}
.sm\:hidden {
display: none;
}
@@ -2151,6 +2189,10 @@ video {
max-width: 24rem;
}
.sm\:grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.sm\:items-center {
align-items: center;
}
@@ -2186,6 +2228,14 @@ video {
}
@media (min-width: 768px) {
.md\:block {
display: block;
}
.md\:grid {
display: grid;
}
.md\:flex-1 {
flex: 1 1 0%;
}
@@ -2194,6 +2244,10 @@ video {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}

51
views/printvariant.html
View File

@@ -4,6 +4,7 @@
<div class="mx-auto max-w-4xl">
<div class="mt-6 sm:mt-8">
<div class="relative overflow-x-auto border-b border-gray-200 dark:border-gray-800">
<div class="m-4">
<h2 class="title font-manrope font-bold text-4xl leading-10 mb-8 text-center text-black">Zineshop Print
Service
</h2>
@@ -21,58 +22,44 @@
</p>
</div>
<form action="/print" method="POST">
<table class="w-full text-left font-medium text-gray-900 dark:text-white">
<tbody class="divide-y divide-gray-200 dark:divide-gray-800">
{{ range .data.cartItems }}
<tr>
<input type="hidden" name="variant-id[]" value="{{ .ItemVariant.ID }}" required>
<td class="whitespace-nowrap py-4">
<div class="flex items-center gap-4">
<a href="/shopitems/{{ .ItemVariant.ShopItemID }}" class="flex items-center aspect-square w-8 h-10 shrink-0">
<img class="h-auto w-full max-h-full dark:hidden" src="/{{ .ShopItem.Image }}" alt="imac image" />
</a>
<div class="flex items-stretch border rounded m-4 p-2 sm:grid sm:grid-cols-8 gap-4">
<input type="hidden" name="variant-id[]" value="{{ .ItemVariant.ID }}" required>
<div class="col-span-1 hidden sm:block">
<a href="/shopitems/{{ .ItemVariant.ShopItemID }}" class="flex items-center aspect-square h-full shrink-0">
<img class="h-full w-auto" src="/{{ .ShopItem.Image }}" alt="imac image" />
</a>
</div>
<div class="flex flex-col col-span-7 justify-between p-4">
<div class="flex items-center mb-8">
<a href="/shopitems/{{ .ItemVariant.ShopItemID }}" class="hover:underline">{{ .ShopItem.Name }} - {{ .ItemVariant.Name }}</a>
</div>
<div class="flex space-x-2 mb-2">
{{ if .ShopItem.WasPrinted }}
<span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-600/20 ring-inset">Tested</span>
{{ else }}
<span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-red-600/10 ring-inset">NOT TESTED</span>
<span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-red-600/10 ring-inset">Not Tested</span>
{{ end }}
<a href="/shopitems/{{ .ItemVariant.ShopItemID }}" class="hover:underline">{{ .ShopItem.Name }} - {{ .ItemVariant.Name }}</a>
</div>
</td>
<td class="whitespace-nowrap py-4">
<select name="variant-papertype[]" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
{{ range $.data.paper }}
<option value="{{ .ID }}">{{ .Brand }} - {{ .Name }}: {{ .Size }} {{ .Weight }}g/m2</option>
{{ end}}
</select>
</td>
<td class="whitespace-nowrap py-4">
<select name="variant-coverpage[]" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option selected value="0">CoverPage: None</option>
{{ range $.data.paper }}
<option value="{{ .ID }}">{{ .Brand }} - {{ .Name }}: {{ .Size }} {{ .Weight }}g/m2</option>
{{ end}}
</select>
</td>
<td class="whitespace-nowrap py-4">
Amount:
</td>
<td class="p-4 text-right text-base font-bold text-gray-900 dark:text-white">
<div>
<div class="mt-2">
<input type="number" name="variant-amount[]" value="{{ .Quantity }}" step="1" min="0" required class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
</div>
<input type="number" name="variant-amount[]" value="{{ .Quantity }}" step="1" min="0" required class="text-right border rounded p-2 w-16">
</div>
</td>
</tr>
</div>
</div>
{{ end }}
</tbody>
</table>
<div class="max-lg:max-w-lg max-lg:mx-auto">
<p class="font-normal text-base leading-7 text-gray-500 text-center mb-5 mt-6">If CoverPage selected, make sure you put paper in the BypassTray</p>