reset button to bottom
This commit is contained in:
parent
48d2ca69da
commit
bf0b323e69
|
|
@ -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">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</form>
|
||||
<!-- inne przyciski/opcje admina można tu dodać -->
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue