ami/tl-vikunja
1
0
Fork 0
Code

chore: move loading styles to variant into the component

Browse Source
This commit is contained in:
kolaente 2023-04-02 14:44:13 +02:00
parent 4134fcbd75
commit 76814a2d3f
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
2 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/home/navigation.vue
View File

@ -52,7 +52,7 @@
<ProjectsNavigationWrapper/>
<template #fallback>
<Loading class="navigation-loader"/>
<Loading variant="small"/>
</template>
</Suspense>
@ -128,17 +128,4 @@ const menuActive = computed(() => baseStore.menuActive)
}
}
}
.navigation-loader {
min-width: 100%;
height: 150px;
&.is-loading::after {
width: 3rem;
height: 3rem;
top: calc(50% - 1.5rem);
left: calc(50% - 1.5rem);
border-width: 3px;
}
}
</style>

23
src/components/misc/loading.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="loader-container is-loading"></div>
<div class="loader-container is-loading" :class="{'is-small': variant === 'small'}"></div>
</template>
<script lang="ts">
@ -8,6 +8,14 @@ export default {
}
</script>
<script lang="ts" setup>
const {
variant = 'default',
} = defineProps<{
variant: 'default' | 'small'
}>()
</script>
<style scoped lang="scss">
.loader-container {
height: 100%;
@ -20,5 +28,18 @@ export default {
min-height: 50px;
min-width: 100px;
}
&.is-small {
min-width: 100%;
height: 150px;
&.is-loading::after {
width: 3rem;
height: 3rem;
top: calc(50% - 1.5rem);
left: calc(50% - 1.5rem);
border-width: 3px;
}
}
}
</style>