yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests1 Projects Releases Packages Wiki Activity Actions

fix loading spinner

Browse source 
Signed-off-by: eternal-flame-AD <yume@yumechi.jp>
This commit is contained in:
ゆめ 2024-11-24 11:44:16 -06:00
parent 1192cffa29
commit 80f788c38b
No known key found for this signature in database
6 changed files with 39 additions and 29 deletions
packages
backend/src/server
pug-filters.ts
web
style.cssstyle.embed.css
views
base-embed.pugbase.pug
frontend/src/components/global
MkLoading.vue

2
packages/backend/src/server/pug-filters.ts
View file

@ -7,6 +7,6 @@ export const commonPugFilters = {
throw new Error('Invalid mimeType');
}
const dataURI = `data:${options.mimeType};base64,${Buffer.from(data).toString('base64')}`;
return `<${options.tagName} data="${dataURI}"></${options.tagName}>`;
return `<${options.tagName} src="${dataURI}"></${options.tagName}>`;
}
} as const;

12
packages/backend/src/server/web/style.css
View file

@ -42,7 +42,7 @@ html {
left: 0;
margin: auto;
display: inline-block;
width: 28px;
width: 60px;
height: 28px;
transform: translateY(70px);
color: var(--MI_THEME-accent);
@ -60,6 +60,16 @@ html {
stroke-linejoin: round;
stroke-miterlimit: 1.5;
}
#splashSpinner > .spinner.bg circle {
fill:none;
stroke:currentColor;
stroke-width:24px;
}
#splashSpinner > .spinner.fg path {
fill:none;
stroke:currentColor;
stroke-width:24px;
}
#splashSpinner > .spinner.bg {
opacity: 0.275;
}

12
packages/backend/src/server/web/style.embed.css
View file

@ -64,7 +64,7 @@ html.embed.noborder #splash {
left: 0;
margin: auto;
display: inline-block;
width: 28px;
width: 60px;
height: 28px;
transform: translateY(70px);
color: var(--MI_THEME-accent);
@ -82,6 +82,16 @@ html.embed.noborder #splash {
stroke-linejoin: round;
stroke-miterlimit: 1.5;
}
#splashSpinner > .spinner.bg circle {
fill:none;
stroke:currentColor;
stroke-width:24px;
}
#splashSpinner > .spinner.fg path {
fill:none;
stroke:currentColor;
stroke-width:24px;
}
#splashSpinner > .spinner.bg {
opacity: 0.275;
}

13
packages/backend/src/server/web/views/base-embed.pug
View file

@ -58,16 +58,5 @@ html(class='embed')
div#splash
img#splashIcon(src= icon || '/static-assets/splash.png')
div#splashSpinner
:dataTag(tagName='img' mimeType='image/svg+xml')
<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1,0,0,1,12,12)">
<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
</g>
</svg>
:dataTag(tagName='img' mimeType='image/svg+xml')
<svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1,0,0,1,12,12)">
<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
</g>
</svg>
<span>Loading...</span>
block content

13
packages/backend/src/server/web/views/base.pug
View file

@ -75,16 +75,5 @@ html
div#splash
img#splashIcon(src= icon || '/static-assets/splash.png')
div#splashSpinner
:dataTag(tagName='img' mimeType='image/svg+xml')
<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1,0,0,1,12,12)">
<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
</g>
</svg>
:dataTag(tagName='img' mimeType='image/svg+xml')
<svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1,0,0,1,12,12)">
<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
</g>
</svg>
<span>Loading...</span>
block content

16
packages/frontend/src/components/global/MkLoading.vue
View file

@ -8,12 +8,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.container">
<svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,12,12)">
<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
<circle cx="64" cy="64" r="64" :class="[$style.bgcircle]"/>
</g>
</svg>
<svg :class="[$style.spinner, $style.fg, { [$style.static]: static }]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,12,12)">
<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" :class="[$style.fgpath]"/>
</g>
</svg>
</div>
@ -109,4 +109,16 @@ const props = withDefaults(defineProps<{
animation-play-state: paused;
}
}
.bgcircle {
fill:none;
stroke:currentColor;
stroke-width:21.33px;
}
.fgpath {
fill:none;
stroke:currentColor;
stroke-width:21.33px;
}
</style>