diff --git a/apps/home/static/home/css/tables.css b/apps/home/static/home/css/tables.css new file mode 100644 index 0000000..88a0cf4 --- /dev/null +++ b/apps/home/static/home/css/tables.css @@ -0,0 +1,78 @@ + +.table { + color: var(--bs-body-color) !important; +} + +.table tbody tr.selected > * { + box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9) !important; + color: var(--bs-body-color) !important; +} + +.table.dataTable > tbody > tr.selected a { + color: var(--bs-link-color) !important; +} + +/* Fuck ugly height fix */ +td { + height: 1px; + text-wrap: nowrap; +} +td > .btn-link { padding-left: 0; } + +@-moz-document url-prefix() { + tr { height: 100%; } + td { height: 100%; } +} + + +/* Table Search */ + +.table-search-group { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: stretch; + width: 100%; + max-width: 450px; + border: 1px solid var(--bs-border-color); + border-radius: 0.25rem; + background-color: var(--bs-body-bg); + overflow: hidden; +} + +.table-search-label { + display: flex; + align-items: center; + padding: 0.375rem 0.75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: var(--bs-body-color); + text-align: center; + white-space: nowrap; + padding-right: 0; + border: none; + background-color: inherit; +} + +.table-search-input { + padding: 0.375rem 0.75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: var(--bs-body-color); + appearance: none; + background-clip: padding-box; + position: relative; + flex: 1 1 auto; + width: 1%; + min-width: 0; + border: none; + border-radius: 0; + background-color: inherit +} + +.table-search-input:focus { + outline: 0; + box-shadow: none; +} diff --git a/apps/home/static/home/js/tables.js b/apps/home/static/home/js/tables.js index 5ceed82..a5a3f09 100644 --- a/apps/home/static/home/js/tables.js +++ b/apps/home/static/home/js/tables.js @@ -243,7 +243,7 @@ function bindTablePageSizer(tableId) { _searchTimeouts = {}; function bindTableSearch(tableId) { let $tableFilters = $(tableId).closest('.js-tableBody').siblings('.js-tableFilters'); - $tableFilters.on("input", ".search-filter", function() { + $tableFilters.on("input", ".table-search-input", function() { clearTimeout(_searchTimeouts[tableId]); let searchString = $(this).val(); @@ -303,5 +303,5 @@ function determineSelectAllState(tableId) { $checkbox.prop("checked", doCheck); $checkbox.prop("indeterminate", doIndeterminate); - // TODO: disable/enable delete button here -} \ No newline at end of file + // TODO: disable/enable delete button here +} diff --git a/apps/home/templates/home/tabs/styles.html b/apps/home/templates/home/tabs/styles.html index 0507299..d8dc9ed 100644 --- a/apps/home/templates/home/tabs/styles.html +++ b/apps/home/templates/home/tabs/styles.html @@ -1,10 +1,10 @@
-
- +
+ +
diff --git a/apps/home/templates/home/tabs/subs.html b/apps/home/templates/home/tabs/subs.html index 8ea078e..cd6a181 100644 --- a/apps/home/templates/home/tabs/subs.html +++ b/apps/home/templates/home/tabs/subs.html @@ -1,10 +1,10 @@
-
- +
+ +