- Frost Mobile: redo CSS to adjust automatically to the screen width

- Frost Mobile: various tweaks and fixes
- Allow themes to limit number of items on the Network page
This commit is contained in:
Zach Prezkuta 2012-08-09 21:17:11 -06:00
parent e31ee9ed82
commit d9279da369
10 changed files with 137 additions and 61 deletions

View file

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

View file

@ -563,7 +563,7 @@ function network_content(&$a, $update = 0) {
}
else {
if(! get_pconfig(local_user(),'system','alt_pager')) {
if(! get_pconfig(local_user(),'system','alt_pager')) {
$r = q("SELECT COUNT(*) AS `total`
FROM `item` LEFT JOIN `contact` ON `contact`.`id` = `item`.`contact-id`
WHERE `item`.`uid` = %d AND `item`.`visible` = 1 AND `item`.`deleted` = 0
@ -576,10 +576,15 @@ function network_content(&$a, $update = 0) {
if(count($r)) {
$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));
$pager_sql = sprintf(" LIMIT %d, %d ",intval($a->pager['start']), intval($a->pager['itemspage']));
}
$itemspage_network = get_pconfig(local_user(),'system','itemspage_network');
$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']));
}
$simple_update = (($update) ? " and `item`.`unseen` = 1 " : '');

View file

@ -12,11 +12,15 @@ 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?

View file

@ -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" />

View file

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

File diff suppressed because one or more lines are too long

View file

@ -1,8 +1,8 @@
$j(document).ready(function() {
/* enable tinymce on focus and click */
$j("#profile-jot-text").focus(enableOnUser);
$j("#profile-jot-text").click(enableOnUser);
/* enable tinymce on focus and click */
$j("#profile-jot-text").focus(enableOnUser);
$j("#profile-jot-text").click(enableOnUser);
if(typeof window.AjaxUpload != "undefined") {
switch(window.ajaxType) {

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" />

View file

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

View file

@ -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>
*/