YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: improve skeletons

Browse source
This commit is contained in:
axolotle 2024-08-16 00:24:39 +02:00
parent fcfcd767f0
commit 42e97c749a
9 changed files with 215 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
app/src/components/globals/skeletons/AppCatalogSkeleton.vue
View file

@ -3,37 +3,39 @@ import { randint } from '@/helpers/commons'
</script>
<template>
<BInputGroup class="w-100 mb-4">
<BInputGroupText>
<YIcon iname="search" />
</BInputGroupText>
<BSkeletonWrapper button search>
<BInputGroup class="w-100 mb-4">
<BInputGroupText>
<YIcon iname="search" />
</BInputGroupText>
<BFormInput :disabled="true" />
</BInputGroup>
<BFormInput :disabled="true" />
</BInputGroup>
<BCardGroup deck>
<BCard v-for="i in 15" :key="i" no-body>
<div class="d-flex w-100 mt-auto">
<BSkeleton width="30px" height="30px" class="me-2 ms-auto" />
<BCardGroup deck>
<BCard v-for="i in 15" :key="i" no-body>
<div class="d-flex w-100 mt-auto">
<BSkeleton width="30px" height="30px" class="me-2 ms-auto" />
<BSkeleton
:width="randint(30, 70) + '%'"
height="30px"
class="me-auto"
/>
</div>
<BSkeleton
:width="randint(30, 70) + '%'"
height="30px"
class="me-auto"
v-if="randint(0, 1)"
:width="randint(30, 85) + '%'"
height="24px"
class="mx-auto"
/>
</div>
<BSkeleton
v-if="randint(0, 1)"
:width="randint(30, 85) + '%'"
height="24px"
class="mx-auto"
/>
<BSkeleton
:width="randint(30, 85) + '%'"
height="24px"
class="mx-auto mb-auto"
/>
</BCard>
</BCardGroup>
<BSkeleton
:width="randint(30, 85) + '%'"
height="24px"
class="mx-auto mb-auto"
/>
</BCard>
</BCardGroup>
</BSkeletonWrapper>
</template>
<style lang="scss" scoped>

14
app/src/components/globals/skeletons/BSkeleton.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
defineProps<{
height: string
width: string
}>()
withDefaults(defineProps<{ height?: string; width?: string }>(), {
height: '26px',
width: '100%',
})
</script>
<template>
@ -13,7 +13,7 @@ defineProps<{
.b-skeleton {
position: relative;
overflow: hidden;
background-color: $gray-200;
background-color: var(--bs-secondary-bg);
cursor: wait;
height: $font-size-base;
@ -22,9 +22,5 @@ defineProps<{
@if $enable-rounded {
border-radius: 0.25rem;
}
[data-bs-theme='dark'] & {
background-color: $gray-800;
}
}
</style>

90
app/src/components/globals/skeletons/BSkeletonWrapper.vue
View file

@ -1,16 +1,96 @@
<script setup lang="ts">
withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
withDefaults(defineProps<{ button: boolean; search: boolean }>(), {
button: false,
search: false,
})
const slots = defineSlots<{
default: any
}>()
</script>
<template>
<div v-if="loading" class="b-skeleton-wrapper">
<slot name="loading" />
<div class="y-skeleton-wrapper">
<div class="visually-hidden">
<!-- FIXME add `loading` translation -->
{{ $t('loading') }}
</div>
<div v-if="search || button" id="top-bar-skeleton" class="d-flex mb-3">
<div id="search-skeleton" class="top-bar-group-skeleton">
<BInputGroup v-if="search" class="pe-none" aria-hidden="true">
<BInputGroupText>
<YIcon iname="search" />
</BInputGroupText>
<BFormInput :disabled="true" tabindex="-1" />
</BInputGroup>
</div>
<div v-if="button" id="button-skeleton" class="top-bar-group-skeleton">
<BSkeleton height="36px" class="ms-3-md" />
</div>
</div>
<slot name="default" />
</div>
<slot v-else name="default" />
</template>
<style scoped lang="scss">
.b-skeleton-wrapper {
.y-skeleton-wrapper {
cursor: wait;
#top-bar-skeleton {
flex-wrap: wrap-reverse;
.top-bar-group-skeleton {
margin-bottom: 1rem;
}
#button-skeleton {
width: 170px;
}
@include media-breakpoint-down(sm) {
.top-bar-group-skeleton {
flex-direction: column-reverse;
}
#button-skeleton {
width: 100%;
}
}
@include media-breakpoint-down(md) {
flex-direction: column-reverse;
#button-skeleton {
margin-bottom: 0.75rem;
:deep(> *) {
margin-bottom: 0.25rem;
}
}
.top-bar-group-skeleton {
justify-content: space-between;
flex-wrap: wrap;
}
}
@include media-breakpoint-up(md) {
#search-skeleton {
flex-grow: 2;
max-width: 50%;
}
#button-skeleton {
margin-left: auto;
}
:deep(.btn) {
margin-left: 0.5rem;
}
}
}
}
</style>

86
app/src/components/globals/skeletons/CardFormSkeleton.vue
View file

@ -2,59 +2,55 @@
import { randint } from '@/helpers/commons'
import type { Cols } from '@/types/commons'
withDefaults(
defineProps<{
itemCount?: number
cols: Cols
}>(),
{
itemCount: 5,
cols: () => ({ md: 4, lg: 2 }),
},
)
withDefaults(defineProps<{ itemCount?: number; cols: Cols }>(), {
itemCount: 5,
cols: () => ({ md: 4, lg: 2 }),
})
</script>
<template>
<BCard>
<template #header>
<BSkeleton width="30%" height="36px" class="m-0" />
</template>
<BSkeletonWrapper>
<BCard>
<template #header>
<BSkeleton width="30%" height="26px" class="m-0" />
</template>
<template v-for="count in itemCount" :key="count">
<BRow :class="{ 'd-block': cols === null }">
<BCol v-bind="cols">
<div style="height: 38px" class="d-flex align-items-center">
<BSkeleton
class="m-0"
:width="randint(45, 100) + '%'"
height="24px"
/>
</div>
</BCol>
<template v-for="count in itemCount" :key="count">
<BRow :class="{ 'd-block': cols === null }">
<BCol v-bind="cols">
<div style="height: 38px" class="d-flex align-items-center">
<BSkeleton
class="m-0"
:width="randint(45, 100) + '%'"
height="24px"
/>
</div>
</BCol>
<BCol>
<div
v-if="count % 2 === 0"
class="w100 d-flex justify-content-between"
>
<BSkeleton width="100%" height="38px" />
<BCol>
<div
v-if="count % 2 === 0"
class="w100 d-flex justify-content-between"
>
<BSkeleton width="100%" height="38px" />
<BSkeleton width="38px" height="38px" class="ms-2" />
</div>
<BSkeleton width="38px" height="38px" class="ms-2" />
</div>
<BSkeleton v-else width="100%" height="38px" />
<BSkeleton v-else width="100%" height="38px" />
<BSkeleton :width="randint(15, 35) + '%'" height="19px" />
</BCol>
</BRow>
<BSkeleton :width="randint(15, 35) + '%'" height="19px" />
</BCol>
</BRow>
<hr />
</template>
<hr />
</template>
<template #footer>
<div class="d-flex justify-content-end w-100">
<BSkeleton width="100px" height="38px" />
</div>
</template>
</BCard>
<template #footer>
<div class="d-flex justify-content-end w-100">
<BSkeleton width="100px" height="36px" />
</div>
</template>
</BCard>
</BSkeletonWrapper>
</template>

28
app/src/components/globals/skeletons/CardInfoSkeleton.vue
View file

@ -5,18 +5,20 @@ withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
</script>
<template>
<BCard>
<template #header>
<BSkeleton width="30%" height="36px" class="m-0" />
</template>
<BSkeletonWrapper>
<BCard>
<template #header>
<BSkeleton width="30%" height="36px" class="m-0" />
</template>
<BRow v-for="i in itemCount" :key="i" no-gutters>
<BCol cols="5" md="3" xl="3">
<BSkeleton :width="randint(45, 95) + '%'" height="19px" />
</BCol>
<BCol>
<BSkeleton :width="randint(10, 60) + '%'" height="19px" />
</BCol>
</BRow>
</BCard>
<BRow v-for="i in itemCount" :key="i" no-gutters>
<BCol cols="5" md="3" xl="3">
<BSkeleton :width="randint(45, 95) + '%'" height="19px" />
</BCol>
<BCol>
<BSkeleton :width="randint(10, 60) + '%'" height="19px" />
</BCol>
</BRow>
</BCard>
</BSkeletonWrapper>
</template>

41
app/src/components/globals/skeletons/CardListSkeleton.vue
View file

@ -1,26 +1,31 @@
<script setup lang="ts">
import { randint } from '@/helpers/commons'
withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
withDefaults(defineProps<{ itemCount: number; search: boolean }>(), {
itemCount: 5,
search: false,
})
</script>
<template>
<BCard no-body>
<template #header>
<BSkeleton width="30%" height="36px" class="m-0" />
</template>
<BSkeletonWrapper :search="search">
<BCard no-body>
<template #header>
<BSkeleton width="30%" height="36px" class="m-0" />
</template>
<BListGroup flush>
<BListGroupItem v-for="count in itemCount" :key="count" class="d-flex">
<div style="width: 20%">
<BSkeleton
:width="randint(50, 100) + '%'"
height="24px"
class="me-3"
/>
</div>
<BSkeleton :width="randint(30, 80) + '%'" height="24px" class="m-0" />
</BListGroupItem>
</BListGroup>
</BCard>
<BListGroup flush>
<BListGroupItem v-for="count in itemCount" :key="count" class="d-flex">
<div style="width: 20%">
<BSkeleton
:width="randint(50, 100) + '%'"
height="24px"
class="me-3"
/>
</div>
<BSkeleton :width="randint(30, 80) + '%'" height="24px" class="m-0" />
</BListGroupItem>
</BListGroup>
</BCard>
</BSkeletonWrapper>
</template>

19
app/src/components/globals/skeletons/ListGroupSkeleton.vue
View file

@ -1,14 +1,19 @@
<script setup lang="ts">
import { randint } from '@/helpers/commons'
withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
withDefaults(
defineProps<{ itemCount: number; button: boolean; search: boolean }>(),
{ itemCount: 5, button: true, search: true },
)
</script>
<template>
<BListGroup>
<BListGroupItem v-for="count in itemCount" :key="count">
<BSkeleton :width="randint(15, 25) + '%'" height="24px" class="mb-2" />
<BSkeleton :width="randint(25, 50) + '%'" height="24px" class="m-0" />
</BListGroupItem>
</BListGroup>
<BSkeletonWrapper :button="button" :search="search">
<BListGroup>
<BListGroupItem v-for="count in itemCount" :key="count">
<BSkeleton :width="randint(15, 25) + '%'" height="24px" class="mb-2" />
<BSkeleton :width="randint(25, 50) + '%'" height="24px" class="m-0" />
</BListGroupItem>
</BListGroup>
</BSkeletonWrapper>
</template>

2
app/src/components/layouts/MainLayout.vue
View file

@ -77,7 +77,7 @@ const modalComponent = computed(() => {
<Component :is="Component" :class="classes" />
<template #fallback>
<template v-for="({ is, ...props }, i) in skeletons" :key="i">
<Component :is="is" v-bind="props" />
<Component :is="is" v-bind="props" :class="{ 'mt-3': i !== 0 }" />
</template>
</template>
</Suspense>

8
app/src/router/routes.ts
View file

@ -239,7 +239,7 @@ const routes: RouteRecordRaw[] = [
meta: {
args: { trad: 'services' },
breadcrumb: ['tool-list', 'service-list'],
skeleton: 'ListGroupSkeleton',
skeleton: { is: 'ListGroupSkeleton', button: false },
},
},
{
@ -250,7 +250,7 @@ const routes: RouteRecordRaw[] = [
meta: {
args: { param: 'name' },
breadcrumb: ['tool-list', 'service-list', 'service-info'],
skeleton: 'CardInfoSkeleton',
skeleton: ['CardInfoSkeleton', 'CardInfoSkeleton'],
},
},
@ -273,7 +273,7 @@ const routes: RouteRecordRaw[] = [
meta: {
args: { trad: 'logs' },
breadcrumb: ['tool-list', 'tool-logs'],
skeleton: 'CardListSkeleton',
skeleton: { is: 'CardListSkeleton', search: true },
},
},
{
@ -284,7 +284,7 @@ const routes: RouteRecordRaw[] = [
meta: {
args: { param: 'name' },
breadcrumb: ['tool-list', 'tool-logs', 'tool-log'],
skeleton: 'CardInfoSkeleton',
skeleton: ['CardInfoSkeleton', 'CardInfoSkeleton'],
},
},
{