feature 2587: new comments layout

git-svn-id: http://piwigo.org/svn/trunk@13762 68402e56-0260-453c-a942-63ccdbb3a9ee

2 files changed, 81 insertions, 32 deletions

diff --git a/themes/elegant/template/picture.tpl b/themes/elegant/template/picture.tpl
index e509ccaf1..948229e38 100644
--- a/themes/elegant/template/picture.tpl
+++ b/themes/elegant/template/picture.tpl
@@ -53,7 +53,7 @@ function toggleDerivativeSwitchBox()
 {/literal}{/footer_script}
 {strip}<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
 <span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span></a>
-<div id="derivativeSwitchBox" class="switchBox" onclick="toggleDerivativeSwitchBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleDerivativeSwitchBox()">
+<div id="derivativeSwitchBox" class="switchBox" onclick="toggleDerivativeSwitchBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e.parentNode.parentNode==this||e==this||toggleDerivativeSwitchBox()">
 <div class="switchBoxTitle">{'Photo sizes'|@translate}</div>
 {foreach from=$current.unique_derivatives item=derivative key=derivative_type}
 <span class="derivativeChecked switchCheck"
@@ -352,31 +352,42 @@ function togglePrivacyLevelBox()
 <div id="comments" {if (!isset($comment_add) && ($COMMENT_COUNT == 0))}class="noCommentContent"{else}class="commentContent"{/if}><div id="commentsSwitcher"></div>
 	{if $COMMENT_COUNT > 0}
 		<h3>{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3>
-		{if $COMMENT_COUNT > 2}
-			<a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow">{$COMMENTS_ORDER_TITLE}</a>
-		{/if}
 	{else}
 		<h3 class="noCommentText">{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3>
 	{/if}
-	{if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
-
-	{if isset($comments)}
-		{include file='comment_list.tpl'}
-	{/if}
-
-	{if isset($comment_add)}
-	<form method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment">
-	<fieldset>
-		<legend>{'Add a comment'|@translate}</legend>
-		{if $comment_add.SHOW_AUTHOR}
-		<label>{'Author'|@translate}<input type="text" name="author"></label>
+	
+	<div id="pictureComments">
+		{if isset($comment_add)}
+			<div id="commentAdd">
+				<h4>{'Add a comment'|@translate}</h4>
+				<form  method="post" action="{$comment_add.F_ACTION}" class="filter" id="addComment" >
+					{if $comment_add.SHOW_AUTHOR}
+						<p><label>{'Author'|@translate}&nbsp;:</label></p>
+						<p><input type="text" name="author" /></p>
+					{/if}
+					<p><label>{'Comment'|@translate}&nbsp;:</label></p>
+					<p><textarea name="content" id="contentid" rows="10" cols="50">{$comment_add.CONTENT}</textarea></p>
+					<p><input type="hidden" name="key" value="{$comment_add.KEY}" />
+					   <input class="submit" type="submit" value="{'Submit'|@translate}"></p>
+				</form>
+			</div>
 		{/if}
-		<label>{'Comment'|@translate}<textarea name="content" id="contentid" rows="5" cols="80">{$comment_add.CONTENT}</textarea></label>
-		<input type="hidden" name="key" value="{$comment_add.KEY}">
-		<input type="submit" value="{'Submit'|@translate}">
-	</fieldset>
-	</form>
-	{/if}
+		{if isset($comments)}
+			<div id="pictureCommentList">
+				{if (($COMMENT_COUNT > 2) || !empty($navbar))}
+					<div id="pictureCommentNavBar">
+						{if $COMMENT_COUNT > 2}
+							<a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow" class="commentsOrder">{$COMMENTS_ORDER_TITLE}</a>
+						{/if}
+						{if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
+					</div>
+				{/if}
+				{include file='comment_list.tpl'}
+			</div>
+		{/if}
+		<div style="clear: both;"></div>
+	</div>
+
 </div>
 {/if}{*comments*}
 
diff --git a/themes/elegant/theme.css b/themes/elegant/theme.css
index c6b072249..f0f0ae557 100644
--- a/themes/elegant/theme.css
+++ b/themes/elegant/theme.css
@@ -10,6 +10,8 @@ html, body									{ background-color: #111;}
 #thePicturePage, #imageHeaderBar			{ background-color: #111;}
 #imageInfos, #infoSwitcher.infohidden 		{ background-color: #333;}
 #thePicturePage #comments 					{ background-color: #333;}
+#pictureCommentList li 						{ background-color: #444;}
+#pictureCommentList .commentElement 			{ background-color: transparent;}
 
 .switchBox, .header_notes 					{ background-color: #555;}
 .thumbnailCategory, .commentElement 			{ background-color: #333;}
@@ -17,8 +19,9 @@ html, body									{ background-color: #111;}
 
 INPUT[type="text"], INPUT[type="password"],
 INPUT[type="button"], INPUT[type="submit"],
-INPUT[type="reset"], INPUT[type="file"]		{ background-color: #999;}
-INPUT:focus, SELECT:focus, TEXTAREA:focus	{ background-color: #ccc;}
+INPUT[type="reset"], INPUT[type="file"],
+SELECT, TEXTAREA							{ background-color: #555;}
+INPUT:focus, SELECT:focus, TEXTAREA:focus	{ background-color: #666;}
 
 
 /* font colors */
@@ -30,6 +33,11 @@ INPUT.rateButton							{ color: #fff;}
 H1, H3, INPUT.rateButtonSelected 			{ color: #ccc;}
 .message									{ color: #fff;}
 .commentContent .comments_toggle:hover		{ color: #fff;}
+INPUT[type="text"], INPUT[type="password"],
+INPUT[type="button"], INPUT[type="submit"],
+INPUT[type="reset"], INPUT[type="file"],
+SELECT, TEXTAREA							{ color: #ccc;}
+INPUT:focus, SELECT:focus, TEXTAREA:focus	{ color: #fff;}
 
 
 /* borders */
@@ -39,7 +47,7 @@ H1, H3, INPUT.rateButtonSelected 			{ color: #ccc;}
 #copyright								 	{ border-top-width:2px;}
 .switchBox 									{ border: 1px solid #000;}
 .switchBoxTitle 								{ border-bottom: 1px solid #444;}
-FIELDSET, INPUT, SELECT, TEXTAREA 			{ border: 1px solid #999;}
+FIELDSET, INPUT, SELECT, TEXTAREA 			{ border: 1px solid #777;}
 
 
 /* icons */ 
@@ -143,7 +151,7 @@ a:hover 		{ border-bottom: none;}
 }
 .switchBox .switchCheck 				{ width: 18px; text-align: left; display: inline-block; line-height:17px;}
 .switchBox .switchUnselected 		{ margin-left: 18px; line-height:17px;}
-
+.derivativeSizeDetails				{ display: none;}
 
 /* thumbnails */
 
@@ -222,16 +230,46 @@ a:hover 		{ border-bottom: none;}
 
 #thePicturePage #comments 			{ padding: 2px 5px;}
 #thePicturePage #comments h3 			{ margin: 10px 0;}
-#thePicturePage #comments form 		{ margin-bottom: 10px;}
+#thePicturePage #comments form 		{ margin: 10px 0;}
 #thePicturePage #comments fieldset		{ margin: 0 1em;}
 
 .noCommentText						{ display:block;}
-.commentshidden ul,
-.commentshidden form 					{display:none;}
-.commentContent .comments_toggle 	{cursor: pointer;}
-
+.commentshidden #pictureComments		{ display: none;}
+.commentContent .comments_toggle 	{ cursor: pointer;}
+
+#commentAdd, #pictureCommentList 	{ width: 48%; padding: 0 1%;}
+#commentAdd  						{ float: left; }
+#pictureCommentList 					{ float: right; }
+
+#commentAdd input[type="text"],
+#commentAdd textarea {
+	min-width: 95%;
+	max-width: 95%;
+	width: 95%;
+	font-family: Arial,Helvetica,sans-serif;
+	font-size: 100%;
+}
+#pictureCommentList li {
+	clear: both;
+	display: block;
+	padding: 0.5em 0;
+	margin-bottom: 5px;
+	border-radius: 5px;
+	width: 100%;
+}
+#pictureCommentList ul 				{ list-style: none; padding: 0;}
+#pictureCommentList li ul				{ list-style-type: none; padding: 4px;}
+#pictureCommentList .author 			{ font-weight: bold;}
+#pictureCommentList .date 			{ font-style: italic;}
+#pictureCommentList .commentsOrder	{ float: left; margin-bottom: 5px;}
+#pictureCommentList .navigationBar	{ float: right; margin-bottom: 5px;}
+#pictureComments h4					{ margin: 0;}
+#pictureComments form p				{ margin: 5px 0;}
+#pictureComments form p textarea		{ margin: 10px 0;}
+#pictureComments INPUT				{ margin: 10px;}
+#pictureComments INPUT[type=submit]	{ margin: 0;}
 
 /* plugins */
 
 #the_page .content .stuffs 		{ margin: 0!important}
-.categoryActions .theme_menuf 	{ display: none;}
\ No newline at end of file
+.categoryActions .theme_menuf 	{ display: none;}