Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2025-11-13 00:02:37 +10:00
Code Issues Packages Projects Releases Wiki Activity

fixes to store page for mobile clients

Browse Source
This commit is contained in:
DecDuck
2024-10-12 17:33:31 +11:00
parent 9b7ee4e746
commit 328b9ba46c
1 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
pages/store/[id]/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div
class="mx-auto w-full relative flex flex-col justify-center pt-24 z-10 overflow-hidden"
class="mx-auto w-full relative flex flex-col justify-center pt-32 xl:pt-24 z-10 overflow-hidden"
>
<!-- banner image -->
<div class="absolute flex top-0 h-fit inset-x-0 h-12 -z-[20]">
@ -10,35 +10,16 @@
/>
</div>
<!-- main page -->
<div class="max-w-7xl w-full mx-auto bg-zinc-900 px-16 py-12 rounded-md">
<div class="max-w-7xl w-full min-h-screen mx-auto bg-zinc-900 px-16 py-12 rounded-md">
<h1
class="text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800"
class="text-3xl md:text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800"
>
{{ game.mName }}
</h1>
<div class="mt-8 grid grid-cols-4 gap-x-10">
<div class="col-span-3">
<p class="text-lg text-zinc-400">
{{ game.mShortDescription }}
</p>
<div
class="mt-6 flex flex-row overflow-x-auto max-w-full p-4 bg-zinc-800 rounded gap-x-2"
>
<img
v-for="image in game.mImageLibrary"
class="h-64 w-auto rounded"
:src="useObject(image)"
/>
</div>
<div
v-html="descriptionHTML"
class="mt-12 prose prose-invert prose-blue max-w-none"
/>
</div>
<div class="flex flex-col gap-y-6 items-center">
<img class="w-full h-auto rounded" :src="useObject(game.mCoverId)" />
<div class="mt-8 grid grid-cols-1 md:grid-cols-4 gap-10">
<div class="col-start-1 md:col-start-4 flex flex-col gap-y-6 items-center">
<img class="w-64 h-auto rounded" :src="useObject(game.mCoverId)" />
<button
type="button"
class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-xl font-semibold font-display text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
@ -60,6 +41,27 @@
>
</div>
</div>
<div class="row-start-2 md:row-start-1 md:col-span-3">
<p class="text-lg text-zinc-400">
{{ game.mShortDescription }}
</p>
<div
class="mt-6 flex flex-row overflow-x-auto max-w-full p-4 bg-zinc-800 rounded gap-x-2"
>
<img
v-for="image in game.mImageLibrary"
class="h-64 w-max rounded"
:src="useObject(image)"
/>
</div>
<div
v-html="descriptionHTML"
class="mt-12 prose prose-invert prose-blue max-w-none"
/>
</div>
</div>
</div>
</div>
@ -88,4 +90,8 @@ const icons = {
[Platform.Linux]: LinuxLogo,
[Platform.Windows]: WindowsLogo,
};
useHead({
title: game.mName
})
</script>