make tabs work responsive

This commit is contained in:
rra 2024-03-10 15:03:04 +01:00
parent e2c2d9b503
commit 742ff2f46e
4 changed files with 27 additions and 16 deletions

View file

@ -1288,4 +1288,15 @@ fieldset legend {
max-width: 100%;
}
@media (orientation: portrait) {
.flex-sm-fill.text-sm-center.nav-link.active{
border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-border-color);
border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
}
.card-header-tabs {
margin-bottom:8px;
}
}
/*# sourceMappingURL=structure.css.map */

View file

@ -16,18 +16,18 @@
<li class="breadcrumb-item active">{{ _('Edit profile') }}</li>
</ol>
</nav>
<ul class="nav nav-tabs card-header-tabs">
<ul class="nav nav-tabs flex-column flex-sm-row card-header-tabs">
<li class="nav-item">
<a class="nav-link" href="/user/settings">Basic</a>
<a class="flex-sm-fill text-sm-center nav-link" href="/user/settings">Basic</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/user/settings/filters">Blocks & Filters</a>
<a class="flex-sm-fill text-sm-center nav-link" href="/user/settings/filters">Blocks & Filters</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/u/{{ current_user.user_name }}/profile">Profile</a>
<a class="flex-sm-fill text-sm-center nav-link active" href="/u/{{ current_user.user_name }}/profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Other</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Other</a>
</li>
</ul>
</div>

View file

@ -10,25 +10,25 @@
<div class="card" style="max-width:unset;">
<div class="card-header">
<nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
<nav class="mb-2" aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">{{ _('Home') }}</a></li>
<li class="breadcrumb-item"><a href="/u/{{ user.link() }}">{{ user.display_name() }}</a></li>
<li class="breadcrumb-item active">{{ _('Change settings') }}</li>
</ol>
</nav>
<ul class="nav nav-tabs card-header-tabs">
<ul class="nav nav-tabs flex-column flex-sm-row card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="/user/settings">Basic</a>
<a class="flex-sm-fill text-sm-center nav-link active" href="/user/settings">Basic</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/user/settings/filters">Blocks & Filters</a>
<a class="flex-sm-fill text-sm-center nav-link" href="/user/settings/filters">Blocks & Filters</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/u/{{ current_user.user_name }}/profile">Profile</a>
<a class="flex-sm-fill text-sm-center nav-link" href="/u/{{ current_user.user_name }}/profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Other</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Other</a>
</li>
</ul>
</div>

View file

@ -17,18 +17,18 @@
<li class="breadcrumb-item active">{{ _('Filters') }}</li>
</ol>
</nav>
<ul class="nav nav-tabs card-header-tabs">
<ul class="nav nav-tabs flex-column flex-sm-row card-header-tabs">
<li class="nav-item">
<a class="nav-link" href="/user/settings">Basic</a>
<a class="flex-sm-fill text-sm-center nav-link" href="/user/settings">Basic</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/user/settings/filters">Blocks & Filters</a>
<a class="flex-sm-fill text-sm-center nav-link active" href="/user/settings/filters">Blocks & Filters</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/u/{{ current_user.user_name }}/profile">Profile</a>
<a class="flex-sm-fill text-sm-center nav-link" href="/u/{{ current_user.user_name }}/profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Other</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Other</a>
</li>
</ul>
</div>