mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-12 15:52:39 +10:00
fix: inital eslint errors
This commit is contained in:
Huskydog9988
@ -60,9 +60,9 @@
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
<ul class="flex flex-col gap-y-2">
|
||||
<li
|
||||
class="inline-flex items-center gap-x-0.5"
|
||||
v-for="capability in client.capabilities"
|
||||
:key="capability"
|
||||
class="inline-flex items-center gap-x-0.5"
|
||||
>
|
||||
<CheckIcon class="size-4" /> {{ capability }}
|
||||
</li>
|
||||
@ -75,8 +75,8 @@
|
||||
class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3"
|
||||
>
|
||||
<button
|
||||
@click="() => revokeClientWrapper(client.id)"
|
||||
class="text-red-600 hover:text-red-900"
|
||||
@click="() => revokeClientWrapper(client.id)"
|
||||
>
|
||||
Revoke<span class="sr-only">, {{ client.name }}</span>
|
||||
</button>
|
||||
|
||||
@ -113,7 +113,7 @@
|
||||
class="h-[min(152px,40cqw)] object-cover"
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-security.png"
|
||||
alt=""
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="flex flex-col gap-y-4 max-w-lg">
|
||||
<Listbox
|
||||
as="div"
|
||||
v-on:update:model-value="(value) => updateCurrentlySelectedVersion(value)"
|
||||
:model-value="currentlySelectedVersion"
|
||||
@update:model-value="(value) => updateCurrentlySelectedVersion(value)"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Select version to import</ListboxLabel
|
||||
@ -37,11 +37,11 @@
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-zinc-800 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
as="template"
|
||||
v-for="(version, versionIdx) in versions"
|
||||
:key="version"
|
||||
:value="versionIdx"
|
||||
v-slot="{ active, selected }"
|
||||
as="template"
|
||||
:value="versionIdx"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
@ -73,7 +73,7 @@
|
||||
</div>
|
||||
</Listbox>
|
||||
|
||||
<div class="flex flex-col gap-8" v-if="versionGuesses">
|
||||
<div v-if="versionGuesses" class="flex flex-col gap-8">
|
||||
<!-- setup executable -->
|
||||
<div>
|
||||
<label
|
||||
@ -93,15 +93,15 @@
|
||||
<Combobox
|
||||
as="div"
|
||||
:value="versionSettings.setup"
|
||||
@update:model-value="(v) => updateSetupCommand(v)"
|
||||
nullable
|
||||
@update:model-value="(v) => updateSetupCommand(v)"
|
||||
>
|
||||
<div class="relative">
|
||||
<ComboboxInput
|
||||
class="block flex-1 border-0 py-1.5 pl-1 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
:placeholder="'setup.exe'"
|
||||
@change="setupProcessQuery = $event.target.value"
|
||||
@blur="setupProcessQuery = ''"
|
||||
:placeholder="'setup.exe'"
|
||||
/>
|
||||
<ComboboxButton
|
||||
v-if="setupFilteredVersionGuesses?.length ?? 0 > 0"
|
||||
@ -119,9 +119,9 @@
|
||||
<ComboboxOption
|
||||
v-for="guess in setupFilteredVersionGuesses"
|
||||
:key="guess.filename"
|
||||
v-slot="{ active, selected }"
|
||||
:value="guess.filename"
|
||||
as="template"
|
||||
v-slot="{ active, selected }"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
@ -156,9 +156,9 @@
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
<ComboboxOption
|
||||
:value="setupProcessQuery"
|
||||
v-if="setupProcessQuery"
|
||||
v-slot="{ active, selected }"
|
||||
:value="setupProcessQuery"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
@ -189,13 +189,13 @@
|
||||
</div>
|
||||
</Combobox>
|
||||
<input
|
||||
type="text"
|
||||
name="startup"
|
||||
id="startup"
|
||||
v-model="versionSettings.setupArgs"
|
||||
type="text"
|
||||
name="startup"
|
||||
class="border-l border-zinc-700 block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
placeholder="--setup"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -249,15 +249,15 @@
|
||||
<Combobox
|
||||
as="div"
|
||||
:value="versionSettings.launch"
|
||||
@update:model-value="(v) => updateLaunchCommand(v)"
|
||||
nullable
|
||||
@update:model-value="(v) => updateLaunchCommand(v)"
|
||||
>
|
||||
<div class="relative">
|
||||
<ComboboxInput
|
||||
class="block flex-1 border-0 py-1.5 pl-1 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
:placeholder="'game.exe'"
|
||||
@change="launchProcessQuery = $event.target.value"
|
||||
@blur="launchProcessQuery = ''"
|
||||
:placeholder="'game.exe'"
|
||||
/>
|
||||
<ComboboxButton
|
||||
v-if="launchFilteredVersionGuesses?.length ?? 0 > 0"
|
||||
@ -275,9 +275,9 @@
|
||||
<ComboboxOption
|
||||
v-for="guess in launchFilteredVersionGuesses"
|
||||
:key="guess.filename"
|
||||
v-slot="{ active, selected }"
|
||||
:value="guess.filename"
|
||||
as="template"
|
||||
v-slot="{ active, selected }"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
@ -312,9 +312,9 @@
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
<ComboboxOption
|
||||
:value="launchProcessQuery"
|
||||
v-if="launchProcessQuery"
|
||||
v-slot="{ active, selected }"
|
||||
:value="launchProcessQuery"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
@ -345,18 +345,18 @@
|
||||
</div>
|
||||
</Combobox>
|
||||
<input
|
||||
type="text"
|
||||
name="startup"
|
||||
id="startup"
|
||||
v-model="versionSettings.launchArgs"
|
||||
type="text"
|
||||
name="startup"
|
||||
class="border-l border-zinc-700 block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
placeholder="--launch"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 bg-zinc-900/50"
|
||||
v-if="versionSettings.onlySetup"
|
||||
class="absolute inset-0 bg-zinc-900/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -393,7 +393,7 @@
|
||||
/>
|
||||
</Switch>
|
||||
</SwitchGroup>
|
||||
<Disclosure as="div" class="py-2" v-slot="{ open }">
|
||||
<Disclosure v-slot="{ open }" as="div" class="py-2">
|
||||
<dt>
|
||||
<DisclosureButton
|
||||
class="border-b border-zinc-600 pb-2 flex w-full items-start justify-between text-left text-zinc-100"
|
||||
@ -453,15 +453,15 @@
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="umu-id"
|
||||
v-model="umuId"
|
||||
name="umu-id"
|
||||
type="text"
|
||||
autocomplete="umu-id"
|
||||
required
|
||||
:disabled="!umuIdEnabled"
|
||||
v-model="umuId"
|
||||
placeholder="umu-starcitizen"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-950 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -473,9 +473,9 @@
|
||||
</Disclosure>
|
||||
|
||||
<LoadingButton
|
||||
@click="startImport_wrapper"
|
||||
class="w-fit"
|
||||
:loading="importLoading"
|
||||
@click="startImport_wrapper"
|
||||
>
|
||||
Import
|
||||
</LoadingButton>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
class="flex flex-col lg:flex-row lg:justify-between items-start lg:items-center gap-2"
|
||||
>
|
||||
<div class="inline-flex items-center gap-4">
|
||||
<img :src="useObject(game.mIconId)" class="size-20" />
|
||||
<img :src="useObject(game.mIconId)" class="size-20" >
|
||||
<div>
|
||||
<h1 class="text-5xl font-bold font-display text-zinc-100">
|
||||
{{ game.mName }}
|
||||
@ -19,9 +19,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="() => (showEditCoreMetadata = true)"
|
||||
type="button"
|
||||
class="relative inline-flex gap-x-3 items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold 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"
|
||||
@click="() => (showEditCoreMetadata = true)"
|
||||
>
|
||||
Edit <PencilIcon class="size-4" />
|
||||
</button>
|
||||
@ -44,9 +44,9 @@
|
||||
</div>
|
||||
<div class="ml-4 mt-4 shrink-0">
|
||||
<button
|
||||
@click="() => (showAddCarouselModal = true)"
|
||||
type="button"
|
||||
class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold 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"
|
||||
@click="() => (showAddCarouselModal = true)"
|
||||
>
|
||||
Add from image library
|
||||
</button>
|
||||
@ -54,28 +54,28 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-zinc-400 text-center py-8"
|
||||
v-if="game.mImageCarousel.length == 0"
|
||||
class="text-zinc-400 text-center py-8"
|
||||
>
|
||||
No images added to the carousel yet.
|
||||
</div>
|
||||
|
||||
<draggable
|
||||
v-else
|
||||
@update="() => updateImageCarousel()"
|
||||
:list="game.mImageCarousel"
|
||||
class="w-full flex flex-row gap-x-4 overflow-x-auto my-2 py-4"
|
||||
@update="() => updateImageCarousel()"
|
||||
>
|
||||
<template #item="{ element }: { element: string }">
|
||||
<div class="relative group min-w-fit">
|
||||
<img :src="useObject(element)" class="h-48 w-auto" />
|
||||
<img :src="useObject(element)" class="h-48 w-auto" >
|
||||
<div
|
||||
class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
|
||||
>
|
||||
<button
|
||||
@click="() => removeImageFromCarousel(element)"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold 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"
|
||||
@click="() => removeImageFromCarousel(element)"
|
||||
>
|
||||
Remove image
|
||||
</button>
|
||||
@ -129,10 +129,10 @@
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="block lg:hidden"
|
||||
@click="
|
||||
() => (mobileShowFinalDescription = !mobileShowFinalDescription)
|
||||
"
|
||||
class="block lg:hidden"
|
||||
>
|
||||
<DocumentIcon
|
||||
v-if="!mobileShowFinalDescription"
|
||||
@ -166,7 +166,7 @@
|
||||
'lg:block prose prose-invert prose-blue bg-zinc-950/30 rounded px-4 py-3',
|
||||
]"
|
||||
v-html="descriptionHTML"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -229,9 +229,9 @@
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<button
|
||||
@click="() => (showUploadModal = true)"
|
||||
type="button"
|
||||
class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold 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"
|
||||
@click="() => (showUploadModal = true)"
|
||||
>
|
||||
Upload
|
||||
</button>
|
||||
@ -244,30 +244,30 @@
|
||||
:key="image"
|
||||
class="group relative flex items-center bg-zinc-950/30"
|
||||
>
|
||||
<img :src="useObject(image)" class="w-full h-auto" />
|
||||
<img :src="useObject(image)" class="w-full h-auto" >
|
||||
<div
|
||||
class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
|
||||
>
|
||||
<button
|
||||
v-if="image !== game.mBannerId"
|
||||
@click="() => updateBannerImage(image)"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold 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"
|
||||
@click="() => updateBannerImage(image)"
|
||||
>
|
||||
Set as banner
|
||||
</button>
|
||||
<button
|
||||
v-if="image !== game.mCoverId"
|
||||
@click="() => updateCoverImage(image)"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold 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"
|
||||
@click="() => updateCoverImage(image)"
|
||||
>
|
||||
Set as cover
|
||||
</button>
|
||||
<button
|
||||
@click="() => deleteImage(image)"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
||||
@click="() => deleteImage(image)"
|
||||
>
|
||||
Delete image
|
||||
</button>
|
||||
@ -305,10 +305,10 @@
|
||||
|
||||
<div class="mt-4 text-center w-full text-sm text-zinc-600">lowest</div>
|
||||
<draggable
|
||||
@update="() => updateVersionOrder()"
|
||||
:list="game.versions"
|
||||
handle=".handle"
|
||||
class="mt-2 space-y-4"
|
||||
@update="() => updateVersionOrder()"
|
||||
>
|
||||
<template #item="{ element: item }: { element: GameVersion }">
|
||||
<div
|
||||
@ -334,8 +334,8 @@
|
||||
</template>
|
||||
</draggable>
|
||||
<div
|
||||
class="text-center font-bold text-zinc-400 my-3"
|
||||
v-if="game.versions.length == 0"
|
||||
class="text-center font-bold text-zinc-400 my-3"
|
||||
>
|
||||
no versions added
|
||||
</div>
|
||||
@ -358,14 +358,14 @@
|
||||
:key="image"
|
||||
class="group relative flex items-center bg-zinc-950/30"
|
||||
>
|
||||
<img :src="useObject(image)" class="w-full h-auto" />
|
||||
<img :src="useObject(image)" class="w-full h-auto" >
|
||||
<div
|
||||
class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
|
||||
>
|
||||
<button
|
||||
@click="() => addImageToCarousel(image)"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold 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"
|
||||
@click="() => addImageToCarousel(image)"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
@ -381,10 +381,10 @@
|
||||
</template>
|
||||
<template #buttons>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
|
||||
@click="showAddCarouselModal = false"
|
||||
ref="cancelButtonRef"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@ -398,14 +398,14 @@
|
||||
:key="image"
|
||||
class="group relative flex items-center bg-zinc-950/30"
|
||||
>
|
||||
<img :src="useObject(image)" class="w-full h-auto" />
|
||||
<img :src="useObject(image)" class="w-full h-auto" >
|
||||
<div
|
||||
class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
|
||||
>
|
||||
<button
|
||||
@click="() => insertImageAtCursor(image)"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold 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"
|
||||
@click="() => insertImageAtCursor(image)"
|
||||
>
|
||||
Insert
|
||||
</button>
|
||||
@ -421,10 +421,10 @@
|
||||
</template>
|
||||
<template #buttons>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
|
||||
@click="showAddCarouselModal = false"
|
||||
ref="cancelButtonRef"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@ -435,7 +435,7 @@
|
||||
<div class="flex flex-col lg:flex-row gap-6">
|
||||
<!-- icon upload div -->
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<img :src="coreMetadataIconUrl" class="size-24 aspect-square" />
|
||||
<img :src="coreMetadataIconUrl" class="size-24 aspect-square" >
|
||||
<label for="file-upload">
|
||||
<span
|
||||
type="button"
|
||||
@ -444,12 +444,12 @@
|
||||
Upload
|
||||
</span>
|
||||
<input
|
||||
id="file-upload"
|
||||
accept="image/*"
|
||||
@change="(e) => coreMetadataUploadFiles(e as any)"
|
||||
class="hidden"
|
||||
type="file"
|
||||
id="file-upload"
|
||||
/>
|
||||
@change="(e) => coreMetadataUploadFiles(e as any)"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<!-- edit title -->
|
||||
@ -460,12 +460,12 @@
|
||||
>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="name"
|
||||
v-model="coreMetadataName"
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
|
||||
v-model="coreMetadataName"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@ -476,12 +476,12 @@
|
||||
>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="description"
|
||||
v-model="coreMetadataDescription"
|
||||
type="text"
|
||||
name="description"
|
||||
id="description"
|
||||
class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
|
||||
v-model="coreMetadataDescription"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -491,16 +491,16 @@
|
||||
<LoadingButton
|
||||
type="button"
|
||||
:loading="coreMetadataLoading"
|
||||
@click="() => coreMetadataUpdate_wrapper()"
|
||||
:class="['inline-flex w-full shadow-sm sm:ml-3 sm:w-auto']"
|
||||
@click="() => coreMetadataUpdate_wrapper()"
|
||||
>
|
||||
Save
|
||||
</LoadingButton>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
|
||||
@click="showEditCoreMetadata = false"
|
||||
ref="cancelButtonRef"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-y-6 w-full max-w-md">
|
||||
<Listbox as="div" v-on:update:model-value="(value) => updateSelectedGame_wrapper(value)"
|
||||
:model="currentlySelectedGame">
|
||||
<Listbox
|
||||
as="div" :model="currentlySelectedGame"
|
||||
@update:model-value="(value) => updateSelectedGame_wrapper(value)">
|
||||
<ListboxLabel class="block text-sm font-medium leading-6 text-zinc-100">Select game to import</ListboxLabel>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
@ -15,22 +16,27 @@
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
<transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0">
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-zinc-800 focus:outline-none sm:text-sm">
|
||||
<ListboxOption as="template" v-for="(game, gameIdx) in games.unimportedGames" :key="game" :value="gameIdx"
|
||||
v-slot="{ active, selected }">
|
||||
<li :class="[
|
||||
<ListboxOption
|
||||
v-for="(game, gameIdx) in games.unimportedGames" :key="game" v-slot="{ active, selected }" as="template"
|
||||
:value="gameIdx">
|
||||
<li
|
||||
:class="[
|
||||
active ? 'bg-blue-600 text-white' : 'text-zinc-100',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
]">
|
||||
<span :class="[
|
||||
<span
|
||||
:class="[
|
||||
selected ? 'font-semibold' : 'font-normal',
|
||||
'block truncate',
|
||||
]">{{ game }}</span>
|
||||
|
||||
<span v-if="selected" :class="[
|
||||
<span
|
||||
v-if="selected" :class="[
|
||||
active ? 'text-white' : 'text-blue-600',
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4',
|
||||
]">
|
||||
@ -46,7 +52,7 @@
|
||||
<div v-if="currentlySelectedGame !== -1" class="flex flex-col gap-y-4">
|
||||
<!-- without metadata option -->
|
||||
<div>
|
||||
<LoadingButton @click="() => importGame_wrapper(false)" class="w-fit" :loading="importLoading">Import without
|
||||
<LoadingButton class="w-fit" :loading="importLoading" @click="() => importGame_wrapper(false)">Import without
|
||||
metadata
|
||||
</LoadingButton>
|
||||
|
||||
@ -60,12 +66,13 @@
|
||||
|
||||
<!-- with metadata option -->
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<Listbox as="div" v-if="metadataResults && metadataResults.length > 0" v-model="currentlySelectedMetadata">
|
||||
<Listbox v-if="metadataResults && metadataResults.length > 0" v-model="currentlySelectedMetadata" as="div">
|
||||
<ListboxLabel class="block text-sm font-medium leading-6 text-zinc-100">Select game</ListboxLabel>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
class="relative w-full cursor-default rounded-md bg-zinc-950 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm sm:leading-6">
|
||||
<GameSearchResultWidget v-if="currentlySelectedMetadata != -1"
|
||||
<GameSearchResultWidget
|
||||
v-if="currentlySelectedMetadata != -1"
|
||||
:game="metadataResults[currentlySelectedMetadata]" />
|
||||
<span v-else class="block truncate text-zinc-600">Please select a game...</span>
|
||||
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
@ -73,13 +80,16 @@
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
<transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0">
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
<ListboxOption as="template" v-for="(result, resultIdx) in metadataResults" :key="result.id"
|
||||
:value="resultIdx" v-slot="{ active, selected }">
|
||||
<li :class="[
|
||||
<ListboxOption
|
||||
v-for="(result, resultIdx) in metadataResults" :key="result.id" v-slot="{ active, selected }"
|
||||
as="template" :value="resultIdx">
|
||||
<li
|
||||
:class="[
|
||||
active ? 'bg-blue-600 text-white' : 'text-zinc-100',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
]">
|
||||
@ -90,10 +100,12 @@
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
<div v-else-if="gameSearchResultsLoading" role="status"
|
||||
<div
|
||||
v-else-if="gameSearchResultsLoading" role="status"
|
||||
class="inline-flex text-zinc-100 font-display font-semibold items-center gap-x-4">
|
||||
Loading game results...
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-transparent animate-spin fill-white" viewBox="0 0 100 101"
|
||||
<svg
|
||||
aria-hidden="true" class="w-6 h-6 text-transparent animate-spin fill-white" viewBox="0 0 100 101"
|
||||
fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
@ -119,8 +131,9 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LoadingButton @click="() => importGame_wrapper()" class="w-fit" :loading="importLoading"
|
||||
:disabled="currentlySelectedMetadata === -1">Import
|
||||
<LoadingButton
|
||||
class="w-fit" :loading="importLoading" :disabled="currentlySelectedMetadata === -1"
|
||||
@click="() => importGame_wrapper()">Import
|
||||
</LoadingButton>
|
||||
|
||||
<div v-if="importError" class="mt-4 w-fit rounded-md bg-red-600/10 p-4">
|
||||
|
||||
@ -43,13 +43,13 @@
|
||||
</div>
|
||||
<div class="mt-2 grid grid-cols-1">
|
||||
<input
|
||||
id="search"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
name="search"
|
||||
id="search"
|
||||
class="col-start-1 row-start-1 block w-full rounded-md bg-zinc-900 py-1.5 pl-10 pr-3 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:pl-9 sm:text-sm/6"
|
||||
placeholder="Search library..."
|
||||
v-model="searchQuery"
|
||||
/>
|
||||
>
|
||||
<MagnifyingGlassIcon
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-zinc-400 sm:size-4"
|
||||
aria-hidden="true"
|
||||
@ -69,7 +69,7 @@
|
||||
class="h-16 w-16 flex-shrink-0 rounded-md"
|
||||
:src="useObject(game.mIconId)"
|
||||
alt=""
|
||||
/>
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<h3 class="text-sm font-medium text-zinc-100 font-display">
|
||||
{{ game.mName }}
|
||||
@ -93,8 +93,8 @@
|
||||
Edit →
|
||||
</NuxtLink>
|
||||
<button
|
||||
@click="() => deleteGame(game.id)"
|
||||
class="mt-2 w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
||||
@click="() => deleteGame(game.id)"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
@ -150,14 +150,14 @@
|
||||
</div>
|
||||
</li>
|
||||
<p
|
||||
class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
|
||||
v-if="filteredLibraryGames.length == 0 && libraryGames.length != 0"
|
||||
class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
|
||||
>
|
||||
No results
|
||||
</p>
|
||||
<p
|
||||
class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
|
||||
v-if="filteredLibraryGames.length == 0 && libraryGames.length == 0"
|
||||
class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
|
||||
>
|
||||
No games imported
|
||||
</p>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="grow w-full flex items-center justify-center"
|
||||
v-if="task && task.success"
|
||||
class="grow w-full flex items-center justify-center"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<CheckCircleIcon class="h-12 w-12 text-green-600" aria-hidden="true" />
|
||||
@ -18,8 +18,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grow w-full flex items-center justify-center"
|
||||
v-else-if="task && task.error"
|
||||
class="grow w-full flex items-center justify-center"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<ExclamationCircleIcon
|
||||
|
||||
@ -26,9 +26,9 @@
|
||||
</div>
|
||||
<div class="ml-4 mt-2 shrink-0">
|
||||
<button
|
||||
@click="() => (createModalOpen = true)"
|
||||
type="button"
|
||||
class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold 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"
|
||||
@click="() => (createModalOpen = true)"
|
||||
>
|
||||
Create invitation
|
||||
</button>
|
||||
@ -84,7 +84,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="py-4 text-zinc-400 text-sm" v-if="invitations.length == 0">
|
||||
<div v-if="invitations.length == 0" class="py-4 text-zinc-400 text-sm">
|
||||
No invitations.
|
||||
</div>
|
||||
</div>
|
||||
@ -119,8 +119,8 @@
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<form
|
||||
@submit.prevent="() => invite_wrapper()"
|
||||
class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
|
||||
@submit.prevent="() => invite_wrapper()"
|
||||
>
|
||||
<div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
@ -158,13 +158,13 @@
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
name="invite-username"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
v-model="username"
|
||||
placeholder="myUsername"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -185,13 +185,13 @@
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
name="invite-email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
v-model="email"
|
||||
placeholder="me@example.com"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -233,7 +233,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Listbox as="div" v-model="expiryKey">
|
||||
<Listbox v-model="expiryKey" as="div">
|
||||
<ListboxLabel
|
||||
class="block text-sm/6 font-medium text-zinc-100"
|
||||
>Expires in</ListboxLabel
|
||||
@ -262,11 +262,11 @@
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
as="template"
|
||||
v-for="[label, _] in Object.entries(expiry)"
|
||||
:key="label"
|
||||
:value="label"
|
||||
v-slot="{ active, selected }"
|
||||
as="template"
|
||||
:value="label"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
@ -334,10 +334,10 @@
|
||||
Invite
|
||||
</LoadingButton>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
|
||||
@click="createModalOpen = false"
|
||||
ref="cancelButtonRef"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@ -380,7 +380,8 @@ import {
|
||||
} from "@heroicons/vue/24/solid";
|
||||
import type { Invitation } from "@prisma/client";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import { DateTime, DurationLike } from "luxon";
|
||||
import type { DurationLike } from "luxon";
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
|
||||
@ -23,14 +23,14 @@
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="display-name"
|
||||
v-model="displayName"
|
||||
name="display-name"
|
||||
type="text"
|
||||
autocomplete="display-name"
|
||||
required
|
||||
v-model="displayName"
|
||||
placeholder="AwesomeDropGamer771"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -51,15 +51,15 @@
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
required
|
||||
:disabled="!!invitation.data.value?.email"
|
||||
v-model="email"
|
||||
placeholder="me@example.com"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -82,15 +82,15 @@
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
name="username"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
required
|
||||
:disabled="!!invitation.data.value?.username"
|
||||
v-model="username"
|
||||
placeholder="myUsername"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -113,13 +113,13 @@
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="password"
|
||||
required
|
||||
v-model="password"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -140,13 +140,13 @@
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmPassword"
|
||||
name="confirm-password"
|
||||
type="password"
|
||||
autocomplete="confirm-password"
|
||||
required
|
||||
v-model="confirmPassword"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
<div class="mt-10">
|
||||
<div>
|
||||
<form @submit.prevent="signin_wrapper" class="space-y-6">
|
||||
<form class="space-y-6" @submit.prevent="signin_wrapper">
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
@ -28,13 +28,13 @@
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
name="username"
|
||||
type="username"
|
||||
autocomplete="username"
|
||||
required
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 shadow-sm bg-zinc-950/20 text-zinc-300 ring-1 ring-inset ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
v-model="username"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -47,13 +47,13 @@
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
v-model="password"
|
||||
required
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 shadow-sm bg-zinc-950/20 text-zinc-300 ring-1 ring-inset ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -61,11 +61,11 @@
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
id="remember-me"
|
||||
v-model="rememberMe"
|
||||
name="remember-me"
|
||||
type="checkbox"
|
||||
v-model="rememberMe"
|
||||
class="h-4 w-4 rounded bg-zinc-800 border-zinc-700 text-blue-600 focus:ring-blue-600"
|
||||
/>
|
||||
>
|
||||
<label
|
||||
for="remember-me"
|
||||
class="ml-3 block text-sm leading-6 text-zinc-400"
|
||||
@ -113,7 +113,7 @@
|
||||
src="/wallpapers/signin.jpg"
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
alt=""
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
src="/wallpapers/signin.jpg"
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
alt=""
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-h-full w-full flex items-center justify-center"
|
||||
v-if="completed"
|
||||
class="min-h-full w-full flex items-center justify-center"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<CheckCircleIcon class="h-12 w-12 text-green-600" aria-hidden="true" />
|
||||
@ -15,7 +15,7 @@
|
||||
window.
|
||||
</p>
|
||||
|
||||
<Disclosure as="div" class="mt-8" v-slot="{ open }">
|
||||
<Disclosure v-slot="{ open }" as="div" class="mt-8">
|
||||
<dt>
|
||||
<DisclosureButton
|
||||
class="pb-2 flex w-full items-start justify-between text-left text-zinc-400"
|
||||
@ -66,10 +66,10 @@
|
||||
method="post"
|
||||
class="mt-10 gap-x-6"
|
||||
>
|
||||
<input type="text" class="hidden" name="id" :value="clientId" />
|
||||
<input type="text" class="hidden" name="id" :value="clientId" >
|
||||
<button
|
||||
@click="() => authorize_wrapper()"
|
||||
class="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold 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"
|
||||
@click="() => authorize_wrapper()"
|
||||
>
|
||||
Authorize
|
||||
</button>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<img
|
||||
:src="useObject(game.mBannerId)"
|
||||
class="w-full h-[24rem] object-cover blur-sm scale-105"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent opacity-90"
|
||||
/>
|
||||
@ -50,7 +50,7 @@
|
||||
/>
|
||||
</button>
|
||||
<div class="relative z-50">
|
||||
<AddLibraryButton class="font-bold" :gameId="game.id" />
|
||||
<AddLibraryButton class="font-bold" :game-id="game.id" />
|
||||
</div>
|
||||
<NuxtLink
|
||||
:to="`/store/${game.id}`"
|
||||
@ -76,7 +76,7 @@
|
||||
<img
|
||||
class="w-fit h-48 lg:h-96 rounded"
|
||||
:src="useObject(image)"
|
||||
/>
|
||||
>
|
||||
</VueSlide>
|
||||
<VueSlide v-if="game.mImageCarousel.length == 0">
|
||||
<div
|
||||
@ -98,9 +98,9 @@
|
||||
<div class="space-y-6">
|
||||
<div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
|
||||
<div
|
||||
v-html="descriptionHTML"
|
||||
class="prose prose-invert prose-blue overflow-y-auto custom-scrollbar max-w-none"
|
||||
></div>
|
||||
v-html="descriptionHTML"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
|
||||
<!-- Delete button (only show for non-default collections) -->
|
||||
<button
|
||||
@click="() => (currentlyDeleting = collection)"
|
||||
class="group px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800 group focus:bg-zinc-800 focus:outline-none"
|
||||
@click="() => (currentlyDeleting = collection)"
|
||||
>
|
||||
<TrashIcon
|
||||
class="transition-all size-5 text-zinc-400 group-hover:text-red-400 group-hover:rotate-[8deg]"
|
||||
@ -46,8 +46,8 @@
|
||||
<!-- Create new collection button (also wrap in div) -->
|
||||
<div>
|
||||
<button
|
||||
@click="collectionCreateOpen = true"
|
||||
class="group flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105"
|
||||
@click="collectionCreateOpen = true"
|
||||
>
|
||||
<div
|
||||
class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 border-2 border-dashed border-zinc-700"
|
||||
@ -93,10 +93,9 @@ import {
|
||||
ArrowTopRightOnSquareIcon,
|
||||
ArrowUpRightIcon,
|
||||
TrashIcon,
|
||||
ArrowLeftIcon,
|
||||
ArrowLeftIcon, PlusIcon
|
||||
} from "@heroicons/vue/20/solid";
|
||||
import { type Collection, type Game, type GameVersion } from "@prisma/client";
|
||||
import { PlusIcon } from "@heroicons/vue/20/solid";
|
||||
import type { Collection, Game, GameVersion } from "@prisma/client";
|
||||
|
||||
const collections = await useCollections();
|
||||
const collectionCreateOpen = ref(false);
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<div v-if="article" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<!-- Banner header with blurred background -->
|
||||
<div class="relative w-full h-[300px] mb-8 rounded-lg overflow-hidden">
|
||||
<div class="absolute inset-0" v-if="article.image">
|
||||
<div v-if="article.image" class="absolute inset-0">
|
||||
<img
|
||||
:src="useObject(article.image)"
|
||||
alt=""
|
||||
class="w-full h-full object-cover blur-sm scale-110"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-950"
|
||||
/>
|
||||
@ -16,7 +16,7 @@
|
||||
<!-- Fallback gradient background when no image -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-zinc-800 to-zinc-900"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative h-full flex flex-col justify-end p-8">
|
||||
@ -31,8 +31,8 @@
|
||||
|
||||
<button
|
||||
v-if="user?.admin"
|
||||
@click="() => (currentlyDeleting = article)"
|
||||
class="px-2 py-1 rounded bg-red-900/50 backdrop-blur-sm transition text-sm/6 font-semibold text-red-400 hover:text-red-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
@click="() => (currentlyDeleting = article)"
|
||||
>
|
||||
<TrashIcon class="h-4 w-4" aria-hidden="true" />
|
||||
Delete Article
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
:src="useObject(article.image)"
|
||||
alt=""
|
||||
class="h-full w-full object-cover object-center transition-all duration-500 group-hover:scale-110 scale-105"
|
||||
/>
|
||||
>
|
||||
<div class="absolute top-4 left-4 flex gap-2">
|
||||
<span
|
||||
v-for="tag in article.tags"
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
:alt="game.mName"
|
||||
/>
|
||||
<div class="flex items-center gap-x-2">
|
||||
<AddLibraryButton :gameId="game.id" />
|
||||
<AddLibraryButton :game-id="game.id" />
|
||||
</div>
|
||||
<NuxtLink
|
||||
v-if="user?.admin"
|
||||
@ -138,13 +138,13 @@
|
||||
<div>
|
||||
<div
|
||||
v-if="showPreview"
|
||||
v-html="previewHTML"
|
||||
class="mt-12 prose prose-invert prose-blue max-w-none"
|
||||
v-html="previewHTML"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
v-html="descriptionHTML"
|
||||
class="mt-12 prose prose-invert prose-blue max-w-none"
|
||||
v-html="descriptionHTML"
|
||||
/>
|
||||
|
||||
<button
|
||||
@ -169,11 +169,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
|
||||
import { StarIcon } from "@heroicons/vue/24/solid";
|
||||
import { type Game, type GameVersion } from "@prisma/client";
|
||||
import type { Game, GameVersion } from "@prisma/client";
|
||||
import { micromark } from "micromark";
|
||||
import { DateTime } from "luxon";
|
||||
import { SerializeObject } from "nitropack";
|
||||
import { PlatformClient } from "~/composables/types";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import type { PlatformClient } from "~/composables/types";
|
||||
|
||||
const route = useRoute();
|
||||
const gameId = route.params.id.toString();
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
<!-- Hero section -->
|
||||
<VueCarousel
|
||||
v-if="recent.length > 0"
|
||||
:wrapAround="true"
|
||||
:wrap-around="true"
|
||||
:items-to-show="1"
|
||||
:autoplay="15 * 1000"
|
||||
:transition="500"
|
||||
:pauseAutoplayOnHover="true"
|
||||
:pause-autoplay-on-hover="true"
|
||||
class="store-carousel"
|
||||
>
|
||||
<VueSlide v-for="game in recent" :key="game.id">
|
||||
@ -17,7 +17,7 @@
|
||||
:src="useObject(game.mBannerId)"
|
||||
alt=""
|
||||
class="size-full object-cover object-center"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex items-center justify-center w-full h-full bg-zinc-900/75 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
|
||||
@ -43,7 +43,7 @@
|
||||
class="block w-full rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto duration-200 hover:scale-105"
|
||||
>Check it out</NuxtLink
|
||||
>
|
||||
<AddLibraryButton :gameId="game.id" />
|
||||
<AddLibraryButton :game-id="game.id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user