git/ddServer
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases 5 Packages Wiki Activity Actions

improve usability and styling

Browse source 
change table layout for Form to flexbox using bulma tiles
This commit is contained in:
Patryk Hegenberg 2023-12-05 19:58:13 +01:00
parent e230c0e10d
commit 4f69762b1f
4 changed files with 374 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

60
templates/base.html
View file

@ -10,43 +10,6 @@
integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: 'arial', sans-serif;
transition: background-color 0.3s, color 0.3s;
}
.form-box {
max-width: 700px;
width: 100%;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.banner {
position: relative;
text-align: center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
@ -62,6 +25,29 @@
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
</script>
</html>
{{ end }}