kopia lustrzana https://github.com/dgtlmoon/changedetection.io
UI mobile improvements
dgtlmoon
rodzic
a3261eddd8
commit
9630b53ed3
|
|
@ -129,12 +129,14 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
'multiple-history' if history_n >= 2 else '',
|
||||
] -%}
|
||||
<tr id="{{ watch.uuid }}" data-watch-uuid="{{ watch.uuid }}" class="{{ row_classes | reject('equalto', '') | join(' ') }}">
|
||||
<td class="inline checkbox-uuid" ><input name="uuids" type="checkbox" value="{{ watch.uuid}} " > <span>{{ loop.index+pagination.skip }}</span></td>
|
||||
<td class="inline checkbox-uuid" ><div><input name="uuids" type="checkbox" value="{{ watch.uuid}} " > <span class="counter-i">{{ loop.index+pagination.skip }}</span></div></td>
|
||||
<td class="inline watch-controls">
|
||||
<div>
|
||||
<a class="ajax-op state-off pause-toggle" data-op="pause" href="{{url_for('watchlist.index', op='pause', uuid=watch.uuid, tag=active_tag_uuid)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause checks" title="Pause checks" class="icon icon-pause" ></a>
|
||||
<a class="ajax-op state-on pause-toggle" data-op="pause" style="display: none" href="{{url_for('watchlist.index', op='pause', uuid=watch.uuid, tag=active_tag_uuid)}}"><img src="{{url_for('static_content', group='images', filename='play.svg')}}" alt="UnPause checks" title="UnPause checks" class="icon icon-unpause" ></a>
|
||||
<a class="ajax-op state-off mute-toggle" data-op="mute" href="{{url_for('watchlist.index', op='mute', uuid=watch.uuid, tag=active_tag_uuid)}}"><img src="{{url_for('static_content', group='images', filename='bell-off.svg')}}" alt="Mute notification" title="Mute notification" class="icon icon-mute" ></a>
|
||||
<a class="ajax-op state-on mute-toggle" data-op="mute" style="display: none" href="{{url_for('watchlist.index', op='mute', uuid=watch.uuid, tag=active_tag_uuid)}}"><img src="{{url_for('static_content', group='images', filename='bell-off.svg')}}" alt="UnMute notification" title="UnMute notification" class="icon icon-mute" ></a>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="title-col inline">
|
||||
|
|
@ -143,7 +145,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
<img style="display: none;" class="thumbnail" src="{{url_for('static_content', group='favicon', filename=watch.uuid)}}">
|
||||
</div>
|
||||
<div>
|
||||
<span class="watch-title">
|
||||
{{watch.title if watch.title is not none and watch.title|length > 0 else watch.url}}
|
||||
</span>
|
||||
<div class="error-text" style="display:none;">{{ watch.compile_error_texts(has_proxies=datastore.proxy_list) }}</div>
|
||||
{%- if watch['processor'] == 'text_json_diff' -%}
|
||||
{%- if watch['has_ldjson_price_data'] and not watch['track_ldjson_price_data'] -%}
|
||||
|
|
@ -207,13 +211,15 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
Not yet
|
||||
{%- endif -%}
|
||||
</td>
|
||||
<td>
|
||||
<td class="buttons">
|
||||
<div>
|
||||
{%- set target_attr = ' target="' ~ watch.uuid ~ '"' if datastore.data['settings']['application']['ui'].get('open_diff_in_new_tab') else '' -%}
|
||||
<a href="" class="already-in-queue-button recheck pure-button pure-button-primary" style="display: none;" disabled="disabled">Queued</a>
|
||||
<a href="{{ url_for('ui.form_watch_checknow', uuid=watch.uuid, tag=request.args.get('tag')) }}" data-op='recheck' class="ajax-op recheck pure-button pure-button-primary">Recheck</a>
|
||||
<a href="{{ url_for('ui.ui_edit.edit_page', uuid=watch.uuid, tag=active_tag_uuid)}}#general" class="pure-button pure-button-primary">Edit</a>
|
||||
<a href="{{ url_for('ui.ui_views.diff_history_page', uuid=watch.uuid)}}" {{target_attr}} class="pure-button pure-button-primary history-link" style="display: none;">History</a>
|
||||
<a href="{{ url_for('ui.ui_views.preview_page', uuid=watch.uuid)}}" {{target_attr}} class="pure-button pure-button-primary preview-link" style="display: none;">Preview</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor -%}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,169 @@
|
|||
$grid-col-checkbox: 20px;
|
||||
$grid-col-watch: 100px;
|
||||
$grid-gap: 0.5rem;
|
||||
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.last-checked {
|
||||
> span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.last-checked::before {
|
||||
color: var(--color-text);
|
||||
content: "Last Checked ";
|
||||
}
|
||||
|
||||
.last-changed::before {
|
||||
color: var(--color-text);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.watch-table {
|
||||
tbody {
|
||||
tr {
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: $grid-col-checkbox 1fr $grid-col-watch;
|
||||
grid-template-rows: auto auto auto auto;
|
||||
gap: $grid-gap;
|
||||
|
||||
.counter-i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
td.checkbox-uuid {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
td.inline {
|
||||
/* display: block !important;;*/
|
||||
}
|
||||
|
||||
> td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
> td.title-col {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
.watch-title {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
}
|
||||
|
||||
> td.last-checked {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
> td.last-changed {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
> td.checkbox-uuid {
|
||||
grid-column: 1;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
> td.buttons {
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
> td.watch-controls {
|
||||
grid-column: 3;
|
||||
grid-row: 4;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
a img {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pure-table td {
|
||||
padding: 5px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
&.unviewed {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
color: var(--color-watch-table-row-text);
|
||||
}
|
||||
|
||||
|
|
@ -48,17 +49,17 @@
|
|||
/* Row with 'checking-now' */
|
||||
tr.checking-now {
|
||||
td:first-child {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
td:first-child::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
background-color: #293eff;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
background-color: #293eff;
|
||||
}
|
||||
|
||||
td.last-checked {
|
||||
|
|
@ -109,6 +110,7 @@
|
|||
|
||||
tr.has-error {
|
||||
color: var(--color-watch-table-error);
|
||||
|
||||
.error-text {
|
||||
display: block !important;
|
||||
}
|
||||
|
|
@ -119,6 +121,7 @@
|
|||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
tr.multiple-history {
|
||||
a.history-link {
|
||||
display: inline-block !important;
|
||||
|
|
@ -126,5 +129,3 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
@import "parts/_love";
|
||||
@import "parts/preview_text_filter";
|
||||
@import "parts/_watch_table";
|
||||
@import "parts/_watch_table-mobile";
|
||||
@import "parts/_edit";
|
||||
@import "parts/_conditions_table";
|
||||
@import "parts/_lister_extra";
|
||||
|
|
@ -696,114 +697,6 @@ footer {
|
|||
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 {
|
||||
|
|
|
|||
|
|
@ -585,6 +585,105 @@ body.preview-text-enabled {
|
|||
.watch-table tr.multiple-history a.history-link {
|
||||
display: inline-block !important; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/*
|
||||
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 */ }
|
||||
.watch-table thead {
|
||||
display: block; }
|
||||
.watch-table thead tr th {
|
||||
display: inline-block; } }
|
||||
@media (max-width: 767px) and (max-width: 768px) {
|
||||
.watch-table thead tr th .hide-on-mobile {
|
||||
display: none; } }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.watch-table thead .empty-cell {
|
||||
display: none; }
|
||||
.watch-table .last-checked > span {
|
||||
vertical-align: middle; }
|
||||
.watch-table .last-checked::before {
|
||||
color: var(--color-text);
|
||||
content: "Last Checked "; }
|
||||
.watch-table .last-changed::before {
|
||||
color: var(--color-text);
|
||||
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; } }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.watch-table tbody tr {
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr 100px;
|
||||
grid-template-rows: auto auto auto auto;
|
||||
gap: 0.5rem; }
|
||||
.watch-table tbody tr .counter-i {
|
||||
display: none; }
|
||||
.watch-table tbody tr td.checkbox-uuid {
|
||||
display: grid;
|
||||
place-items: center; }
|
||||
.watch-table tbody tr td.inline {
|
||||
/* display: block !important;;*/ }
|
||||
.watch-table tbody tr > td {
|
||||
border-bottom: none; }
|
||||
.watch-table tbody tr > td.title-col {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1; }
|
||||
.watch-table tbody tr > td.title-col .watch-title {
|
||||
font-size: 0.92rem; }
|
||||
.watch-table tbody tr > td.last-checked {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2; }
|
||||
.watch-table tbody tr > td.last-changed {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3; }
|
||||
.watch-table tbody tr > td.checkbox-uuid {
|
||||
grid-column: 1;
|
||||
grid-row: 4; }
|
||||
.watch-table tbody tr > td.buttons {
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start; }
|
||||
.watch-table tbody tr > td.watch-controls {
|
||||
grid-column: 3;
|
||||
grid-row: 4;
|
||||
display: grid;
|
||||
place-items: center; }
|
||||
.watch-table tbody tr > td.watch-controls a img {
|
||||
padding: 10px; }
|
||||
.pure-table td {
|
||||
padding: 5px !important; } }
|
||||
|
||||
ul#conditions_match_logic {
|
||||
list-style: none; }
|
||||
ul#conditions_match_logic input, ul#conditions_match_logic label, ul#conditions_match_logic li {
|
||||
|
|
@ -1243,68 +1342,7 @@ footer {
|
|||
border-radius: 0px;
|
||||
margin-right: 0px; }
|
||||
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 */
|
||||
/* 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; } }
|
||||
width: 100%; } }
|
||||
|
||||
.pure-table {
|
||||
border-color: var(--color-border-table-cell); }
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue