Merge pull request #432 from fermionic/frost-better-screen-width
Frost Mobile better screen width
This commit is contained in:
friendica
commit
d2eef5f11d
10 changed files with 140 additions and 61 deletions
1
boot.php
1
boot.php
|
|
@ -364,6 +364,7 @@ if(! class_exists('App')) {
|
|||
public $sourcename = '';
|
||||
public $videowidth = 425;
|
||||
public $videoheight = 350;
|
||||
public $force_max_items = 0;
|
||||
|
||||
private $scheme;
|
||||
private $hostname;
|
||||
|
|
|
|||
|
|
@ -577,8 +577,13 @@ function network_content(&$a, $update = 0) {
|
|||
$a->set_pager_total($r[0]['total']);
|
||||
}
|
||||
}
|
||||
|
||||
$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']));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,11 +12,18 @@ Photo album display?
|
|||
|
||||
- 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!
|
||||
- Reduce DOM elements (~2400 for 10 items, ~8400 for 40 items)
|
||||
- Automatically set limit of 10 items for Network and Profile?
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<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='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/" />
|
||||
<meta name="generator" content="$generator" />
|
||||
<!--<link rel="stylesheet" href="$baseurl/library/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
|
||||
|
|
|
|||
|
|
@ -401,19 +401,19 @@
|
|||
|
||||
function getPosition(e) {
|
||||
var cursor = {x:0, y:0};
|
||||
if ( e.pageX || e.pageY ) {
|
||||
cursor.x = e.pageX;
|
||||
cursor.y = e.pageY;
|
||||
if ( e.touches[0].pageX || e.touches[0].pageY ) {
|
||||
cursor.x = e.touches[0].pageX;
|
||||
cursor.y = e.touches[0].pageY;
|
||||
}
|
||||
else {
|
||||
if( e.clientX || e.clientY ) {
|
||||
cursor.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
|
||||
cursor.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
|
||||
if( e.touches[0].clientX || e.touches[0].clientY ) {
|
||||
cursor.x = e.touches[0].clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
|
||||
cursor.y = e.touches[0].clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
|
||||
}
|
||||
else {
|
||||
if( e.x || e.y ) {
|
||||
cursor.x = e.x;
|
||||
cursor.y = e.y;
|
||||
if( e.touches[0].x || e.touches[0].y ) {
|
||||
cursor.touches[0].x = e.touches[0].x;
|
||||
cursor.touches[0].y = e.touches[0].y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
view/theme/frost-mobile/js/main.min.js
vendored
2
view/theme/frost-mobile/js/main.min.js
vendored
File diff suppressed because one or more lines are too long
18
view/theme/frost-mobile/mail_conv.tpl
Normal file
18
view/theme/frost-mobile/mail_conv.tpl
Normal 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" />
|
||||
|
|
@ -9,9 +9,10 @@
|
|||
|
||||
/* generals */
|
||||
html {
|
||||
width: 320px;
|
||||
/* width: 320px;*/
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -23,6 +24,7 @@ body {
|
|||
background-repeat: repeat-x;
|
||||
color: #505050;
|
||||
margin: 0px;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
div.container {
|
||||
|
|
@ -32,6 +34,7 @@ div.container {
|
|||
margin-bottom: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
a, a:visited, a:link { color: #3465a4; text-decoration: none; }
|
||||
|
|
@ -39,7 +42,7 @@ a:hover {text-decoration: underline; }
|
|||
|
||||
input {
|
||||
border: 1px solid #666666;
|
||||
-moz-border-radius: 3px;
|
||||
/* -moz-border-radius: 3px;*/
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
|
|
@ -78,6 +81,10 @@ blockquote {
|
|||
background-color: #f4f8f9;
|
||||
border-left: 4px solid #dae4ee;
|
||||
padding: 0.4em;
|
||||
margin-left: 20px;
|
||||
margin-right: 0px;
|
||||
width: 260px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icollapse-wrapper, .ccollapse-wrapper {
|
||||
|
|
@ -176,7 +183,7 @@ nav #banner #logo-text a:hover { text-decoration: none; }
|
|||
border-bottom: 0px;
|
||||
background-color: #aec0d3;
|
||||
color: #565854;
|
||||
-moz-border-radius: 3px 3px 0px 0px;
|
||||
/* -moz-border-radius: 3px 3px 0px 0px;*/
|
||||
-webkit-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;
|
||||
padding: 1px 2px;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
/* -moz-border-radius: 4px;*/
|
||||
-webkit-border-radius: 4px;
|
||||
background-color: gold !important;
|
||||
}
|
||||
|
|
@ -245,7 +252,7 @@ nav .nav-link {
|
|||
/* right: -33px;*/
|
||||
padding: 1em 0px;
|
||||
|
||||
-moz-box-shadow: 3px 3px 5px #555;
|
||||
/* -moz-box-shadow: 3px 3px 5px #555;*/
|
||||
-webkit-box-shadow: 3px 3px 5px #555;
|
||||
box-shadow: 3px 3px 5px #555;
|
||||
|
||||
|
|
@ -300,7 +307,7 @@ aside {
|
|||
display: block;
|
||||
color: #FFFFFF;
|
||||
-webkit-border-radius: 5px ;
|
||||
-moz-border-radius: 5px;
|
||||
/* -moz-border-radius: 5px;*/
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
|
|
@ -310,7 +317,7 @@ aside {
|
|||
display: block;
|
||||
color: #FFFFFF;
|
||||
-webkit-border-radius: 5px ;
|
||||
-moz-border-radius: 5px;
|
||||
/* -moz-border-radius: 5px;*/
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
|
|
@ -320,10 +327,11 @@ aside {
|
|||
/* section */
|
||||
div.section-wrapper {
|
||||
/* width: 100%;*/
|
||||
width: 320px;
|
||||
/* width: 320px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-right: auto;*/
|
||||
margin-left: 0px;
|
||||
|
||||
/*padding-right:2em;*/
|
||||
|
||||
|
|
@ -349,6 +357,7 @@ section {
|
|||
|
||||
min-height: 112px;
|
||||
border-top: 1px solid #babdb6;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
|
@ -363,7 +372,7 @@ section {
|
|||
padding: 0.4em 2em;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
/* -moz-border-radius: 8px;*/
|
||||
-webkit-border-radius: 8px;
|
||||
}
|
||||
.tab {
|
||||
|
|
@ -437,8 +446,8 @@ footer {
|
|||
|
||||
#jot-title::-webkit-input-placeholder{font-weight: normal;}
|
||||
#jot-category::-webkit-input-placeholder{font-weight: normal;}
|
||||
#jot-title:-moz-placeholder{font-weight: normal;}
|
||||
#jot-category:-moz-placeholder{font-weight: normal;}
|
||||
/*#jot-title:-moz-placeholder{font-weight: normal;}
|
||||
#jot-category:-moz-placeholder{font-weight: normal;}*/
|
||||
|
||||
|
||||
#jot-title:hover,
|
||||
|
|
@ -468,7 +477,7 @@ footer {
|
|||
|
||||
.group-selected, .nets-selected, .fileas-selected, .categories-selected {
|
||||
padding: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
/* -moz-border-radius: 3px;*/
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #CCCCCC;
|
||||
|
|
@ -478,7 +487,7 @@ footer {
|
|||
|
||||
.settings-widget .selected {
|
||||
padding: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
/* -moz-border-radius: 3px;*/
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #CCCCCC;
|
||||
|
|
@ -1133,7 +1142,7 @@ input#dfrn-url {
|
|||
border: 2px solid #AAAAAA;
|
||||
border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
/* -moz-border-radius: 10px;*/
|
||||
/* background: #EEEEEE;*/
|
||||
}
|
||||
|
||||
|
|
@ -1328,12 +1337,15 @@ input#dfrn-url {
|
|||
}
|
||||
|
||||
.wall-item-content img {
|
||||
max-width: 300px;
|
||||
max-width: 290px;
|
||||
border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
/* -moz-border-radius: 7px;*/
|
||||
-webkit-border-radius: 7px;
|
||||
}
|
||||
|
||||
.comment .wall-item-content img {
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
|
||||
.wall-item-title {
|
||||
|
|
@ -1350,19 +1362,28 @@ input#dfrn-url {
|
|||
.wall-item-body {
|
||||
text-align: justify;
|
||||
float: left;
|
||||
width: 300px;
|
||||
/* width: 300px;*/
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
padding-right: 1em;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.wall-item-body code {
|
||||
overflow: auto;
|
||||
width: 260px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comment .wall-item-body {
|
||||
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 {
|
||||
|
|
@ -1413,7 +1434,7 @@ input#dfrn-url {
|
|||
}
|
||||
.comment-edit-text-empty, .comment-edit-text-full {
|
||||
/* float: left;*/
|
||||
-moz-border-radius: 3px;
|
||||
/* -moz-border-radius: 3px;*/
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #cccccc;
|
||||
|
|
@ -1669,7 +1690,7 @@ input#dfrn-url {
|
|||
padding: 0.2em 1em;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
/* -moz-border-radius: 10px;*/
|
||||
-webkit-border-radius: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -1729,7 +1750,7 @@ input#dfrn-url {
|
|||
padding: 0.2em 1em;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
/* -moz-border-radius: 10px;*/
|
||||
-webkit-border-radius: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -1738,7 +1759,7 @@ input#dfrn-url {
|
|||
float: left;
|
||||
border: 1px solid black;
|
||||
border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
/* -moz-border-radius: 7px;*/
|
||||
-webkit-border-radius: 7px;
|
||||
background: #FFCCCC;
|
||||
font-size: 1.25em;
|
||||
|
|
@ -1966,7 +1987,7 @@ input#dfrn-url {
|
|||
left: -30px; top: 80px;
|
||||
display: none;
|
||||
z-index: 10000;
|
||||
-moz-box-shadow: 3px 3px 5px #555;
|
||||
/* -moz-box-shadow: 3px 3px 5px #555;*/
|
||||
-webkit-box-shadow: 3px 3px 5px #555;
|
||||
box-shadow: 3px 3px 5px #555;
|
||||
}
|
||||
|
|
@ -2004,7 +2025,7 @@ input#dfrn-url {
|
|||
color:#cccccc;
|
||||
border: 1px solid #cccccc;
|
||||
padding: 3px 0px 0px 5px;
|
||||
-moz-border-radius: 3px;
|
||||
/* -moz-border-radius: 3px;*/
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
|
@ -2049,7 +2070,7 @@ input#dfrn-url {
|
|||
background-repeat: no-repeat;
|
||||
padding: 7px 5px 0px 30px;
|
||||
-webkit-border-radius: 5px ;
|
||||
-moz-border-radius: 5px;
|
||||
/* -moz-border-radius: 5px;*/
|
||||
border-radius: 5px;
|
||||
color: #999999;
|
||||
}
|
||||
|
|
@ -2074,7 +2095,7 @@ input#dfrn-url {
|
|||
width: 120px;
|
||||
height: 30px;
|
||||
border: 1px solid #cccccc;
|
||||
-moz-border-radius: 4px;
|
||||
/* -moz-border-radius: 4px;*/
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
margin-top: 5px;
|
||||
|
|
@ -2104,7 +2125,7 @@ input#dfrn-url {
|
|||
background-repeat: no-repeat;
|
||||
margin-right: 5px;
|
||||
-webkit-border-radius: 2px ;
|
||||
-moz-border-radius: 2px;
|
||||
/* -moz-border-radius: 2px;*/
|
||||
border-radius: 2px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
|
@ -2248,7 +2269,7 @@ a.mail-list-link {
|
|||
.mail-conv-detail {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
width: 270px;
|
||||
/*width: 270px;*/
|
||||
}
|
||||
|
||||
.mail-conv-subject {
|
||||
|
|
@ -2256,6 +2277,11 @@ a.mail-list-link {
|
|||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.mail-conv-body {
|
||||
padding-top: 20px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.mail-conv-outside-wrapper-end {
|
||||
clear: both;
|
||||
}
|
||||
|
|
@ -2266,6 +2292,7 @@ a.mail-list-link {
|
|||
|
||||
.mail-conv-delete-wrapper {
|
||||
float: right;
|
||||
padding-bottom: 0.5em;
|
||||
margin-right: 5px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
|
@ -2371,7 +2398,7 @@ aside input[type='text'] {
|
|||
border: 1px solid #DDDDDD;
|
||||
padding: 8px;
|
||||
margin-top: 5px;
|
||||
-moz-border-radius:5px;
|
||||
/* -moz-border-radius:5px;*/
|
||||
-webkit-border-radius:5px;
|
||||
border-radius:5px;
|
||||
|
||||
|
|
@ -2429,7 +2456,7 @@ aside input[type='text'] {
|
|||
.photo-top-image-wrapper img {
|
||||
max-width: 290px;
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
/* -moz-border-radius: 10px;*/
|
||||
-webkit-border-radius: 10px;
|
||||
}
|
||||
.photo-top-album-name {
|
||||
|
|
@ -2588,7 +2615,7 @@ aside input[type='text'] {
|
|||
margin-top: 15px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
/* -moz-border-radius: 10px;*/
|
||||
-webkit-border-radius: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -3823,11 +3850,11 @@ ul.notifications-menu-popup {
|
|||
height: auto;
|
||||
overflow-y: scroll;overflow-style:scrollbar;
|
||||
background-color:#FFFFFF;
|
||||
-moz-border-radius: 5px;
|
||||
/* -moz-border-radius: 5px;*/
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius:5px;
|
||||
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;
|
||||
box-shadow: 3px 3px 5px #555;
|
||||
}
|
||||
|
|
@ -3886,8 +3913,9 @@ ul.notifications-menu-popup {
|
|||
width: 130px;
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 768px)
|
||||
and (max-device-width: 1024px)
|
||||
/*@media only screen and (min-device-width: 768px)
|
||||
and (max-device-width: 1024px)*/
|
||||
/*@media only screen and (min-device-width: 768px)
|
||||
{
|
||||
html {
|
||||
width:700px
|
||||
|
|
@ -3902,4 +3930,21 @@ width:700px;
|
|||
.comment .wall-item-body {
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
* Name: Frost--mobile version
|
||||
* 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).
|
||||
* Version: Version 0.2.4
|
||||
* Version: Version 0.2.5
|
||||
* Author: Zach P <windforest@f.shmuz.in>
|
||||
* Maintainer: Zach P <windforest@f.shmuz.in>
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in a new issue