pianello/pianello-web-app
pianello/pianello-web-app
2
0
Fork 0
Code Issues 3 Pull requests Projects 1 Releases Packages 1 Wiki Activity

Add bottom app bar
Some checks failed
ci/woodpecker/pr/build Pipeline failed
Details

Browse source
This commit is contained in:
Federico Bologni 2023-05-29 09:55:52 +02:00
parent 4b0b053c83
commit d9c0ff232e
3 changed files with 116 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
index.html
View file

@ -1,11 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8">
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="/static/images/home-icon.png">
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/src/css/index.css">
</head> </head>
<body> <body>
<footer>
<bottom-app-bar></bottom-app-bar>
</footer>
<script src="/src/components/bottom-app-bar.js" type="module"></script>
</body> </body>
</html> </html>

77
src/components/bottom-app-bar.js Normal file
View file

@ -0,0 +1,77 @@
const template = `
<div>
<img src="/static/images/home-icon.png">
</div>
<div>
<img src="/static/images/routes-icon.png">
</div>
<div>
<img src="/static/images/settings-icon.png">
</div>
`;
const style = `
:host {
position: fixed;
bottom: 20px;
display: flex;
height: 42px;
width: 80%;
border-radius: 90px;
box-shadow: 0 0 50px #ccc;
}
:host > div {
flex: 1;
display: grid;
place-items: center;
}
img {
display: block;
height: 32px;
width: auto;
}
`;
/**
* Bottom app bar custom element.
*/
class BottomAppBar 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.selectors = {};
}
#addEventListeners() {}
}
customElements.define('bottom-app-bar', BottomAppBar);
export default BottomAppBar;

19
src/css/index.css Normal file
View file

@ -0,0 +1,19 @@
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fff;
}
footer {
position: fixed;
bottom: 0;
display: grid;
place-items: center;
width: 100%;
}