Skip to content

Commit

Permalink
feat(stark-starter): add preloading screens
Browse files Browse the repository at this point in the history 
Added a loading screen for when Angular is starting up.
Added a warning screen for when JavaScript
is not enabled in the browser.
Added a warning for when the browser is not supported.

ISSUES CLOSED: NationalBankBelgium#840 NationalBankBelgium#596 NationalBankBelgium#597
  • Loading branch information
@carlo-nomes
carlo-nomes committed Nov 13, 2018
1 parent 57ab7dc commit 4022058
Show file tree
Hide file tree
Showing 5 changed files with 215 additions and 74 deletions.
93 changes: 93 additions & 0 deletions packages/stark-core/assets/css/pre-load-style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/* Hide the app / loader / browser warning until it is determined if JS is enabled and if the browser is compatible */
.stark-app,
.stark-loading,
.stark-browser-warning {
display: none;
}

.stark-browser-outdated .stark-browser-warning {
display: block;
}

.stark-browser-ok .stark-app {
display: flex;
}

.stark-browser-ok .stark-loading {
display: block;
}

.stark-preload h1 {
font-size: 24px;
font-weight: 400;
line-height: 32px;
margin: 0 0 16px;
}

.stark-preload {
color: #000;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 26px;

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
max-width: 100%;
width: 500px;
overflow: hidden;
border: solid 1px rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);

margin: 16px auto;
border-radius: 8px;
text-align: center;
}

.stark-preload header {
padding: 16px;
background: #143e74 url("/assets/stark-core/logo/stark_header_bg.png") top right no-repeat;
border-radius: 2px 2px 0 0;
}

.stark-preload header i {
margin: auto;
display: block;
width: 200px;
height: 60px;
background: url("/assets/stark-core/logo/stark_logo_transparent.svg") no-repeat;
background-size: 100% 100%;
}

.stark-preload .content {
display: block;
padding: 16px;
background: #fff;
}

.stark-preload .stark-loading-icon {
margin: 0 auto 8px auto;
display: block;
width: 64px;
height: 64px;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDUwIDUwIj48cGF0aCBmaWxsPSIjN2ZiYWUzIiBkPSJNMjUuMjUxLDYuNDYxYy0xMC4zMTgsMC0xOC42ODMsOC4zNjUtMTguNjgzLDE4LjY4M2g0LjA2OGMwLTguMDcxLDYuNTQzLTE0LjYxNSwxNC42MTUtMTQuNjE1VjYuNDYxeiI+PC9wYXRoPjwvc3ZnPg==");
/* Base64 created from SVG on this site: http://www.opinionatedgeek.com/DotNet/Tools/Base64Encode/ and from this source:
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" x="0" y="0" viewBox="0 0 50 50"><path fill="#7fbae3" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"></path></svg>
*/
fill: currentColor;
transform-origin: 50% 50%;
animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Binary file added packages/stark-core/assets/logo/stark_header_bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 0 additions & 3 deletions packages/stark-ui/assets/styles/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,6 @@ body {
display: flex;
flex-direction: column;
height: 100%;
&:not(.stark-init) {
overflow-y: hidden;
}
& .content-wrapper {
flex: 1;
display: flex;
Expand Down
116 changes: 57 additions & 59 deletions showcase/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,16 @@
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.starkAppMetadata.name %></title>

<meta name="description" content="{%= htmlWebpackPlugin.options.starkAppMetadata.description %}">
<meta name="description" content="<%= htmlWebpackPlugin.options.starkAppMetadata.description %>">

<% if (webpackConfig.htmlElements.headTags) { %>
<!--Configured Head Tags -->
<%= webpackConfig.htmlElements.headTags %>
<% } %>

<!-- Stylesheets -->
<!-- The stylesheet should be loaded before angular is initialized -->
<link rel="stylesheet" href="/assets/stark-core/css/pre-load-style.css">
<!-- Generated CSS stylesheets will be added by webpack: extract-text-webpack-plugin -->

<!-- move the block of webpack dev server to the <head> section and change the IF conditions -->
Expand All @@ -30,75 +32,71 @@
<% } %>
<% } %>
</head>

<body class="">

<!-- FIXME reimplement these functionalities -->
<!-- the 'stark-init'/'stark-exit' class is set when the current route state is a child of starkAppInit/starkAppExit -->
<!--
<div class="stark-message stark-js-error-messages" role="alertdialog" aria-busy="true" aria-live="assertive">
<header><i></i></header>
<content>
<div class="stark-msg-no-js">
<h1>No JavaScript</h1>
<p>You must have javascript enabled!</p>
<noscript>
<div class="stark-no-js-warning stark-preload"
role="alertdialog"
aria-busy="true"
aria-live="assertive">
<header><i></i></header>
<div class="content">
<h1>No JavaScript</h1>
<p>You must have JavaScript enabled!</p>
</div>
</div>
<div class="stark-msg-outdated">
</noscript>

<div class="stark-browser-warning stark-preload" role="alertdialog" aria-busy="true" aria-live="assertive">
<header><i></i></header>
<div class="content">
<h1>Browser not supported</h1>
<p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to
improve your experience.</p>
<p>You are using an <strong>outdated</strong> browser. Please
<a href="https://browsehappy.com"
target="_blank"
rel="noreferrer noopenenr">
upgrade your browser
</a>
to improve your experience.</p>
</div>
</content>
</div>
-->

<!-- the 'stark-init'/'stark-exit' class is set when the current route state is a child of starkAppInit/starkAppExit -->
<!--
<app class="stark-app" ui-sref-active="{'stark-init': 'starkAppInit.**', 'stark-exit': 'starkAppExit.**'}"></app>
-->

<!--
<script nonce="cefb24121ec5443c8819cc7c5e33c4a2">
/* remove the no-js message and if compatible browser: display the app */
if ("querySelector" in document && "classList" in document.body && /*@cc_on!@*/false === false) {
document.body.classList.add("stark-browser-ok");
} else {
document.body.className += " stark-outdated-browser";
var starkApp = document.getElementsByClassName("stark-app")[0];
if (starkApp) {
document.body.removeChild(starkApp);
}
var starkInitView = document.getElementsByClassName("stark-login-container")[0];
if (starkInitView) {
document.body.removeChild(starkInitView);
}
}
</script>
-->
</div>

<!-- <app>
<div class="stark-message stark-loading" role="alertdialog" aria-busy="true" aria-live="assertive">
<header><i></i></header>
<content>
<div class="stark-msg-loading">
<app class="stark-app">
<div class="stark-loading stark-preload" role="alertdialog" aria-busy="true" aria-live="assertive">
<header><i></i></header>
<div class="content">
<div class="stark-loading-icon"></div>
<h1>Loading...</h1>
</div>
</content>
</div>
</app> -->
<app>Loading...</app>
</div>
</app>

<script>
/*see if the browser is compatible*/
if ("querySelector" in document && "classList" in document.body && /*@cc_on!@*/false === false) {
/*remove the warning and display the app if the browser is up to date */
var browserWarning = document.getElementsByClassName("stark-browser-warning")[0];
if (browserWarning) document.body.removeChild(browserWarning);

document.body.classList.add("stark-browser-ok");
} else {
/* remove the app and show the browser warning if the browser is outdated*/
document.body.className += "stark-browser-outdated";

<% if (htmlWebpackPlugin.options.dllFiles) { %> <!-- dllFiles will be filled in by the Dll plugin -->
<!-- Webpack DLL JS files -->
<% for (let i = 0; i < htmlWebpackPlugin.options.dllFiles.js.length; ++i) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.dllFiles.js[i] %>"></script>
<% } %>
<% } %>
var starkApp = document.getElementsByClassName("stark-app")[0];
if (starkApp) document.body.removeChild(starkApp);

<!-- CSS will be injected by webpack here -->
<!-- Preload link tags will be injected by webpack here -->
<!-- Generated bundle scripts will be injected by webpack here: html-webpack-plugin -->
}
</script>
<% if (htmlWebpackPlugin.options.dllFiles) { %> <!-- dllFiles will be filled in by the Dll plugin -->
<!-- Webpack DLL JS files -->
<% for (let i = 0; i < htmlWebpackPlugin.options.dllFiles.js.length; ++i) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.dllFiles.js[i] %>"></script>
<% } %>
<% } %>

<!-- CSS will be injected by webpack here -->
<!-- Preload link tags will be injected by webpack here -->
<!-- Generated bundle scripts will be injected by webpack here: html-webpack-plugin -->
</body>
</html>
77 changes: 65 additions & 12 deletions starter/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,16 @@
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.starkAppMetadata.name %></title>

<meta name="description" content="{%= htmlWebpackPlugin.options.starkAppMetadata.description %}">
<meta name="description" content="<%= htmlWebpackPlugin.options.starkAppMetadata.description %>">

<% if (webpackConfig.htmlElements.headTags) { %>
<!--Configured Head Tags -->
<%= webpackConfig.htmlElements.headTags %>
<% } %>

<!-- Stylesheets -->
<!-- The stylesheet should be loaded before angular is initialized -->
<link rel="stylesheet" href="/assets/stark-core/css/pre-load-style.css">
<!-- Generated CSS stylesheets will be added by webpack: extract-text-webpack-plugin -->

<!-- move the block of webpack dev server to the <head> section and change the IF conditions -->
Expand All @@ -30,20 +32,71 @@
<% } %>
<% } %>
</head>

<body class="">

<app>Loading...</app>
<noscript>
<div class="stark-no-js-warning stark-preload"
role="alertdialog"
aria-busy="true"
aria-live="assertive">
<header><i></i></header>
<div class="content">
<h1>No JavaScript</h1>
<p>You must have JavaScript enabled!</p>
</div>
</div>
</noscript>

<div class="stark-browser-warning stark-preload" role="alertdialog" aria-busy="true" aria-live="assertive">
<header><i></i></header>
<div class="content">
<h1>Browser not supported</h1>
<p>You are using an <strong>outdated</strong> browser. Please
<a href="https://browsehappy.com"
target="_blank"
rel="noreferrer noopenenr">
upgrade your browser
</a>
to improve your experience.</p>
</div>
</div>

<app class="stark-app">
<div class="stark-loading stark-preload" role="alertdialog" aria-busy="true" aria-live="assertive">
<header><i></i></header>
<div class="content">
<div class="stark-loading-icon"></div>
<h1>Loading...</h1>
</div>
</div>
</app>

<script>
/*see if the browser is compatible*/
if ("querySelector" in document && "classList" in document.body && /*@cc_on!@*/false === false) {
/*remove the warning and display the app if the browser is up to date */
var browserWarning = document.getElementsByClassName("stark-browser-warning")[0];
if (browserWarning) document.body.removeChild(browserWarning);

document.body.classList.add("stark-browser-ok");
} else {
/* remove the app and show the browser warning if the browser is outdated*/
document.body.className += "stark-browser-outdated";

<% if (htmlWebpackPlugin.options.dllFiles) { %> <!-- dllFiles will be filled in by the Dll plugin -->
<!-- Webpack DLL JS files -->
<% for (let i = 0; i < htmlWebpackPlugin.options.dllFiles.js.length; ++i) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.dllFiles.js[i] %>"></script>
<% } %>
<% } %>
var starkApp = document.getElementsByClassName("stark-app")[0];
if (starkApp) document.body.removeChild(starkApp);

}
</script>
<% if (htmlWebpackPlugin.options.dllFiles) { %> <!-- dllFiles will be filled in by the Dll plugin -->
<!-- Webpack DLL JS files -->
<% for (let i = 0; i < htmlWebpackPlugin.options.dllFiles.js.length; ++i) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.dllFiles.js[i] %>"></script>
<% } %>
<% } %>

<!-- CSS will be injected by webpack here -->
<!-- Preload link tags will be injected by webpack here -->
<!-- Generated bundle scripts will be injected by webpack here: html-webpack-plugin -->
<!-- CSS will be injected by webpack here -->
<!-- Preload link tags will be injected by webpack here -->
<!-- Generated bundle scripts will be injected by webpack here: html-webpack-plugin -->
</body>
</html>

0 comments on commit 4022058

Please sign in to comment.