]> git.wh0rd.org Git - tt-rss.git/commitdiff
digest: add barebones smartphone mode
authorAndrew Dolgov <fox@madoka.volgo-balt.ru>
Tue, 26 Mar 2013 16:24:03 +0000 (20:24 +0400)
committerAndrew Dolgov <fox@madoka.volgo-balt.ru>
Tue, 26 Mar 2013 16:24:03 +0000 (20:24 +0400)
plugins/digest/digest.js
plugins/digest/digest_body.php
plugins/digest/mobile.css [new file with mode: 0644]

index c8a08648cd05880a65de7891318300f56fef1b01..6d90a9c8a4b21093f57e2559607ea870ad22d44a 100644 (file)
@@ -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;
                }
 
index 0dbe40b943cee6967b8277da7f106fd6492d4359..e7434fe70053157712467fdfddcf3188037b8dc9 100644 (file)
@@ -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 (file)
index 0000000..8c0ddd3
--- /dev/null
@@ -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;
+}
+
+