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); } + + } }