diff --git a/packages/stark-core/assets/css/pre-load-style.css b/packages/stark-core/assets/css/pre-load-style.css new file mode 100644 index 0000000000..7ef6ca3da0 --- /dev/null +++ b/packages/stark-core/assets/css/pre-load-style.css @@ -0,0 +1,93 @@ +/* Hide the app / loader / browser warning until it is determined if JS is enabled and the 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-ui-page h1 { + font-size: 24px; + font-weight: 400; + line-height: 32px; + margin: 0 0 16px; +} + +.stark-preload-ui-page { + color: black; + 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-ui-page 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-ui-page 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-ui-page .content { + display: block; + padding: 16px; + background: #fff; +} + +.stark-preload-ui-page .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); + } +} diff --git a/packages/stark-core/assets/logo/stark_header_bg.png b/packages/stark-core/assets/logo/stark_header_bg.png new file mode 100644 index 0000000000..a9d50fd52a Binary files /dev/null and b/packages/stark-core/assets/logo/stark_header_bg.png differ diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss index 19ccb1ad59..b66c15b816 100644 --- a/packages/stark-ui/assets/styles/_base.scss +++ b/packages/stark-ui/assets/styles/_base.scss @@ -53,9 +53,6 @@ body { display: flex; flex-direction: column; height: 100%; - &:not(.stark-init) { - overflow-y: hidden; - } & .content-wrapper { flex: 1; display: flex; diff --git a/showcase/src/index.html b/showcase/src/index.html index b3b99b17e2..2c5bbe4a7a 100644 --- a/showcase/src/index.html +++ b/showcase/src/index.html @@ -6,7 +6,7 @@ <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 --> @@ -14,6 +14,8 @@ <% } %> <!-- 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 --> @@ -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-ui-page" + 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-ui-page" 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="http://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-ui-page" role="alertdialog" aria-busy="true" aria-live="assertive"> + <header><i></i></header> + <divs class="content"> <div class="stark-loading-icon"></div> <h1>Loading...</h1> - </div> - </content> - </div> -</app> --> -<app>Loading...</app> + </divs> + </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> diff --git a/starter/src/index.html b/starter/src/index.html index 73db830b90..2c5bbe4a7a 100644 --- a/starter/src/index.html +++ b/starter/src/index.html @@ -6,7 +6,7 @@ <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 --> @@ -14,6 +14,8 @@ <% } %> <!-- 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 --> @@ -30,20 +32,71 @@ <% } %> <% } %> </head> - <body class=""> -<app>Loading...</app> + <noscript> + <div class="stark-no-js-warning stark-preload-ui-page" + 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-ui-page" 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" + 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-ui-page" role="alertdialog" aria-busy="true" aria-live="assertive"> + <header><i></i></header> + <divs class="content"> + <div class="stark-loading-icon"></div> + <h1>Loading...</h1> + </divs> + </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>