Project-Name-Here/assetflow
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed triangles

Browse Source
This commit is contained in:
Leon Meier 2023-05-21 00:42:37 +02:00
parent b6ebda8fb5
commit 037d03cc50
3 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/frontend/partials/controls.eta.html
View File

@ -126,7 +126,7 @@
data-bs-target="#collapseSettingsStorages" data-bs-target="#collapseSettingsStorages"
aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>" aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>"
aria-controls="collapseSettingsStorages"> aria-controls="collapseSettingsStorages">
<i class="bi bi-caret-left-fill dropdownIndicator"></i> <i class="bi bi-caret-left-fill dropdownIndicator" data-ref-target="#collapseSettingsStorages"></i>
</span> </span>
</a> </a>
@ -159,20 +159,18 @@
<a class="nav-link ms-4 <%= it.active == 'SETT_IMPORT_JSON' ? 'active' : ''%>" href="/manage/import/json"> <i class="bi bi-filetype-json"></i> JSON Import</a> <a class="nav-link ms-4 <%= it.active == 'SETT_IMPORT_JSON' ? 'active' : ''%>" href="/manage/import/json"> <i class="bi bi-filetype-json"></i> JSON Import</a>
</div> </div>
</ul> </ul>
</div> </div>
<!-- Align the mode picker at the bottom of the navbar --> <!-- Align the mode picker at the bottom of the navbar -->
<ul class="nav flex-column mb-2 position-absolute bottom-0 align-items-center w-100"> <ul class="nav flex-column mb-2 position-absolute bottom-0 align-items-center w-100">
<div class="input-group mb-3 justify-content-center w-100"> <div class="input-group mb-3 justify-content-center w-100">
<label class="btn btn-secondary" for="mode_light"><i class="bi bi-brightness-high"></i></label> <label class="btn btn-secondary" for="mode_light"><i class="bi bi-brightness-high"></i></label>
<input type="radio" class="btn-check" name="options" id="mode_light" autocomplete="off" > <input type="radio" class="btn-check" name="options" id="mode_light" autocomplete="off" />
<input type="radio" class="btn-check" name="options" id="mode_auto" autocomplete="off" checked> <input type="radio" class="btn-check" name="options" id="mode_auto" autocomplete="off" checked />
<label class="btn btn-secondary" for="mode_auto"><i class="bi bi-magic"></i></label> <label class="btn btn-secondary" for="mode_auto"><i class="bi bi-magic"></i></label>
<input type="radio" class="btn-check" name="options" id="mode_dark" autocomplete="off"> <input type="radio" class="btn-check" name="options" id="mode_dark" autocomplete="off" />
<label class="btn btn-secondary" for="mode_dark"><i class="bi bi-moon"></i></label> <label class="btn btn-secondary" for="mode_dark"><i class="bi bi-moon"></i></label>
</div> </div>
<script> <script>
@ -189,20 +187,21 @@
} }
modeLight.addEventListener('click', () => { modeLight.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'light'); localStorage.setItem('bs.theme', 'light');
document.documentElement.setAttribute('data-bs-theme', 'light'); updateColorMode()
//document.documentElement.setAttribute('data-bs-theme', 'light');
}); });
modeAuto.addEventListener('click', () => { modeAuto.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'auto'); localStorage.setItem('bs.theme', 'auto');
document.documentElement.setAttribute('data-bs-theme', 'auto'); updateColorMode()
//document.documentElement.setAttribute('data-bs-theme', 'auto');
}); });
modeDark.addEventListener('click', () => { modeDark.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'dark'); localStorage.setItem('bs.theme', 'dark');
document.documentElement.setAttribute('data-bs-theme', 'dark'); updateColorMode()
//document.documentElement.setAttribute('data-bs-theme', 'dark');
}); });
</script> </script>
</ul> </ul>
</nav> </nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="min-height: 100%"> <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="min-height: 100%">

11
static/css/dashboard.css
View File

@ -108,10 +108,17 @@ body {
transform: rotate(-90deg) !important; transform: rotate(-90deg) !important;
transition: 0.5s; transition: 0.5s;
} }
.derotate {
.dropdownIndicator { transform: rotate(0deg) !important;
transition: 0.5s; transition: 0.5s;
} }
.derotate::before {
transform: rotate(0deg) !important;
transition: 0.5s;
}
.dropdownIndicator {
transition: all 0.5s;
}
/* /*

22
static/js/handleSidebarTriangles.js
View File

@ -1,18 +1,22 @@
const trinagles = $('.dropdownIndicator'); const trinagles = $('.dropdownIndicator');
//const containers = $(''); console.log(`Found ${trinagles.length} triangles`)
trinagles.each(function () { trinagles.each(function () {
var target = $(this.dataset.refTarget); var target = $(this.dataset.refTarget);
var triTar = $(this);
// Apply rotate if target is open
if (target.hasClass('show')) {
$(this).addClass('rotate');
}
console.log('target', target);
target.on('show.bs.collapse', function () { target.on('show.bs.collapse', function () {
//$(this).parent.addClass('rotate'); $(triTar).addClass('rotate');
$(this).parent().find('.dropdownIndicator').addClass('rotate'); $(triTar).removeClass('derotate');
console.log($(this).parent().find('.dropdownIndicator'));
console.log('show');
}); });
target.on('hide.bs.collapse', function () { target.on('hide.bs.collapse', function () {
//$(this).parent.removeClass('rotate'); $(triTar).removeClass('rotate');
$(this).parent().find('.dropdownIndicator').removeClass('rotate'); $(triTar).addClass('derotate');
console.log('hide');
}); });
// bootstrap.Collapse.getOrCreateInstance(document.querySelector(this.dataset.refTarget))
}); });