dockyard / ember-app-shell Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
I have updated a website to ember-app-shell 0.5.4 and now a lot of selectors are missing in my app-shell.html
@charset "UTF-8";
.header-icon > svg > path,
.logo-path {
fill: currentColor;
}
.hamburglar,
a {
color: inherit;
}
.menu {
text-transform: uppercase;
}
.header-icon,
.logo {
position: absolute;
z-index: 1;
}
*,
::after,
::before {
box-sizing: border-box;
}
:root {
font-size: 16px;
}
body {
margin: 0;
}
a {
text-decoration: none;
}
.logo {
top: 0;
right: 0;
}
.logo > svg {
width: 120px;
height: 120px;
}
.header-icon {
width: 3rem;
height: 3rem;
display: block;
top: 15rem;
right: 1rem;
}
.header-icon.email {
top: 19rem;
}
@media screen and (max-width: 719px) {
.header-icon {
display: none;
}
}
@media screen and (min-width: 640px) {
.logo .rect {
display: none;
}
}
.animate-path,
.hamburglar,
.path-burger {
width: 68px;
height: 68px;
}
.liquid-container {
position: relative;
overflow: hidden;
}
.animate-path,
.burger-icon,
.hamburglar,
.path-burger {
position: absolute;
}
.liquid-child {
overflow: hidden;
}
.hamburglar {
top: 1rem;
left: 1rem;
display: block;
-webkit-appearance: none;
outline: #000;
border: 0;
padding: 0;
margin: 0;
background-position: 0 0;
background-repeat: initial initial;
}
.path-burger {
top: 0;
left: 0;
display: none;
}
.animate-path {
top: 0;
left: 0;
}
.path-rotation {
height: 34px;
width: 34px;
margin: 34px 34px 0 0;
}
.path-rotation::before {
content: '';
display: block;
width: 30px;
height: 34px;
margin: 0 4px 0 0;
background-color: currentcolor;
background-position: initial initial;
background-repeat: initial initial;
}
.path {
stroke-dasharray: 240px;
stroke-dashoffset: 240px;
stroke-linejoin: round;
}
.burger-icon {
top: 0;
left: 0;
padding: 20px 16px;
height: 68px;
width: 68px;
}
.burger-container {
position: relative;
height: 28px;
width: 36px;
}
.burger-bun-bot,
.burger-bun-top,
.burger-filling {
position: absolute;
display: block;
height: 4px;
width: 36px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
background-color: currentcolor;
background-position: initial initial;
background-repeat: initial initial;
}
.burger-ring,
.svg-ring {
width: 68px;
height: 68px;
}
.burger-bun-top {
top: 0;
}
.burger-bun-bot {
bottom: 0;
}
.burger-filling {
top: 12px;
}
.burger-ring {
position: absolute;
top: 0;
left: 0;
}
.svg-ring {
stroke: currentColor;
}
s-mixcloud-player {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background-color: #fff;
background-position: initial initial;
background-repeat: initial initial;
}
.menu {
display: none;
position: absolute;
top: 4rem;
left: 2rem;
font-size: 2rem;
line-height: 1.7;
letter-spacing: 3px;
z-index: 10;
}
@media screen and (min-width: 480px) {
.menu {
font-size: 3rem;
}
}
.menu ul {
margin-top: 2rem;
list-style: none;
padding: 0;
}
.menu li {
opacity: 0;
}
.menu a {
color: currentcolor;
text-decoration: none;
}
:root {
line-height: 1.34;
-webkit-hyphens: auto;
overflow-y: scroll;
}
.app-shell main {
margin-top: 0;
}
.app-shell main img {
margin-top: 10vh;
}
.app-shell + s-mixcloud-player {
display: none;
}
.root {
min-height: 100vh;
}
.root > header {
position: relative;
}
.background-container {
z-index: -1;
position: fixed;
left: 0;
right: 0;
height: 100vh;
}
.background-container .background,
.background-container .liquid-child {
width: 100%;
height: 100%;
}
.background {
background-size: cover !important;
background-attachment: fixed !important;
}
main {
margin-top: 10rem;
padding: 1rem;
display: block;
}
main > .liquid-container > .liquid-child {
min-height: 100%;
}
@media screen and (min-width: 640px) {
main {
margin-top: 15rem;
}
}
@media screen and (min-width: 768px) {
main {
margin-top: 5rem;
}
}
@media screen and (min-width: 1024px) {
main {
padding: 4rem 99px 4rem 4rem;
}
}
.logo-path {
fill: currentcolor;
}
*,
::after,
::before {
box-sizing: border-box;
}
:root {
font-size: 16px;
}
body {
margin: 0;
}
.logo > svg {
width: 120px;
height: 120px;
transform-origin: right top 0;
transform: scale(1.2);
}
@media screen and (min-width: 640px) {
.logo .rect {
display: none;
}
}
@supports (display: grid) {
.logo > svg {
transform: scale(1);
}
@media screen and (min-width: 640px) {
.logo > svg {
transform: scale(1.667);
}
}
}
.liquid-container {
position: relative;
overflow: hidden;
transform: translateY(0);
}
.liquid-child {
overflow: hidden;
}
:root {
line-height: 1.34;
overflow-y: scroll;
scroll-behavior: smooth;
}
.root {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.root > header {
position: relative;
}
.background-container {
contain: strict;
z-index: -1;
position: fixed;
left: 0;
right: 0;
height: 100vh;
}
.background-container .background,
.background-container .liquid-child {
width: 100%;
height: 100%;
}
.background {
background-size: cover !important;
background-attachment: fixed !important;
}
Add something to readme?
Currently ember-app-shell only waits for the load event here.
This does not seem to work in one of my applications: github:opensource-challenge.ch
If I delay the document.body.querySelector('.ember-view').outerHTML
call by some milliseconds it works again. Do we have a way to wait for the ember route to be rendered?
Thank you for your work on bringing PWAs to Ember. I've followed the thread of setting up a PWA with Ember from https://dockyard.com/blog/2017/07/20/how-to-build-a-pwa-with-ember to this library including ember-web-app
, ember-service-worker
, ember-service-worker-asset-cache
, ember-service-worker-cache-fallback
, and ember-service-worker-index
.
It was DockYard/ember-service-worker-index#5 that brought me here looking for a solution to how to properly configure everything for a Fastboot environment.
Is there a recommended configuration?
Currently it doesn't shut down the booted up Chrome instance. I had over 50 instances of Chrome running in the background before until I figured this out.
Using the latest (0.4.1
) version on a new ember (2.16
) app with ember-export-application-global
installed.
It looks like:
.then(() => Runtime.evaluate({ awaitPromise: true, expression: `
${this._appGlobal()}.visit('${visitPath}')
.then((application) => {
return document.body.querySelector('.ember-view').outerHTML;
});
`}))
is actually "erroring silently" with the following output:
{
Error: Result of the evaluation is not a promise
at /Users/ar/Projects/temp/ember-app-shell/node_modules/chrome-remote-interface/lib/chrome.js:91:30
at Chrome.handleMessage (/Users/ar/Projects/temp/ember-app-shell/node_modules/chrome-remote-interface/lib/chrome.js:292:13)
...
}
When wrapping ${this._appGlobal()}.visit('${visitPath}')
inside a native promise it looks like that evaluation is indeed not a promise.
return Runtime.evaluate({ awaitPromise: true, expression: `
new Promise((resolve, reject) => {
window['${this._appGlobal()}'].visit('/app-shell')
.then((successResult) => resolve('succes'), (errorResult) => reject(errorResult.toString()))
.catch((e) => reject('catch', e));
}).then((suc) => 'suc', (err) => err);
`})
Returns:
{ result:
{ type: 'string',
value: 'Error: Assertion Failed: You cannot use the same root element (BODY) multiple times in an Ember.Application' } }
which is an EmberError instead. Which makes sense since the app is already booted up:
window['${this._appGlobal()}']['autoboot'];
-> { result: { type: 'boolean', value: true } }
window['${this._appGlobal()}']['_booted'];
-> { result: { type: 'boolean', value: true } }
Removing the ${this._appGlobal()}.visit('${visitPath}')
entirely and using only document.body.querySelector('.ember-view').outerHTML
instead solves the issue for me.
I understand that it was added due to app not being ready on load:
#6
So I'm a little confused why it's not working as expected for me.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.