From 27810e7864d083cfe97aef7e6bff2b1ce2e71388 Mon Sep 17 00:00:00 2001
From: Cameron <cameron@e107coders.org>
Date: Sun, 24 Feb 2013 01:08:40 -0800
Subject: [PATCH] Comments Template reworked with bootstrap styling. (shouldn't
 affect v1.x comments in e107_themes/templates)

---
 .../shortcodes/batch/comment_shortcodes.php   | 11 +--
 e107_core/templates/comment_template.php      | 71 ++++++++++---------
 e107_handlers/comment_class.php               | 34 ++++++---
 e107_web/css/e107.css                         | 15 ++--
 4 files changed, 78 insertions(+), 53 deletions(-)

diff --git a/e107_core/shortcodes/batch/comment_shortcodes.php b/e107_core/shortcodes/batch/comment_shortcodes.php
index b17dcef66..43e985c35 100644
--- a/e107_core/shortcodes/batch/comment_shortcodes.php
+++ b/e107_core/shortcodes/batch/comment_shortcodes.php
@@ -91,7 +91,7 @@ class comment_shortcodes extends e_shortcode
 		{
 			if ($thisaction == "comment" && $pref['nested_comments']) 
 			{
-				$REPLY = "<a id='e-comment-reply-".$this->var['comment_id']."' class='e-comment-reply btn' data-type='".$this->var['comment_type']."' data-target='".e_BASE."comment.php' href='".SITEURL."comment.php?reply.".$thistable.".".$this->var['comment_id'].".".$thisid."'>".COMLAN_326."</a>";
+				$REPLY = "<a id='e-comment-reply-".$this->var['comment_id']."' class='e-comment-reply btn btn-mini' data-type='".$this->var['comment_type']."' data-target='".e_BASE."comment.php' href='".SITEURL."comment.php?reply.".$thistable.".".$this->var['comment_id'].".".$thisid."'>".COMLAN_326."</a>";
 			}
 		}
 		return $REPLY;
@@ -179,14 +179,14 @@ class comment_shortcodes extends e_shortcode
 		}
 		
 		// TODO put into a <ul> drop-down format. 
-		$text = "<a href='#' data-target='".e_BASE."comment.php' id='e-comment-delete-".$this->var['comment_id']."' class='e-comment-delete btn'>Delete</a> ";
+		$text = "<a href='#' data-target='".e_BASE."comment.php' id='e-comment-delete-".$this->var['comment_id']."' class='e-comment-delete btn btn-mini'>Delete</a> ";
 		
 		if($this->var['comment_blocked'] == 2) // pending approval. 
 		{
-			$text .= "<a href='#' data-target='".e_BASE."comment.php' id='e-comment-approve-".$this->var['comment_id']."' class='e-comment-approve'>Approve</a> ";
+			$text .= "<a href='#' data-target='".e_BASE."comment.php' id='e-comment-approve-".$this->var['comment_id']."' class='e-comment-approve btn btn-mini'>Approve</a> ";
 		}
 		return $text;
-		
+		/*
 		$url 		= e_PAGE."?".e_QUERY;
 		
 		$unblock 	= "[<a href='".e_ADMIN_ABS."comment.php?unblock-".$comrow['comment_id']."-$url-".$comrow['comment_item_id']."'>".COMLAN_1."</a>] ";
@@ -195,6 +195,7 @@ class comment_shortcodes extends e_shortcode
 		$userinfo 	= "[<a href='".e_ADMIN_ABS."userinfo.php?".e107::getIPHandler()->ipDecode($comrow['comment_ip'])."'>".COMLAN_4."</a>]";
 			
 		return $unblock.$block.$delete.$userinfo;
+		 * */
 	}
 	
 	
@@ -260,7 +261,7 @@ class comment_shortcodes extends e_shortcode
 		}
 		else
 		{
-			return e107::getForm()->textarea('comment',$this->var['comval'], 3, 50,$options);						
+			return e107::getForm()->textarea('comment',$this->var['comval'], 3, 80,$options);						
 		}		
 	}		
 	
diff --git a/e107_core/templates/comment_template.php b/e107_core/templates/comment_template.php
index 3eeaae0ab..a500d4e43 100644
--- a/e107_core/templates/comment_template.php
+++ b/e107_core/templates/comment_template.php
@@ -20,14 +20,14 @@ if (!defined("USER_WIDTH")){ define("USER_WIDTH", "width:100%"); }
 global $sc_style;
 global $pref, $comrow, $row2, $tp, $NEWIMAGE, $USERNAME, $RATING;
 
-$sc_style['SUBJECT']['pre'] = "<b>";
-$sc_style['SUBJECT']['post'] = "</b>";
+$sc_style['SUBJECT']['pre'] = "";
+$sc_style['SUBJECT']['post'] = "";
 
-$sc_style['USERNAME']['pre'] = "<b>";
-$sc_style['USERNAME']['post'] = "</b>";
+$sc_style['USERNAME']['pre'] = "";
+$sc_style['USERNAME']['post'] = "";
 
-$sc_style['TIMEDATE']['pre'] = "";
-$sc_style['TIMEDATE']['post'] = "";
+$sc_style['TIMEDATE']['pre'] = "<small>";
+$sc_style['TIMEDATE']['post'] = "</small>";
 
 $sc_style['AVATAR']['pre'] = "";
 $sc_style['AVATAR']['post'] = "";
@@ -89,11 +89,11 @@ $sc_style['COMMENT_RATE']['post'] 		= '</div>';
 //$sc_style['USER_AVATAR']['pre']  		= '<div class="comment-avatar center">';
 //$sc_style['USER_AVATAR']['post'] 		= '</div>';
 
-$sc_style['COMMENT_MODERATE']['pre']	= '<span class="comment-moderate span2">';
-$sc_style['COMMENT_MODERATE']['post']	= '</span>';
+$sc_style['COMMENT_MODERATE']['pre']	= '<div class="comment-moderate btn-group span2">';
+$sc_style['COMMENT_MODERATE']['post']	= '</div>';
 
-$sc_style['MODERATE']['pre']	= '<span class="span2">';
-$sc_style['MODERATE']['post']	= '</span>';
+$sc_style['MODERATE']['pre']	= '<div class="span12" style="padding:10px">';
+$sc_style['MODERATE']['post']	= '</div>';
 
 
 $COMMENT_TEMPLATE['FORM']			= "
@@ -115,36 +115,41 @@ $COMMENT_TEMPLATE['FORM']			= "
 	<div class='clear_b'><!-- --></div>"; 
 
 
+$COMMENT_TEMPLATE['ITEM_START'] = "<ul class='comments'>";
+
+$COMMENT_TEMPLATE['ITEM_END'] 	= "</ul>";
+
+
 $COMMENT_TEMPLATE['ITEM'] = '
-	<div class="comment-box-left pull-left span1">
-		{COMMENT_AVATAR}
-	</div>
-
-	<div class="comment-box-right pull-left span10">
-		
-
-			<span class="comment-box-username span1">{USERNAME}</span>
-			<span class="comment-box-date span2">{TIMEDATE}</span>
-			
-			<span class="comment-status span2">{COMMENT_STATUS}</span>
-			<span class="comment-user-badge-bar span6">
-				{COMMENT_RATE} {REPLY} {COMMENTEDIT} {COMMENT_MODERATE}			
-			</span>
-
-			<div class="clear_b H5"><!-- --></div>
-			<div id="{COMMENT_ITEMID}-edit" contentEditable="false" class="span12">
-			<p>
-			{COMMENT}
-			</p>
+	
+		<div class="comment-box-left pull-left span1">
+			{COMMENT_AVATAR}
+		</div>	
+		<div class="comment-box-right pull-left span11">
+			<div class="row-fluid">
+				
+					<div class="comment-box-username span1">{USERNAME}</div>
+					<div class="comment-box-date span2">{TIMEDATE}</div>
+					<div class="comment-status span3">{COMMENT_STATUS}</div>
+					<div class="comment-moderate span6">{COMMENT_RATE} {REPLY} {COMMENTEDIT} {COMMENT_MODERATE}</div>
+				
 			</div>
 			
-		
-	</div>';
+			<div class="row-fluid">	
+				<div class="span12" id="{COMMENT_ITEMID}-edit" contentEditable="false" >
+					<p>
+						{COMMENT}
+					</p>
+				</div>
+			</div>	
+			
+		</div>
+	';
 	
 
 
 
-$COMMENT_TEMPLATE['LAYOUT'] 		= '{COMMENTFORM}{COMMENTS}{MODERATE}';
+$COMMENT_TEMPLATE['LAYOUT'] 		= '{COMMENTFORM}{COMMENTS} <div style="padding:10px 0px">{MODERATE}</div>';
 										
 
 ?>
\ No newline at end of file
diff --git a/e107_handlers/comment_class.php b/e107_handlers/comment_class.php
index 128f79e40..3d7d2ca06 100644
--- a/e107_handlers/comment_class.php
+++ b/e107_handlers/comment_class.php
@@ -95,9 +95,9 @@ class comment
 				</table>
 				<br />";
 			*/	
-			$COMMENT_TEMPLATE['ITEM_START'] = "";
+			
 			$COMMENT_TEMPLATE['ITEM'] 		= $COMMENTSTYLE;	
-			$COMMENT_TEMPLATE['ITEM_END'] 	= "";
+			
 			$COMMENT_TEMPLATE['LAYOUT'] 	= "{COMMENTS}{COMMENTFORM}{MODERATE}{COMMENTNAV}";
 			$COMMENT_TEMPLATE['FORM']			= "<table style='width:100%'>
 													{SUBJECT_INPUT}
@@ -399,8 +399,12 @@ class comment
 		
 		$COMMENT_TEMPLATE 					= $this->template; 
 		
-		$COMMENT_TEMPLATE['ITEM_START'] 	= "\n\n<div id='{COMMENT_ITEMID}' class='comment-box clearfix'>\n";
-		$COMMENT_TEMPLATE['ITEM_END']		= "\n</div><div class='clear_b'><!-- --></div>\n";
+	//	$COMMENT_TEMPLATE['ITEM_START'] 	= "\n\n<div id='{COMMENT_ITEMID}' class='comment-box clearfix'>\n";
+	//	$COMMENT_TEMPLATE['ITEM_END']		= "\n</div><div class='clear_b'><!-- --></div>\n";
+		
+		//XXX Do NOT add to template - too important to allow for modification. 
+		$COMMENT_TEMPLATE['ITEM_START'] 	= "\n\n<li id='{COMMENT_ITEMID}' class='comment-box clearfix'>\n";
+		$COMMENT_TEMPLATE['ITEM_END']		= "\n</li>\n";
 			
 		if (vartrue($pref['nested_comments']))
 		{
@@ -945,15 +949,18 @@ class comment
 		
 		if($text)
 		{
+			$modcomment = "<div class='comment-options'>";		
 			if($this->totalComments && getperms("B"))
 			{
-					$modcomment = "<div class='comment-moderate'>";		
+					
 				//	$modcomment .= "<a href='".e_ADMIN_ABS."modcomment.php?$table.$id'>".COMLAN_314."</a>";
-					$modcomment .= "<a class='btn' href='".e_ADMIN_ABS."comment.php?searchquery={$id}&filter_options=comment_type__".$this->getCommentType($table)."'>".COMLAN_314."</a>";		
-					$modcomment .= "</div>";
+					$modcomment .= "<a class='btn btn-mini' href='".e_ADMIN_ABS."comment.php?searchquery={$id}&filter_options=comment_type__".$this->getCommentType($table)."'>".COMLAN_314."</a>";		
+					
+					
 			}
 			
 			$modcomment .= 	$this->nextprev($table,$id,$from);
+			$modcomment .= "</div>";
 		}	
 	// ---------------------------
 		
@@ -968,7 +975,8 @@ class comment
 		
 		if($text)
 		{
-			$text = "<div id='comments-container'>\n".$text."\n</div>";
+			//XXX Do NOT add to template - too important to allow for modification. 
+			$text = "<ul id='comments-container'>\n".$text."\n</ul>";
 		}
 		$search = array("{MODERATE}","{COMMENTS}","{COMMENTFORM}","{COMMENTNAV}");
 		$replace = array($modcomment,$text,$comment,$pagination);
@@ -1049,7 +1057,9 @@ class comment
 		$lock 			= '';
 
 		if ($sql->db_Select_gen($query))
-		{			
+		{
+		//	$text .= "<ul class='comments'>";
+						
 			$width = 0; 			
 			$rows = $sql->db_getList(); //Shortcodes could use $sql, so just grab all results
 
@@ -1073,6 +1083,8 @@ class comment
 				}
 			} // end loop
 			
+		//	$text .= "</ul>";
+			
 		} // end if
 					
 		return array('comments'=> $text,'lock'=> $lock);		
@@ -1088,9 +1100,9 @@ class comment
 		
 		// from calculations are done by eNav() js. 
 		return "
-		<a class='e-ajax btn' href='#' data-nav-total='{$this->totalComments}' data-nav-dir='down' data-nav-inc='{$this->commentsPerPage}' data-target='comments-container' data-src='".e_BASE."comment.php?mode=list&amp;type=".$table."&amp;id=".$id."&amp;from=0'>Previous</a>
+		<a class='e-ajax btn btn-mini' href='#' data-nav-total='{$this->totalComments}' data-nav-dir='down' data-nav-inc='{$this->commentsPerPage}' data-target='comments-container' data-src='".e_BASE."comment.php?mode=list&amp;type=".$table."&amp;id=".$id."&amp;from=0'>Previous</a>
 		
-		<a class='e-ajax btn' href='#' data-nav-total='{$this->totalComments}' data-nav-dir='up' data-nav-inc='{$this->commentsPerPage}' data-target='comments-container' data-src='".e_BASE."comment.php?mode=list&amp;type=".$table."&amp;id=".$id."&amp;from=0'>Next</a>
+		<a class='e-ajax btn btn-mini' href='#' data-nav-total='{$this->totalComments}' data-nav-dir='up' data-nav-inc='{$this->commentsPerPage}' data-target='comments-container' data-src='".e_BASE."comment.php?mode=list&amp;type=".$table."&amp;id=".$id."&amp;from=0'>Next</a>
 		
 		";	
 		
diff --git a/e107_web/css/e107.css b/e107_web/css/e107.css
index 521fcbd30..d5034c943 100644
--- a/e107_web/css/e107.css
+++ b/e107_web/css/e107.css
@@ -127,11 +127,14 @@ h1.bbcode, h2.bbcode, h3.bbcode, h4.bbcode, h5.bbcode, h6.bbcode {  }/* override
 
 div.bbcode { margin: 15px 0px; clear: both; } /* layout control via bbcodes */
 
-
+#comments-container { list-style: none outside none; margin:0px }
+#comments-container > li { padding: 5px 0px }
 /* default comments layout   */
 
 
-
+/*
+ 
+ XXX Get Comments looking reasonable on bootstrap AND old themes. 
 .comment-box										{ padding-bottom:10px; margin-bottom:10px; border-top:1px solid #C0C0C0;  }
 
 .comment-box-left									{ float:left; text-align:center; width:15%; min-width:100px; max-width:150px }
@@ -161,6 +164,9 @@ img.user-avatar										{ max-width:128px; -webkit-box-shadow:#CCCCCC 0px 0px 1
     resize: none;
     width: auto !important;
 }
+
+
+
 .comment-status										{ float:right; font-style: italic }
 
 a.comment-edit										{ }
@@ -174,7 +180,7 @@ a.comment-edit										{ }
 .comment-moderate									{ text-align:center }
 
 .comment-rate										{ text-align:right; float:right; width:100px }
-
+*/
 div.e-comment-edit-save								{ margin-top:8px; padding: 5px }
 .e-comment-edit-active								{ -webkit-box-shadow:#CCCCCC 0px 0px 10px; -moz-box-shadow:#CCCCCC  0px 0px 10px; box-shadow:#CCCCCC 0px 0px 10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
 .e-comment-edit-success								{ padding:5px; text-align:center; background-color:#DFFFDF; border: 1px solid #009900; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }										
@@ -183,10 +189,11 @@ div.e-comment-edit-save								{ margin-top:8px; padding: 5px }
 .e-rate-up img										{ opacity: 0.4 }
 .e-rate-down img									{ opacity: 0.4 }
 
+/*
 #comments-container .comment-box:nth-child(even) {
      background: red;
 }
-    
+ */   
 .divider 											{ border-bottom: 1px solid silver;  font-size: 18px;  margin-bottom: 30px;  position: relative;  text-align: center; }
 .divider span 										{ padding: 0 15px; position: relative; top: 10px; }