corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

mobile friendly buttons
All checks were successful
Build and Push Docker Image / build (push) Successful in 15s
Details

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-09-16 10:24:03 +01:00
parent 3e85525f53
commit 7f580a0f1f
3 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Web interface now uses the full device width, rather than a smaller maximum width
- Server sidebar use more width, also displays name and guild ID, becomes smaller on small devices
- Update changelog to follow [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
- Made the tables and their respective buttons more mobile friendly
## [0.3.4] - 2024-09-12

8
apps/static/css/base.css
View File

@ -74,4 +74,12 @@
.w-xxl-75 { width: 75%; }
.w-xxl-100 { width: 100%; }
.w-xxl-auto { width: auto; }
}
.table-search-buttons > div {
margin-left: 1rem;
}
.table-search-buttons > div:first-of-type {
margin-left: 0 !important;
}

14
apps/static/js/table.js
View File

@ -50,7 +50,7 @@ async function initTable(containingSelector, tableId, loadDataFunc, newRowFunc,
function createSearchRow(containingSelector, searchId, sortDropdownId, filterDropdownId, options, newRowFunc, deleteSelectedFunc) {
$(containingSelector).append(`
<div class="row my-3 px-3 table-search-row">
<div class="col-lg-4">
<div class="col-md-6 col-lg-5 col-xl-4 col-xxl-3">
<div class="input-group mb-lg-0 mb-3 rounded-1">
<span class="input-group-text">
<i class="bi bi-search"></i>
@ -58,8 +58,8 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
<input type="search" id="${searchId}" name="${searchId}" class="form-control table-searchbar" placeholder="Search">
</div>
</div>
<div class="col-lg-8 text-end table-search-buttons">
<div class="d-inline-block ms-3">
<div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-search-buttons">
<div class="d-inline-block">
<button type="button" class="table-refresh-btn btn btn-outline-secondary rounded-1">
<i class="bi bi-arrow-clockwise"></i>
</button>
@ -71,7 +71,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
// If there is a function that allows the creation of new rows, create a button for it
if (newRowFunc) {
$(`${containingSelector} .table-search-row .table-search-buttons`).prepend(`
<div class="d-inline-block ms-3">
<div class="d-inline-block">
<button type="button" class="table-new-btn btn btn-primary rounded-1">
<i class="bi bi-plus-lg"></i>
</button>
@ -83,7 +83,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
// Show the sort dropdown
if (options.sort && options.actions.GET) {
$(`${containingSelector} .table-search-row .table-search-buttons`).append(`
<div class="d-inline-block ms-3">
<div class="d-inline-block">
<div id="${sortDropdownId}" class="dropdown table-sort-dropdown">
<button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-sort-alpha-up"></i>
@ -100,7 +100,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
// Show the filters dropdown
if (options.filter && options.actions.GET) {
$(`${containingSelector} .table-search-row .table-search-buttons`).append(`
<div class="d-inline-block ms-3">
<div class="d-inline-block">
<div id="${filterDropdownId}" class="dropdown table-filter-dropdown">
<button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-funnel"></i>
@ -117,7 +117,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
// If there is a function for deleting selected rows, create a button for it
if (deleteSelectedFunc) {
$(`${containingSelector} .table-search-row .table-search-buttons`).append(`
<div class="d-inline-block ms-3">
<div class="d-inline-block">
<button type="button" class="table-del-btn btn btn-danger rounded-1">
<i class="bi bi-trash3"></i>
</button>