Some ui adjustments for mobile

This commit is contained in:
2026-02-14 14:52:42 +01:00
parent bf682736e1
commit be60fcef9d

View File

@@ -11,14 +11,22 @@
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<!-- Left Sidebar (always visible, stacks on mobile) --> <!-- Left Sidebar (collapsible on mobile) -->
<div class="col-md-3 col-lg-2 p-0 sidebar"> <div class="col-md-3 col-lg-2 p-0 sidebar">
<div class="d-flex flex-column p-3"> <div class="d-flex flex-column p-3">
<a href="/" class="navbar-brand d-flex align-items-center mb-4"> <div class="d-flex justify-content-between align-items-center mb-4">
<a href="/" class="navbar-brand d-flex align-items-center">
<img src="/static/img/Logo.png" alt="Logo" class="me-2"> <img src="/static/img/Logo.png" alt="Logo" class="me-2">
<span class="fs-4">APS</span> <span class="fs-4">APS</span>
</a> </a>
<ul class="nav nav-pills flex-column mb-auto"> <button class="btn btn-sm btn-outline-primary d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarNav" aria-controls="sidebarNav" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
</button>
</div>
<div class="collapse d-md-block" id="sidebarNav">
<ul class="nav nav-pills d-flex flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a href="/" class="nav-link{% if request.url.path == "/"%} active{% endif %}"> <a href="/" class="nav-link{% if request.url.path == "/"%} active{% endif %}">
Übersicht Übersicht
@@ -56,6 +64,7 @@
</li> </li>
{% endif %} {% endif %}
</ul> </ul>
</div>
<!-- Shopping Cart at Bottom --> <!-- Shopping Cart at Bottom -->
<div class="mt-auto pt-3 border-top"> <div class="mt-auto pt-3 border-top">
@@ -77,7 +86,7 @@
<!-- Main Content --> <!-- Main Content -->
<main class="col-md-9 ms-sm-auto col-lg-10 p-md-4 main-content"> <main class="col-md-9 ms-sm-auto col-lg-10 p-md-4 main-content">
{% if not production_mode %} {% if not production_mode %}
<div class="alert alert-primary" role="alert"> <div class="alert alert-primary mt-2" role="alert">
<h2> Testmodus 🚧</h2> <h2> Testmodus 🚧</h2>
<p>Die hier dargestellten Produkte, Konten und Transaktionen entsprechen keinen echten. Bitte noch keine wirklichen Abrechnungen vornehmen!</p> <p>Die hier dargestellten Produkte, Konten und Transaktionen entsprechen keinen echten. Bitte noch keine wirklichen Abrechnungen vornehmen!</p>
<p>Schaltflächen mit dem 🚧-Symbol stellen Demo-Funktionen dar, die es im Echtbetrieb nicht mehr geben wird.</p> <p>Schaltflächen mit dem 🚧-Symbol stellen Demo-Funktionen dar, die es im Echtbetrieb nicht mehr geben wird.</p>