MrPetovan/friendica
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #432 from fermionic/frost-better-screen-width

Browse source 
Frost Mobile better screen width
This commit is contained in:
friendica 2012-08-10 16:03:19 -07:00
commit d2eef5f11d
10 changed files with 140 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
boot.php
View file

@ -364,6 +364,7 @@ if(! class_exists('App')) {
public $sourcename = ''; public $sourcename = '';
public $videowidth = 425; public $videowidth = 425;
public $videoheight = 350; public $videoheight = 350;
public $force_max_items = 0;
private $scheme; private $scheme;
private $hostname; private $hostname;

7
mod/network.php
View file

@ -577,8 +577,13 @@ function network_content(&$a, $update = 0) {
$a->set_pager_total($r[0]['total']); $a->set_pager_total($r[0]['total']);
} }
} }
$itemspage_network = get_pconfig(local_user(),'system','itemspage_network'); $itemspage_network = get_pconfig(local_user(),'system','itemspage_network');
$a->set_pager_itemspage(((intval($itemspage_network)) ? $itemspage_network : 40)); $itemspage_network = ((intval($itemspage_network)) ? $itemspage_network : 40);
if(($a->force_max_items > 0) && ($a->force_max_items < $itemspage_network))
$itemspage_network = $a->force_max_items;
$a->set_pager_itemspage($itemspage_network);
$pager_sql = sprintf(" LIMIT %d, %d ",intval($a->pager['start']), intval($a->pager['itemspage'])); $pager_sql = sprintf(" LIMIT %d, %d ",intval($a->pager['start']), intval($a->pager['itemspage']));
} }

11
view/theme/frost-mobile/TODO
View file

@ -12,11 +12,18 @@ Photo album display?
- Admin: access to more pages than summary? - Admin: access to more pages than summary?
- Embedded video playback is way too big - Find a way to show embedded videos at the normal size for tablets that can handle it
- Need to find a way to deal with freakin annoying elements that don't respect screen width limits.
Specifically, need to find a way to keep them from forcing a horizontal scroll bar to show up and
making the rest of the body text overflow the item's borders that is screen-width sensitive (it's
annoying to have a 300px truncated code block on a 1024px wide screen). At least the following cause problems:
- code blocks
- blockquote blocks
- #reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongtags
- Needs to be faster! - Needs to be faster!
- Reduce DOM elements (~2400 for 10 items, ~8400 for 40 items) - Reduce DOM elements (~2400 for 10 items, ~8400 for 40 items)
- Automatically set limit of 10 items for Network and Profile?

7
view/theme/frost-mobile/head.tpl
View file

@ -1,7 +1,10 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta content='width=device-width, minimum-scale=1 maximum-scale=1' name='viewport'> <!--<meta content='width=device-width, minimum-scale=1 maximum-scale=1' name='viewport'>
<meta content='True' name='HandheldFriendly'> <meta content='True' name='HandheldFriendly'>
<meta content='320' name='MobileOptimized'> <meta content='320' name='MobileOptimized'>-->
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
<!--<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />-->
<base href="$baseurl/" /> <base href="$baseurl/" />
<meta name="generator" content="$generator" /> <meta name="generator" content="$generator" />
<!--<link rel="stylesheet" href="$baseurl/library/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> <!--<link rel="stylesheet" href="$baseurl/library/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

18
view/theme/frost-mobile/js/main.js
View file

@ -401,19 +401,19 @@
function getPosition(e) { function getPosition(e) {
var cursor = {x:0, y:0}; var cursor = {x:0, y:0};
if ( e.pageX || e.pageY ) { if ( e.touches[0].pageX || e.touches[0].pageY ) {
cursor.x = e.pageX; cursor.x = e.touches[0].pageX;
cursor.y = e.pageY; cursor.y = e.touches[0].pageY;
} }
else { else {
if( e.clientX || e.clientY ) { if( e.touches[0].clientX || e.touches[0].clientY ) {
cursor.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft; cursor.x = e.touches[0].clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
cursor.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop; cursor.y = e.touches[0].clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
} }
else { else {
if( e.x || e.y ) { if( e.touches[0].x || e.touches[0].y ) {
cursor.x = e.x; cursor.touches[0].x = e.touches[0].x;
cursor.y = e.y; cursor.touches[0].y = e.touches[0].y;
} }
} }
} }

2
view/theme/frost-mobile/js/main.min.js vendored
View file

File diff suppressed because one or more lines are too long

18
view/theme/frost-mobile/mail_conv.tpl Normal file
View file

@ -0,0 +1,18 @@
<div class="mail-conv-outside-wrapper">
<div class="mail-conv-sender" >
<a href="$mail.from_url" class="mail-conv-sender-url" ><img class="mframe mail-conv-sender-photo$mail.sparkle" src="$mail.from_photo" heigth="80" width="80" alt="$mail.from_name" /></a>
</div>
<div class="mail-conv-detail" >
<div class="mail-conv-sender-name" >$mail.from_name</div>
<div class="mail-conv-date">$mail.date</div>
<div class="mail-conv-subject">$mail.subject</div>
</div>
<div class="mail-conv-body">$mail.body</div>
</div>
<div class="mail-conv-outside-wrapper-end"></div>
<div class="mail-conv-delete-wrapper" id="mail-conv-delete-wrapper-$mail.id" ><a href="message/drop/$mail.id" class="icon drophide delete-icon mail-list-delete-icon" onclick="return confirmDelete();" title="$mail.delete" id="mail-conv-delete-icon-$mail.id" class="mail-conv-delete-icon" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a></div>
<div class="mail-conv-delete-end"></div>
<hr class="mail-conv-break" />

119
view/theme/frost-mobile/style.css
View file

@ -9,9 +9,10 @@
/* generals */ /* generals */
html { html {
width: 320px; /* width: 320px;*/
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
overflow-x:hidden;
} }
body { body {
@ -23,6 +24,7 @@ body {
background-repeat: repeat-x; background-repeat: repeat-x;
color: #505050; color: #505050;
margin: 0px; margin: 0px;
overflow-x:hidden;
} }
div.container { div.container {
@ -32,6 +34,7 @@ div.container {
margin-bottom: 0px; margin-bottom: 0px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
overflow-x:hidden;
} }
a, a:visited, a:link { color: #3465a4; text-decoration: none; } a, a:visited, a:link { color: #3465a4; text-decoration: none; }
@ -39,7 +42,7 @@ a:hover {text-decoration: underline; }
input { input {
border: 1px solid #666666; border: 1px solid #666666;
-moz-border-radius: 3px; /* -moz-border-radius: 3px;*/
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
padding: 3px; padding: 3px;
@ -78,6 +81,10 @@ blockquote {
background-color: #f4f8f9; background-color: #f4f8f9;
border-left: 4px solid #dae4ee; border-left: 4px solid #dae4ee;
padding: 0.4em; padding: 0.4em;
margin-left: 20px;
margin-right: 0px;
width: 260px;
overflow: hidden;
} }
.icollapse-wrapper, .ccollapse-wrapper { .icollapse-wrapper, .ccollapse-wrapper {
@ -176,7 +183,7 @@ nav #banner #logo-text a:hover { text-decoration: none; }
border-bottom: 0px; border-bottom: 0px;
background-color: #aec0d3; background-color: #aec0d3;
color: #565854; color: #565854;
-moz-border-radius: 3px 3px 0px 0px; /* -moz-border-radius: 3px 3px 0px 0px;*/
-webkit-border-radius: 3px 3px 0px 0px; -webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;
} }
@ -197,7 +204,7 @@ nav #banner #logo-text a:hover { text-decoration: none; }
right: 2px; right: 2px;
padding: 1px 2px; padding: 1px 2px;
border-radius: 4px; border-radius: 4px;
-moz-border-radius: 4px; /* -moz-border-radius: 4px;*/
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
background-color: gold !important; background-color: gold !important;
} }
@ -245,7 +252,7 @@ nav .nav-link {
/* right: -33px;*/ /* right: -33px;*/
padding: 1em 0px; padding: 1em 0px;
-moz-box-shadow: 3px 3px 5px #555; /* -moz-box-shadow: 3px 3px 5px #555;*/
-webkit-box-shadow: 3px 3px 5px #555; -webkit-box-shadow: 3px 3px 5px #555;
box-shadow: 3px 3px 5px #555; box-shadow: 3px 3px 5px #555;
@ -300,7 +307,7 @@ aside {
display: block; display: block;
color: #FFFFFF; color: #FFFFFF;
-webkit-border-radius: 5px ; -webkit-border-radius: 5px ;
-moz-border-radius: 5px; /* -moz-border-radius: 5px;*/
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
font-weight: bold; font-weight: bold;
@ -310,7 +317,7 @@ aside {
display: block; display: block;
color: #FFFFFF; color: #FFFFFF;
-webkit-border-radius: 5px ; -webkit-border-radius: 5px ;
-moz-border-radius: 5px; /* -moz-border-radius: 5px;*/
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
font-weight: bold; font-weight: bold;
@ -320,10 +327,11 @@ aside {
/* section */ /* section */
div.section-wrapper { div.section-wrapper {
/* width: 100%;*/ /* width: 100%;*/
width: 320px; /* width: 320px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;*/
margin-left: 0px;
/*padding-right:2em;*/ /*padding-right:2em;*/
@ -349,6 +357,7 @@ section {
min-height: 112px; min-height: 112px;
border-top: 1px solid #babdb6; border-top: 1px solid #babdb6;
overflow-x:hidden;
} }
.tabs { .tabs {
@ -363,7 +372,7 @@ section {
padding: 0.4em 2em; padding: 0.4em 2em;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 8px; border-radius: 8px;
-moz-border-radius: 8px; /* -moz-border-radius: 8px;*/
-webkit-border-radius: 8px; -webkit-border-radius: 8px;
} }
.tab { .tab {
@ -437,8 +446,8 @@ footer {
#jot-title::-webkit-input-placeholder{font-weight: normal;} #jot-title::-webkit-input-placeholder{font-weight: normal;}
#jot-category::-webkit-input-placeholder{font-weight: normal;} #jot-category::-webkit-input-placeholder{font-weight: normal;}
#jot-title:-moz-placeholder{font-weight: normal;} /*#jot-title:-moz-placeholder{font-weight: normal;}
#jot-category:-moz-placeholder{font-weight: normal;} #jot-category:-moz-placeholder{font-weight: normal;}*/
#jot-title:hover, #jot-title:hover,
@ -468,7 +477,7 @@ footer {
.group-selected, .nets-selected, .fileas-selected, .categories-selected { .group-selected, .nets-selected, .fileas-selected, .categories-selected {
padding: 3px; padding: 3px;
-moz-border-radius: 3px; /* -moz-border-radius: 3px;*/
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
@ -478,7 +487,7 @@ footer {
.settings-widget .selected { .settings-widget .selected {
padding: 3px; padding: 3px;
-moz-border-radius: 3px; /* -moz-border-radius: 3px;*/
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
@ -1133,7 +1142,7 @@ input#dfrn-url {
border: 2px solid #AAAAAA; border: 2px solid #AAAAAA;
border-radius: 10px; border-radius: 10px;
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px; /* -moz-border-radius: 10px;*/
/* background: #EEEEEE;*/ /* background: #EEEEEE;*/
} }
@ -1328,12 +1337,15 @@ input#dfrn-url {
} }
.wall-item-content img { .wall-item-content img {
max-width: 300px; max-width: 290px;
border-radius: 7px; border-radius: 7px;
-moz-border-radius: 7px; /* -moz-border-radius: 7px;*/
-webkit-border-radius: 7px; -webkit-border-radius: 7px;
} }
.comment .wall-item-content img {
max-width: 280px;
}
.wall-item-title { .wall-item-title {
@ -1350,19 +1362,28 @@ input#dfrn-url {
.wall-item-body { .wall-item-body {
text-align: justify; text-align: justify;
float: left; float: left;
width: 300px; /* width: 300px;*/
overflow: hidden; overflow: hidden;
margin-top: 10px; margin-top: 10px;
padding-right: 1em;
line-height: 23px; line-height: 23px;
} }
.wall-item-body code { .wall-item-body code {
overflow: auto; width: 260px;
overflow: hidden;
} }
.comment .wall-item-body { .comment .wall-item-body {
margin-left: 5px; margin-left: 5px;
width: 280px; padding-right: 0.5em;
/* width: 280px;*/
}
.comment .wall-item-body blockquote {
margin-left: 0px;
margin-right: 0px;
width: 260px;
} }
.wall-item-tools { .wall-item-tools {
@ -1413,7 +1434,7 @@ input#dfrn-url {
} }
.comment-edit-text-empty, .comment-edit-text-full { .comment-edit-text-empty, .comment-edit-text-full {
/* float: left;*/ /* float: left;*/
-moz-border-radius: 3px; /* -moz-border-radius: 3px;*/
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #cccccc; border: 1px solid #cccccc;
@ -1669,7 +1690,7 @@ input#dfrn-url {
padding: 0.2em 1em; padding: 0.2em 1em;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 10px; border-radius: 10px;
-moz-border-radius: 10px; /* -moz-border-radius: 10px;*/
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
} }
@ -1729,7 +1750,7 @@ input#dfrn-url {
padding: 0.2em 1em; padding: 0.2em 1em;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 10px; border-radius: 10px;
-moz-border-radius: 10px; /* -moz-border-radius: 10px;*/
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
} }
@ -1738,7 +1759,7 @@ input#dfrn-url {
float: left; float: left;
border: 1px solid black; border: 1px solid black;
border-radius: 7px; border-radius: 7px;
-moz-border-radius: 7px; /* -moz-border-radius: 7px;*/
-webkit-border-radius: 7px; -webkit-border-radius: 7px;
background: #FFCCCC; background: #FFCCCC;
font-size: 1.25em; font-size: 1.25em;
@ -1966,7 +1987,7 @@ input#dfrn-url {
left: -30px; top: 80px; left: -30px; top: 80px;
display: none; display: none;
z-index: 10000; z-index: 10000;
-moz-box-shadow: 3px 3px 5px #555; /* -moz-box-shadow: 3px 3px 5px #555;*/
-webkit-box-shadow: 3px 3px 5px #555; -webkit-box-shadow: 3px 3px 5px #555;
box-shadow: 3px 3px 5px #555; box-shadow: 3px 3px 5px #555;
} }
@ -2004,7 +2025,7 @@ input#dfrn-url {
color:#cccccc; color:#cccccc;
border: 1px solid #cccccc; border: 1px solid #cccccc;
padding: 3px 0px 0px 5px; padding: 3px 0px 0px 5px;
-moz-border-radius: 3px; /* -moz-border-radius: 3px;*/
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
@ -2049,7 +2070,7 @@ input#dfrn-url {
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 7px 5px 0px 30px; padding: 7px 5px 0px 30px;
-webkit-border-radius: 5px ; -webkit-border-radius: 5px ;
-moz-border-radius: 5px; /* -moz-border-radius: 5px;*/
border-radius: 5px; border-radius: 5px;
color: #999999; color: #999999;
} }
@ -2074,7 +2095,7 @@ input#dfrn-url {
width: 120px; width: 120px;
height: 30px; height: 30px;
border: 1px solid #cccccc; border: 1px solid #cccccc;
-moz-border-radius: 4px; /* -moz-border-radius: 4px;*/
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
margin-top: 5px; margin-top: 5px;
@ -2104,7 +2125,7 @@ input#dfrn-url {
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 5px; margin-right: 5px;
-webkit-border-radius: 2px ; -webkit-border-radius: 2px ;
-moz-border-radius: 2px; /* -moz-border-radius: 2px;*/
border-radius: 2px; border-radius: 2px;
padding-left: 15px; padding-left: 15px;
} }
@ -2248,7 +2269,7 @@ a.mail-list-link {
.mail-conv-detail { .mail-conv-detail {
margin-left: 20px; margin-left: 20px;
margin-bottom: 10px; margin-bottom: 10px;
width: 270px; /*width: 270px;*/
} }
.mail-conv-subject { .mail-conv-subject {
@ -2256,6 +2277,11 @@ a.mail-list-link {
margin: 10px 0; margin: 10px 0;
} }
.mail-conv-body {
padding-top: 20px;
clear: both;
}
.mail-conv-outside-wrapper-end { .mail-conv-outside-wrapper-end {
clear: both; clear: both;
} }
@ -2266,6 +2292,7 @@ a.mail-list-link {
.mail-conv-delete-wrapper { .mail-conv-delete-wrapper {
float: right; float: right;
padding-bottom: 0.5em;
margin-right: 5px; margin-right: 5px;
margin-top: 15px; margin-top: 15px;
} }
@ -2371,7 +2398,7 @@ aside input[type='text'] {
border: 1px solid #DDDDDD; border: 1px solid #DDDDDD;
padding: 8px; padding: 8px;
margin-top: 5px; margin-top: 5px;
-moz-border-radius:5px; /* -moz-border-radius:5px;*/
-webkit-border-radius:5px; -webkit-border-radius:5px;
border-radius:5px; border-radius:5px;
@ -2429,7 +2456,7 @@ aside input[type='text'] {
.photo-top-image-wrapper img { .photo-top-image-wrapper img {
max-width: 290px; max-width: 290px;
border-radius: 10px; border-radius: 10px;
-moz-border-radius: 10px; /* -moz-border-radius: 10px;*/
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
} }
.photo-top-album-name { .photo-top-album-name {
@ -2588,7 +2615,7 @@ aside input[type='text'] {
margin-top: 15px; margin-top: 15px;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 10px; border-radius: 10px;
-moz-border-radius: 10px; /* -moz-border-radius: 10px;*/
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
} }
@ -3823,11 +3850,11 @@ ul.notifications-menu-popup {
height: auto; height: auto;
overflow-y: scroll;overflow-style:scrollbar; overflow-y: scroll;overflow-style:scrollbar;
background-color:#FFFFFF; background-color:#FFFFFF;
-moz-border-radius: 5px; /* -moz-border-radius: 5px;*/
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
border-radius:5px; border-radius:5px;
border: 1px solid #AAA; border: 1px solid #AAA;
-moz-box-shadow: 3px 3px 5px #555; /* -moz-box-shadow: 3px 3px 5px #555;*/
-webkit-box-shadow: 3px 3px 5px #555; -webkit-box-shadow: 3px 3px 5px #555;
box-shadow: 3px 3px 5px #555; box-shadow: 3px 3px 5px #555;
} }
@ -3886,8 +3913,9 @@ ul.notifications-menu-popup {
width: 130px; width: 130px;
} }
@media only screen and (min-device-width: 768px) /*@media only screen and (min-device-width: 768px)
and (max-device-width: 1024px) and (max-device-width: 1024px)*/
/*@media only screen and (min-device-width: 768px)
{ {
html { html {
width:700px width:700px
@ -3902,4 +3930,21 @@ width:700px;
.comment .wall-item-body { .comment .wall-item-body {
width:650px; width:650px;
} }
}*/
@media only screen and (min-device-width: 768px)
{
.wall-item-body code {
width: 700px;
}
.comment .wall-item-body blockquote {
margin-left: 20px;
width: 680px;
}
blockquote {
width: 700px;
}
} }

2
view/theme/frost-mobile/theme.php
View file

@ -4,7 +4,7 @@
* Name: Frost--mobile version * Name: Frost--mobile version
* Description: Like frosted glass * Description: Like frosted glass
* Credits: Navigation icons taken from http://iconza.com. Other icons taken from http://thenounproject.com, including: Like, Dislike, Black Lock, Unlock, Pencil, Tag, Camera, Paperclip (Marie Coons), Folder (Sergio Calcara), Chain-link (Andrew Fortnum), Speaker (Harold Kim), Quotes (Henry Ryder), Video Camera (Anas Ramadan), and Left Arrow, Right Arrow, and Delete X (all three P.J. Onori). All under Attribution (CC BY 3.0). Others from The Noun Project are public domain or No Rights Reserved (CC0). * Credits: Navigation icons taken from http://iconza.com. Other icons taken from http://thenounproject.com, including: Like, Dislike, Black Lock, Unlock, Pencil, Tag, Camera, Paperclip (Marie Coons), Folder (Sergio Calcara), Chain-link (Andrew Fortnum), Speaker (Harold Kim), Quotes (Henry Ryder), Video Camera (Anas Ramadan), and Left Arrow, Right Arrow, and Delete X (all three P.J. Onori). All under Attribution (CC BY 3.0). Others from The Noun Project are public domain or No Rights Reserved (CC0).
* Version: Version 0.2.4 * Version: Version 0.2.5
* Author: Zach P <windforest@f.shmuz.in> * Author: Zach P <windforest@f.shmuz.in>
* Maintainer: Zach P <windforest@f.shmuz.in> * Maintainer: Zach P <windforest@f.shmuz.in>
*/ */