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

loader: add custom app loader with ynh logo

Browse source
This commit is contained in:
axolotle 2023-11-07 18:00:26 +01:00
parent f0ea418ae7
commit fe574d8ec5
4 changed files with 50 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/CustomLogo.vue
View file

@ -80,7 +80,7 @@ const customLogo = computed(() => {
</svg>
</template>
<style>
<style scoped>
svg,
img,
.svg-div {

4
error.vue
View file

@ -16,7 +16,7 @@ const props = defineProps<{
class="container mx-auto p-10 min-h-screen flex flex-col justify-center items-center"
>
<Html :lang="head.htmlAttrs?.lang" :dir="head.htmlAttrs?.dir"></Html>
<img class="logo" src="/assets/img/logo-white.svg" />
<img class="logo" src="/assets/img/logo-white.svg" alt="YunoHost logo" />
<div class="text-center mt-10">
<h1 class="text-7xl font-bold">{{ error.statusCode }}</h1>
<p class="py-6">{{ error.statusMessage }}</p>
@ -24,7 +24,7 @@ const props = defineProps<{
</main>
</template>
<style>
<style scoped>
.logo {
width: 50%;
max-width: 200px;

1
nuxt.config.ts
View file

@ -1,6 +1,7 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
ssr: false,
spaLoadingTemplate: 'spa-loading-template.html',
app: {
baseURL: '/yunohost/sso',
buildAssetsDir: '/assets/',

46
spa-loading-template.html Normal file
View file

@ -0,0 +1,46 @@
<style>
#loader {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: white;
color: rgb(31, 41, 55);
display: flex;
align-items: center;
justify-content: center;
@media (prefers-color-scheme: dark) {
background-color: rgb(29, 35, 42);
color: rgb(166, 173, 186);
}
}
.dark #loader {
background-color: rgb(29, 35, 42);
color: rgb(166, 173, 186);
}
svg {
width: 100%;
height: 100%;
max-width: 196px;
}
</style>
<div id="loader">
<svg version="1.1"
viewBox="-0.25 -0.25 98 85"
fill="currentColor"
>
<path d="M97,51c-2.02,4.98-8.33,5.67-14,7c-0.609,6.29,3.05,10.95-1,16c-6.41-0.26-7.471-5.859-7-13c-1,0-2,0-3,0 c-2.09,2.77,0.9,4.52,0,8c-1.12,4.34-7.88,7.91-11,7c-2.18-0.641-5.96-6.63-5-12c2.82-2.71,2.76,3.12,6,3c5.05-7.84-9.63-8.55-8-17c1.24-6.42,11.66-9.66,15-1c1.54,4.21-5.17,0.16-5,3c-0.279,1.62,0.95,1.72,1,3c2.52,0.77,1.68-2.16,3-3c1.859-1.17,3.09-0.75,6-1c2.45-2.55,1.08-8.92,4-11c3.87,0.46,6.08,2.59,6,7C91.01,46.109,94.3,46.05,97,51z" />
<path d="M87,13c0.609,3.21,2.32,4.98,2,8c-0.34,3.21-2.9,8.83-4,9c-1.17,0.18-1.34,1.78-2,2c-4.66,1.57-12.391-1.48-14-7c-1.16-3.97,1.9-13.37,4-17c1.3-2.25,1.221-2.99,5-4c2.41-0.65,3.65-2.25,6,0c0.471,0.45,1.3,0.49,1.85,0.89c-0.199,0,2,3.14,2.15,4.11C88.32,11.07,86.77,11.78,87,13z M79,22c1.779-1.89,3.29-4.04,3-8C77.49,12.33,74.67,21.3,79,22z" />
<path d="M67,21c-0.07,5.81,2.48,10.7,0,15c-6.73,1.06-7.24-4.1-11-6c-1.939,1.39-1.49,5.18-3,7c-3.78,0.44-4.69-1.97-7-3c2.47-7.81,1.26-18.98,2-26c8.58-0.58,7.68,8.32,12,12c0.52-4.34-0.359-15.52,3-20C70.33,3.29,67.09,12.99,67,21z" />
<path d="M52,55c1.93,8.41,0.12,22.689-12,20c-1.59-0.35-8.42-5.22-9-7c-1.62-5,0.34-13.34,3-16C39.03,46.97,45.48,50.359,52,55z M39,66c4.55,0.96,6.3-4.2,4-7C39.37,59.03,38.61,61.939,39,66z" />
<path d="M39,8c5.58,0.9,6.4,6.81,5,15c-1.43,8.38-3.02,14.59-9,15c-9.57,0.65-12.25-16.69-9-29c8.32,1.27,6.59,10.36,6,17c2.71,0.83,2.2-0.85,3-2C37.05,21.04,37.82,13.61,39,8z" />
<path d="M28,62c0.1,5.67,4.4,11.33,2,17c-4.32-1.01-6.57-4.09-9-7c-3.15-0.48-2.26,3.07-6,2c-0.67,5.061,2.29,7.57-1,10c-4.7-0.63-6.66-4-8-8c-2.61-1.38-5.48-2.52-6-6c0.14-3.53,4.48-2.85,7-4c0.47-5.53-1.41-13.41,2-16c8.31,0.49,8.21,7.13,7,15c4.36,0.29,4.94-4.35,5-7c0.06-2.43-1.82-8.26,2-11c3.06-0.73,2.94,1.73,6,1C32.35,52.7,27.92,57.439,28,62z" />
<path d="M24,12c1.07,7.07-3.86,8.14-6,12c0.21,6.88-0.47,12.86-2,18c-5.86-1.32-8.7-10.38-6-17c-0.33-3.52-5.26-4.22-7-8c-0.3-0.66-0.47-4.43-1-7C1.09,5.63,0.55,4.31,3,1c8.16-0.49,7.21,8.13,9,14c5.05,0.39,3.91-5.42,8-6C20.98,10.35,22.67,11,24,12z"/>
</svg>
</div>