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

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)

view/css/bootstrap-red.css

@@ -120,3 +120,7 @@ nav .navbar-collapse .navbar-right {
 	height: 32px;
 	margin-right: 5px;
 }
+
+code {
+	white-space: normal;
+}

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;
+	max-width: 30%;
-	width: 100%;
 }
 
 .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: 10px;
-	margin-left: 10px;
-	margin-bottom: 10px;
-	width: 100px;
 	float: left;
 }
 
@@ -386,15 +371,15 @@
 }
 
 .comment-edit-text-empty {
-	height: 1.0em;
+	height: 1.2em;
-	width: 270px; 
+	width: 30%;
 	overflow: auto;
 	margin-bottom: 10px;
 }
 
 .comment-edit-text-full {
 	height: 150px;
-	width: 80%;
+	width: 50%;
 	overflow: auto;
 }
 

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

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;

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')) {
+	if($(comment).hasClass('comment-edit-text-empty')) {
-//		$(".comment-edit-bb-" + id).hide();
+		$(".comment-edit-bb-" + id).hide();
-//		return true;
+		return true;
-//	}
+	}
 	return false;
 }
 

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

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>

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>