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}
|
.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}
|
.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ą */
|
/* Responsive: na wąskich ekranach kolumny jedna pod drugą */
|
||||||
@media (max-width:700px){
|
@media (max-width:700px){
|
||||||
|
.controls { flex-direction:column; }
|
||||||
|
.controls .reset-wrap { min-height:120px; }
|
||||||
.grid{flex-direction:column}
|
.grid{flex-direction:column}
|
||||||
.num-label{width:60px}
|
.num-label{width:60px}
|
||||||
.col{width:100%; box-sizing:border-box}
|
.col{width:100%; box-sizing:border-box}
|
||||||
|
|
@ -25,17 +51,15 @@
|
||||||
<body>
|
<body>
|
||||||
<h2>Panel admina</h2>
|
<h2>Panel admina</h2>
|
||||||
|
|
||||||
<form method="post" style="margin-bottom:18px">
|
<div class="left">
|
||||||
<div style="display:flex;flex-direction:column;gap:10px;max-width:220px">
|
<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">
|
<button class="btn" name="action" value="add" style="background:#4caf50;color:#fff;border:none;padding:8px 12px;border-radius:6px">
|
||||||
Dodaj numer
|
Dodaj numer
|
||||||
</button>
|
</button>
|
||||||
|
</form>
|
||||||
<button class="btn" name="action" value="reset" style="background:#e53935;color:#fff;border:none;padding:8px 12px;border-radius:6px">
|
<!-- inne przyciski/opcje admina można tu dodać -->
|
||||||
Reset — usuń wszystkie
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
|
|
@ -80,5 +104,15 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue