diff --git a/apps/home/static/home/js/tables.js b/apps/home/static/home/js/tables.js
index ee64db9..9045642 100644
--- a/apps/home/static/home/js/tables.js
+++ b/apps/home/static/home/js/tables.js
@@ -29,7 +29,7 @@ function initializeDataTable(tableId, columns) {
title: '',
data: null,
orderable: false,
- className: "text-center col-switch-width",
+ className: "col-checkbox text-center",
render: function() {
return ''
}
@@ -482,7 +482,14 @@ function renderErrorMessages($modal, errorObj) {
function renderEditColumn(data) {
const name = sanitise(data);
- return ``;
+ return `${name}`
+}
+
+function renderAnchorColumn(name, href) {
+ name = sanitise(name);
+ href = sanitise(href);
+
+ return `${name}`;
}
function renderBooleanColumn(data) {
diff --git a/apps/home/static/home/js/tabs/subs.js b/apps/home/static/home/js/tabs/subs.js
index d166ab5..7141598 100644
--- a/apps/home/static/home/js/tabs/subs.js
+++ b/apps/home/static/home/js/tabs/subs.js
@@ -12,17 +12,14 @@ function initSubscriptionsModule() {
{
title: "Name",
data: "name",
- className: "text-truncate",
+ className: "col-name",
render: renderEditColumn
},
{
title: "URL",
data: "url",
- className: "text-truncate",
- render: function(data, type) {
- const url = sanitise(data);
- return `${url}`;
- }
+ className: "col-url",
+ render: url => renderAnchorColumn(url, url)
},
{
title: "Channels",
@@ -51,6 +48,7 @@ function initSubscriptionsModule() {
{
title: "Created At",
data: "created_at",
+ className: "col-date",
render: function(data, type) {
let dateTime = new Date(data);
return $(`
@@ -67,8 +65,7 @@ function initSubscriptionsModule() {
{
title: "Enabled",
data: "active",
- orderable: false,
- className: "text-center form-switch",
+ className: "col-switch text-center form-switch",
render: function(data, type) {
return ``
}
diff --git a/apps/home/static/home/scss/tables.scss b/apps/home/static/home/scss/tables.scss
index e68b1cb..c9f5c47 100644
--- a/apps/home/static/home/scss/tables.scss
+++ b/apps/home/static/home/scss/tables.scss
@@ -72,7 +72,7 @@
@include media-breakpoint-down(md) { margin-left: 0.25rem; }
}
-
+
// Table
.table {
@@ -86,11 +86,59 @@
border-color: inherit !important;
}
+ // Selected rows
+ tr.selected {
+
+ > * {
+
+ color: var(--bs-body-color) !important;
+ box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9) !important;
+
+ }
+
+ a {
+
+ color: var(--bs-link-color) !important;
+
+ }
+
+
+ }
+
thead { }
tbody { }
tfoot { }
// Custom column sizes
+ @mixin col-styles($width, $min-width: null, $max-width: null) {
+
+ $min-width: if($min-width == null, $width, $min-width);
+ $max-width: if($max-width == null, $width, $max-width);
+
+ width: $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: 500px;
+ $col-date: 150px;
+ $col-switch: 100px;
+
+ .col {
+
+ &-checkbox { @include col-styles($col-check); }
+ &-name { @include col-styles($col-label); }
+ &-url { @include col-styles($col-url, $col-url, $col-url * 2); }
+ &-date { @include col-styles($col-date); }
+ &-switch { @include col-styles($col-switch); }
+
+ }
}