Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(stark-starter): add preloading screens #848

Merged
merged 1 commit into from
Nov 13, 2018
Merged

feat(stark-starter): add preloading screens #848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 93 additions & 0 deletions packages/stark-core/assets/css/pre-load-style.css
View file
Open in desktop
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==");
carlo-nomes marked this conversation as resolved.
Show resolved Hide resolved
/* 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
Open in desktop
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
Open in desktop
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
Open in desktop
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 %>">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, we didn't notice it before.. thanks!


<% 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
Open in desktop
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>