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

replace stupid custom columns with bootstrap cols

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-11-12 21:36:34 +00:00
parent cd5c7769fa
commit 643cefd45f
2 changed files with 28 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/home/static/home/js/tabs/subs.js
View File

@ -12,37 +12,37 @@ function initSubscriptionsModule() {
{
title: "Name",
data: "name",
className: "col-name",
className: "col-3",
render: renderEditColumn
},
{
title: "URL",
data: "url",
className: "col-url",
className: "col-4",
render: url => renderAnchorColumn(url, url)
},
{
title: "Channels",
data: "channels_detail",
className: "col-icon",
className: "col-1 text-center",
render: data => renderPopoverBadgesColumn(data.map(item => `#${item.name}`), "bi-hash")
},
{
title: "Filters",
data: "filters_detail",
className: "col-icon",
className: "col-1 text-center",
render: data => renderPopoverBadgesColumn(data.map(item => item.name), "bi-funnel")
},
{
title: "Style",
data: "message_style_detail",
className: "col-hex",
className: "col-1 text-center",
render: renderLinkToStyleColumn
},
{
title: "Created At",
data: "created_at",
className: "col-date",
className: "col-1",
render: function(data, type) {
let dateTime = new Date(data);
return $(`
@ -59,7 +59,7 @@ function initSubscriptionsModule() {
{
title: "Enabled",
data: "active",
className: "col-switch text-center form-switch",
className: "col-1 text-center form-switch",
render: function(data, type) {
return `<input type="checkbox" class="sub-toggle-active form-check-input ms-0" ${data ? "checked" : ""} />`
}

64
apps/home/static/home/scss/tables.scss
View File

@ -68,10 +68,18 @@
border-bottom-left-radius: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-left: 1px solid var(--bs-border-color) !important;
border-right: 1px solid var(--bs-border-color) !important;
margin-right: -1px;
&:focus, &:hover { background-color: var(--bs-tertiary-bg); }
&:active, &.active { background-color: var(--bs-secondary); }
&:disabled, &.disabled {
color: var(--bs-tertiary-color);
background-color: var(--bs-secondary-bg);
}
}
@ -103,14 +111,20 @@
// Table
.table {
td, th { vertical-align: middle; }
th { text-wrap: nowrap; }
td, th {
vertical-align: middle;
text-wrap: nowrap;
}
// Top & bottom border colours
border-color: var(--bs-border-color);
tr:first-child > *,
tr:last-child > * {
border-color: inherit !important;
}
tr {
@ -141,47 +155,11 @@
tbody { }
tfoot { }
// Custom column sizes
@mixin col-styles($min-width: null, $max-width: null) {
$max-width: if($max-width == null, $min-width, $max-width);
min-width: $min-width;
max-width: $max-width;
text-overflow: ellipsis;
text-wrap: nowrap;
overflow: hidden;
}
$col-check: 53px;
$col-label: 350px;
$col-url: 420px;
$col-date: 150px;
$col-switch: 100px;
$col-icon: 120px;
.col {
&-name { @include col-styles($col-label); }
&-url { @include col-styles($col-url, $col-url * 2); }
&-date { @include col-styles($col-date); }
&-checkbox { @include col-styles($col-check); }
&-switch { @include col-styles($col-switch); }
&-icon { text-align: center; @include col-styles($col-icon); }
&-icon-wide { text-align: center; @include col-styles($col-icon, $col-icon + 30px) }
&-hex {
text-align: center;
@include col-styles($col-icon);
.col-hex-icon {
margin: 0 auto;
width: 25px;
height: 25px;
border-radius: 0.25rem;
}
}
.col-hex-icon {
margin: 0 auto;
width: 25px;
height: 25px;
border-radius: 0.25rem;
}
}