var init_params = {};
var hotkeys_map = false;
var hotkey_prefix = false;
+var mobile_mode = false;
var _active_feed_id = false;
var _update_timeout = false;
});
} catch (e) {
- exception_error("mark_selected_feed", e);
+ exception_error("set_selected_article", e);
}
}
_active_feed_id = feed_id;
} catch (e) {
- exception_error("mark_selected_feed", e);
+ exception_error("set_selected_feed", e);
}
}
}
}
+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");
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);
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) {
switch (keycode) {
case 27: // esc
- close_article();
+ go_back();
return false;
}
<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"/>
<script type="text/javascript">
Event.observe(window, 'load', function() {
- init();
+ init(<?php echo $_SESSION["digest_mobile"] ?>);
});
</script>
</head>
</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">
--- /dev/null
+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;
+}
+
+