Compare commits
3 commits
Author | SHA1 | Date | |
---|---|---|---|
00fc29c6ad | |||
50b6e0104b | |||
18972a0cbb |
11 changed files with 206 additions and 16 deletions
|
@ -26,4 +26,4 @@
|
|||
<script src="/src/js/index.js" type="module"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
100
src/components/app-bar.js
Normal file
100
src/components/app-bar.js
Normal file
|
@ -0,0 +1,100 @@
|
|||
import app from '../js/app';
|
||||
|
||||
const appBarLogoURL = new URL('../../static/images/app-bar-logo.png', import.meta.url).href;
|
||||
const backArrowIconURL = new URL('../../static/images/back-arrow-icon.png', import.meta.url).href;
|
||||
|
||||
const template = `
|
||||
<div>
|
||||
<img id="back-button" src="${backArrowIconURL}">
|
||||
</div>
|
||||
<div id="title">
|
||||
Percorsi <span class="bold">naturalistici</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="${appBarLogoURL}">
|
||||
</div>
|
||||
`;
|
||||
const style = `
|
||||
:host {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 68px;
|
||||
width: 100%;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
:host > div {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#title {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#title span {
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
// flex: 0 1 32px;
|
||||
height: 32px;
|
||||
width: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Bottom app bar custom element.
|
||||
*/
|
||||
class AppBar extends HTMLElement {
|
||||
#elements = {};
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*/
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.#createShadowDOM();
|
||||
this.#setElements();
|
||||
this.#addEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Create shadow DOM.
|
||||
*/
|
||||
#createShadowDOM() {
|
||||
this.attachShadow({mode: 'open'});
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>${style}</style>
|
||||
${template}
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set all shadow dom selectors.
|
||||
*/
|
||||
#setElements() {
|
||||
this.#elements = {
|
||||
backButton: this.shadowRoot.querySelector('#back-button'),
|
||||
};
|
||||
}
|
||||
|
||||
#addEventListeners() {
|
||||
this.#elements.backButton.addEventListener('click', () => {
|
||||
app.router.back();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('app-bar', AppBar);
|
||||
|
||||
export default AppBar;
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
import homeIconUrl from '../../static/images/home-icon.png';
|
||||
import routesIconUrl from '../../static/images/routes-icon.png';
|
||||
import settingsIconUrl from '../../static/images/settings-icon.png';
|
||||
const homeIconURL = new URL('../../static/images/home-icon.png', import.meta.url).href;
|
||||
const routesIconURL = new URL('../../static/images/routes-icon.png', import.meta.url).href;
|
||||
const settingsIconURL = new URL('../../static/images/settings-icon.png', import.meta.url).href;
|
||||
|
||||
const template = `
|
||||
<div>
|
||||
<img src="${homeIconUrl}">
|
||||
<img src="${homeIconURL}">
|
||||
</div>
|
||||
<div>
|
||||
<img src="${routesIconUrl}">
|
||||
<img src="${routesIconURL}">
|
||||
</div>
|
||||
<div>
|
||||
<img src="${settingsIconUrl}">
|
||||
<img src="${settingsIconURL}">
|
||||
</div>
|
||||
`;
|
||||
const style = `
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
:root {
|
||||
--footer-height: calc(68px + 20px + 20px);
|
||||
--accent-color: #213c8b;
|
||||
--primary-color: #de0e1b;
|
||||
--pianello-red: #de0e1b;
|
||||
--pianello-yellow: #f6ae04;
|
||||
--pianello-blue: #213c8b;
|
||||
|
|
2
src/css/routes-page.css
Normal file
2
src/css/routes-page.css
Normal file
|
@ -0,0 +1,2 @@
|
|||
|
||||
|
|
@ -13,6 +13,12 @@ const app = {
|
|||
link: {
|
||||
icon: appIconURL,
|
||||
},
|
||||
styleSheets: [robotoFontStyle, appStyle]
|
||||
.map((rawSheet) => {
|
||||
const sheet = new CSSStyleSheet();
|
||||
sheet.replaceSync(rawSheet);
|
||||
return sheet;
|
||||
}),
|
||||
page: null,
|
||||
router: new Router(),
|
||||
loader: WDLoader.instance,
|
||||
|
@ -23,12 +29,7 @@ const app = {
|
|||
<meta name="viewport" content="${app.meta.viewport}">
|
||||
`;
|
||||
document.title = app.title;
|
||||
document.adoptedStyleSheets = [robotoFontStyle, appStyle]
|
||||
.map((rawSheet) => {
|
||||
const sheet = new CSSStyleSheet();
|
||||
sheet.replaceSync(rawSheet);
|
||||
return sheet;
|
||||
});
|
||||
document.adoptedStyleSheets = app.styleSheets;
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import app from './app.js';
|
||||
import pageStyle from '../css/home-page.css?raw';
|
||||
import BottomAppBar from '../components/bottom-app-bar.js';
|
||||
import routesPageURL from '../pages/routes-page.html?url';
|
||||
|
||||
class HomePage {
|
||||
/**
|
||||
|
@ -25,19 +26,25 @@ class HomePage {
|
|||
#addPageStyle() {
|
||||
const sheet = new CSSStyleSheet();
|
||||
sheet.replaceSync(pageStyle);
|
||||
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
|
||||
document.adoptedStyleSheets = [...app.styleSheets, sheet];
|
||||
}
|
||||
|
||||
/**
|
||||
* Init `#elements` field that holds element references.
|
||||
*/
|
||||
#setElements() {
|
||||
this.#elements = {};
|
||||
this.#elements = {
|
||||
routeCards: document.querySelector('#route-cards'),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
#addEventListeners() {}
|
||||
#addEventListeners() {
|
||||
this.#elements.routeCards.addEventListener('click', () => {
|
||||
app.router.navigate(routesPageURL);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default HomePage;
|
||||
|
|
|
@ -153,6 +153,10 @@ class Router {
|
|||
script: template.content.querySelector('#page-script')?.cloneNode(true),
|
||||
};
|
||||
}
|
||||
|
||||
back() {
|
||||
history.back();
|
||||
}
|
||||
}
|
||||
|
||||
export default Router;
|
||||
|
|
47
src/js/routes-page.js
Normal file
47
src/js/routes-page.js
Normal file
|
@ -0,0 +1,47 @@
|
|||
import app from './app.js';
|
||||
import pageStyle from '../css/routes-page.css?raw';
|
||||
import AppBar from '../components/app-bar.js';
|
||||
import BottomAppBar from '../components/bottom-app-bar.js';
|
||||
|
||||
class RoutesPage {
|
||||
/**
|
||||
* An object containing useful HTMLElement references.
|
||||
* @type {Object}
|
||||
*/
|
||||
#elements = {};
|
||||
|
||||
constructor() {
|
||||
this.#addPageStyle();
|
||||
this.#setElements();
|
||||
this.#addEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {Object}
|
||||
*/
|
||||
get elements() {
|
||||
return this.#elements;
|
||||
}
|
||||
|
||||
#addPageStyle() {
|
||||
const sheet = new CSSStyleSheet();
|
||||
sheet.replaceSync(pageStyle);
|
||||
document.adoptedStyleSheets = [...app.styleSheets, sheet];
|
||||
}
|
||||
|
||||
/**
|
||||
* Init `#elements` field that holds element references.
|
||||
*/
|
||||
#setElements() {
|
||||
this.#elements = {};
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
#addEventListeners() {}
|
||||
}
|
||||
|
||||
export default RoutesPage;
|
||||
|
||||
app.init();
|
||||
app.page = new RoutesPage();
|
28
src/pages/routes-page.html
Normal file
28
src/pages/routes-page.html
Normal file
|
@ -0,0 +1,28 @@
|
|||
<body>
|
||||
<header>
|
||||
<app-bar></app-bar>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="route-cards">
|
||||
<div class="route-card">
|
||||
<div class="image"></div>
|
||||
<div class="info">
|
||||
<div class="name">
|
||||
<p>Percorso</p>
|
||||
<p class="bold">Pianello n1</p>
|
||||
</div>
|
||||
<div class="duration">
|
||||
Durata <span class="bold">90'</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<bottom-app-bar></bottom-app-bar>
|
||||
</footer>
|
||||
|
||||
<script id="page-script" src="../js/routes-page.js" type="module"></script>
|
||||
</body>
|
BIN
static/images/back-arrow-icon.png
Normal file
BIN
static/images/back-arrow-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1 KiB |
Loading…
Reference in a new issue