reset button to bottom

This commit is contained in:
miklo 2025-11-23 23:40:45 +01:00
parent 48d2ca69da
commit bf0b323e69
1 changed files with 44 additions and 10 deletions

View File

@ -13,8 +13,34 @@
.btn{padding:6px 10px;border-radius:4px;border:1px solid #888;background:#f0f0f0;cursor:pointer}
.num-label{font-size:18px;margin-right:8px;display:inline-block;width:40px;text-align:center}
.controls {
display:flex;
gap:16px;
align-items:flex-start;
}
/* kolumna z akcjami po lewej */
.left {
display:flex;
flex-direction:column;
gap:10px;
flex:1;
max-width:300px;
margin-bottom: 10px;
}
/* kontener dla przycisku reset wypychany na dół */
.reset-wrap {
display:flex;
flex-direction:column;
justify-content:flex-end; /* wypycha zawartość na dół kolumny */
align-items:flex-start;
min-height:50px; /* wysokość bloku; dostosuj */
}
/* Responsive: na wąskich ekranach kolumny jedna pod drugą */
@media (max-width:700px){
.controls { flex-direction:column; }
.controls .reset-wrap { min-height:120px; }
.grid{flex-direction:column}
.num-label{width:60px}
.col{width:100%; box-sizing:border-box}
@ -25,17 +51,15 @@
<body>
<h2>Panel admina</h2>
<form method="post" style="margin-bottom:18px">
<div style="display:flex;flex-direction:column;gap:10px;max-width:220px">
<button class="btn" name="action" value="add" style="background:#4caf50;color:#fff;border:none;padding:8px 12px;border-radius:6px">
Dodaj numer
</button>
<button class="btn" name="action" value="reset" style="background:#e53935;color:#fff;border:none;padding:8px 12px;border-radius:6px">
Reset — usuń wszystkie
</button>
<div class="left">
<form method="post" style="display:inline">
<button class="btn" name="action" value="add" style="background:#4caf50;color:#fff;border:none;padding:8px 12px;border-radius:6px">
Dodaj numer
</button>
</form>
<!-- inne przyciski/opcje admina można tu dodać -->
</div>
</form>
<div class="grid">
<div class="col">
@ -80,5 +104,15 @@
{% endfor %}
</div>
</div>
<div class="reset-wrap">
<form method="post">
<button class="btn" name="action" value="reset" style="background:#e53935;color:#fff;border:none;padding:8px 12px;border-radius:6px">
Reset — usuń wszystkie
</button>
</form>
</div>
</body>
</html>