digest: add barebones smartphone mode
This commit is contained in:
Andrew Dolgov
parent
24df74de3b
commit
0f12ead5dd
3 changed files with 390 additions and 11 deletions
|
|
@ -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,6 +676,7 @@ function init_second_stage() {
|
|||
|
||||
document.onkeydown = hotkey_handler;
|
||||
|
||||
if (!mobile_mode)
|
||||
window.setTimeout('viewfeed(-4)', 100);
|
||||
_update_timeout = window.setTimeout('update()', 5*1000);
|
||||
} });
|
||||
|
|
@ -668,8 +686,10 @@ function init_second_stage() {
|
|||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
||||
|
|
|
|||
345
plugins/digest/mobile.css
Normal file
345
plugins/digest/mobile.css
Normal 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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in a new issue