HAM/Berufsschule_HAM
1
0
Fork 1
mirror of https://github.com/LD-Reborn/Berufsschule_HAM.git synced 2025-12-20 06:51:55 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Improved Admin.cshtml preset collapsing

Browse Source
This commit is contained in:
LD-Reborn
2025-11-15 12:26:01 +01:00
parent bb1e4c197a
commit fe1329985f
1 changed files with 43 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/Views/Settings/Admin.cshtml
View File

@@ -12,7 +12,7 @@
ViewData["Title"] = T["Users"]; ViewData["Title"] = T["Users"];
} }
<form id="updateSettings" class="mb-5" method="post" asp-controller="Settings" asp-action="Admin"> <form id="updateSettings" style="margin-bottom: 4rem !important" method="post" asp-controller="Settings" asp-action="Admin">
<div class="row g-3"> <div class="row g-3">
<h4 class="fw-bold">@T["General settings"]</h4> <h4 class="fw-bold">@T["General settings"]</h4>
<div class="col-md-6"> <div class="col-md-6">
@@ -45,15 +45,18 @@
<input type="number" id="updateMaxDownloadableUserImageSize" name="MaxDownloadableUserImageSize" class="form-control" value="@Model.MaxDownloadableUserImageSize" /> <input type="number" id="updateMaxDownloadableUserImageSize" name="MaxDownloadableUserImageSize" class="form-control" value="@Model.MaxDownloadableUserImageSize" />
</div> </div>
</div> </div>
<h4 class="fw-bold mt-3">@T["Presets"]</h4> <div class="mt-3 p-2 bg border rounded d-flex justify-content-between align-items-center"
<button class="btn btn-secondary mb-3" data-bs-toggle="collapse"
type="button" data-bs-target="#presetsCollapse"
data-bs-toggle="collapse" style="cursor: pointer;">
data-bs-target="#presetsCollapse"
aria-expanded="false" <h4 class="fw-bold m-0">@T["Presets"]</h4>
aria-controls="presetsCollapse"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
@T["Show/Hide presets"] viewBox="0 0 16 16" class="chevron-svg">
</button> <path fill-rule="evenodd"
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
</div>
<div class="row g-3 collapse" id="presetsCollapse"> <div class="row g-3 collapse" id="presetsCollapse">
@foreach (var preset in Model.Presets) @foreach (var preset in Model.Presets)
{ {
@@ -65,37 +68,37 @@
@foreach (var attr in preset.Value.Attribute) @foreach (var attr in preset.Value.Attribute)
{ {
<div class="row mb-2" data-type="attribute"> <div class="row mb-2" data-type="attribute">
<div class="col-md-3"> <div class="col-md-3 mt-2">
<input class="form-control" <input class="form-control"
name="Presets.@(preset.Key).Attribute.@(attr.Key).Key" name="Presets.@(preset.Key).Attribute.@(attr.Key).Key"
value="@attr.Key" placeholder="@T["Name"]" aria-label="@T["Name"]" /> value="@attr.Key" placeholder="@T["Name"]" aria-label="@T["Name"]" />
</div> </div>
<div class="col-md-5"> <div class="col-md-5 mt-2">
<input class="form-control" <input class="form-control"
name="Presets.@(preset.Key).Attribute.@(attr.Key).Value" name="Presets.@(preset.Key).Attribute.@(attr.Key).Value"
value="@attr.Value" placeholder="@T["Value"]" aria-label="@T["Value"]" /> value="@attr.Value" placeholder="@T["Value"]" aria-label="@T["Value"]" />
</div> </div>
<div class="col-md-4"> <div class="col-md-4 mt-2">
<button type="button" class="btn btn-danger" data-type="deleteAttribute">@T["Delete attribute"]</button> <button type="button" class="btn btn-danger" data-type="deleteAttribute">@T["Delete attribute"]</button>
</div> </div>
</div> </div>
} }
<div class="row mb-4"> <div class="row mb-2">
<div class="col-md-4"> <div class="col-md-4">
<button type="button" class="btn btn-danger" data-type="deletePreset">@T["Delete preset"]</button> <button type="button" class="btn btn-danger" data-type="deletePreset">@T["Delete preset"]</button>
</div> </div>
<div class="col-md-4 ms-auto"> <div class="col-md-4 ms-auto mt-2">
<button type="button" class="btn btn-primary" data-type="addAttribute">@T["Add attribute"]</button> <button type="button" class="btn btn-primary" data-type="addAttribute">@T["Add attribute"]</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
} }
<div class="col-md-12"> <div class="col-md-12 mt-2">
<button type="button" class="btn btn-primary" data-type="addPreset">@T["Add preset"]</button> <button type="button" class="btn btn-primary" data-type="addPreset">@T["Add preset"]</button>
</div> </div>
</div> </div>
<button type="submit" class="btn btn-warning float-end">@T["Apply settings and update presets"]</button> <button type="submit" class="btn btn-warning float-end mt-3">@T["Apply settings and update presets"]</button>
</form> </form>
<script> <script>
@@ -175,6 +178,14 @@
presetContainer.querySelector('.attributes').appendChild(row); presetContainer.querySelector('.attributes').appendChild(row);
} }
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(toggler => {
toggler.addEventListener('click', () => {
const icon = toggler.querySelector('.chevron-svg');
icon.classList.toggle('rotate');
icon.parentElement.classList.toggle("no-bottom-border");
});
});
document.querySelectorAll('button[data-type="addAttribute"]').forEach(btn => { document.querySelectorAll('button[data-type="addAttribute"]').forEach(btn => {
addAddAttributeEventListener(btn); addAddAttributeEventListener(btn);
}); });
@@ -295,3 +306,18 @@
}); });
} }
</script> </script>
<style defer>
.chevron-svg {
transition: transform 0.2s ease;
}
.chevron-svg.rotate {
transform: rotate(180deg);
}
.no-bottom-border {
border-bottom: none !important;
border-radius: 0.5rem 0.5rem 0 0 !important;
}
</style>