improve server tabs on mobile screens
All checks were successful
Build and Push Docker Image / build (push) Successful in 15s

This commit is contained in:
Corban-Lee Jones 2024-10-10 16:36:23 +01:00
parent 048e293fb2
commit 0b153d14bc
2 changed files with 33 additions and 49 deletions

View File

@ -88,10 +88,6 @@
/* Server Tabs */
#serverTabs .nav-item:not(:last-child) {
margin-right: 1rem;
}
#serverTabs .nav-item .nav-link:hover:not(.active) {
background-color: var(--bs-secondary-bg);
}

View File

@ -57,58 +57,46 @@
</div>
<div class="col-12 bg-body-tertiary">
<ul id="serverTabs" class="nav nav-pills py-3 text-start px-sm-3" role="tablist">
<li class="nav-item me-auto">
<div class="row py-3 px-sm-3">
<div class="col-sm-4 col-xxl-3 mb-4 mb-sm-0">
<div class="d-flex align-items-center">
<img class="resolve-to-server-icon rounded-1 me-3 text-center" width="40">
<div>
<h5 class="resolve-to-server-name mb-0"></h5>
<h6 class="resolve-to-server-id small mb-0 text-body-secondary"></h6>
<h6 class="resolve-to-server-id small mb-0"></h6>
</div>
</div>
</li>
<li class="nav-item" role="presentation">
<button id="subscriptionsTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#subscriptionsTabPane" type="button" aria-controls="subscriptionsTabPane" aria-selected="false">
<i class="bi bi-layers"></i>
<span class="ms-2 d-none d-md-inline">Subscriptions</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button id="filtersTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#filtersTabPane" type="button" aria-controls="filtersTabPane" aria-selected="false">
<i class="bi bi-funnel"></i>
<span class="ms-2 d-none d-md-inline">Content Filters</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button id="stylesTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#stylesTabPane" type="button" aria-controls="stylesTabPane" aria-selected="false">
<i class="bi bi-border-style"></i>
<span class="ms-2 d-none d-md-inline">Message Styles</span>
</button>
</li>
<li class="nav-item me-0" role="presentation">
<button id="contentTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">
<i class="bi bi-archive"></i>
<span class="ms-2 d-none d-md-inline">Tracked Content</span>
</button>
</li>
<li class="nav-item d-none">
<div class="dropdown">
<button class="nav-link rounded-1 dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-gear"></i>
</button>
<ul class="dropdown-menu rounded-1">
<li>
<button type="button" class="dropdown-item py-2">
<i class="bi bi-trash3"></i>
<span class="ms-2">Delete Server Data</span>
</button>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-sm-8 col-xxl-9">
<ul class="nav nav-pills justify-content-sm-end" role="tablist">
<li class="nav-item me-1 me-lg-3" role="presentation">
<button id="subscriptionsTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#subscriptionsTabPane" type="button" aria-controls="subscriptionsTabPane" aria-selected="false">
<i class="bi bi-layers"></i>
<span class="ms-2 d-none d-lg-inline">Subscriptions</span>
</button>
</li>
<li class="nav-item me-1 me-lg-3" role="presentation">
<button id="filtersTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#filtersTabPane" type="button" aria-controls="filtersTabPane" aria-selected="false">
<i class="bi bi-funnel"></i>
<span class="ms-2 d-none d-lg-inline">Content Filters</span>
</button>
</li>
<li class="nav-item me-1 me-lg-3" role="presentation">
<button id="stylesTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#stylesTabPane" type="button" aria-controls="stylesTabPane" aria-selected="false">
<i class="bi bi-border-style"></i>
<span class="ms-2 d-none d-lg-inline">Message Styles</span>
</button>
</li>
<li class="nav-item me-0" role="presentation">
<button id="contentTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">
<i class="bi bi-archive"></i>
<span class="ms-2 d-none d-lg-inline">Tracked Content</span>
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12">
<div id="serverTabContent" class="tab-content">
<div id="subscriptionsTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="subscriptionsTab" tabindex="0">