mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-14 00:31:25 +10:00
feat(library ui): add header
This commit is contained in:
DecDuck
@ -1,116 +1,134 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div class="space-y-4">
|
||||||
v-if="libraryState.unimportedGames.length > 0"
|
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||||
class="rounded-md bg-blue-600/10 p-4 mb-4"
|
<h2
|
||||||
>
|
class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
|
||||||
<div class="flex">
|
>
|
||||||
<div class="flex-shrink-0">
|
Library
|
||||||
<InformationCircleIcon
|
</h2>
|
||||||
class="h-5 w-5 text-blue-400"
|
<p
|
||||||
aria-hidden="true"
|
class="mt-2 text-pretty text-sm font-medium text-gray-500 sm:text-md/8"
|
||||||
/>
|
>
|
||||||
</div>
|
As you add folders to your library, Drop will detect it and prompt you
|
||||||
<div class="ml-3 flex-1 md:flex md:justify-between">
|
to import it. Each game needs to be imported before you can import a
|
||||||
<p class="text-sm text-blue-400">
|
version.
|
||||||
Drop has detected you have new games to import.
|
</p>
|
||||||
</p>
|
</div>
|
||||||
<p class="mt-3 text-sm md:ml-6 md:mt-0">
|
<div
|
||||||
<NuxtLink
|
v-if="libraryState.unimportedGames.length > 0"
|
||||||
href="/admin/library/import"
|
class="rounded-md bg-blue-600/10 p-4"
|
||||||
class="whitespace-nowrap font-medium text-blue-400 hover:text-blue-500"
|
>
|
||||||
>
|
<div class="flex">
|
||||||
Import
|
<div class="flex-shrink-0">
|
||||||
<span aria-hidden="true"> →</span>
|
<InformationCircleIcon
|
||||||
</NuxtLink>
|
class="h-5 w-5 text-blue-400"
|
||||||
</p>
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 flex-1 md:flex md:justify-between">
|
||||||
|
<p class="text-sm text-blue-400">
|
||||||
|
Drop has detected you have new games to import.
|
||||||
|
</p>
|
||||||
|
<p class="mt-3 text-sm md:ml-6 md:mt-0">
|
||||||
|
<NuxtLink
|
||||||
|
href="/admin/library/import"
|
||||||
|
class="whitespace-nowrap font-medium text-blue-400 hover:text-blue-500"
|
||||||
|
>
|
||||||
|
Import
|
||||||
|
<span aria-hidden="true"> →</span>
|
||||||
|
</NuxtLink>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<ul
|
||||||
<ul
|
role="list"
|
||||||
role="list"
|
class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
|
||||||
class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
v-for="game in libraryNotifications"
|
|
||||||
:key="game.id"
|
|
||||||
class="col-span-1 flex flex-col justify-center divide-y divide-zinc-700 rounded-lg bg-zinc-950/20 text-left shadow"
|
|
||||||
>
|
>
|
||||||
<div class="flex flex-1 flex-row p-4 gap-x-4">
|
<li
|
||||||
<img
|
v-for="game in libraryNotifications"
|
||||||
class="mx-auto h-16 w-16 flex-shrink-0 rounded-md"
|
:key="game.id"
|
||||||
:src="useObject(game.mIconId)"
|
class="col-span-1 flex flex-col justify-center divide-y divide-zinc-700 rounded-lg bg-zinc-950/20 text-left shadow"
|
||||||
alt=""
|
>
|
||||||
/>
|
<div class="flex flex-1 flex-row p-4 gap-x-4">
|
||||||
<div class="flex flex-col">
|
<img
|
||||||
<h3 class="text-sm font-medium text-zinc-100 font-display">
|
class="mx-auto h-16 w-16 flex-shrink-0 rounded-md"
|
||||||
{{ game.mName }}
|
:src="useObject(game.mIconId)"
|
||||||
<span
|
alt=""
|
||||||
class="ml-2 inline-flex items-center rounded-full bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-600 ring-1 ring-inset ring-blue-600/20"
|
/>
|
||||||
>{{ game.metadataSource }}</span
|
<div class="flex flex-col">
|
||||||
|
<h3 class="text-sm font-medium text-zinc-100 font-display">
|
||||||
|
{{ game.mName }}
|
||||||
|
<span
|
||||||
|
class="ml-2 inline-flex items-center rounded-full bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-600 ring-1 ring-inset ring-blue-600/20"
|
||||||
|
>{{ game.metadataSource }}</span
|
||||||
|
>
|
||||||
|
</h3>
|
||||||
|
<dl class="mt-1 flex flex-col justify-between">
|
||||||
|
<dt class="sr-only">Short Description</dt>
|
||||||
|
<dd class="text-sm text-zinc-400">
|
||||||
|
{{ game.mShortDescription }}
|
||||||
|
</dd>
|
||||||
|
<dt class="sr-only">Metadata provider</dt>
|
||||||
|
</dl>
|
||||||
|
<NuxtLink
|
||||||
|
:href="`/admin/library/${game.id}`"
|
||||||
|
class="mt-2 w-fit rounded-md bg-blue-600 px-2.5 py-1.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"
|
||||||
>
|
>
|
||||||
</h3>
|
Edit →
|
||||||
<dl class="mt-1 flex flex-col justify-between">
|
</NuxtLink>
|
||||||
<dt class="sr-only">Short Description</dt>
|
</div>
|
||||||
<dd class="text-sm text-zinc-400">{{ game.mShortDescription }}</dd>
|
</div>
|
||||||
<dt class="sr-only">Metadata provider</dt>
|
<div v-if="game.hasNotifications" class="flex flex-col gap-y-2 p-2">
|
||||||
</dl>
|
<div
|
||||||
<NuxtLink
|
v-if="game.notifications.toImport"
|
||||||
:href="`/admin/library/${game.id}`"
|
class="rounded-md bg-blue-600/10 p-4"
|
||||||
class="mt-2 w-fit rounded-md bg-blue-600 px-2.5 py-1.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"
|
|
||||||
>
|
>
|
||||||
Edit →
|
<div class="flex">
|
||||||
</NuxtLink>
|
<div class="flex-shrink-0">
|
||||||
</div>
|
<InformationCircleIcon
|
||||||
</div>
|
class="h-5 w-5 text-blue-400"
|
||||||
<div v-if="game.hasNotifications" class="flex flex-col gap-y-2 p-2">
|
aria-hidden="true"
|
||||||
<div
|
/>
|
||||||
v-if="game.notifications.toImport"
|
</div>
|
||||||
class="rounded-md bg-blue-600/10 p-4"
|
<div class="ml-3 flex-1 md:flex md:justify-between">
|
||||||
>
|
<p class="text-sm text-blue-400">
|
||||||
<div class="flex">
|
Drop has detected you have new verions of this game to import.
|
||||||
<div class="flex-shrink-0">
|
</p>
|
||||||
<InformationCircleIcon
|
<p class="mt-3 text-sm md:ml-6 md:mt-0">
|
||||||
class="h-5 w-5 text-blue-400"
|
<NuxtLink
|
||||||
aria-hidden="true"
|
:href="`/admin/library/${game.id}/import`"
|
||||||
/>
|
class="whitespace-nowrap font-medium text-blue-400 hover:text-blue-500"
|
||||||
|
>
|
||||||
|
Import
|
||||||
|
<span aria-hidden="true"> →</span>
|
||||||
|
</NuxtLink>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-3 flex-1 md:flex md:justify-between">
|
</div>
|
||||||
<p class="text-sm text-blue-400">
|
<div
|
||||||
Drop has detected you have new verions of this game to import.
|
v-if="game.notifications.noVersions"
|
||||||
</p>
|
class="rounded-md bg-yellow-600/10 p-4"
|
||||||
<p class="mt-3 text-sm md:ml-6 md:mt-0">
|
>
|
||||||
<NuxtLink
|
<div class="flex">
|
||||||
:href="`/admin/library/${game.id}/import`"
|
<div class="flex-shrink-0">
|
||||||
class="whitespace-nowrap font-medium text-blue-400 hover:text-blue-500"
|
<ExclamationTriangleIcon
|
||||||
>
|
class="h-5 w-5 text-yellow-600"
|
||||||
Import
|
aria-hidden="true"
|
||||||
<span aria-hidden="true"> →</span>
|
/>
|
||||||
</NuxtLink>
|
</div>
|
||||||
</p>
|
<div class="ml-3">
|
||||||
|
<h3 class="text-sm font-medium text-yellow-600">
|
||||||
|
You have no versions of this game available.
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</li>
|
||||||
v-if="game.notifications.noVersions"
|
</ul>
|
||||||
class="rounded-md bg-yellow-600/10 p-4"
|
</div>
|
||||||
>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="flex-shrink-0">
|
|
||||||
<ExclamationTriangleIcon
|
|
||||||
class="h-5 w-5 text-yellow-600"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="ml-3">
|
|
||||||
<h3 class="text-sm font-medium text-yellow-600">
|
|
||||||
You have no versions of this game available.
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|||||||
Reference in New Issue
Block a user