valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

digest: add barebones smartphone mode

This commit is contained in:
Andrew Dolgov 2013-03-26 20:24:03 +04:00
parent 24df74de3b
commit 0f12ead5dd
3 changed files with 390 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
plugins/digest/digest.js
View File

@ -2,6 +2,7 @@ var last_feeds = [];
var init_params = {}; var init_params = {};
var hotkeys_map = false; var hotkeys_map = false;
var hotkey_prefix = false; var hotkey_prefix = false;
var mobile_mode = false;
var _active_feed_id = false; var _active_feed_id = false;
var _update_timeout = false; var _update_timeout = false;
@ -122,7 +123,7 @@ function set_selected_article(article_id) {
}); });
} catch (e) { } 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; _active_feed_id = feed_id;
} catch (e) { } 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() { function close_article() {
$("content").removeClassName("move"); $("content").removeClassName("move");
$("article").removeClassName("visible"); $("article").removeClassName("visible");
@ -306,6 +321,8 @@ function close_article() {
function viewfeed(feed_id, offset, replace, no_effects, no_indicator, callback) { function viewfeed(feed_id, offset, replace, no_effects, no_indicator, callback) {
try { try {
$("headlines").addClassName("move");
if (!feed_id) feed_id = _active_feed_id; if (!feed_id) feed_id = _active_feed_id;
if (offset == undefined) offset = 0; if (offset == undefined) offset = 0;
if (replace == undefined) replace = (offset == 0); if (replace == undefined) replace = (offset == 0);
@ -659,6 +676,7 @@ function init_second_stage() {
document.onkeydown = hotkey_handler; document.onkeydown = hotkey_handler;
if (!mobile_mode)
window.setTimeout('viewfeed(-4)', 100); window.setTimeout('viewfeed(-4)', 100);
_update_timeout = window.setTimeout('update()', 5*1000); _update_timeout = window.setTimeout('update()', 5*1000);
} }); } });
@ -668,8 +686,10 @@ function init_second_stage() {
} }
} }
function init() { function init(mobile) {
try { try {
mobile_mode = mobile;
new Ajax.Request("backend.php", { new Ajax.Request("backend.php", {
parameters: {op: "rpc", method: "sanityCheck"}, parameters: {op: "rpc", method: "sanityCheck"},
onComplete: function(transport) { onComplete: function(transport) {
@ -858,7 +878,7 @@ function hotkey_handler(e) {
switch (keycode) { switch (keycode) {
case 27: // esc case 27: // esc
close_article(); go_back();
return false; return false;
} }

22
plugins/digest/digest_body.php
View File

@ -7,7 +7,21 @@
<head> <head>
<title>Tiny Tiny RSS</title> <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"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
@ -33,7 +47,7 @@
<script type="text/javascript"> <script type="text/javascript">
Event.observe(window, 'load', function() { Event.observe(window, 'load', function() {
init(); init(<?php echo $_SESSION["digest_mobile"] ?>);
}); });
</script> </script>
</head> </head>
@ -51,8 +65,8 @@
</div> </div>
<div id="header"> <div id="header">
<a style="float : left" href="#" onclick="close_article()"> <a style="float : left" href="#" onclick="go_back()">
<?php echo __("Back to feeds") ?></a> <?php echo __("Go back") ?></a>
<div class="links"> <div class="links">

345
plugins/digest/mobile.css Normal file
View File

@ -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;
}