this commit is an attempt to make conv items better scalable on smaller screens. also save some horizontal space.

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>