kopia lustrzana https://github.com/dgtlmoon/changedetection.io
UI - Fix mobile styling inconsistencies and resolve diff page overflow issue (#2716)
rodzic
c1dd681643
commit
b0ff9d161e
|
@ -496,7 +496,7 @@ class processor_text_json_diff_form(commonSettingsForm):
|
||||||
text_should_not_be_present = StringListField('Block change-detection while text matches', [validators.Optional(), ValidateListRegex()])
|
text_should_not_be_present = StringListField('Block change-detection while text matches', [validators.Optional(), ValidateListRegex()])
|
||||||
webdriver_js_execute_code = TextAreaField('Execute JavaScript before change detection', render_kw={"rows": "5"}, validators=[validators.Optional()])
|
webdriver_js_execute_code = TextAreaField('Execute JavaScript before change detection', render_kw={"rows": "5"}, validators=[validators.Optional()])
|
||||||
|
|
||||||
save_button = SubmitField('Save', render_kw={"class": "pure-button pure-button-primary"})
|
save_button = SubmitField('Save', render_kw={"class": "pure-button button-small pure-button-primary"})
|
||||||
|
|
||||||
proxy = RadioField('Proxy')
|
proxy = RadioField('Proxy')
|
||||||
filter_failure_notification_send = BooleanField(
|
filter_failure_notification_send = BooleanField(
|
||||||
|
@ -616,7 +616,7 @@ class globalSettingsForm(Form):
|
||||||
|
|
||||||
requests = FormField(globalSettingsRequestForm)
|
requests = FormField(globalSettingsRequestForm)
|
||||||
application = FormField(globalSettingsApplicationForm)
|
application = FormField(globalSettingsApplicationForm)
|
||||||
save_button = SubmitField('Save', render_kw={"class": "pure-button pure-button-primary"})
|
save_button = SubmitField('Save', render_kw={"class": "pure-button button-small pure-button-primary"})
|
||||||
|
|
||||||
|
|
||||||
class extractDataForm(Form):
|
class extractDataForm(Form):
|
||||||
|
|
|
@ -153,7 +153,8 @@ html[data-darkmode="true"] {
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
font: 1em monospace;
|
font: 1em monospace;
|
||||||
text-align: left; }
|
text-align: left;
|
||||||
|
overflow: clip; }
|
||||||
#diff-ui pre {
|
#diff-ui pre {
|
||||||
white-space: pre-wrap; }
|
white-space: pre-wrap; }
|
||||||
|
|
||||||
|
@ -172,7 +173,9 @@ ins {
|
||||||
text-decoration: none; }
|
text-decoration: none; }
|
||||||
|
|
||||||
#result {
|
#result {
|
||||||
white-space: pre-wrap; }
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: break-word; }
|
||||||
|
|
||||||
#settings {
|
#settings {
|
||||||
background: rgba(0, 0, 0, 0.05);
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
@ -231,3 +234,12 @@ td#diff-col div {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background: var(--color-background);
|
background: var(--color-background);
|
||||||
box-shadow: 1px 1px 4px var(--color-shadow-jump); }
|
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; }
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
font: 1em monospace;
|
font: 1em monospace;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
overflow: clip; // clip overflowing contents to cell boundariess
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
|
@ -50,6 +51,8 @@ ins {
|
||||||
|
|
||||||
#result {
|
#result {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
|
||||||
.change {
|
.change {
|
||||||
span {}
|
span {}
|
||||||
|
@ -134,3 +137,15 @@ td#diff-col div {
|
||||||
background: var(--color-background);
|
background: var(--color-background);
|
||||||
box-shadow: 1px 1px 4px var(--color-shadow-jump);
|
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;
|
||||||
|
}
|
|
@ -11,7 +11,22 @@ ul#requests-extra_browsers {
|
||||||
/* each proxy entry is a `table` */
|
/* each proxy entry is a `table` */
|
||||||
table {
|
table {
|
||||||
tr {
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,19 @@ ul#requests-extra_proxies {
|
||||||
/* each proxy entry is a `table` */
|
/* each proxy entry is a `table` */
|
||||||
table {
|
table {
|
||||||
tr {
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -112,7 +112,12 @@ ul#requests-extra_proxies {
|
||||||
ul#requests-extra_proxies li > label {
|
ul#requests-extra_proxies li > label {
|
||||||
display: none; }
|
display: none; }
|
||||||
ul#requests-extra_proxies table tr {
|
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 {
|
#request {
|
||||||
/* Auto proxy scan/checker */ }
|
/* Auto proxy scan/checker */ }
|
||||||
|
@ -161,7 +166,14 @@ ul#requests-extra_browsers {
|
||||||
ul#requests-extra_browsers li > label {
|
ul#requests-extra_browsers li > label {
|
||||||
display: none; }
|
display: none; }
|
||||||
ul#requests-extra_browsers table tr {
|
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 {
|
#extra-browsers-setting {
|
||||||
border: 1px solid var(--color-grey-800);
|
border: 1px solid var(--color-grey-800);
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
|
|
||||||
<div id="settings">
|
<div id="settings">
|
||||||
<form class="pure-form " action="" method="GET" id="diff-form">
|
<form class="pure-form " action="" method="GET" id="diff-form">
|
||||||
<fieldset>
|
<fieldset class="diff-fieldset">
|
||||||
{% if versions|length >= 1 %}
|
{% if versions|length >= 1 %}
|
||||||
<strong>Compare</strong>
|
<strong>Compare</strong>
|
||||||
<del class="change"><span>from</span></del>
|
<del class="change"><span>from</span></del>
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
</option>
|
</option>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select>
|
</select>
|
||||||
<button type="submit" class="pure-button pure-button-primary">Go</button>
|
<button type="submit" class="pure-button pure-button-primary reset-margin">Go</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
|
|
|
@ -276,7 +276,7 @@ nav
|
||||||
<div class="pure-control-group">
|
<div class="pure-control-group">
|
||||||
{{ render_button(form.save_button) }}
|
{{ render_button(form.save_button) }}
|
||||||
<a href="{{url_for('index')}}" class="pure-button button-small button-cancel">Back</a>
|
<a href="{{url_for('index')}}" class="pure-button button-small button-cancel">Back</a>
|
||||||
<a href="{{url_for('clear_all_history')}}" class="pure-button button-small button-cancel">Clear Snapshot History</a>
|
<a href="{{url_for('clear_all_history')}}" class="pure-button button-small button-error">Clear Snapshot History</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
Ładowanie…
Reference in New Issue