From 5da58f2d069164ba497ba7f33c4f238f6e37dafb Mon Sep 17 00:00:00 2001 From: dgtlmoon Date: Wed, 7 May 2025 15:30:26 +0200 Subject: [PATCH] revert changes --- changedetectionio/static/styles/diff.css | 4 +- .../static/styles/scss/parts/_variables.scss | 1 - .../static/styles/scss/styles.scss | 161 ++++++++++++- changedetectionio/static/styles/styles.css | 217 ++++++++---------- 4 files changed, 251 insertions(+), 132 deletions(-) diff --git a/changedetectionio/static/styles/diff.css b/changedetectionio/static/styles/diff.css index ee7c78ed..46bc0be4 100644 --- a/changedetectionio/static/styles/diff.css +++ b/changedetectionio/static/styles/diff.css @@ -88,9 +88,7 @@ --color-icon-github: var(--color-black); --color-icon-github-hover: var(--color-grey-300); --color-watch-table-error: var(--color-dark-red); - --color-watch-table-row-text: var(--color-grey-100); - --color-change-highlight-rgb: 255, 215, 0; - /* Gold color for socket.io highlight */ } + --color-watch-table-row-text: var(--color-grey-100); } html[data-darkmode="true"] { --color-link: #59bdfb; diff --git a/changedetectionio/static/styles/scss/parts/_variables.scss b/changedetectionio/static/styles/scss/parts/_variables.scss index 324552c7..aca4ed55 100644 --- a/changedetectionio/static/styles/scss/parts/_variables.scss +++ b/changedetectionio/static/styles/scss/parts/_variables.scss @@ -101,7 +101,6 @@ --color-watch-table-error: var(--color-dark-red); --color-watch-table-row-text: var(--color-grey-100); - --color-change-highlight-rgb: 255, 215, 0; /* Gold color for socket.io highlight */ } html[data-darkmode="true"] { diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss index 56f65621..21075079 100644 --- a/changedetectionio/static/styles/scss/styles.scss +++ b/changedetectionio/static/styles/scss/styles.scss @@ -6,7 +6,6 @@ @import "parts/_browser-steps"; @import "parts/_extra_proxies"; @import "parts/_extra_browsers"; -@import "parts/_watch_table"; @import "parts/_pagination"; @import "parts/_spinners"; @import "parts/_variables"; @@ -170,6 +169,56 @@ code { color: var(--color-text); } +/* table related */ +.watch-table { + width: 100%; + font-size: 80%; + + tr { + &.unviewed { + font-weight: bold; + } + &.error { + color: var(--color-watch-table-error); + } + color: var(--color-watch-table-row-text); + } + + + td { + white-space: nowrap; + &.title-col { + word-break: break-all; + white-space: normal; + } + } + + + th { + white-space: nowrap; + + a { + font-weight: normal; + + &.active { + font-weight: bolder; + } + + &.inactive { + .arrow { + display: none; + } + } + } + } + + .title-col a[target="_blank"]::after, + .current-diff-url::after { + content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); + margin: 0 3px 0 5px; + } +} + .inline-tag { white-space: nowrap; border-radius: 5px; @@ -657,6 +706,115 @@ footer { input[type='text'] { width: 100%; } + + /* + Max width before this PARTICULAR table gets nasty + This query will take effect for any screen smaller than 760px + and also iPads specifically. + */ + .watch-table { + /* make headings work on mobile */ + thead { + display: block; + tr { + th { + display: inline-block; + // Hide the "Last" text for smaller screens + @media (max-width: 768px) { + .hide-on-mobile { + display: none; + } + } + } + } + .empty-cell { + display: none; + } + } + + /* Force table to not be like tables anymore */ + tbody { + td, + tr { + display: block; + } + } + + tbody { + tr { + display: flex; + flex-wrap: wrap; + + // The third child of each row will take up the remaining space + // This is useful for the URL column, which should expand to fill the remaining space + :nth-child(3) { + flex-grow: 1; + } + // The last three children (from the end) of each row will take up the full width + // This is useful for the "Last Checked", "Last Changed", and the action buttons columns, which should each take up the full width + :nth-last-child(-n+3) { + flex-basis: 100%; + } + } + } + + .last-checked { + >span { + vertical-align: middle; + } + } + + .last-checked::before { + color: var(--color-last-checked); + content: "Last Checked "; + } + + .last-changed::before { + color: var(--color-last-checked); + content: "Last Changed "; + } + + /* Force table to not be like tables anymore */ + td.inline { + display: inline-block; + } + + .pure-table td, + .pure-table th { + border: none; + } + + td { + /* Behave like a "row" */ + border: none; + border-bottom: 1px solid var(--color-border-watch-table-cell); + vertical-align: middle; + + &:before { + /* Top/left values mimic padding */ + top: 6px; + left: 6px; + width: 45%; + padding-right: 10px; + white-space: nowrap; + } + } + + &.pure-table-striped { + tr { + background-color: var(--color-table-background); + } + + tr:nth-child(2n-1) { + background-color: var(--color-table-stripe); + } + + tr:nth-child(2n-1) td { + background-color: inherit; + } + } + + } } .pure-table { @@ -912,7 +1070,6 @@ ul { } @import "parts/_visualselector"; -@import "parts/_socket"; #webdriver_delay { width: 5em; diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index 4ffb9f95..28cb0ec2 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -184,105 +184,6 @@ ul#requests-extra_browsers { margin: 1em; padding: 1em; } -/* table related */ -.watch-table { - width: 100%; - font-size: 80%; } - .watch-table tr { - color: var(--color-watch-table-row-text); } - .watch-table tr.unviewed { - font-weight: bold; } - .watch-table tr.has-history a.preview { - display: none !important; } - .watch-table tr.has-history.history { - display: inline-block !important; } - .watch-table tr.error { - color: var(--color-watch-table-error); } - .watch-table tr.queued a.queue { - display: inline-block !important; } - .watch-table tr.queued a.recheck { - display: none !important; } - .watch-table td { - white-space: nowrap; } - .watch-table td.title-col { - word-break: break-all; - white-space: normal; } - .watch-table th { - white-space: nowrap; } - .watch-table th a { - font-weight: normal; } - .watch-table th a.active { - font-weight: bolder; } - .watch-table th a.inactive .arrow { - display: none; } - .watch-table .title-col a[target="_blank"]::after, - .watch-table .current-diff-url::after { - content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); - margin: 0 3px 0 5px; } - -@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) { - /* -Max width before this PARTICULAR table gets nasty -This query will take effect for any screen smaller than 760px -and also iPads specifically. -*/ - .watch-table { - /* make headings work on mobile */ - /* Force table to not be like tables anymore */ - /* Force table to not be like tables anymore */ } - .watch-table thead { - display: block; } - .watch-table thead tr th { - display: inline-block; } } - @media only screen and (max-width: 760px) and (max-width: 768px), (min-device-width: 768px) and (max-device-width: 800px) and (max-width: 768px) { - .watch-table thead tr th .hide-on-mobile { - display: none; } } - -@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) { - .watch-table thead .empty-cell { - display: none; } - .watch-table tbody td, - .watch-table tbody tr { - display: block; } - .watch-table tbody tr { - display: flex; - flex-wrap: wrap; } - .watch-table tbody tr :nth-child(3) { - flex-grow: 1; } - .watch-table tbody tr :nth-last-child(-n+3) { - flex-basis: 100%; } - .watch-table .last-checked > span { - vertical-align: middle; } - .watch-table .last-checked::before { - color: var(--color-last-checked); - content: "Last Checked "; } - .watch-table .last-changed::before { - color: var(--color-last-checked); - content: "Last Changed "; } - .watch-table td.inline { - display: inline-block; } - .watch-table .pure-table td, - .watch-table .pure-table th { - border: none; } - .watch-table td { - /* Behave like a "row" */ - border: none; - border-bottom: 1px solid var(--color-border-watch-table-cell); - vertical-align: middle; } - .watch-table td:before { - /* Top/left values mimic padding */ - top: 6px; - left: 6px; - width: 45%; - padding-right: 10px; - white-space: nowrap; } - .watch-table.pure-table-striped tr { - background-color: var(--color-table-background); } - .watch-table.pure-table-striped tr:nth-child(2n-1) { - background-color: var(--color-table-stripe); } - .watch-table.pure-table-striped tr:nth-child(2n-1) td { - background-color: inherit; } } - .pagination-page-info { color: #fff; font-size: 0.85rem; @@ -438,9 +339,7 @@ and also iPads specifically. --color-icon-github: var(--color-black); --color-icon-github-hover: var(--color-grey-300); --color-watch-table-error: var(--color-dark-red); - --color-watch-table-row-text: var(--color-grey-100); - --color-change-highlight-rgb: 255, 215, 0; - /* Gold color for socket.io highlight */ } + --color-watch-table-row-text: var(--color-grey-100); } html[data-darkmode="true"] { --color-link: #59bdfb; @@ -836,6 +735,34 @@ code { background: var(--color-background-code); color: var(--color-text); } +/* table related */ +.watch-table { + width: 100%; + font-size: 80%; } + .watch-table tr { + color: var(--color-watch-table-row-text); } + .watch-table tr.unviewed { + font-weight: bold; } + .watch-table tr.error { + color: var(--color-watch-table-error); } + .watch-table td { + white-space: nowrap; } + .watch-table td.title-col { + word-break: break-all; + white-space: normal; } + .watch-table th { + white-space: nowrap; } + .watch-table th a { + font-weight: normal; } + .watch-table th a.active { + font-weight: bolder; } + .watch-table th a.inactive .arrow { + display: none; } + .watch-table .title-col a[target="_blank"]::after, + .watch-table .current-diff-url::after { + content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); + margin: 0 3px 0 5px; } + .inline-tag, .watch-tag-list, .tracking-ldjson-price-data, .restock-label { white-space: nowrap; border-radius: 5px; @@ -1170,7 +1097,68 @@ footer { border-radius: 0px; margin-right: 0px; } input[type='text'] { - width: 100%; } } + width: 100%; } + /* + Max width before this PARTICULAR table gets nasty + This query will take effect for any screen smaller than 760px + and also iPads specifically. + */ + .watch-table { + /* make headings work on mobile */ + /* Force table to not be like tables anymore */ + /* Force table to not be like tables anymore */ } + .watch-table thead { + display: block; } + .watch-table thead tr th { + display: inline-block; } } + @media only screen and (max-width: 760px) and (max-width: 768px), (min-device-width: 768px) and (max-device-width: 800px) and (max-width: 768px) { + .watch-table thead tr th .hide-on-mobile { + display: none; } } + +@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) { + .watch-table thead .empty-cell { + display: none; } + .watch-table tbody td, + .watch-table tbody tr { + display: block; } + .watch-table tbody tr { + display: flex; + flex-wrap: wrap; } + .watch-table tbody tr :nth-child(3) { + flex-grow: 1; } + .watch-table tbody tr :nth-last-child(-n+3) { + flex-basis: 100%; } + .watch-table .last-checked > span { + vertical-align: middle; } + .watch-table .last-checked::before { + color: var(--color-last-checked); + content: "Last Checked "; } + .watch-table .last-changed::before { + color: var(--color-last-checked); + content: "Last Changed "; } + .watch-table td.inline { + display: inline-block; } + .watch-table .pure-table td, + .watch-table .pure-table th { + border: none; } + .watch-table td { + /* Behave like a "row" */ + border: none; + border-bottom: 1px solid var(--color-border-watch-table-cell); + vertical-align: middle; } + .watch-table td:before { + /* Top/left values mimic padding */ + top: 6px; + left: 6px; + width: 45%; + padding-right: 10px; + white-space: nowrap; } + .watch-table.pure-table-striped tr { + background-color: var(--color-table-background); } + .watch-table.pure-table-striped tr:nth-child(2n-1) { + background-color: var(--color-table-stripe); } + .watch-table.pure-table-striped tr:nth-child(2n-1) td { + background-color: inherit; } } .pure-table { border-color: var(--color-border-table-cell); } @@ -1372,29 +1360,6 @@ ul { #selector-current-xpath { font-size: 80%; } -@keyframes socket-highlight-flash { - 0% { - background-color: rgba(var(--color-change-highlight-rgb), 0); } - 50% { - background-color: rgba(var(--color-change-highlight-rgb), 0.4); } - 100% { - background-color: rgba(var(--color-change-highlight-rgb), 0); } } - -.socket-highlight { - animation: socket-highlight-flash 2s ease-in-out; } - -@keyframes checking-progress { - 0% { - background-size: 0% 100%; } - 100% { - background-size: 100% 100%; } } - -tr.checking-now .last-checked { - background-image: linear-gradient(to right, rgba(0, 120, 255, 0.2) 0%, rgba(0, 120, 255, 0.1) 100%); - background-size: 100% 100%; - background-repeat: no-repeat; - animation: checking-progress 10s linear; } - #webdriver_delay { width: 5em; }