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

update item views

Browse Source
This commit is contained in:
kalipso
2025-03-03 15:54:53 +01:00
parent 803535daba
commit 4e296ca445
3 changed files with 337 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
views/shopitem.html
View File

@@ -1,10 +1,67 @@
{{ template "header.html" . }}
<div class="bg-gray-100 dark:bg-gray-800 py-8">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row -mx-4">
<div class="md:flex-1 px-4">
<div class="h-[460px] rounded-lg bg-gray-300 dark:bg-gray-700 mb-4">
<img class="w-full h-full object-cover" src="/{{ .data.shopItem.Image}}" alt="Product Image">
</div>
<div class="flex -mx-2 mb-4">
<div class="w-1/3 px-2">
<button class="w-full bg-gray-900 dark:bg-gray-600 text-white py-2 px-4 rounded-full font-bold hover:bg-gray-800 dark:hover:bg-gray-700">Add to Cart</button>
</div>
{{ if .loggedIn }}
<div class="w-1/3 px-2">
<a href="{{ .data.shopItem.ID }}/edit"><button class="w-full bg-blue-900 dark:bg-gray-600 text-white py-2 px-4 rounded-full font-bold hover:bg-gray-800 dark:hover:bg-gray-700">Edit</button></a>
</div>
<div class="w-1/3 px-2">
<a href="{{ .data.shopItem.ID }}/delete"><button class="w-full bg-red-900 dark:bg-red-600 text-white py-2 px-4 rounded-full font-bold hover:bg-gray-800 dark:hover:bg-gray-700">Delete</button></a>
</div>
{{ end }}
</div>
</div>
<div class="md:flex-1 px-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">{{ .data.shopItem.Name }}</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">
{{ .data.shopItem.Abstract }}
</p>
<div class="flex mb-4">
<div class="mr-4">
<span class="font-bold text-gray-700 dark:text-gray-300">Price:</span>
<span class="text-gray-600 dark:text-gray-300">{{ .data.shopItem.Price }}€</span>
</div>
</div>
<!--
<div class="mb-4">
<span class="font-bold text-gray-700 dark:text-gray-300">Select Size:</span>
<div class="flex items-center mt-2">
<button class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600">Black/White</button>
<button class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600">Colored</button>
<button class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600">Colored Covering Page</button>
</div>
</div>
-->
<div>
<span class="font-bold text-gray-700 dark:text-gray-300">Product Description:</span>
<p class="text-gray-600 dark:text-gray-300 text-sm mt-2">
{{ .data.shopItem.Description }}
</p>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div class="bg-gray-200 rounded m-4 p-4">
<div class="relative w-full md:w-48 mb-4 flex rounded-lg justify-center items-center">
<div class="relative flex rounded-lg justify-center items-center">
<img src="/{{ .data.shopItem.Image }}" alt="shopping image"
class="object-cover w-full h-48 md:h-full rounded">
class="object-cover items-center justify-center rounded">
</div>
<h3 class="text-lg">{{ .data.shopItem.Name }}</h3>
<i class="text-xs">{{ .data.shopItem.Abstract }}</i>
@@ -19,5 +76,5 @@
</div>
</div>
-->
{{ template "footer.html" . }}

34
views/shopitems.html
View File

@@ -1,17 +1,27 @@
<div class="bg-white">
<div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
<h2 class="text-2xl font-bold tracking-tight text-gray-900">Available Zines</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
{{ range .data.shopItems }}
<a href="/shopitems/{{ .ID }}">
<div class="bg-gray-200 rounded m-4 p-4">
<div class="relative w-full md:w-48 mb-4 flex rounded-lg justify-center items-center">
<img src="/{{ .Image }}" alt="shopping image"
class="object-cover w-full h-48 md:h-full rounded">
</div>
<h3 class="text-lg">{{ .Name }}</h3>
<i class="text-xs">{{ .Abstract }}</i>
<p class="">Price: {{ .Price }}</pÖ>
<div class="group relative">
<img src="/{{ .Image }}" alt="Product Image" class="aspect-square w-full rounded-md bg-gray-200 object-cover group-hover:opacity-75 lg:aspect-auto lg:h-80">
<div class="mt-4 flex justify-between">
<div>
<h3 class="text-sm text-gray-700">
<a href="/shopitems/{{ .ID }}">
<span aria-hidden="true" class="absolute inset-0"></span>
{{ .Name }}
</a>
</h3>
<!--<p class="mt-1 text-sm text-gray-500">{{ .Abstract }}</p>-->
</div>
<p class="text-sm font-medium text-gray-900">{{ .Price }}€</p>
</div>
</div>
</a>
{{ end }}
</div>
</div>
</div>
</div>