Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-10-26 07:00:23 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Blend schedule loading placeholders with card colors

Browse Source
This commit is contained in:
Matt Isenhower
2026-09-27 16:22:02 -07:00
parent bda777e8cb
commit 2e53590c5d
2 changed files with 8 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ScheduleRow.vue
View File

@@ -21,9 +21,7 @@
</div>
</div>
</div>
<div v-else class="sm:hidden h-9 bg-zinc-500 rounded-sm motion-safe:animate-pulse" aria-hidden="true">
&nbsp;
</div>
<SkeletonBlock v-else class="sm:hidden h-9" />
<div class="flex space-x-1">
<div class="flex-1 items-center text-center font-splatoon2 hidden sm:flex">
@@ -55,15 +53,9 @@
</template>
<template v-else>
<div class="h-5 lg:h-7 bg-zinc-500 rounded-sm motion-safe:animate-pulse" aria-hidden="true">
&nbsp;
</div>
<div class="h-5 mx-8 bg-zinc-500 rounded-sm motion-safe:animate-pulse" aria-hidden="true">
&nbsp;
</div>
<div class="h-5 mx-4 bg-zinc-500 rounded-sm motion-safe:animate-pulse" aria-hidden="true">
&nbsp;
</div>
<SkeletonBlock class="h-5 lg:h-7" />
<SkeletonBlock class="h-5 mx-8" />
<SkeletonBlock class="h-5 mx-4" />
</template>
</div>
</div>
@@ -94,6 +86,7 @@
<script setup>
import StageImage from './StageImage.vue';
import RuleIcon from './RuleIcon.vue';
import SkeletonBlock from './loading/SkeletonBlock.vue';
import { formatDurationFromNow } from '@/common/time';
import { useTimeStore } from '@/stores/time.mjs';

7
src/components/StageImage.vue
View File

@@ -1,10 +1,8 @@
<template>
<button :disabled="loading || !stage" class="block relative" @click.prevent="open = true">
<div class="bg-zinc-700 aspect-2/1 overflow-hidden" :class="imgClass">
<div class="aspect-2/1 overflow-hidden" :class="[imgClass, { 'bg-zinc-700': !loading && lowRes }]">
<img v-if="!loading && lowRes" :src="lowRes" width="400" height="200" />
<div v-else class="bg-zinc-500 motion-safe:animate-pulse h-full" :class="imgClass" aria-hidden="true">
&nbsp;
</div>
<SkeletonBlock v-else class="h-full rounded-none" />
</div>
<div
@@ -36,6 +34,7 @@
<script setup>
import { computed, ref } from 'vue';
import StageDialog from './StageDialog.vue';
import SkeletonBlock from './loading/SkeletonBlock.vue';
const props = defineProps({
loading: Boolean,