mirror
/
changedetection.io
kopia lustrzana https://github.com/dgtlmoon/changedetection.io
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

UI - Improvements to text preview on mobile

pull/2680/head
dgtlmoon 2024-10-05 16:47:00 +02:00
rodzic 00458b95c4
commit 45c444d0db
2 zmienionych plików z 17 dodań i 11 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

12
changedetectionio/static/styles/scss/parts/_preview_text_filter.scss
Wyświetl plik

@ -1,10 +1,13 @@
@import "minitabs";
body.preview-text-enabled {
#filters-and-triggers > div {
display: flex; /* Establishes Flexbox layout */
gap: 20px; /* Adds space between the columns */
position: relative; /* Ensures the sticky positioning is relative to this parent */
@media (min-width: 800px) {
#filters-and-triggers > div {
display: flex; /* Establishes Flexbox layout */
gap: 20px; /* Adds space between the columns */
position: relative; /* Ensures the sticky positioning is relative to this parent */
}
}
/* layout of the page */
@ -22,6 +25,7 @@ body.preview-text-enabled {
#text-preview {
position: sticky;
padding-top: 1rem;
padding-bottom: 1rem;
display: block !important;
}

16
changedetectionio/static/styles/styles.css
Wyświetl plik

@ -457,13 +457,14 @@ html[data-darkmode="true"] #toggle-light-mode .icon-dark {
body.preview-text-enabled {
/* layout of the page */
/* actual preview area */ }
body.preview-text-enabled #filters-and-triggers > div {
display: flex;
/* Establishes Flexbox layout */
gap: 20px;
/* Adds space between the columns */
position: relative;
/* Ensures the sticky positioning is relative to this parent */ }
@media (min-width: 800px) {
body.preview-text-enabled #filters-and-triggers > div {
display: flex;
/* Establishes Flexbox layout */
gap: 20px;
/* Adds space between the columns */
position: relative;
/* Ensures the sticky positioning is relative to this parent */ } }
body.preview-text-enabled #edit-text-filter, body.preview-text-enabled #text-preview {
flex: 1;
/* Each column takes an equal amount of available space */
@ -474,6 +475,7 @@ body.preview-text-enabled {
body.preview-text-enabled #text-preview {
position: sticky;
padding-top: 1rem;
padding-bottom: 1rem;
display: block !important; }
body.preview-text-enabled #activate-text-preview {
background-color: var(--color-grey-500); }