digest: add barebones smartphone mode

author: Andrew Dolgov <[email protected]> 2013-03-26 20:24:03 +0400
committer: Andrew Dolgov <[email protected]> 2013-03-26 20:24:03 +0400
commit: 0f12ead5dd6d7d72e741ce0aadf222341ce94f3b (patch)
tree: 2a34a543f9105f2f65ec65230358eb4c6e81f01f /plugins
parent: 24df74de3b8d60e50fec9220a34869fd51480c63 (diff)
3 files changed, 390 insertions, 11 deletions
diff --git a/plugins/digest/digest.js b/plugins/digest/digest.js
index c8a08648c..6d90a9c8a 100644
--- a/plugins/digest/digest.js
+++ b/plugins/digest/digest.js
@@ -2,6 +2,7 @@ var last_feeds = [];
 var init_params = {};
 var hotkeys_map = false;
 var hotkey_prefix = false;
+var mobile_mode = false;
 
 var _active_feed_id = false;
 var _update_timeout = false;
@@ -122,7 +123,7 @@ function set_selected_article(article_id) {
 		});
 
 	} catch (e) {
-		exception_error("mark_selected_feed", e);
+		exception_error("set_selected_article", e);
 	}
 }
 
@@ -141,7 +142,7 @@ function set_selected_feed(feed_id) {
 		_active_feed_id = feed_id;
 
 	} catch (e) {
-		exception_error("mark_selected_feed", e);
+		exception_error("set_selected_feed", e);
 	}
 }
 
@@ -298,6 +299,20 @@ function view(article_id) {
 	}
 }
 
+function close_feed() {
+	$("headlines").removeClassName("move");
+
+	if (mobile_mode) set_selected_feed(false);
+}
+
+function go_back() {
+	if ($("article").hasClassName("visible")) {
+		close_article();
+	} else {
+		close_feed();
+	}
+}
+
 function close_article() {
 	$("content").removeClassName("move");
 	$("article").removeClassName("visible");
@@ -306,6 +321,8 @@ function close_article() {
 function viewfeed(feed_id, offset, replace, no_effects, no_indicator, callback) {
 	try {
 
+		$("headlines").addClassName("move");
+
 		if (!feed_id) feed_id = _active_feed_id;
 		if (offset == undefined) offset = 0;
 		if (replace == undefined) replace = (offset == 0);
@@ -659,17 +676,20 @@ function init_second_stage() {
 
 				document.onkeydown = hotkey_handler;
 
-				window.setTimeout('viewfeed(-4)', 100);
-				_update_timeout = window.setTimeout('update()', 5*1000);
-				} });
+				if (!mobile_mode)
+					window.setTimeout('viewfeed(-4)', 100);
+					_update_timeout = window.setTimeout('update()', 5*1000);
+					} });
 
 	} catch (e) {
 		exception_error("init_second_stage", e);
 	}
 }
 
-function init() {
+function init(mobile) {
 	try {
+		mobile_mode = mobile;
+
 		new Ajax.Request("backend.php", {
 			parameters: {op: "rpc", method: "sanityCheck"},
 			onComplete: function(transport) {
@@ -858,7 +878,7 @@ function hotkey_handler(e) {
 
 		switch (keycode) {
 		case 27: // esc
-			close_article();
+			go_back();
 			return false;
 		}
 
diff --git a/plugins/digest/digest_body.php b/plugins/digest/digest_body.php
index 0dbe40b94..e7434fe70 100644
--- a/plugins/digest/digest_body.php
+++ b/plugins/digest/digest_body.php
@@ -7,7 +7,21 @@
 <head>
 	<title>Tiny Tiny RSS</title>
 
-	<?php echo stylesheet_tag("plugins/digest/digest.css") ?>
+	<?php
+		require_once "lib/Mobile_Detect.php";
+		$mobile = new Mobile_Detect();
+
+		if ($mobile->isMobile() || @$_REQUEST['mode'] == 'mobile') {
+			$_SESSION["digest_mobile"] = 1;
+			echo stylesheet_tag("plugins/digest/mobile.css");
+		} else {
+			$_SESSION["digest_mobile"] = 0;
+			echo stylesheet_tag("plugins/digest/digest.css");
+		}
+	?>
+
+	<meta name="viewport" content="width=device-width,
+		minimum-scale=1.0, maximum-scale=1.0" />
 
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
@@ -33,7 +47,7 @@
 
 	<script type="text/javascript">
 		Event.observe(window, 'load', function() {
-			init();
+			init(<?php echo $_SESSION["digest_mobile"] ?>);
 		});
 	</script>
 </head>
@@ -51,8 +65,8 @@
 	</div>
 
 	<div id="header">
-	<a style="float : left" href="#" onclick="close_article()">
-		<?php echo __("Back to feeds") ?></a>
+	<a style="float : left" href="#" onclick="go_back()">
+		<?php echo __("Go back") ?></a>
 
 	<div class="links">
 
diff --git a/plugins/digest/mobile.css b/plugins/digest/mobile.css
new file mode 100644
index 000000000..8c0ddd347
--- /dev/null
+++ b/plugins/digest/mobile.css
@@ -0,0 +1,345 @@
+body#ttrssDigest {
+	color : black;
+	font-family : sans-serif;
+	font-size : 12px;
+	margin : 0px;
+	background : url("images/tile.png");
+}
+
+a {
+	color : #0069D8;
+	text-decoration : none;
+}
+
+a:hover {
+	color : gray;
+}
+
+#header a, #footer a {
+	color : gray;
+}
+
+#header a:hover, #footer a:hover {
+	color : #0069D8;
+}
+
+#header {
+	font-size : 14px;
+	font-weight : bold;
+	font-family : "Segoe UI", Tahoma, sans-serif;
+	padding : 5px 5px 5px 1.5em;
+	color : gray;
+	position : absolute;
+	top : 0px;
+	height : 30px;
+	left : 0px;
+	right : 0px;
+	color : #a0a0a0;
+}
+
+#header span.title {
+	font-weight : bold;
+	font-style : italic;
+}
+
+#header div.links {
+	position : absolute;
+	right : 1.5em;
+}
+
+#search {
+	float : right;
+	clear : left;
+
+}
+
+#title {
+}
+
+#latest {
+	padding : 5px;
+}
+
+#content {
+	position : absolute;
+	left : 0px;
+	top : 30px;
+	right : 0px;
+	bottom : 0px;
+	-webkit-transition: left 0.2s linear, right 0.2s linear;
+	-moz-transition: left 0.2s linear, right 0.2s linear;
+	transition: left 0.2s linear, right 0.2s linear;
+}
+
+#article {
+	position : absolute;
+	overflow : auto;
+	right : 0px;
+	width : 100%;
+	bottom : 0px;
+	top : 30px;
+	background : white;
+	z-index : -1;
+	opacity : 0;
+	-webkit-transition: opacity 0.2s linear;
+	-moz-transition: opacity 0.2s linear;
+	transition: opacity 0.2s linear;
+}
+
+#article.visible {
+	opacity : 1;
+}
+
+#article #article-content h1 {
+	margin : 0px;
+	padding : 0px;
+	font-family : "Segoe UI", Tahoma, sans-serif;
+	font-size : 21px;
+	font-weight : bold;
+	border-width : 0px 0px 3px 0px;
+	border-style : solid;
+	border-color : #e0e0e0;
+	color : gray;
+}
+
+#article #article-content #toolbar {
+	border-width : 0px 0px 1px 0px;
+	border-color : #e0e0e0;
+	border-style : solid;
+	background : #fafafa;
+	font-size : 14px;
+	font-weight : bold;
+	padding : 5px 10px 5px 10px;
+	margin : 0px 0px 0px 0px;
+}
+
+#article #article-content {
+	padding : 0px;
+	font-size : 16px;
+}
+
+#article #article-content #tags {
+	color : #a0a0a0;
+	margin-bottom : 5px;
+}
+
+#article #article-content #ops {
+	float : right;
+}
+
+#article #article-content #ops img {
+	cursor : pointer;
+	margin-right : 0px;
+	margin-left : 10px;
+}
+
+#article #article-content #inner {
+	padding : 10px;
+}
+
+#article #article-content img {
+	max-width : 90%;
+}
+
+#content.move {
+	left : 0px;
+	right : 100%;
+}
+
+#feeds {
+	position : absolute;
+	left : 0px;
+	top : 0px;
+	right : 0px;
+	bottom : 0px;
+	font-size : 14px;
+	overflow : auto;
+}
+
+#feeds ul#feeds-content img {
+	width : 16px;
+	height : 16px;
+	vertical-align : middle;
+	margin-right : 5px;
+}
+
+#feeds ul#feeds-content div.unread-ctr {
+	color : #d0d0d0;
+	padding-left : 10px;
+	float : right;
+}
+
+#feeds ul#feeds-content li {
+	padding : 10px;
+	clear : both;
+	cursor : pointer;
+	color : #303030;
+	white-space : nowrap;
+}
+
+#feeds ul#feeds-content li.selected {
+	background : white;
+}
+
+#feeds ul#feeds-content {
+	list-style-type : none;
+	font-weight : bold;
+	margin : 0px;
+	padding : 0px;
+}
+
+#headlines {
+	font-size : 14px;
+	position : absolute;
+	top : 0px;
+	bottom : 0px;
+	right : 0px;
+	overflow : auto;
+	background : white;
+	border-width : 0px 3px 0px 0px;
+	border-style : solid;
+	border-color : #88b0f0;
+	left : 100%;
+
+	-webkit-transition: left 0.2s linear, right 0.2s linear;
+	-moz-transition: left 0.2s linear, right 0.2s linear;
+	transition: left 0.2s linear, right 0.2s linear;
+
+}
+
+#headlines.move {
+	left : 0px;
+}
+
+#headlines h1 a {
+	color : #684C99;
+}
+
+#headlines ul#headlines-content .cb {
+	vertical-align : middle;
+	margin-right : 5px;
+	float : left;
+}
+
+#headlines ul#headlines-content img.icon {
+	width : 16px;
+	height : 16px;
+	vertical-align : middle;
+	margin-right : 5px;
+	float : right;
+}
+
+#headlines ul#headlines-content {
+	list-style-type : none;
+	color : gray;
+	margin : 0px;
+	padding : 0px;
+}
+
+#headlines ul#headlines-content li {
+	margin : 0px 0px 0px 0px;
+	padding : 10px;
+	color : gray;
+	clear : left;
+	border-width : 0px 0px 1px 0px;
+	border-style : solid;
+	border-color : #e0e0e0;
+	background : #eee;
+}
+
+#headlines ul#headlines-content a.title {
+	font-size : 14px;
+	font-weight : bold;
+	display : block;
+	margin-left : 21px;
+	position : relative;
+}
+
+#headlines ul#headlines-content li.fresh a.title {
+	color : #007FFF;
+}
+
+#headlines ul#headlines-content li.unread a.title {
+	color : black;
+	/* color : #8DB1D6; */
+}
+
+#headlines ul#headlines-content li.read a.title {
+	color : gray;
+}
+
+#headlines ul#headlines-content li.unread,
+#headlines ul#headlines-content li.fresh {
+	background-color : white;
+}
+
+#headlines ul#headlines-content li.selected {
+	background-color : #fff7d5;
+	border-color : white white #e0e0e0;
+}
+
+#headlines ul#headlines-content img#H-LOADING-IMG {
+	margin-left : 5px;
+}
+
+#headlines ul#headlines-content div.excerpt {
+	color : #404040;
+	cursor : pointer;
+	margin-top : 5px;
+}
+
+#headlines ul#headlines-content div.content {
+	color : #404040;
+}
+
+#headlines ul#headlines-content div.content img {
+	max-width : 75%;
+}
+
+#headlines ul#headlines-content div.body {
+	margin-left : 21px;
+	/*margin-left : 42px;*/
+}
+
+#headlines ul#headlines-content div.info {
+	font-size : 11px;
+	margin-top : 5px;
+}
+
+#headlines ul#headlines-content div.info a {
+	color : gray;
+}
+
+#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;
+}
+
+div.fatalError button {
+	margin-top : 5px;
+}
+
+div.fatalError textarea {
+	width : 100%;
+	height : 100px;
+}
+
+div.insensitive {
+	color : gray;
+}
+
+
author	Andrew Dolgov <[email protected]>	2013-03-26 20:24:03 +0400
committer	Andrew Dolgov <[email protected]>	2013-03-26 20:24:03 +0400
commit	0f12ead5dd6d7d72e741ce0aadf222341ce94f3b (patch)
tree	2a34a543f9105f2f65ec65230358eb4c6e81f01f /plugins
parent	24df74de3b8d60e50fec9220a34869fd51480c63 (diff)