Update and enhance mobile view

css/base.css

@@ -1,33 +1,56 @@
-textarea,input,select {
+/* Global CSS styles across every theme */
-	border: 1px solid #000;
-	background: #000;
-	color: #EEE;
-	font: 10pt monospace;
-}
-input[type=radio] {
-	border: none;
-}
-input[type=submit] {
-	border: #000 solid 2px;
-	font: 10pt 'verdana', sans-serif;
-}
-body, table, thead, tbody, span, td, tr, th, a, img, br { padding: 0; margin: 0; border: 0; font-size: 100%; }
-center { text-align: center; }
-.tdbgh, .tbl, .tdbgc, .tdbg1, .tdbg2 { line-height: 1; padding: 1px;}
-table { border-spacing: 0; border-collapse: collapse; }
-a:link,a:visited,a:active,a:hover { text-decoration:none; font-weight: bold; }
-table { padding: 0.5em; }
-span.lastpost { font-size: 90%; padding: 0; margin: 0; }
-div.lastpost { font-size: 90%; text-align: right !important; }
 
-.table { width: 100%; empty-cells: show;}
+/* Make images upscale crispy */
-.sparkline { display: none; }
+* {
-.center, center { text-align: center; }
+  image-rendering: -moz-crisp-edges;
-.right { text-align: right; }
+  image-rendering: -o-crisp-edges;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  image-rendering: pixelated;
+  -ms-interpolation-mode:nearest-neighbor;
+  }
 
-code { overflow: auto; width: 100%; white-space: pre; display: block; }
+/* Make all links bold and not underlined by default */
-code br { display: none; }
+a:link,a:visited,a:active,a:hover{text-decoration:none;font-weight:bold;}
 
+/* Mostly legacy thing from when IE had a blue border around link images */
+img { border:none; }
+.center	{text-align:center}
+.right	{text-align:right}
+
+/* Make code blocks scroll instead of stretching the page */
+code {
+	overflow:		auto;
+	width:			100%;
+	white-space:	pre;
+	display:		block;
+}
+
+/* "Fix" for auto-generated <br> tags in <code> and <pre> blocks */
+code br, pre br { display: none; }
+
+/* Make radio buttons look not terrible */
+input[type=radio] { color: black; background: white; }
+
+/* Spoiler tag code */
 .pstspl1 {opacity:0;}
 .pstspl1:hover {opacity:1;}
 .pstspl2 {background:#000;color:#FFF;display:block;}
+
+/* Stop avatars from being huge */
+.avatar	{
+	max-width:	200px;
+	}
+
+/* On mobile, make avatars smaller */
+.mobile-avatar {
+	float:	left;
+	height:	50px;
+	width:	50px;
+	padding: 2px;
+	text-align:	center;
+}
+.mobile-avatar > .avatar {
+	max-height:	100%;
+	max-width:	100%;
+}

css/basics.css

@@ -0,0 +1,33 @@
+textarea,input,select {
+	border: 1px solid #000;
+	background: #000;
+	color: #EEE;
+	font: 10pt monospace;
+}
+input[type=radio] {
+	border: none;
+}
+input[type=submit] {
+	border: #000 solid 2px;
+	font: 10pt 'verdana', sans-serif;
+}
+body, table, thead, tbody, span, td, tr, th, a, img, br { padding: 0; margin: 0; border: 0; font-size: 100%; }
+center { text-align: center; }
+.tdbgh, .tbl, .tdbgc, .tdbg1, .tdbg2 { line-height: 1; padding: 1px;}
+table { border-spacing: 0; border-collapse: collapse; }
+a:link,a:visited,a:active,a:hover { text-decoration:none; font-weight: bold; }
+table { padding: 0.5em; }
+span.lastpost { font-size: 90%; padding: 0; margin: 0; }
+div.lastpost { font-size: 90%; text-align: right !important; }
+
+.table { width: 100%; empty-cells: show;}
+.sparkline { display: none; }
+.center, center { text-align: center; }
+.right { text-align: right; }
+
+code { overflow: auto; width: 100%; white-space: pre; display: block; }
+code br { display: none; }
+
+.pstspl1 {opacity:0;}
+.pstspl1:hover {opacity:1;}
+.pstspl2 {background:#000;color:#FFF;display:block;}

lib/layout.php

@@ -73,43 +73,25 @@
 		// special "null" scheme.
 		$css = "";
 	} elseif (isset($schemetype) && $schemetype == 1) {
-		$css = "<link rel='stylesheet' href='/css/base.css' type='text/css'><link rel='stylesheet' type='text/css' href='/css/$schemefile.css'>";
+		$css = "<link rel='stylesheet' href='/css/basics.css' type='text/css'><link rel='stylesheet' type='text/css' href='/css/$schemefile.css'>";
 		// possibly causes issue #19 - not sure why this was here
 		// likely irrelevant after addition of custom date formats
 		// (remove this later)
 		//$dateformat = "m/d/y h:i";
 		//$dateshort  = "m/d/y";
-		
+
 		// backwards compat
 		global $bgcolor, $linkcolor;
 		$bgcolor = "000";
 		$linkcolor = "FFF";
 	} else {
 		$css="
+			<link rel='stylesheet' href='/css/base.css' type='text/css'>
 			<style type='text/css'>
-			html, img { image-rendering: -moz-crisp-edges; }
+			a			{	color: #$linkcolor;	}
-/*			
+			a:visited	{	color: #$linkcolor2;	}
-			body	{
+			a:active	{	color: #$linkcolor3;	}
-				cursor:	url('images/ikachanpointer.png'), default;
+			a:hover		{	color: #$linkcolor4;	}
-				}
-			a:link {
-				cursor:	url('images/ikachanpointer2.png'), pointer;
-				}
-*/			a:link,a:visited,a:active,a:hover{text-decoration:none;font-weight:bold;}
-			a {
-				color: #$linkcolor;
-			}
-			a:visited {
-				color: #$linkcolor2;
-			}
-			a:active {
-				color: #$linkcolor3;
-			}
-			a:hover {
-				color: #$linkcolor4;
-			}
-			img { border:none; }
-			pre br { display: none; }
 			body {
 				scrollbar-face-color:		#$scr3;
 				scrollbar-track-color:		#$scr7;
@@ -133,25 +115,11 @@
 			.tdbg2	{background:#$tablebg2}
 			.tdbgc	{background:#$categorybg}
 			.tdbgh	{background:#$tableheadbg;}
-			.center	{text-align:center}
-			.right	{text-align:right}
 			.table	{empty-cells:	show; width: $tablewidth;
 					 border-top:	#$tableborder 1px solid;
 					 border-left:	#$tableborder 1px solid;}
 			td.tbl	{border-right:	#$tableborder 1px solid;
 					 border-bottom:	#$tableborder 1px solid}
-			code {
-				overflow:		auto;
-				width:			100%;
-				white-space:	pre;
-				display:		block;
-			}
-			code br { display: none; }
-			input[type=radio] { color: black; background: white; }
-			
-			.pstspl1 {opacity:0;}
-			.pstspl1:hover {opacity:1;}
-			.pstspl2 {background:#000;color:#FFF;display:block;}
 		";
 	}
 

lib/threadpost.php

@@ -19,26 +19,24 @@
 
 		if($post['picture'] || ($post['moodid'] && $post['moodurl'])){
 			$post['picture']  = str_replace('>','%3E',$post['picture']);
-			$set['userpic']   = "<img src=\"{$post['picture']}\">";
+			$set['userpic']   = "<img class='avatar' src=\"{$post['picture']}\">";
 			$set['picture']   = $post['picture'];
 
 			if ($post['moodid'] && $post['moodurl']) {
-				$set['userpic'] = "<img src=\"". str_replace(array('$', '>'), array($post['moodid'], '%3E'), $post['moodurl']) ."\">";
+				$set['userpic'] = "<img class='avatar' src=\"". str_replace(array('$', '>', '"'), array($post['moodid'], '%3E', '%22'), $post['moodurl']) ."\">";
-				$set['picture'] = str_replace(array('$', '>'), array($post['moodid'], '%3E'), $post['moodurl']);
+				$set['picture'] = str_replace(array('$', '>', '"'), array($post['moodid'], '%3E', '%22'), $post['moodurl']);
 			}
-			//   $userpicture="<img src=\"$user['picture']\" name=pic$p onload=sizelimit(pic$p,60,100)>";
 		}
 
 		if($post['signtext']) {
 			$post['signtext']=$sep[$loguser['signsep']].$post['signtext'];
 		}
 
-		if($pthread) { 
+		if($pthread) {
 			$set['threadlink'] = "<a href=thread.php?id={$pthread['id']}>{$pthread['title']}</a>";
 		}
 
 		$post['text']=doreplace2($post['text'], $post['options']);
-	//  if (strpos($post['text'], "http://hyperhacker.no-ip.org/b/smilies/lolface.png") || strpos($post['text'], "images/smilies/roflx.gif")) $post['text'] = "<img src=images/smilies/roflx.gif><br><br><small>(Excessive post content hidden)</small>";
 
 		if (filter_int($post['editdate'])) {
 			$post['edited'] = " (last edited by {$post['edited']} at ".date($dateformat,$post['editdate']+$tzoff).")";
@@ -70,7 +68,7 @@
 	function setlayout($post) {
 		global $sql,$loguser,$postl;
 
-		if($loguser['viewsig']!=1) { 
+		if($loguser['viewsig']!=1) {
 			$post['headid']=$post['signid']=0;
 		}
 

mobile.css

@@ -1,4 +0,0 @@
-a:link,a:visited,a:active,a:hover{text-decoration:none;font-weight:bold}
-html { width: 480px; }
-body { background: #079; color: #fff;}
-

tlayouts/compact.php

@@ -1,5 +1,8 @@
 <?php
-  function userfields(){return 'posts,sex,powerlevel,birthday,aka';}
+ // function userfields(){return 'posts,sex,powerlevel,birthday,aka';}
+  function userfields(){
+      return 'posts,sex,powerlevel,picture,aka';
+  }
 
   function postcode($post,$set){
     global $smallfont,$ip,$quote,$edit, $tblstart;
@@ -7,14 +10,15 @@
     $postnum=($post[num]?"$post[num]/":'').$post[posts];
     if($set[threadlink]) $threadlink=", in $set[threadlink]";
     return "$tblstart
-	$set[tdbg]>
+	$set[tdbg]><div class='mobile-avatar'>$set[userpic]</div>
 	  $set[userlink]<br>
 	  $smallfont Posts: $postnum</td>
 	$set[tdbg] width=50% align=right>
 	    $smallfont Posted on $set[date]$threadlink
-	   <br>$quote$edit$ip
+	   <br>$quote$edit
+       <br>$ip
 	  <tr>
-	$set[tdbg] height=60 colspan=2 id=\"post". $post['id'] ."\">$post[headtext]$post[text]$post[signtext]$set[edited]</td></table>
+	$set[tdbg] height=60 colspan=2 id=\"post". $post['id'] ."\">$post[headtext]$post[text]$post[signtext]$set[edited]</td></table><br>
     ";
   }
-?>
+?>