Some ui adjustments for mobile
This commit is contained in:
@@ -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">
|
||||||
<img src="/static/img/Logo.png" alt="Logo" class="me-2">
|
<a href="/" class="navbar-brand d-flex align-items-center">
|
||||||
<span class="fs-4">APS</span>
|
<img src="/static/img/Logo.png" alt="Logo" class="me-2">
|
||||||
</a>
|
<span class="fs-4">APS</span>
|
||||||
<ul class="nav nav-pills flex-column mb-auto">
|
</a>
|
||||||
|
<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>
|
||||||
|
|||||||
Reference in New Issue
Block a user