mirror of
https://github.com/dgtlmoon/changedetection.io.git
synced 2026-07-09 00:41:34 +00:00
Unify table styling
This commit is contained in:
dgtlmoon
@@ -43,8 +43,8 @@ html[data-darkmode="true"] .watch-tag-list.tag-{{ class_name }} {
|
||||
</form>
|
||||
<!-- @todo maybe some overview matrix, 'tick' with which has notification, filter rules etc -->
|
||||
<div id="watch-table-wrapper">
|
||||
|
||||
<table class="pure-table pure-table-striped group-overview-table">
|
||||
<div class="cdio-table-clip">
|
||||
<table class="pure-table cdio-table group-overview-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
@@ -95,6 +95,7 @@ html[data-darkmode="true"] .watch-tag-list.tag-{{ class_name }} {
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -232,8 +232,8 @@ window.watchOverviewI18n = {
|
||||
{%- set table_classes = [
|
||||
'favicon-enabled' if 'favicons_enabled' not in ui_settings or ui_settings['favicons_enabled'] else 'favicon-not-enabled',
|
||||
] -%}
|
||||
<div class="watch-table-clip">
|
||||
<table class="pure-table {#pure-table-striped#} watch-table {{ table_classes | reject('equalto', '') | join(' ') }}">
|
||||
<div class="cdio-table-clip">
|
||||
<table class="pure-table cdio-table watch-table {{ table_classes | reject('equalto', '') | join(' ') }}">
|
||||
<thead>
|
||||
<tr>
|
||||
{%- set link_order = "desc" if sort_order == 'asc' else "asc" -%}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
// Left-rail expand/collapse state.
|
||||
// Adds `action-side-bar-expanded` to <body> whenever the rail is showing its
|
||||
// labels. In pinned mode (body.actionside-bar-on) the class is already present
|
||||
// from page load; in collapsed mode (body.actionsidebar-minimal) the rail only
|
||||
// expands on hover/focus, so we toggle the class to match.
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (!document.body.classList.contains('actionsidebar-minimal')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const inner = document.querySelector('.action-sidebar-inner');
|
||||
if (!inner) {
|
||||
return;
|
||||
}
|
||||
|
||||
const expand = () => document.body.classList.add('action-side-bar-expanded');
|
||||
const collapse = () => document.body.classList.remove('action-side-bar-expanded');
|
||||
|
||||
inner.addEventListener('mouseenter', expand);
|
||||
inner.addEventListener('mouseleave', collapse);
|
||||
inner.addEventListener('focusin', expand);
|
||||
inner.addEventListener('focusout', function(e) {
|
||||
// Keep expanded while focus stays inside the rail.
|
||||
if (!inner.contains(e.relatedTarget)) {
|
||||
collapse();
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,47 @@
|
||||
@use "../settings" as *;
|
||||
|
||||
// Shared base table appearance used across the app (watch list, groups/tags
|
||||
// overview, …) so the different tables look consistent even though they show
|
||||
// different data. Page-specific tables layer their own rules on top — e.g.
|
||||
// .watch-table adds favicons, status icons, the checking-now bar and selection.
|
||||
.cdio-table {
|
||||
width: 100%;
|
||||
font-size: var(--body-main-text-size);
|
||||
|
||||
thead {
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
vertical-align: middle;
|
||||
border: none;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
color: var(--color-watch-table-row-text);
|
||||
border-bottom: 1px solid var(--color-table-line);
|
||||
background-color: var(--color-table-background);
|
||||
|
||||
td {
|
||||
background-color: var(--color-table-background);
|
||||
}
|
||||
}
|
||||
|
||||
// Row hover highlight (the app's tables don't zebra-stripe).
|
||||
tbody tr:hover > td {
|
||||
background-color: var(--watchlist-row-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Rounds a table's corners. border-radius on the <table> itself doesn't work
|
||||
// with border-collapse:collapse (and the row divider lines depend on collapse),
|
||||
// so a clip wrapper rounds + overflow-clips the square corners of the thead /
|
||||
// last-row cell backgrounds instead.
|
||||
.cdio-table-clip {
|
||||
border-radius: var(--common-round-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -11,26 +11,14 @@ $title-col-stack-breakpoint: 1200px;
|
||||
background-color: var(--watchlist-row-selected);
|
||||
}
|
||||
|
||||
// Row hover: light grey background (replaces the now-disabled zebra striping)
|
||||
// and reveals the per-row action buttons (hidden at rest — see td.buttons below).
|
||||
.watch-table tbody tr:hover > td {
|
||||
background-color: var(--watchlist-row-hover);
|
||||
}
|
||||
// Reveal the per-row action buttons on hover/focus/selection (hidden at rest —
|
||||
// see td.buttons below). The row-hover background itself comes from .cdio-table.
|
||||
.watch-table tbody tr:hover td.buttons > *,
|
||||
.watch-table tbody tr:focus-within td.buttons > *,
|
||||
.watch-table tbody tr:has(input[name="uuids"]:checked) td.buttons > * {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Rounds the table's corners. border-radius on the <table> itself doesn't work
|
||||
// with border-collapse:collapse (and the row divider lines depend on collapse),
|
||||
// so a clip wrapper rounds + overflow-clips the square corners of the thead /
|
||||
// last-row cell backgrounds instead.
|
||||
.watch-table-clip {
|
||||
border-radius: var(--common-round-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// "Select all matching" banner shown under the bulk-operations bar when the
|
||||
// whole visible page is selected but more matching rows exist on other pages.
|
||||
.select-all-banner {
|
||||
@@ -81,10 +69,8 @@ body.has-queue {
|
||||
}
|
||||
}
|
||||
|
||||
// Watch-list-specific styling layered on top of the shared .cdio-table base.
|
||||
.watch-table {
|
||||
width: 100%;
|
||||
font-size: var(--body-main-text-size);
|
||||
|
||||
.checkbox-uuid {
|
||||
>* {
|
||||
vertical-align: middle;
|
||||
@@ -92,18 +78,6 @@ body.has-queue {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
thead {
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
vertical-align: middle;
|
||||
border: none;
|
||||
}
|
||||
@media only screen and (max-width: $title-col-stack-breakpoint) {
|
||||
.last-checked, .last-changed {
|
||||
text-align: center;
|
||||
@@ -114,14 +88,6 @@ body.has-queue {
|
||||
text-align: center;
|
||||
}
|
||||
tbody tr {
|
||||
color: var(--color-watch-table-row-text);
|
||||
border-bottom: 1px solid var(--color-table-line);
|
||||
background-color: var(--color-table-background);
|
||||
|
||||
td {
|
||||
background-color: var(--color-table-background);
|
||||
}
|
||||
|
||||
&.unviewed {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
@use "parts/menu";
|
||||
@use "parts/love";
|
||||
@use "parts/preview_text_filter";
|
||||
@use "parts/table";
|
||||
@use "parts/watch_table";
|
||||
@use "parts/watch_table-mobile";
|
||||
@use "parts/edit";
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user