From 15c2d36b818c78cc7035c3e85820d23248785080 Mon Sep 17 00:00:00 2001 From: Kacper Cyranowski Date: Sat, 11 Dec 2021 00:10:50 +0100 Subject: [PATCH 1/2] add portrait component --- README_NEW.md | 13 ++++++++++ index.html | 2 +- src/app/App.js | 4 ++- src/components/Portrait/Portrait.js | 30 +++++++++++++++++++++++ src/components/Portrait/style.module.scss | 11 +++++++++ src/index.js | 5 +++- src/themes/theme.scss | 1 + 7 files changed, 63 insertions(+), 3 deletions(-) create mode 100644 README_NEW.md create mode 100644 src/components/Portrait/Portrait.js create mode 100644 src/components/Portrait/style.module.scss create mode 100644 src/themes/theme.scss diff --git a/README_NEW.md b/README_NEW.md new file mode 100644 index 0000000..78892c2 --- /dev/null +++ b/README_NEW.md @@ -0,0 +1,13 @@ +## Conventions + +For file structure reference this [repo](https://github.com/wiledal/vanilla-bean). + +Branches are named after category, task number and with meaningful description. E.g.'ui-18/add_portrait_component'. + +## Warnings + +Parcel in v2 has a [bug](https://github.com/parcel-bundler/parcel/issues/5965) witch it's cache and will not update changes on website without manual page refresh. + +## Useful resources + +- [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), diff --git a/index.html b/index.html index 12db059..9a065fc 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,6 @@
- + diff --git a/src/app/App.js b/src/app/App.js index bd85fe3..e9196bf 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -1 +1,3 @@ -export const App = ({ options }) => {}; +export const App = ({ options: { rootNodeId } }) => { + const rootNode = document.getElementById(rootNodeId); +}; diff --git a/src/components/Portrait/Portrait.js b/src/components/Portrait/Portrait.js new file mode 100644 index 0000000..43e89a1 --- /dev/null +++ b/src/components/Portrait/Portrait.js @@ -0,0 +1,30 @@ +import * as classes from './style.module.scss'; + +export const PORTRAIT_COMPONENT_NAME = 'portrait-component'; + +class Portrait extends HTMLElement { + constructor() { + super(); + this._contents = new DocumentFragment(); + + this.imageContainer = Portrait.imageContainerBuilder(); + + this._contents.appendChild(this.imageContainer); + } + + connectedCallback() { + this.imageContainer.style.backgroundImage = `url(${this.getAttribute( + 'data-image-url', + )})`; + this.appendChild(this._contents); + } + + static imageContainerBuilder() { + const imageContainer = document.createElement('div'); + imageContainer.className = classes.imageContainer; + + return imageContainer; + } +} + +customElements.define(PORTRAIT_COMPONENT_NAME, Portrait); diff --git a/src/components/Portrait/style.module.scss b/src/components/Portrait/style.module.scss new file mode 100644 index 0000000..45565b7 --- /dev/null +++ b/src/components/Portrait/style.module.scss @@ -0,0 +1,11 @@ +@use '../../themes/theme.scss'; + +.portrait { + display: flex; + flex: 1; + box-shadow: theme.$red-box-shadow; + border-radius: 16px; + min-height: 100px; + background-size: cover; + background-position: center; +} diff --git a/src/index.js b/src/index.js index 49ce214..5d4ea41 100644 --- a/src/index.js +++ b/src/index.js @@ -7,11 +7,14 @@ const SW_API_BASE_URL = process.env.SW_API_BASE_URL || 'https://swapi.dev/api'; const QUIZ_MAX_TIME = process.env.QUIZ_MAX_TIME_SECONDS ? process.env.QUIZ_MAX_TIME_SECONDS * ONE_SECOND_MILLIS : 120 * ONE_SECOND_MILLIS; +const ROOT_NODE_ID = 'swquiz-app'; -window.onload = () => +window.onload = () => { App({ options: { swApiBaseUrl: SW_API_BASE_URL, quizMaxTime: QUIZ_MAX_TIME, + rootNodeId: ROOT_NODE_ID, }, }); +}; diff --git a/src/themes/theme.scss b/src/themes/theme.scss new file mode 100644 index 0000000..c16d845 --- /dev/null +++ b/src/themes/theme.scss @@ -0,0 +1 @@ +$red-box-shadow: 4px 4px 40px 0px #ff0000e5, 0px 4px 4px 0px #00000040; \ No newline at end of file From 327872fcf35b28745a159908ff4cfe8dd72c4f23 Mon Sep 17 00:00:00 2001 From: Kacper Cyranowski Date: Sun, 12 Dec 2021 14:22:27 +0100 Subject: [PATCH 2/2] add border radius to theme and improve scss import --- src/components/Portrait/style.module.scss | 6 +++--- src/themes/theme.scss | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Portrait/style.module.scss b/src/components/Portrait/style.module.scss index 45565b7..886f7ff 100644 --- a/src/components/Portrait/style.module.scss +++ b/src/components/Portrait/style.module.scss @@ -1,10 +1,10 @@ -@use '../../themes/theme.scss'; +@use '../../themes/theme.scss' as *; .portrait { display: flex; flex: 1; - box-shadow: theme.$red-box-shadow; - border-radius: 16px; + box-shadow: $red-box-shadow; + border-radius: $border-radius; min-height: 100px; background-size: cover; background-position: center; diff --git a/src/themes/theme.scss b/src/themes/theme.scss index c16d845..f507fbd 100644 --- a/src/themes/theme.scss +++ b/src/themes/theme.scss @@ -1 +1,3 @@ -$red-box-shadow: 4px 4px 40px 0px #ff0000e5, 0px 4px 4px 0px #00000040; \ No newline at end of file +$red-box-shadow: 4px 4px 40px 0px #ff0000e5, 0px 4px 4px 0px #00000040; + +$border-radius: 16px;