From 54bcb80b447805f673e875ee98fd849879b73a4f Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 5 Mar 2021 13:51:22 +0900 Subject: [PATCH] Splash screen :sparkles: --- gulpfile.ts | 4 +++- src/client/init.ts | 16 ++++++++++++++-- src/server/web/style.css | 22 +++++++--------------- src/server/web/views/base.pug | 6 ++---- 4 files changed, 26 insertions(+), 22 deletions(-) diff --git a/gulpfile.ts b/gulpfile.ts index b394e4f44..7d20aba4e 100644 --- a/gulpfile.ts +++ b/gulpfile.ts @@ -56,7 +56,9 @@ gulp.task('build:client:script', () => { gulp.task('build:client:style', () => { return gulp.src(['./src/server/web/style.css', './src/server/web/bios.css', './src/server/web/cli.css']) - .pipe(cssnano()) + .pipe(cssnano({ + zindex: false + })) .pipe(gulp.dest('./built/server/web/')); }); diff --git a/src/client/init.ts b/src/client/init.ts index 596312ff7..1c44e7f23 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -220,11 +220,23 @@ components(app); await router.isReady(); -//document.body.innerHTML = '
'; +const splash = document.getElementById('splash'); +// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す)) +if (splash) splash.addEventListener('transitionend', () => { + splash.remove(); +}); + +const rootEl = document.createElement('div'); +document.body.appendChild(rootEl); +app.mount(rootEl); -app.mount('body'); reactionPicker.init(); +if (splash) { + splash.style.opacity = '0'; + splash.style.pointerEvents = 'none'; +} + watch(defaultStore.reactiveState.darkMode, (darkMode) => { import('@/scripts/theme').then(({ builtinThemes }) => { const themes = builtinThemes.concat(getThemes()); diff --git a/src/server/web/style.css b/src/server/web/style.css index 6ab2c2154..acf8e083d 100644 --- a/src/server/web/style.css +++ b/src/server/web/style.css @@ -3,17 +3,20 @@ html { color: var(--fg); } -#ini { +#splash { position: fixed; - z-index: 1; + z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; cursor: wait; + background-color: var(--bg); + opacity: 1; + transition: opacity 0.5s ease; } -#ini > svg { +#splash > img { position: absolute; top: 0; right: 0; @@ -22,16 +25,5 @@ html { margin: auto; width: 64px; height: 64px; - animation: ini 0.6s infinite linear; - color: var(--accent); - fill: currentColor; -} - -@keyframes ini { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + pointer-events: none; } diff --git a/src/server/web/views/base.pug b/src/server/web/views/base.pug index 1b053438d..9a5c67424 100644 --- a/src/server/web/views/base.pug +++ b/src/server/web/views/base.pug @@ -44,8 +44,6 @@ html | JavaScriptを有効にしてください br | Please turn on your JavaScript - div#ini. - - - + div#splash + img(src='/favicon.ico') block content