STRLCPY/changedetection.io

Watch overview list - adding spinner to make it easier to see whats currently being 'Checked'
dgtlmoon committed 2 years ago

3106b668

1 parent 2c83845d

Revision indexing in progress... (symbol navigation in revisions will be accurate after indexed)

■ ■ ■ ■ ■ ■

changedetectionio/__init__.py

		skipped 107 lines
108	108		# Worker thread tells us which UUID it is currently processing.
109	109		for t in running_update_threads:
110	110		if t.current_uuid == watch_obj['uuid']:
111		-	return "Checking now.."
	111	+	return '<span class="loader"></span><span> Checking now</span>'
112	112
113	113		if watch_obj['last_checked'] == 0:
114	114		return 'Not yet'
		skipped 1244 lines

■ ■ ■ ■ ■ ■ ■

changedetectionio/static/styles/styles.css

		skipped 352 lines
353	353		/* Hide table headers (but not display: none;, for accessibility) */ }
354	354		.watch-table thead, .watch-table tbody, .watch-table th, .watch-table td, .watch-table tr {
355	355		display: block; }
	356	+	.watch-table .last-checked > span {
	357	+	vertical-align: middle; }
356	358		.watch-table .last-checked::before {
357	359		color: #555;
358	360		content: "Last Checked "; }
		skipped 11 lines
370	372		.watch-table td {
371	373		/* Behave like a "row" */
372	374		border: none;
373		-	border-bottom: 1px solid #eee; }
	375	+	border-bottom: 1px solid #eee;
	376	+	vertical-align: middle; }
374	377		.watch-table td:before {
375	378		/* Top/left values mimic padding */
376	379		top: 6px;
		skipped 114 lines
491	494		#api-key-copy {
492	495		color: #0078e7; }
493	496
	497	+	/* spinner */
	498	+	.loader,
	499	+	.loader:after {
	500	+	border-radius: 50%;
	501	+	width: 10px;
	502	+	height: 10px; }
	503	+
	504	+	.loader {
	505	+	margin: 0px auto;
	506	+	font-size: 3px;
	507	+	vertical-align: middle;
	508	+	display: inline-block;
	509	+	text-indent: -9999em;
	510	+	border-top: 1.1em solid rgba(38, 104, 237, 0.2);
	511	+	border-right: 1.1em solid rgba(38, 104, 237, 0.2);
	512	+	border-bottom: 1.1em solid rgba(38, 104, 237, 0.2);
	513	+	border-left: 1.1em solid #2668ed;
	514	+	-webkit-transform: translateZ(0);
	515	+	-ms-transform: translateZ(0);
	516	+	transform: translateZ(0);
	517	+	-webkit-animation: load8 1.1s infinite linear;
	518	+	animation: load8 1.1s infinite linear; }
	519	+
	520	+	@-webkit-keyframes load8 {
	521	+	0% {
	522	+	-webkit-transform: rotate(0deg);
	523	+	transform: rotate(0deg); }
	524	+	100% {
	525	+	-webkit-transform: rotate(360deg);
	526	+	transform: rotate(360deg); } }
	527	+
	528	+	@keyframes load8 {
	529	+	0% {
	530	+	-webkit-transform: rotate(0deg);
	531	+	transform: rotate(0deg); }
	532	+	100% {
	533	+	-webkit-transform: rotate(360deg);
	534	+	transform: rotate(360deg); } }
	535	+

■ ■ ■ ■ ■ ■ ■

changedetectionio/static/styles/styles.scss

		skipped 486 lines
487	487		display: block;
488	488		}
489	489
	490	+	.last-checked {
	491	+	> span {
	492	+	vertical-align: middle;
	493	+	}
	494	+	}
490	495		.last-checked::before {
491	496		color: #555;
492	497		content: "Last Checked ";
		skipped 24 lines
517	522		/* Behave like a "row" */
518	523		border: none;
519	524		border-bottom: 1px solid #eee;
520		-
	525	+	vertical-align: middle;
521	526		&:before {
522	527		/* Top/left values mimic padding */
523	528		top: 6px;
		skipped 178 lines
702	707		color: #0078e7;
703	708		}
704	709
	710	+	/* spinner */
	711	+	.loader,
	712	+	.loader:after {
	713	+	border-radius: 50%;
	714	+	width: 10px;
	715	+	height: 10px;
	716	+	}
	717	+	.loader {
	718	+	margin: 0px auto;
	719	+	font-size: 3px;
	720	+	vertical-align: middle;
	721	+	display: inline-block;
	722	+	text-indent: -9999em;
	723	+	border-top: 1.1em solid rgba(38,104,237, 0.2);
	724	+	border-right: 1.1em solid rgba(38,104,237, 0.2);
	725	+	border-bottom: 1.1em solid rgba(38,104,237, 0.2);
	726	+	border-left: 1.1em solid #2668ed;
	727	+	-webkit-transform: translateZ(0);
	728	+	-ms-transform: translateZ(0);
	729	+	transform: translateZ(0);
	730	+	-webkit-animation: load8 1.1s infinite linear;
	731	+	animation: load8 1.1s infinite linear;
	732	+	}
	733	+	@-webkit-keyframes load8 {
	734	+	0% {
	735	+	-webkit-transform: rotate(0deg);
	736	+	transform: rotate(0deg);
	737	+	}
	738	+	100% {
	739	+	-webkit-transform: rotate(360deg);
	740	+	transform: rotate(360deg);
	741	+	}
	742	+	}
	743	+	@keyframes load8 {
	744	+	0% {
	745	+	-webkit-transform: rotate(0deg);
	746	+	transform: rotate(0deg);
	747	+	}
	748	+	100% {
	749	+	-webkit-transform: rotate(360deg);
	750	+	transform: rotate(360deg);
	751	+	}
	752	+	}
	753	+
	754	+

■ ■ ■ ■ ■ ■

changedetectionio/templates/watch-overview.html

		skipped 66 lines
67	67		<span class="watch-tag-list">{{ watch.tag}}</span>
68	68		{% endif %}
69	69		</td>
70		-	<td class="last-checked">{{watch\|format_last_checked_time}}</td>
	70	+	<td class="last-checked">{{watch\|format_last_checked_time\|safe}}</td>
71	71		<td class="last-changed">{% if watch.history_n >=2 and watch.last_changed %}
72	72		{{watch.last_changed\|format_timestamp_timeago}}
73	73		{% else %}
		skipped 37 lines

Watch overview list - adding spinner to make it easier to see whats currently being 'Checked'