lee/changedetection.io
1
0
Fork 0
mirror of https://github.com/dgtlmoon/changedetection.io.git synced 2026-09-23 22:06:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

UI - Restyle of "quick watch add form" above watchlist

Browse Source
This commit is contained in:
dgtlmoon
2025-06-11 09:43:03 +02:00
parent c0c2898b91
commit 59df59e9cd
7 changed files with 87 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
changedetectionio/blueprint/tags/templates/groups-overview.html
+1 -1
View File
@@ -10,7 +10,7 @@
<legend>Add a new organisational tag</legend>
<div id="watch-add-wrapper-zone">
<div>
{{ render_simple_field(form.name, placeholder="watch label / tag") }}
{{ render_simple_field(form.name, placeholder="Watch group / tag") }}
</div>
<div>
{{ render_simple_field(form.save_button, title="Save" ) }}
changedetectionio/blueprint/watchlist/templates/watch-overview.html
+7 -5
View File
@@ -18,19 +18,20 @@ document.addEventListener('DOMContentLoaded', function() {
transition: background-size 0.9s ease
}
</style>
<div class="box">
<div class="box" id="form-quick-watch-add">
<form class="pure-form" action="{{ url_for('ui.ui_views.form_quick_watch_add', tag=active_tag_uuid) }}" method="POST" id="new-watch-form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" >
<fieldset>
<legend>Add a new change detection watch</legend>
<legend>Add a new web page change detection watch</legend>
<div id="watch-add-wrapper-zone">
{{ render_nolabel_field(form.url, placeholder="https://...", required=true) }}
{{ render_nolabel_field(form.tags, value=active_tag.title if active_tag_uuid else '', placeholder="watch label / tag") }}
{{ render_nolabel_field(form.watch_submit_button, title="Watch this URL!" ) }}
{{ render_nolabel_field(form.edit_and_watch_submit_button, title="Edit first then Watch") }}
</div>
<div id="watch-group-tag">
{{ render_field(form.tags, value=active_tag.title if active_tag_uuid else '', placeholder="Watch group / tag", class="transparent-field") }}
</div>
<div id="quick-watch-processor-type">
{{ render_simple_field(form.processor) }}
</div>
@@ -38,7 +39,8 @@ document.addEventListener('DOMContentLoaded', function() {
</fieldset>
<span style="color:#eee; font-size: 80%;"><img alt="Create a shareable link" style="height: 1em;display:inline-block;" src="{{url_for('static_content', group='images', filename='spread-white.svg')}}" > Tip: You can also add 'shared' watches. <a href="https://github.com/dgtlmoon/changedetection.io/wiki/Sharing-a-Watch">More info</a></span>
</form>
</div>
<div class="box">
<form class="pure-form" action="{{ url_for('ui.form_watch_list_checkbox_operations') }}" method="POST" id="watch-list-form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" >
<input type="hidden" id="op_extradata" name="op_extradata" value="" >
changedetectionio/static/styles/diff.css
+2
View File
@@ -71,6 +71,7 @@
--color-text-watch-tag-list: rgba(231, 0, 105, 0.4);
--color-background-new-watch-form: rgba(0, 0, 0, 0.05);
--color-background-new-watch-input: var(--color-white);
--color-background-new-watch-input-transparent: rgba(255, 255, 255, 0.1);
--color-text-new-watch-input: var(--color-text);
--color-border-input: var(--color-grey-500);
--color-shadow-input: var(--color-grey-400);
@@ -97,6 +98,7 @@ html[data-darkmode="true"] {
--color-background-gradient-second: #1e316c;
--color-background-gradient-third: #4d2c64;
--color-background-new-watch-input: var(--color-grey-100);
--color-background-new-watch-input-transparent: var(--color-grey-100);
--color-text-new-watch-input: var(--color-text);
--color-background-table-thead: var(--color-grey-200);
--color-table-background: var(--color-grey-300);
changedetectionio/static/styles/scss/parts/_variables.scss
+2
View File
@@ -78,6 +78,7 @@
--color-text-watch-tag-list: rgba(231, 0, 105, 0.4);
--color-background-new-watch-form: rgba(0, 0, 0, 0.05);
--color-background-new-watch-input: var(--color-white);
--color-background-new-watch-input-transparent: rgba(255, 255, 255, 0.1);
--color-text-new-watch-input: var(--color-text);
--color-border-input: var(--color-grey-500);
@@ -112,6 +113,7 @@ html[data-darkmode="true"] {
--color-background-gradient-third: #4d2c64;
--color-background-new-watch-input: var(--color-grey-100);
--color-background-new-watch-input-transparent: var(--color-grey-100);
--color-text-new-watch-input: var(--color-text);
--color-background-table-thead: var(--color-grey-200);
--color-table-background: var(--color-grey-300);
changedetectionio/static/styles/scss/styles.scss
+41 -5
View File
@@ -280,7 +280,7 @@ a.pure-button-selected {
font-size: 65%;
border-bottom-left-radius: initial;
border-bottom-right-radius: initial;
margin-right: 4px;
&.active {
background: var(--color-background-button-tag-active);
font-weight: bold;
@@ -373,11 +373,32 @@ label {
}
}
// Some field colouring for transperant field
.pure-form input[type=text].transparent-field {
background-color: var(--color-background-new-watch-input-transparent) !important;
color: var(--color-text-new-watch-input) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
&::placeholder {
opacity: 0.5;
color: rgba(255, 255, 255, 0.7);
font-weight: lighter;
}
}
#new-watch-form {
background: var(--color-background-new-watch-form);
padding: 1em;
border-radius: 10px;
margin-bottom: 1em;
max-width: 100%;
#url {
&::placeholder {
font-weight: bold;
}
}
input {
display: inline-block;
@@ -398,12 +419,13 @@ label {
font-weight: bold;
}
#watch-add-wrapper-zone {
#watch-add-wrapper-zone {
@media only screen and (min-width: 760px) {
display: flex;
gap: 0.3rem;
flex-direction: row;
min-width: 70vw;
}
/* URL field grows always, other stay static in width */
> span {
@@ -425,6 +447,22 @@ label {
}
}
}
#watch-group-tag {
font-size: 0.9rem;
padding: 0.3rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-white);
label, input {
margin: 0;
}
input {
flex: 1;
}
}
}
@@ -1140,16 +1178,14 @@ ul {
color: #fff;
ul {
padding: 0.3rem;
li {
list-style: none;
font-size: 0.8rem;
font-size: 0.9rem;
> * {
display: inline-block;
}
}
}
}
.restock-label {
changedetectionio/static/styles/styles.css
+33 -4
View File
@@ -322,6 +322,7 @@ ul#requests-extra_browsers {
--color-text-watch-tag-list: rgba(231, 0, 105, 0.4);
--color-background-new-watch-form: rgba(0, 0, 0, 0.05);
--color-background-new-watch-input: var(--color-white);
--color-background-new-watch-input-transparent: rgba(255, 255, 255, 0.1);
--color-text-new-watch-input: var(--color-text);
--color-border-input: var(--color-grey-500);
--color-shadow-input: var(--color-grey-400);
@@ -348,6 +349,7 @@ html[data-darkmode="true"] {
--color-background-gradient-second: #1e316c;
--color-background-gradient-third: #4d2c64;
--color-background-new-watch-input: var(--color-grey-100);
--color-background-new-watch-input-transparent: var(--color-grey-100);
--color-text-new-watch-input: var(--color-text);
--color-background-table-thead: var(--color-grey-200);
--color-table-background: var(--color-grey-300);
@@ -900,7 +902,8 @@ a.pure-button-selected {
color: var(--color-text-button);
font-size: 65%;
border-bottom-left-radius: initial;
border-bottom-right-radius: initial; }
border-bottom-right-radius: initial;
margin-right: 4px; }
.button-tag.active {
background: var(--color-background-button-tag-active);
font-weight: bold; }
@@ -963,11 +966,25 @@ label:hover {
#token-table.pure-table th {
font-size: 80%; }
.pure-form input[type=text].transparent-field {
background-color: var(--color-background-new-watch-input-transparent) !important;
color: var(--color-text-new-watch-input) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: none !important;
-webkit-box-shadow: none !important; }
.pure-form input[type=text].transparent-field::placeholder {
opacity: 0.5;
color: rgba(255, 255, 255, 0.7);
font-weight: lighter; }
#new-watch-form {
background: var(--color-background-new-watch-form);
padding: 1em;
border-radius: 10px;
margin-bottom: 1em; }
margin-bottom: 1em;
max-width: 100%; }
#new-watch-form #url::placeholder {
font-weight: bold; }
#new-watch-form input {
display: inline-block;
margin-bottom: 5px; }
@@ -985,7 +1002,8 @@ label:hover {
#new-watch-form #watch-add-wrapper-zone {
display: flex;
gap: 0.3rem;
flex-direction: row; } }
flex-direction: row;
min-width: 70vw; } }
#new-watch-form #watch-add-wrapper-zone > span {
flex-grow: 0; }
#new-watch-form #watch-add-wrapper-zone > span input {
@@ -996,6 +1014,17 @@ label:hover {
@media only screen and (max-width: 760px) {
#new-watch-form #watch-add-wrapper-zone #url {
width: 100%; } }
#new-watch-form #watch-group-tag {
font-size: 0.9rem;
padding: 0.3rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-white); }
#new-watch-form #watch-group-tag label, #new-watch-form #watch-group-tag input {
margin: 0; }
#new-watch-form #watch-group-tag input {
flex: 1; }
#diff-col {
padding-left: 40px; }
@@ -1505,7 +1534,7 @@ ul {
padding: 0.3rem; }
#quick-watch-processor-type ul li {
list-style: none;
font-size: 0.8rem; }
font-size: 0.9rem; }
#quick-watch-processor-type ul li > * {
display: inline-block; }
changedetectionio/templates/_common_fields.html
+1 -1
View File
@@ -74,7 +74,7 @@
</tr>
<tr>
<td><code>{{ '{{watch_tag}}' }}</code></td>
<td>The watch label / tag</td>
<td>The watch group / tag</td>
</tr>
<tr>
<td><code>{{ '{{preview_url}}' }}</code></td>