Compare commits

...

3 commits

Author SHA1 Message Date
9975d72364 Merge pull request 'develop' (#1) from develop into main
All checks were successful
ci/woodpecker/push/build Pipeline was successful
Reviewed-on: #1
2023-05-29 09:56:58 +02:00
d9c0ff232e Add bottom app bar
Some checks failed
ci/woodpecker/pr/build Pipeline failed
2023-05-29 09:55:52 +02:00
4b0b053c83 Add icons 2023-05-29 08:38:06 +02:00
12 changed files with 116 additions and 9 deletions

View file

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

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%;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
static/images/arrow-up.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 923 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/images/home-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB