add loading overlay

14 years ago · c7a5c8a5a2
parent 5e9a79e134
commit c7a5c8a5a2
3 changed files with 35 additions and 0 deletions
--- a/digest.css
+++ b/digest.css
@ -269,3 +269,22 @@ a:hover {
 #headlines ul#headlines-content span.tags a:hover {
 	color : #659a4c;
 }
+
+#overlay {
+	background : white;
+	left : 0;
+	top : 0;
+	height : 100%;
+	width : 100%;
+	z-index : 100;
+	position : absolute;
+	text-align : center;
+}
+
+#overlay_inner {
+	margin : 1em;
+}
+
+#overlay img {
+	vertical-align : middle;
+}
--- a/digest.js
+++ b/digest.js
@ -259,6 +259,8 @@ function viewfeed(feed_id, offset, replace, no_effects, no_indicator, callback)
 		new Ajax.Request("backend.php",	{
 			parameters: query, 
 			onComplete: function(transport) {
+				Element.hide("overlay");
+
 				fatal_error_check(transport);
 				parse_headlines(transport, replace, no_effects);
 				set_selected_feed(feed_id);				
--- a/digest.php
+++ b/digest.php
@ -50,6 +50,20 @@
 	</script>
 </head>
 <body id="ttrssDigest">
+	<div id="overlay" style="display : block">
+		<div id="overlay_inner">
+		<noscript>
+			<p>
+			<?php print_error(__("Your browser doesn't support Javascript, which is required
+			for this application to function properly. Please check your
+			browser settings.")) ?></p>
+		</noscript>
+
+		<img src="images/indicator_white.gif"/>
+			<?php echo __("Loading, please wait...") ?>
+		</div>
+	</div> 
+
 	<div id="header">

 	<div class="links">