aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfriendica <info@friendica.com>2014-03-11 07:18:45 +1100
committerfriendica <info@friendica.com>2014-03-11 07:18:45 +1100
commitbb64e82858b1b782a1ca2ad8c3cb13170593e857 (patch)
tree6f7de2d20d08bcc3eec3b66139c382107d214117
parenta5cb47c3d2a137f9823da26d03126f987d7fcecf (diff)
parentf78c4f485c9f773fe51ce3e8a26c6232d5f7f5f8 (diff)
downloadvolse-hubzilla-bb64e82858b1b782a1ca2ad8c3cb13170593e857.tar.gz
volse-hubzilla-bb64e82858b1b782a1ca2ad8c3cb13170593e857.tar.bz2
volse-hubzilla-bb64e82858b1b782a1ca2ad8c3cb13170593e857.zip
Merge pull request #363 from git-marijus/master
this commit is an attempt to make conv items better scalable on smaller screens. also save some horizontal space.
-rw-r--r--include/bbcode.php14
-rw-r--r--view/css/bootstrap-red.css4
-rw-r--r--view/css/conversation.css38
-rw-r--r--view/css/default.css11
-rw-r--r--view/theme/redbasic/css/style.css5
-rw-r--r--view/theme/redbasic/js/redbasic.js8
-rw-r--r--view/theme/redbasic/php/style.php2
-rwxr-xr-xview/tpl/conv_item.tpl17
-rwxr-xr-xview/tpl/jot.tpl2
9 files changed, 50 insertions, 51 deletions
diff --git a/include/bbcode.php b/include/bbcode.php
index 8bbf7ae01..cd0bf527e 100644
--- a/include/bbcode.php
+++ b/include/bbcode.php
@@ -46,7 +46,7 @@ function tryzrlvideo($match) {
}
if($zrl)
$link = zid($link);
- return '<video src="' . $link . '" controls="controls" width="' . get_app()->videowidth . '" height="' . $a->videoheight . '"><a href="' . $link . '">' . $link . '</a></video>';
+ return '<video controls="controls" src="' . $link . '" style="width:100%; max-width:' . get_app()->videowidth . 'px"><a href="' . $link . '">' . $link . '</a></video>';
}
@@ -620,24 +620,24 @@ function bbcode($Text,$preserve_nl = false, $tryoembed = true) {
// [img=widthxheight]pathtoimage[/img]
if (strpos($Text,'[/img]') !== false) {
- $Text = preg_replace("/\[img\=([0-9]*)x([0-9]*)\](.*?)\[\/img\]/ism", '<img src="$3" style="width: $1px;" alt="' . t('Image/photo') . '" >', $Text);
+ $Text = preg_replace("/\[img\=([0-9]*)x([0-9]*)\](.*?)\[\/img\]/ism", '<img src="$3" style="width: 100%; max-width: $1px;" alt="' . t('Image/photo') . '" >', $Text);
}
if (strpos($Text,'[/zmg]') !== false) {
- $Text = preg_replace("/\[zmg\=([0-9]*)x([0-9]*)\](.*?)\[\/zmg\]/ism", '<img class="zrl" src="$3" style="width: $1px;" alt="' . t('Image/photo') . '" >', $Text);
+ $Text = preg_replace("/\[zmg\=([0-9]*)x([0-9]*)\](.*?)\[\/zmg\]/ism", '<img class="zrl" src="$3" style="width: 100%; max-width: $1px;" alt="' . t('Image/photo') . '" >', $Text);
}
// [img=widthxheight float={left, right}]pathtoimage[/img]
if (strpos($Text,'[/img]') !== false) {
- $Text = preg_replace("/\[img\=([0-9]*)x([0-9]*) float=left\](.*?)\[\/img\]/ism", '<img src="$3" style="width: $1px; float: left;" alt="' . t('Image/photo') . '" >', $Text);
+ $Text = preg_replace("/\[img\=([0-9]*)x([0-9]*) float=left\](.*?)\[\/img\]/ism", '<img src="$3" style="width: 100%; max-width: $1px; float: left;" alt="' . t('Image/photo') . '" >', $Text);
}
if (strpos($Text,'[/img]') !== false) {
- $Text = preg_replace("/\[img\=([0-9]*)x([0-9]*) float=right\](.*?)\[\/img\]/ism", '<img src="$3" style="width: $1px; float: right;" alt="' . t('Image/photo') . '" >', $Text);
+ $Text = preg_replace("/\[img\=([0-9]*)x([0-9]*) float=right\](.*?)\[\/img\]/ism", '<img src="$3" style="width: 100%; max-width: $1px; float: right;" alt="' . t('Image/photo') . '" >', $Text);
}
if (strpos($Text,'[/zmg]') !== false) {
- $Text = preg_replace("/\[zmg\=([0-9]*)x([0-9]*) float=left\](.*?)\[\/zmg\]/ism", '<img class="zrl" src="$3" style="width: $1px; float: left;" alt="' . t('Image/photo') . '" >', $Text);
+ $Text = preg_replace("/\[zmg\=([0-9]*)x([0-9]*) float=left\](.*?)\[\/zmg\]/ism", '<img class="zrl" src="$3" style="width: 100%; max-width: $1px; float: left;" alt="' . t('Image/photo') . '" >', $Text);
}
if (strpos($Text,'[/zmg]') !== false) {
- $Text = preg_replace("/\[zmg\=([0-9]*)x([0-9]*) float=right\](.*?)\[\/zmg\]/ism", '<img class="zrl" src="$3" style="width: $1px; float: right;" alt="' . t('Image/photo') . '" >', $Text);
+ $Text = preg_replace("/\[zmg\=([0-9]*)x([0-9]*) float=right\](.*?)\[\/zmg\]/ism", '<img class="zrl" src="$3" style="width: 100%; max-width: $1px; float: right;" alt="' . t('Image/photo') . '" >', $Text);
}
// style (sanitized)
diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css
index 00e2f30b7..aff35bf85 100644
--- a/view/css/bootstrap-red.css
+++ b/view/css/bootstrap-red.css
@@ -120,3 +120,7 @@ nav .navbar-collapse .navbar-right {
height: 32px;
margin-right: 5px;
}
+
+code {
+ white-space: normal;
+}
diff --git a/view/css/conversation.css b/view/css/conversation.css
index 3de9a1ec9..0100f58b5 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -11,7 +11,7 @@
margin: 0px;
padding: 8px;
height: 1.8em;
- width: 530px;
+ width: 70%;
margin-bottom: 5px;
}
@@ -138,12 +138,7 @@
.wall-item-info {
display: block;
float: left;
- width:110px;
- margin-right:10px;
-}
-
-.comment .wall-item-info {
- width: 70px;
+ margin-right: 20px;
}
.wallwall .wwto {
@@ -166,7 +161,6 @@
margin-top: 0px;
margin-left: 10px;
margin-bottom: 10px;
- width: 100px;
}
.wall-item-photo-menu-button {
@@ -203,17 +197,18 @@
.wall-item-arrowphoto-wrapper {
position: absolute;
z-index: 99;
+ left: 75px;
}
.wall-item-wrapper {
margin-left:10px;
}
-
.wall-item-arrowphoto-wrapper {
- left: 75px;
+
}
+/*
.wall-item-lock {
position: absolute;
left: 105px;
@@ -227,20 +222,14 @@
.wall-item-lock {
}
-
+*/
.lockview {
cursor: pointer;
}
.wall-item-location {
- overflow: hidden;
- /* add ellipsis on text overflow */
- /* this work on safari, opera, ie, chrome. */
- /* firefox users have to wait support or we */
- /* can use a jquery plugin http://bit.ly/zJskg */
text-overflow: ellipsis;
- -o-text-overflow: ellipsis;
- width: 100%;
+ max-width: 30%;
}
.wall-item-author {
@@ -258,7 +247,7 @@
}
.wall-item-content img {
- max-width: 95% !important;
+ max-width: 95%;
}
.wall-item-title {
@@ -354,10 +343,7 @@
}
.comment-edit-photo {
- margin-top: 10px;
- margin-left: 10px;
- margin-bottom: 10px;
- width: 100px;
+ margin: 10px 20px 10px 10px;
float: left;
}
@@ -386,15 +372,15 @@
}
.comment-edit-text-empty {
- height: 1.0em;
- width: 270px;
+ height: 1.2em;
+ width: 30%;
overflow: auto;
margin-bottom: 10px;
}
.comment-edit-text-full {
height: 150px;
- width: 80%;
+ width: 50%;
overflow: auto;
}
diff --git a/view/css/default.css b/view/css/default.css
index a98374960..271e15620 100644
--- a/view/css/default.css
+++ b/view/css/default.css
@@ -6,11 +6,17 @@ header #banner {
margin-right: auto;
}
+main {
+ display: table;
+ width: 100%;
+ height: 100%;
+}
+
aside#region_1 {
min-width: 210px;
display: table-cell;
vertical-align: top;
- padding: 65px 10px 10px 10px;
+ padding: 65px 7px 7px 7px;
}
aside input[type='text'] {
@@ -19,7 +25,8 @@ aside input[type='text'] {
section {
width: 100%;
+ min-width: 298px;
display: table-cell;
vertical-align: top;
- padding: 65px 15px 200px 10px;
+ padding: 65px 15px 200px 7px;
}
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 67aa6a3c1..7cdc55644 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -7,6 +7,10 @@
/* generals */
+html {
+ height: 100%;
+}
+
body {
font-family: arial,freesans,sans-serif;
font-size: $body_font_size;
@@ -16,6 +20,7 @@ body {
background-size: cover;
color: $font_colour;
margin: 0px;
+ height: 100%;
}
.jslider {
font-family: arial,freesans,sans-serif;
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 7e957a4f4..4bc94287d 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -9,10 +9,10 @@ function cmtBbOpen(comment, id) {
}
function cmtBbClose(comment, id) {
-// if($(comment).hasClass('comment-edit-text-empty')) {
-// $(".comment-edit-bb-" + id).hide();
-// return true;
-// }
+ if($(comment).hasClass('comment-edit-text-empty')) {
+ $(".comment-edit-bb-" + id).hide();
+ return true;
+ }
return false;
}
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 8fb4de381..c3153a025 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -119,7 +119,7 @@ if(! $a->install) {
if (! $converse_width)
$converse_width="1024px";
if(! $top_photo)
- $top_photo = '64px';
+ $top_photo = '48px';
$pmenu_top = intval($top_photo) - 16 . 'px';
$wwtop = intval($top_photo) - 15 . 'px';
$comment_indent = intval($top_photo) + 10 . 'px';
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index 869692bfa..8d59951e7 100755
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -9,18 +9,20 @@
<div class="wall-item-outside-wrapper {{$item.indent}}{{$item.previewing}}{{if $item.owner_url}} wallwall{{/if}}" id="wall-item-outside-wrapper-{{$item.id}}" >
<div class="wall-item-content-wrapper {{$item.indent}}" id="wall-item-content-wrapper-{{$item.id}}" >
<div class="wall-item-info{{if $item.owner_url}} wallwall{{/if}}" id="wall-item-info-{{$item.id}}">
+ {{* comment out for now. let's see if somebody is missing it. if yes we need a better visual concept.
{{if $item.owner_url}}
<div class="wall-item-photo-wrapper wwto" id="wall-item-ownerphoto-wrapper-{{$item.id}}" >
<a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-photo-link" id="wall-item-ownerphoto-link-{{$item.id}}">
- <img src="{{$item.owner_photo}}" class="wall-item-photo{{$item.osparkle}}" id="wall-item-ownerphoto-{{$item.id}}" style="height: 80px; width: 80px;" alt="{{$item.owner_name}}" /></a>
+ <img src="{{$item.owner_photo}}" class="wall-item-photo{{$item.osparkle}}" id="wall-item-ownerphoto-{{$item.id}}" alt="{{$item.owner_name}}" /></a>
</div>
<div class="wall-item-arrowphoto-wrapper" ><img src="images/larrow.gif" alt="{{$item.wall}}" /></div>
{{/if}}
+ *}}
<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}}" id="wall-item-photo-wrapper-{{$item.id}}"
onmouseover="if (typeof t{{$item.id}} != 'undefined') clearTimeout(t{{$item.id}}); openMenu('wall-item-photo-menu-button-{{$item.id}}')"
onmouseout="t{{$item.id}}=setTimeout('closeMenu(\'wall-item-photo-menu-button-{{$item.id}}\'); closeMenu(\'wall-item-photo-menu-{{$item.id}}\');',200)">
<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-photo-link" id="wall-item-photo-link-{{$item.id}}">
- <img src="{{$item.thumb}}" class="wall-item-photo{{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" style="height: 80px; width: 80px;" alt="{{$item.name}}" /></a>
+ <img src="{{$item.thumb}}" class="wall-item-photo{{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" /></a>
<span onclick="openClose('wall-item-photo-menu-{{$item.id}}');" class="fakelink wall-item-photo-menu-button" id="wall-item-photo-menu-button-{{$item.id}}">menu</span>
<div class="wall-item-photo-menu" id="wall-item-photo-menu-{{$item.id}}">
<ul>
@@ -30,16 +32,11 @@
</div>
<div class="wall-item-photo-end"></div>
- <div class="wall-item-wrapper" id="wall-item-wrapper-{{$item.id}}" >
- {{if $item.lock}}<i class="wall-item-lock icon-lock lockview" title="{{$item.lock}}" onclick="lockview(event,{{$item.id}});" ></i>
- {{else}}<div class="wall-item-lock"></div>{{/if}}
- <div class="wall-item-location" id="wall-item-location-{{$item.id}}">{{$item.location}}</div>
- </div>
+
</div>
<div class="wall-item-author">
- <a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.sparkle}}" id="wall-item-name-{{$item.id}}" >{{$item.name}}</span></a>{{if $item.owner_url}} {{$item.via}} <a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a>{{/if}}<br />
-
- <div class="wall-item-ago" id="wall-item-ago-{{$item.id}}">{{if $item.verified}}<i class="icon-ok" title="{{$item.verified}}"></i>&nbsp;{{/if}}<span class="autotime" title="{{$item.isotime}}">{{$item.localtime}}{{if $item.editedtime}} {{$item.editedtime}}{{/if}}{{if $item.expiretime}} {{$item.expiretime}}{{/if}}</span>{{if $item.app}}<span class="item.app">{{$item.str_app}}</span>{{/if}}</div>
+ {{if $item.lock}}<i class="wall-item-lock icon-lock lockview" title="{{$item.lock}}" onclick="lockview(event,{{$item.id}});" ></i>&nbsp;{{/if}}<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.sparkle}}" id="wall-item-name-{{$item.id}}" >{{$item.name}}</span></a>{{if $item.owner_url}} {{$item.via}} <a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a>{{/if}}<br />
+ <div class="wall-item-ago" id="wall-item-ago-{{$item.id}}">{{if $item.verified}}<i class="icon-ok" title="{{$item.verified}}"></i>&nbsp;{{/if}}{{if $item.location}}<span class="wall-item-location" id="wall-item-location-{{$item.id}}">{{$item.location}},&nbsp;</span>{{/if}}<span class="autotime" title="{{$item.isotime}}">{{$item.localtime}}{{if $item.editedtime}} {{$item.editedtime}}{{/if}}{{if $item.expiretime}} {{$item.expiretime}}{{/if}}</span>{{if $item.app}}<span class="item.app">{{$item.str_app}}</span>{{/if}}</div>
</div>
<div class="wall-item-content" id="wall-item-content-{{$item.id}}" >
<div class="wall-item-title" id="wall-item-title-{{$item.id}}">{{$item.title}}</div>
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index e1e1e3080..4cc9c0d10 100755
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -23,7 +23,7 @@
<div id="jot-pagetitle-wrap"><input name="pagetitle" id="jot-pagetitle" type="text" placeholder="{{$placeholdpagetitle}}" value="{{$pagetitle}}" class="jothidden" style="display:none" /></div>
{{/if}}
<div id="jot-text-wrap">
- <textarea rows="5" cols="64" class="profile-jot-text" id="profile-jot-text" name="body" placeholder="{{$share}}">{{$content}}</textarea>
+ <textarea class="profile-jot-text" id="profile-jot-text" name="body" placeholder="{{$share}}">{{$content}}</textarea>
</div>
<div id="profile-jot-text-loading"></div>