added info bubble

css/screen.css

@@ -63,6 +63,10 @@ label {
 	display: none;
 }
 
+.hidden {
+	display: none;
+}
+
 section {
 	display: none;
 }
@@ -197,6 +201,23 @@ canvas {
 	text-decoration: underline;
 }
 
+.info {
+	border: 3px solid black;
+	background: white;
+	border-radius: 10px;
+	box-shadow: 0 0 5px black;
+	color: black;
+	padding: 0 1em;
+}
+
+.info.swipe {
+	width: 60%;
+	position: absolute;
+	top: 50%;
+	left: 15%;
+	margin: auto;
+}
+
 #settings ul {
 	list-style-type: none;
 	padding-left: 0;

index.html

@@ -74,7 +74,7 @@
 <section id="full">
   <header class="bar">
     <a class="button" href="#list">Back</a>
-    <a class="button" href="#unread">Set unread</a>
+    <a id="setunread" class="button" href="#unread">Set unread</a>
     <canvas></canvas>
   </header>
   <article>
@@ -84,6 +84,9 @@
 			<p><timedate class="date"></timedate></p>
 		</header>
 		<div class="article"></div>
+    <div class="info swipe">
+      <p>Swipe with your finger right and left to navigate to next and previous article.</p>
+    </div>
   <article>
 </section>
 

js/App.js

@@ -35,8 +35,29 @@ function App() {
 			_this.showFull(_this.unread_articles[i]);
 		} else if(url == "#unread") {
 			_this.setCurrentUnread();
+		} else if(url == "#logout") {
+			_this.logout();
+		} else if(url == "#reset-info") {
+			alert("Info bubbles will be shown again.")
+			$$(".info").forEach(function(o) {
+				o.removeClass("hidden");
+			});
 		}
+
+		// this is here so you can tap on a button more then once
+		// and it will still call onhashchange
+		window.location.hash = "#";
 	}
+
+	$(".info.swipe").ontouchend = function(e) {
+		localStorage.info_swipe = true;
+		$(".info.swipe").addClass("hidden");
+	};
+
+	if(localStorage.info_swipe) {
+		$(".info.swipe").addClass("hidden");
+	}
+
 };
 
 App.prototype.authenticate = function() {
@@ -50,6 +71,13 @@ App.prototype.after_login = function() {
 	this.reload();
 };
 
+App.prototype.logout = function() {
+	this.ttrss.logOut();
+	this.unread_articles = [];
+	this.populateList();
+	this.login.log_out();
+};
+
 App.prototype.changeToPage = function(page) {
 
 	// FIXME
@@ -195,6 +223,13 @@ App.prototype.showFull = function(article, slide_back) {
 		$(page_id + " .author").innerHTML = "– " + article.author;
 
 	$(page_id + " .article").innerHTML = article.content;
+
+	if(article.set_unread) {
+		$("#setunread").innerHTML = "✔ unread";
+	} else {
+		$("#setunread").innerHTML = "Set unread";
+	}
+
 };
 
 App.prototype.showNext = function() {
@@ -238,6 +273,8 @@ App.prototype.setCurrentUnread = function() {
 	this.updateList();
 	var _this = this;
 	setTimeout(function() { _this.ttrss.setArticleUnread(article.id); }, 100);
+
+	$("#setunread").innerHTML = "✔ unread";
 };
 
 App.prototype.goToList = function() {

js/Login.js

@@ -53,6 +53,10 @@ Login.prototype.authenticate = function(e) {
 			localStorage.server_url = server_url;
 			localStorage.session_id = data.session_id;
 			_this.app.after_login();
+			
+			$("#url").value = "";
+			$("#un").value = "";
+			$("#pw").value = "";
 		}
 	});
 
@@ -60,8 +64,8 @@ Login.prototype.authenticate = function(e) {
 };
 
 Login.prototype.log_out = function() {
-	localStorage.server_url = null;
+	localStorage.removeItem("server_url");
-	localStorage.session_id = null;
+	localStorage.removeItem("session_id");
-	localStorage.unread_articles = null;
+	localStorage.removeItem("unread_articles");
 	this.log_in();
 }

manifest.webapp

@@ -19,5 +19,5 @@
     }
   },
   "installs_allowed_from": ["*"],
-  "version": "0.1"
+  "version": "0.2"
 }