From b0bb338bee27b74efddb0bc31fb633509fc439c5 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 4 May 2025 22:25:03 +0200 Subject: [PATCH] feat: New idle step - Add idle step after agreement - New content for agreement - Move brand information to macro - New step class for common style --- source/code/ui.js | 16 +++++++ source/screens/demo/examples/ui/index.njk | 44 +++++-------------- source/style/ui.scss | 26 ++++++++--- .../templates/hippie/macros/_placeholder.njk | 30 +++++++++++++ 4 files changed, 77 insertions(+), 39 deletions(-) diff --git a/source/code/ui.js b/source/code/ui.js index 2ed681e..e4c1da9 100644 --- a/source/code/ui.js +++ b/source/code/ui.js @@ -111,6 +111,21 @@ function showAgreement() { }) } +function showIdle() { + const el = document.getElementById('idle'); + + return new Promise((resolve, reject) => { + if (el) { + console.info('Idle.'); + + el.classList.replace('op_hide', 'op_show'); + resolve('Idle.'); + } else { + reject(); + } + }) +} + function loadCore() { const el = loader; const bar = loader.querySelector('#progress'); @@ -163,6 +178,7 @@ init() .then(showIntro) .catch(er => console.error(er)) .then(showAgreement) + .then(showIdle) .catch(er => console.error(er)) .finally(() => { console.debug('Init end.', isAgree); diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk index 2ad7bd2..9af9edc 100644 --- a/source/screens/demo/examples/ui/index.njk +++ b/source/screens/demo/examples/ui/index.njk @@ -9,6 +9,7 @@ tags: {% set pageClass = "html_ui" %} {% extends "demo/_app.njk" %} +{% import "hippie/macros/_placeholder.njk" as ph %} {% block title %}{{ title }} {% endblock %} @@ -22,7 +23,7 @@ tags: {% endblock %} {% block body %} -
+
I
@@ -34,35 +35,8 @@ tags: -
-
- {# Brand logo #} - - - - - - - -

Brand name

-
+
+ {{ ph.brand('brand') }}

Powered by

  • Vendor
    • @@ -70,9 +44,13 @@ tags:
  • Engine
-
-
Hello World!
-

Only left mouse click or any key

+
+

Agreement

+

This needs to be seen and acknowledged.
So an interaction must be made to continue.

+
+
+
Hello World!
+

Only left mouse click or any key

{% endblock %} diff --git a/source/style/ui.scss b/source/style/ui.scss index 74aa70e..e6886e8 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -34,9 +34,11 @@ $z-indexes: ( } } -#loader { +.step { @extend %full_parent; +} +#loader { display: flex; flex-direction: column; align-items: center; @@ -65,7 +67,7 @@ $z-indexes: ( #status, #spinner { @extend %basic; - + display: flex; flex-grow: 0; flex-shrink: 0; @@ -104,8 +106,6 @@ $z-indexes: ( } #intro { - @extend %full_parent; - z-index: map.get($z-indexes, "content-top"); overflow: hidden; display: flex; @@ -148,7 +148,8 @@ $z-indexes: ( } } -#agreement { +#agreement, +#idle { display: flex; align-items: center; justify-content: center; @@ -156,6 +157,18 @@ $z-indexes: ( background-color: $color_back_basic; } +#agreement { + flex-direction: column; + + h1 { + margin-top: 0; + } +} + +#idle { + pointer-events: none; +} + .toast { z-index: map.get($z-indexes, "toast"); position: fixed; @@ -175,7 +188,8 @@ $z-indexes: ( .hello { flex: 0 1 auto; padding: 1em 2em; - background-color: rgba(black, .25); + // background-color: rgba(black, .25); + background-color: $color_darker; } @import "modules/ui/new_module"; diff --git a/source/templates/hippie/macros/_placeholder.njk b/source/templates/hippie/macros/_placeholder.njk index 52f35be..0097328 100644 --- a/source/templates/hippie/macros/_placeholder.njk +++ b/source/templates/hippie/macros/_placeholder.njk @@ -11,3 +11,33 @@ {% macro address(class='', text='Straße Nr., PLZ Ort') %} {{ text }} {% endmacro %} +{% macro brand(class='', name='Marke') %} +
+ {# Brand logo #} + + + + + + + +

{{ name }}

+
+{% endmacro %} \ No newline at end of file