From: Damyan Ivanov Date: Sat, 19 Feb 2022 08:32:33 +0000 (+0000) Subject: add a splash screen X-Git-Url: https://git.ktnx.net/?a=commitdiff_plain;h=cb931bf2ce3ad11faa5563d88da14f2967751bc1;p=lsl.git add a splash screen without it there is a brief moment of "First create a shopping list" message that is confusing --- diff --git a/public/css/style.css b/public/css/style.css index 98ef565..7cf3d46 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -8,6 +8,27 @@ font-family: "Bitstream Vera Sans", sans-serif; font-size: 14pt; color: #333; } +#splash { + z-index: 1; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: hsl(0, 0%, 30%); + color: white; + display: grid; + transition: 0.2s; +} +#splash.done { + opacity: 0; + color: black; +} +#splash > p { + margin: auto; + width: max-content; + font-size: 200%; +} input { font-size: 14pt; diff --git a/public/javascripts/lsl.js b/public/javascripts/lsl.js index d1656d4..fa6b412 100644 --- a/public/javascripts/lsl.js +++ b/public/javascripts/lsl.js @@ -1,6 +1,8 @@ "use strict"; (function(){ var uri_base, environment, devel_env; // filled on page load from an HTML attribute +var start_time = Date.now(); + var ui_icon_class_re = new RegExp('\\bui-icon-\\S+\\b'); var uri_id_re = new RegExp('/(\\d+)$'); var lists_version = -1; @@ -80,6 +82,26 @@ function select_list(new_selected_list) { } function load_lists() { $.get(uri_base + '/api/v1/list') + .always(()=>{ + var splash = $('#splash'); + if (splash.length) { + var dur = splash.css('transition-duration'); + if (dur && dur.endsWith('s')) { + dur = 1000 * parseFloat(dur.substring(0, dur.length-1)); + } + else + dur = 1000; + + var now = Date.now(); + window.setTimeout(() => { + splash.addClass('done'); + debug('scheduling splash removal in '+dur+'ms'); + window.setTimeout(()=>{ splash.remove(); }, dur); + }, + Math.max(0, 500 - (now - start_time)) + ); + } + }) .done(data => { lists_version = data.lists_version; diff --git a/views/index.tt b/views/index.tt index d1f4637..9e5d440 100644 --- a/views/index.tt +++ b/views/index.tt @@ -1,3 +1,6 @@ +
+

Loading…

+