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

feat(game page): more subtle design improvements

Browse Source
This commit is contained in:
DecDuck
2024-11-08 21:23:31 +11:00
parent e796b465d1
commit a815542604
1 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,10 @@
</div> </div>
<!-- main page --> <!-- main page -->
<div <div
class="max-w-7xl w-full min-h-screen mx-auto bg-zinc-900 px-5 py-4 sm:px-16 sm:py-12 rounded-md" :class="[
'max-w-7xl w-full min-h-screen mx-auto px-5 py-4 sm:px-16 sm:py-12 rounded-xl', // layout stuff
'bg-zinc-950/90 backdrop-blur-[500px] backdrop-saturate-200 backdrop-brightness-200', // make a soft, colourful glow background
]"
> >
<h1 <h1
class="text-3xl md: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"
@ -23,7 +26,10 @@
<div <div
class="col-start-1 lg:col-start-4 flex flex-col gap-y-6 items-center" class="col-start-1 lg:col-start-4 flex flex-col gap-y-6 items-center"
> >
<img class="transition-all duration-300 hover:scale-105 hover:rotate-[-1deg] w-64 h-auto rounded" :src="useObject(game.mCoverId)" /> <img
class="transition-all duration-300 hover:scale-105 hover:rotate-[-1deg] w-64 h-auto rounded"
:src="useObject(game.mCoverId)"
/>
<button <button
type="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" 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"
@ -50,7 +56,7 @@
<p class="text-lg text-zinc-400"> <p class="text-lg text-zinc-400">
{{ game.mShortDescription }} {{ game.mShortDescription }}
</p> </p>
<div class="mt-6 bg-zinc-900 py-4 rounded"> <div class="mt-6 py-4 rounded">
<VueCarousel :items-to-show="1"> <VueCarousel :items-to-show="1">
<VueSlide v-for="image in game.mImageLibrary" :key="image"> <VueSlide v-for="image in game.mImageLibrary" :key="image">
<img <img
@ -77,8 +83,10 @@
v-html="descriptionHTML" v-html="descriptionHTML"
class="mt-12 prose prose-invert prose-blue max-w-none" class="mt-12 prose prose-invert prose-blue max-w-none"
/> />
<button <button
class="w-full inline-flex items-center gap-x-6" v-if="showReadMore"
class="mt-8 w-full inline-flex items-center gap-x-6"
@click="() => (showPreview = !showPreview)" @click="() => (showPreview = !showPreview)"
> >
<div class="grow h-[1px] bg-zinc-700 rounded-full" /> <div class="grow h-[1px] bg-zinc-700 rounded-full" />
@ -127,13 +135,28 @@ const md = MarkdownIt();
// Preview description (first 30 lines) // Preview description (first 30 lines)
const showPreview = ref(true); const showPreview = ref(true);
const previewDescription = game.mDescription const gameDescriptionCharacters = game.mDescription.split("");
.split("\n")
.slice(0, 30) // First new line after x characters
.join("\n"); const descriptionSplitIndex = gameDescriptionCharacters.findIndex(
(v, i, arr) => {
// If we're at the last element, we return true.
// So we don't have to handle a -1 from this findIndex
if (i + 1 == arr.length) return true;
if (i < 500) return false;
if (v != "\n") return false;
return true;
}
);
const previewDescription = gameDescriptionCharacters
.slice(0, descriptionSplitIndex + 1) // Slice a character after
.join("");
const previewHTML = md.render(previewDescription); const previewHTML = md.render(previewDescription);
const descriptionHTML = md.render(game.mDescription); const descriptionHTML = md.render(game.mDescription);
const showReadMore = previewHTML != descriptionHTML;
const platforms = game.versions const platforms = game.versions
.map((e) => e.platform) .map((e) => e.platform)
.flat() .flat()