aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
authormarijus <mario@mariovavti.com>2014-03-10 17:17:49 +0100
committermarijus <mario@mariovavti.com>2014-03-10 17:17:49 +0100
commit34fd387438f5f3d06b0a1c26d5c7ca5c1f5bd270 (patch)
tree5cb0c63a7eb5b141975b9a06f58e554555b3209b /view
parenta5cb47c3d2a137f9823da26d03126f987d7fcecf (diff)
downloadvolse-hubzilla-34fd387438f5f3d06b0a1c26d5c7ca5c1f5bd270.tar.gz
volse-hubzilla-34fd387438f5f3d06b0a1c26d5c7ca5c1f5bd270.tar.bz2
volse-hubzilla-34fd387438f5f3d06b0a1c26d5c7ca5c1f5bd270.zip
this commit is an attempt to make conv items better scalable on smaller screens. also save some horizontal space.
Diffstat (limited to 'view')
-rw-r--r--view/css/bootstrap-red.css4
-rw-r--r--view/css/conversation.css33
-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.tpl9
-rwxr-xr-xview/tpl/jot.tpl2
8 files changed, 38 insertions, 36 deletions
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..484941926 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,14 +138,9 @@
.wall-item-info {
display: block;
float: left;
- width:110px;
margin-right:10px;
}
-.comment .wall-item-info {
- width: 70px;
-}
-
.wallwall .wwto {
left: 50px;
margin: 0;
@@ -166,7 +161,6 @@
margin-top: 0px;
margin-left: 10px;
margin-bottom: 10px;
- width: 100px;
}
.wall-item-photo-menu-button {
@@ -203,15 +197,15 @@
.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 {
@@ -233,14 +227,8 @@
}
.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 +246,7 @@
}
.wall-item-content img {
- max-width: 95% !important;
+ max-width: 95%;
}
.wall-item-title {
@@ -354,10 +342,7 @@
}
.comment-edit-photo {
- margin-top: 10px;
- margin-left: 10px;
- margin-bottom: 10px;
- width: 100px;
+ margin: 10px;
float: left;
}
@@ -386,15 +371,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..1e7fcbab5 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>
@@ -33,13 +35,12 @@
<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>
+ <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}}" title="{{$item.location}}">{{$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>