lee/changedetection.io
1
0
Fork 0
mirror of https://github.com/dgtlmoon/changedetection.io.git synced 2025-12-12 11:05:42 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

UI - Fix mobile styling inconsistencies and resolve diff page overflow issue (#2716)

Browse Source
This commit is contained in:
Emmanuel Ojighoro
2024-10-21 10:34:22 +01:00
committed by GitHub
parent c1dd681643
commit b0ff9d161e
8 changed files with 77 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
changedetectionio/static/styles/diff.css
View File

@@ -153,7 +153,8 @@ html[data-darkmode="true"] {
border: 1px solid transparent;
vertical-align: top;
font: 1em monospace;
text-align: left; }
text-align: left;
overflow: clip; }
#diff-ui pre {
white-space: pre-wrap; }
@@ -172,7 +173,9 @@ ins {
text-decoration: none; }
#result {
white-space: pre-wrap; }
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: break-word; }
#settings {
background: rgba(0, 0, 0, 0.05);
@@ -231,3 +234,12 @@ td#diff-col div {
border-radius: 5px;
background: var(--color-background);
box-shadow: 1px 1px 4px var(--color-shadow-jump); }
.pure-form button.reset-margin {
margin: 0px; }
.diff-fieldset {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap; }

15
changedetectionio/static/styles/scss/diff.scss
View File

@@ -24,6 +24,7 @@
vertical-align: top;
font: 1em monospace;
text-align: left;
overflow: clip; // clip overflowing contents to cell boundariess
}
pre {
@@ -50,6 +51,8 @@ ins {
#result {
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: break-word;
.change {
span {}
@@ -134,3 +137,15 @@ td#diff-col div {
background: var(--color-background);
box-shadow: 1px 1px 4px var(--color-shadow-jump);
}
// resets button margin to 0px
.pure-form button.reset-margin {
margin: 0px;
}
.diff-fieldset {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}

17
changedetectionio/static/styles/scss/parts/_extra_browsers.scss
View File

@@ -11,7 +11,22 @@ ul#requests-extra_browsers {
/* each proxy entry is a `table` */
table {
tr {
display: inline;
display: table-row; // default display for small screens
input[type=text] {
width: 100%;
}
}
}
// apply inline display for larger screens
@media only screen and (min-width: 1280px) {
table {
tr {
display: inline;
input[type=text] {
width: 100%;
}
}
}
}
}

14
changedetectionio/static/styles/scss/parts/_extra_proxies.scss
View File

@@ -11,7 +11,19 @@ ul#requests-extra_proxies {
/* each proxy entry is a `table` */
table {
tr {
display: inline;
display: table-row; // default display for small screens
input[type=text] {
width: 100%;
}
}
}
// apply inline display for large screens
@media only screen and (min-width: 1024px) {
table {
tr {
display: inline;
}
}
}
}

16
changedetectionio/static/styles/styles.css
View File

@@ -112,7 +112,12 @@ ul#requests-extra_proxies {
ul#requests-extra_proxies li > label {
display: none; }
ul#requests-extra_proxies table tr {
display: inline; }
display: table-row; }
ul#requests-extra_proxies table tr input[type=text] {
width: 100%; }
@media only screen and (min-width: 1024px) {
ul#requests-extra_proxies table tr {
display: inline; } }
#request {
/* Auto proxy scan/checker */ }
@@ -161,7 +166,14 @@ ul#requests-extra_browsers {
ul#requests-extra_browsers li > label {
display: none; }
ul#requests-extra_browsers table tr {
display: inline; }
display: table-row; }
ul#requests-extra_browsers table tr input[type=text] {
width: 100%; }
@media only screen and (min-width: 1280px) {
ul#requests-extra_browsers table tr {
display: inline; }
ul#requests-extra_browsers table tr input[type=text] {
width: 100%; } }
#extra-browsers-setting {
border: 1px solid var(--color-grey-800);