lindeas
/
jilo-web
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 7 Wiki Activity

Redesigns the sidebar

main
Yasen Pramatarov 2025-11-19 19:32:17 +02:00
parent 0f5f7a03e0
commit 76385b78d5
3 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/templates/page-sidebar.php
View File

@ -1,7 +1,7 @@
<div class="row"> <div class="row">
<!-- Sidebar --> <!-- Sidebar -->
<div class="col-md-3 mb-5 sidebar-wrapper bg-light" id="sidebar"> <div class="col-md-3 sidebar-wrapper" id="sidebar">
<div class="text-center" style="border: 1px solid #0dcaf0; height: 22px;" id="time_now"> <div class="text-center" style="border: 1px solid #0dcaf0; height: 22px;" id="time_now">
<?php <?php
$timeNow = new DateTime('now', new DateTimeZone($userTimezone)); $timeNow = new DateTime('now', new DateTimeZone($userTimezone));
@ -10,7 +10,7 @@ $timeNow = new DateTime('now', new DateTimeZone($userTimezone));
</div> </div>
<div class="col-4"><button class="btn btn-sm btn-info toggle-sidebar-button" type="button" id="toggleSidebarButton" value=">>"></button></div> <div class="col-4"><button class="btn btn-sm btn-info toggle-sidebar-button" type="button" id="toggleSidebarButton" value=">>"></button></div>
<div class="sidebar-content card ml-3 mt-3"> <div class="sidebar-content card ml-3 mt-0">
<ul class="list-group"> <ul class="list-group">
<a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=dashboard"> <a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=dashboard">
@ -19,7 +19,7 @@ $timeNow = new DateTime('now', new DateTimeZone($userTimezone));
</li> </li>
</a> </a>
<li class="list-group-item bg-light" style="border: none;"><p class="text-end mb-0"><small>logs statistics</small></p></li> <li class="list-group-item sidebar-section-title-first">logs statistics</li>
<a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=conferences"> <a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=conferences">
<li class="list-group-item<?php if ($page === 'conferences') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>"> <li class="list-group-item<?php if ($page === 'conferences') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">
@ -37,7 +37,7 @@ $timeNow = new DateTime('now', new DateTimeZone($userTimezone));
</li> </li>
</a> </a>
<li class="list-group-item bg-light" style="border: none;"><p class="text-end mb-0"><small>live data</small></p></li> <li class="list-group-item sidebar-section-title">live data</li>
<a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=graphs"> <a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=graphs">
<li class="list-group-item<?php if ($page === 'graphs') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>"> <li class="list-group-item<?php if ($page === 'graphs') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">
@ -65,7 +65,7 @@ $timeNow = new DateTime('now', new DateTimeZone($userTimezone));
</li> </li>
</a> </a>
<li class="list-group-item bg-light" style="border: none;"><p class="text-end mb-0"><small>jitsi platforms settings</small></p></li> <li class="list-group-item sidebar-section-title">jitsi platforms settings</li>
<a href="<?= htmlspecialchars($app_root) ?>?page=settings"> <a href="<?= htmlspecialchars($app_root) ?>?page=settings">
<li class="list-group-item<?php if ($page === 'settings') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>"> <li class="list-group-item<?php if ($page === 'settings') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">

16
public_html/static/css/main.css
View File

@ -704,6 +704,16 @@ body {
} }
/* sidebar section titles */ /* sidebar section titles */
.sidebar-content .sidebar-section-title-first {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6c757d;
padding: 0.6rem 1.1rem 0.45rem 1.1rem;
cursor: default;
background-color: transparent;
font-weight: 300;
}
.sidebar-content .sidebar-section-title { .sidebar-content .sidebar-section-title {
font-size: 0.75rem; font-size: 0.75rem;
text-transform: uppercase; text-transform: uppercase;
@ -712,10 +722,14 @@ body {
padding: 0.6rem 1.1rem 0.45rem 1.1rem; padding: 0.6rem 1.1rem 0.45rem 1.1rem;
cursor: default; cursor: default;
background-color: transparent; background-color: transparent;
font-weight: 600; font-weight: 300;
border-top: 1px solid lightgray;
} }
/* make section titles invisible (but keep spacing) when collapsed */ /* make section titles invisible (but keep spacing) when collapsed */
.sidebar-wrapper.collapsed .sidebar-section-title-first {
visibility: hidden;
}
.sidebar-wrapper.collapsed .sidebar-section-title { .sidebar-wrapper.collapsed .sidebar-section-title {
visibility: hidden; visibility: hidden;
} }

10
public_html/static/js/sidebar.js
View File

@ -19,13 +19,13 @@ document.addEventListener('DOMContentLoaded', function () {
toggleButton.textContent = ">>"; toggleButton.textContent = ">>";
sidebar.classList.add('collapsed'); sidebar.classList.add('collapsed');
mainContent.classList.add('expanded'); mainContent.classList.add('expanded');
timeNow.style.display = 'none'; timeNow.style.opacity = '0';
} else { } else {
toggleButton.value = "<<"; toggleButton.value = "<<";
toggleButton.textContent = "<<"; toggleButton.textContent = "<<";
sidebar.classList.remove('collapsed'); sidebar.classList.remove('collapsed');
mainContent.classList.remove('expanded'); mainContent.classList.remove('expanded');
timeNow.style.display = 'block'; timeNow.style.opacity = '1';
} }
} }
@ -37,15 +37,15 @@ document.addEventListener('DOMContentLoaded', function () {
sidebar.classList.toggle('collapsed'); sidebar.classList.toggle('collapsed');
document.documentElement.classList.toggle('sidebar-collapsed'); document.documentElement.classList.toggle('sidebar-collapsed');
mainContent.classList.toggle('expanded'); mainContent.classList.toggle('expanded');
// Toggle the value between ">>" and "<<" // Toggle the value between ">>" and "<<" and fade time box
if (toggleButton.value === ">>") { if (toggleButton.value === ">>") {
toggleButton.value = "<<"; toggleButton.value = "<<";
toggleButton.textContent = "<<"; toggleButton.textContent = "<<";
timeNow.style.display = 'block'; timeNow.style.opacity = '1';
} else { } else {
toggleButton.value = ">>"; toggleButton.value = ">>";
toggleButton.textContent = ">>"; toggleButton.textContent = ">>";
timeNow.style.display = 'none'; timeNow.style.opacity = '0';
} }
// Update with the new state // Update with the new state