Refine navbar styles for improved responsiveness: adjust padding, gap, and font sizes for various screen sizes
This commit is contained in:
+58
-36
@@ -177,29 +177,79 @@
|
||||
}
|
||||
|
||||
.navbar .container-fluid {
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
/* Ensure container respects safe areas on all sides */
|
||||
padding-left: max(env(safe-area-inset-left, 0), 16px);
|
||||
padding-right: max(env(safe-area-inset-right, 0), 16px);
|
||||
padding-left: max(env(safe-area-inset-left, 0), 12px);
|
||||
padding-right: max(env(safe-area-inset-right, 0), 12px);
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.3rem;
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navbar-brand::before {
|
||||
content: attr(data-icon);
|
||||
margin-right: 8px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
font-size: 1rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
padding: 0.6rem 0.85rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
transition: padding .18s ease, font-size .18s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* iPad/Tablet responsive adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
.navbar .container-fluid {
|
||||
gap: 6px;
|
||||
padding-left: max(env(safe-area-inset-left, 0), 10px);
|
||||
padding-right: max(env(safe-area-inset-right, 0), 10px);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.navbar-brand::before {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.45rem 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small phones responsive adjustments */
|
||||
@media (max-width: 576px) {
|
||||
.navbar .container-fluid {
|
||||
gap: 4px;
|
||||
padding-left: max(env(safe-area-inset-left, 0), 8px);
|
||||
padding-right: max(env(safe-area-inset-right, 0), 8px);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 0.95rem;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.navbar-brand::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.nav-compact .navbar-brand {
|
||||
@@ -861,25 +911,11 @@
|
||||
<a class="nav-link {% if current_path == url_for('home') %}nav-active{% endif %}" href="{{ url_for('home') }}">Artikel</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if 'username' in session %}
|
||||
{% if current_permissions.pages.get('my_borrowed_items', True) %}
|
||||
<li class="nav-item" data-nav-fixed="true">
|
||||
<a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}">Meine Ausleihen</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if current_permissions.pages.get('tutorial_page', True) %}
|
||||
<li class="nav-item" data-nav-fixed="true">
|
||||
<a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}">Tutorial</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if 'username' in session and current_permissions.pages.get('upload_admin', True) and current_permissions.actions.get('can_insert', True) %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-priority-link {% if current_path == url_for('upload_admin') %}nav-active{% endif %}" href="{{ url_for('upload_admin') }}">➕ Hochladen</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<li class="nav-item">
|
||||
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
|
||||
<span class="theme-icon-light" style="display: none;">☀️</span>
|
||||
@@ -991,25 +1027,11 @@
|
||||
<a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}">Medien</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if 'username' in session %}
|
||||
{% if current_permissions.pages.get('my_borrowed_items', True) %}
|
||||
<li class="nav-item" data-nav-fixed="true">
|
||||
<a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}">Meine Medien</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if current_permissions.pages.get('tutorial_page', True) %}
|
||||
<li class="nav-item" data-nav-fixed="true">
|
||||
<a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}">Tutorial</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if 'username' in session and current_permissions.actions.get('can_insert', True) and current_permissions.pages.get('library_admin', True) %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-priority-link {% if current_path == url_for('library_admin') %}nav-active{% endif %}" href="{{ url_for('library_admin') }}">📖 Hochladen</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<li class="nav-item">
|
||||
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten">
|
||||
<span class="theme-icon-light" style="display: none;">☀️</span>
|
||||
|
||||
Reference in New Issue
Block a user