Commit 882d1178 authored by femiadeyemi's avatar femiadeyemi
Browse files

add correct tab spacing to the files (part 2 - leftover)

I forgot to do the indentation of these following files:
    - helmholtz-marketplace-app.js
    - helmholtz-marketplace-app.test.js

Also, the `prettier` is configured to use 4 spacing as
the default indentation.

Pull-request: #6
parent e584ed32
......@@ -1322,16 +1322,6 @@
}
}
},
"@open-wc/prettier-config": {
"version": "0.1.14",
"resolved": "https://registry.npmjs.org/@open-wc/prettier-config/-/prettier-config-0.1.14.tgz",
"integrity": "sha512-b30hqVLZLOvtGR0p3cmSvEYnu+OeKA1N/3v8m2u1bRt44+gVHkSOhf2/E90i8gveA6Maz98f0EwYFk03XEM/CA==",
"dev": true,
"requires": {
"eslint-config-prettier": "^3.3.0",
"prettier": "^1.19.1"
}
},
"@open-wc/scoped-elements": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@open-wc/scoped-elements/-/scoped-elements-1.1.1.tgz",
......@@ -1766,9 +1756,9 @@
"dev": true
},
"@types/node": {
"version": "14.0.11",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.11.tgz",
"integrity": "sha512-lCvvI24L21ZVeIiyIUHZ5Oflv1hhHQ5E1S25IRlKIXaRkVgmXpJMI3wUJkmym2bTbCe+WoIibQnMVAU3FguaOg==",
"version": "14.0.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.12.tgz",
"integrity": "sha512-/sjzehvjkkpvLpYtN6/2dv5kg41otMGuHQUt9T2aiAuIfleCQRQHXXzF1eAw/qkZTj5Kcf4JSTf7EIizHocy6Q==",
"dev": true
},
"@types/path-is-inside": {
......@@ -3810,9 +3800,9 @@
"dev": true
},
"electron-to-chromium": {
"version": "1.3.464",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.464.tgz",
"integrity": "sha512-Oo+0+CN9d2z6FToQW6Hwvi9ez09Y/usKwr0tsDsyg43a871zVJCi1nR0v03djLbRNcaCKjtrnVf2XJhTxEpPCg==",
"version": "1.3.465",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.465.tgz",
"integrity": "sha512-K/lUeT3NLAsJ5SHRDhK3/zd0tw7OUllYD8w+fTOXm6ljCPsp2qq+vMzxpLo8u1M27ZjZAjRbsA6rirvne2nAMQ==",
"dev": true
},
"elegant-spinner": {
......@@ -4149,9 +4139,9 @@
}
},
"eslint-config-prettier": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-3.6.0.tgz",
"integrity": "sha512-ixJ4U3uTLXwJts4rmSVW/lMXjlGwCijhBJHk8iVqKKSifeI0qgFEfWl8L63isfc8Od7EiBALF6BX3jKLluf/jQ==",
"version": "6.11.0",
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz",
"integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==",
"dev": true,
"requires": {
"get-stdin": "^6.0.0"
......@@ -8326,9 +8316,9 @@
"dev": true
},
"prettier": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
"integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
"integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
"dev": true
},
"private": {
......
......@@ -15,7 +15,8 @@
"devDependencies": {
"eslint": "^6.1.0",
"@open-wc/eslint-config": "^2.0.0",
"@open-wc/prettier-config": "^0.1.10",
"prettier": "^2.0.4",
"eslint-config-prettier": "^6.11.0",
"husky": "^1.0.0",
"lint-staged": "^8.0.0",
"@open-wc/testing-karma": "^3.0.0",
......@@ -30,7 +31,11 @@
"eslint-config-prettier"
]
},
"prettier": "@open-wc/prettier-config",
"prettier": {
"singleQuote": true,
"arrowParens": "avoid",
"tabWidth": 4
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
......
......@@ -4,207 +4,215 @@ import '@material/mwc-icon-button';
import '@material/mwc-top-app-bar-fixed';
class HelmholtzMarketplaceApp extends LitElement {
constructor() {
super();
this.src =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCA' +
'YAAACTphZWAAAAAXNSR0IArs4c6QAAAJZlWElmTU0AKgAAAAgABQESAAMAAAABA' +
'AEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgExAAIAAAARAAAAWodpAAQAAAAB' +
'AAAAbAAAAAAAAACWAAAAAQAAAJYAAAABd3d3Lmlua3NjYXBlLm9yZwAAAAOgAQAD' +
'AAAAAQABAACgAgAEAAAAAQAAAAugAwAEAAAAAQAAAAUAAAAAay66LwAAAAlwSFlz' +
'AAAXEgAAFxIBZ5/SUgAAActpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4Onht' +
'cG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlI' +
'DUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy' +
'8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG' +
'lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbn' +
'MuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodH' +
'RwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYX' +
'RvclRvb2w+d3d3Lmlua3NjYXBlLm9yZzwveG1wOkNyZWF0b3JUb29sPgogICAgIC' +
'AgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgIC' +
'A8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KGM' +
'tVWAAAAJtJREFUCB1jYACB//8ZwTQBghGskJHxP4PCfA7f8F9imx/zMDL8/cvFwP' +
'hXhIGV+Q3Dv7/8DL++XWFYnf2FhQGkMHS+RKbdPRemf4yfGR6quDIz/+P6y8D4lu' +
'HvvxsM/5msGNi4ZgMtPcECstlGhO3nx0+8V/79Z37L8P3POWYuZsG/rAxPGb5z/m' +
'Fg+3WJ4de/xzAXEuVeoMcYAVOHNwrP7xEAAAAAAElFTkSuQmCC';
}
constructor() {
super();
this.src =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCA' +
'YAAACTphZWAAAAAXNSR0IArs4c6QAAAJZlWElmTU0AKgAAAAgABQESAAMAAAABA' +
'AEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgExAAIAAAARAAAAWodpAAQAAAAB' +
'AAAAbAAAAAAAAACWAAAAAQAAAJYAAAABd3d3Lmlua3NjYXBlLm9yZwAAAAOgAQAD' +
'AAAAAQABAACgAgAEAAAAAQAAAAugAwAEAAAAAQAAAAUAAAAAay66LwAAAAlwSFlz' +
'AAAXEgAAFxIBZ5/SUgAAActpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4Onht' +
'cG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlI' +
'DUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy' +
'8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG' +
'lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbn' +
'MuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodH' +
'RwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYX' +
'RvclRvb2w+d3d3Lmlua3NjYXBlLm9yZzwveG1wOkNyZWF0b3JUb29sPgogICAgIC' +
'AgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgIC' +
'A8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KGM' +
'tVWAAAAJtJREFUCB1jYACB//8ZwTQBghGskJHxP4PCfA7f8F9imx/zMDL8/cvFwP' +
'hXhIGV+Q3Dv7/8DL++XWFYnf2FhQGkMHS+RKbdPRemf4yfGR6quDIz/+P6y8D4lu' +
'HvvxsM/5msGNi4ZgMtPcECstlGhO3nx0+8V/79Z37L8P3POWYuZsG/rAxPGb5z/m' +
'Fg+3WJ4de/xzAXEuVeoMcYAVOHNwrP7xEAAAAAAElFTkSuQmCC';
}
static get properties() {
return {
src: { type: String }
};
}
static get properties() {
return {
src: { type: String },
};
}
static get styles() {
return css`
:host {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
min-width: 400px;
}
.body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: #1a2b42;
margin: 0 auto;
text-align: center;
}
.high-res-img {
max-width: 100%;
height: auto;
width: auto\\9; /* ie8 */
}
.low-res-img {
max-width: 100vw;
height: 300px;
width: 100%;
}
.hidden {
display: none;
}
.welcome {
max-width: 90vw;
box-sizing: border-box;
}
#alt {
color: green;
}
.spacer {
width: 100vw;
height: 20vh;
}
.header {
--mdc-theme-primary: #222322;
}
.header > mwc-button {
--mdc-button-outline-color: white;
}
h1 {
margin: 0;
font-size: 3em;
padding: 0;
color: white;
font-family: 'Luckiest Guy', arial;
text-shadow: 0 0.1em 20px black, 0.05em -0.03em 0 black,
0.05em 0.005em 0 black, 0em 0.08em 0 black, 0.05em 0.08em 0 black,
0px -0.03em 0 black, -0.03em -0.03em 0 black, -0.03em 0.08em 0 black,
-0.03em 0 0 black;
}
h1 span {
-webkit-transform: scale(0.9);
transform: scale(0.9);
display: inline-block;
}
h1 span:first-child {
-webkit-animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards 30 alternate;
animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 30
alternate;
}
h1 span:last-child {
-webkit-animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards 30 alternate;
animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
30 alternate;
}
static get styles() {
return css`
:host {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
min-width: 400px;
}
.body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: #1a2b42;
margin: 0 auto;
text-align: center;
}
.high-res-img {
max-width: 100%;
height: auto;
width: auto\\9; /* ie8 */
}
.low-res-img {
max-width: 100vw;
height: 300px;
width: 100%;
}
.hidden {
display: none;
}
.welcome {
max-width: 90vw;
box-sizing: border-box;
}
#alt {
color: green;
}
.spacer {
width: 100vw;
height: 20vh;
}
.header {
--mdc-theme-primary: #222322;
}
.header > mwc-button {
--mdc-button-outline-color: white;
}
h1 {
margin: 0;
font-size: 3em;
padding: 0;
color: white;
font-family: 'Luckiest Guy', arial;
text-shadow: 0 0.1em 20px black, 0.05em -0.03em 0 black,
0.05em 0.005em 0 black, 0em 0.08em 0 black,
0.05em 0.08em 0 black, 0px -0.03em 0 black,
-0.03em -0.03em 0 black, -0.03em 0.08em 0 black,
-0.03em 0 0 black;
}
h1 span {
-webkit-transform: scale(0.9);
transform: scale(0.9);
display: inline-block;
}
h1 span:first-child {
-webkit-animation: bop 1s
cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 30
alternate;
animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards 30 alternate;
}
h1 span:last-child {
-webkit-animation: bopB 1s 0.2s
cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 30
alternate;
animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards 30 alternate;
}
@-webkit-keyframes bop {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
50%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes bop {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
50%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bop {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
50%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes bopB {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
80%,
100% {
-webkit-transform: scale(1) rotateZ(-3deg);
transform: scale(1) rotateZ(-3deg);
}
}
@keyframes bopB {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
80%,
100% {
-webkit-transform: scale(1) rotateZ(-3deg);
transform: scale(1) rotateZ(-3deg);
}
}
`;
}
@keyframes bop {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
50%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes bopB {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
80%,
100% {
-webkit-transform: scale(1) rotateZ(-3deg);
transform: scale(1) rotateZ(-3deg);
}
}
@keyframes bopB {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
80%,
100% {
-webkit-transform: scale(1) rotateZ(-3deg);
transform: scale(1) rotateZ(-3deg);
}
}
`;
}
render() {
return html`
<mwc-top-app-bar-fixed class="header">
<mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
<div slot="title"></div>
</mwc-top-app-bar-fixed>
<div class="body">
<div class="spacer"></div>
<div class="welcome">
<h1><span>welcome</span>&nbsp;&nbsp;<span>TO</span></h1>
</div>
<img id="logo" class="show low-res-img" src="${this.src}" alt />
<div id="alt" class="hidden"><h1>Helmholtz Marketplace</h1></div>
<div>
<p><code>/we are in design phase/</code></p>
<p>coming soon - <code>version: 0.0.1</code></p>
</div>
</div>
`;
}
render() {
return html`
<mwc-top-app-bar-fixed class="header">
<mwc-icon-button
icon="menu"
slot="navigationIcon"
></mwc-icon-button>
<div slot="title"></div>
</mwc-top-app-bar-fixed>
<div class="body">
<div class="spacer"></div>
<div class="welcome">
<h1><span>welcome</span>&nbsp;&nbsp;<span>TO</span></h1>
</div>
<img id="logo" class="show low-res-img" src="${this.src}" alt />
<div id="alt" class="hidden">
<h1>Helmholtz Marketplace</h1>
</div>
<div>
<p><code>/we are in design phase/</code></p>
<p>coming soon - <code>version: 0.0.1</code></p>
</div>
</div>
`;
}
firstUpdated(changedProperties) {
if (changedProperties) {
fetch('../images/hifis-logo.png')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.blob();
})
.then(myBlob => {
this.src = URL.createObjectURL(myBlob);
this.shadowRoot
.getElementById('logo')
.classList.replace('low-res-img', 'high-res-img');
})
.catch(() => {
this.shadowRoot
.getElementById('alt')
.classList.replace('hidden', 'show');
this.shadowRoot
.getElementById('logo')
.classList.replace('show', 'hidden');
});
firstUpdated(changedProperties) {
if (changedProperties) {
fetch('../images/hifis-logo.png')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.blob();
})
.then(myBlob => {
this.src = URL.createObjectURL(myBlob);
this.shadowRoot
.getElementById('logo')
.classList.replace('low-res-img', 'high-res-img');
})
.catch(() => {
this.shadowRoot
.getElementById('alt')
.classList.replace('hidden', 'show');
this.shadowRoot
.getElementById('logo')
.classList.replace('show', 'hidden');
});
}
}
}
}
customElements.define('helmholtz-marketplace-app', HelmholtzMarketplaceApp);
......@@ -3,20 +3,20 @@ import { html, fixture, expect } from '@open-wc/testing';
import '../src/helmholtz-marketplace-app.js';
describe('Helmholtz Marketplace App Shell', () => {
let element;
beforeEach(async () => {
element = await fixture(html`
<helmholtz-marketplace-app></helmholtz-marketplace-app>
`);
});
it('renders a header', () => {
const header = element.shadowRoot.querySelector('mwc-top-app-bar-fixed');
expect(header).to.exist;
expect(header.classList.contains('header')).be.true;
});
it('renders a body', async () => {
const body = element.shadowRoot.querySelector('.body');
expect(body).to.exist;
expect(body.classList.contains('body')).be.true;
});
let element;
beforeEach(async () => {
element = await fixture(html`
<helmholtz-marketplace-app></helmholtz-marketplace-app>
`);
});
it('renders a header', () => {
const header = element.shadowRoot.querySelector('mwc-top-app-bar-fixed');
expect(header).to.exist;
expect(header.classList.contains('header')).be.true;
});
it('renders a body', async () => {
const body = element.shadowRoot.querySelector('.body');
expect(body).to.exist;
expect(body.classList.contains('body')).be.true;
});
});
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment