From 9c06bb55645c314541fdcff9e9611b38ca0694ac Mon Sep 17 00:00:00 2001
From: rvelices <rv-github@modusoptimus.com>
Date: Mon, 2 Apr 2012 20:49:46 +0000
Subject: - comment edit form looks ok now with the new comment layout -
 removed unused css / simplify it - simplified jquery drop boxes ...

git-svn-id: http://piwigo.org/svn/trunk@13865 68402e56-0260-453c-a942-63ccdbb3a9ee
---
 themes/default/fix-ie5-ie6.css           | 10 ++----
 themes/default/template/comment_list.tpl | 12 +++----
 themes/default/template/index.tpl        | 58 ++++++++++----------------------
 themes/default/template/picture.tpl      | 41 +++++++++-------------
 themes/default/theme.css                 | 42 ++++++++---------------
 5 files changed, 55 insertions(+), 108 deletions(-)

(limited to 'themes')

diff --git a/themes/default/fix-ie5-ie6.css b/themes/default/fix-ie5-ie6.css
index 312b64e30..eaf68a3f0 100644
--- a/themes/default/fix-ie5-ie6.css
+++ b/themes/default/fix-ie5-ie6.css
@@ -50,18 +50,12 @@ H1, #theHeader {
 }
 
 .filter LABEL INPUT,
-.filter LABEL SELECT,
-.filter LABEL SPAN,
-.filter LABEL TEXTAREA {
+.filter LABEL SELECT {
   display: block;
   margin: 0.5em 0;
 }
 .filter FIELDSET * LABEL INPUT,
-.filter FIELDSET * LABEL SELECT,
-.filter FIELDSET * LABEL TEXTAREA,
-.filter LABEL SPAN INPUT,
-.filter LABEL SPAN SELECT,
-.filter LABEL SPAN TEXTAREA {
+.filter FIELDSET * LABEL SELECT {
 	display: inline;
 	vertical-align: top;
 	margin: 0 0.5em 0 0;
diff --git a/themes/default/template/comment_list.tpl b/themes/default/template/comment_list.tpl
index b73cc39e2..cb3052d11 100644
--- a/themes/default/template/comment_list.tpl
+++ b/themes/default/template/comment_list.tpl
@@ -43,14 +43,14 @@
 		<span class="commentAuthor">{$comment.AUTHOR}</span> - <span class="commentDate">{$comment.DATE}</span>
 		{if isset($comment.IN_EDIT)}
 		<a name="edit_comment"></a>
-		<form  method="post" action="{$comment.U_EDIT}" class="filter" id="editComment">
-			<fieldset>
-				<legend>{'Edit a comment'|@translate}</legend>
-				<label>{'Comment'|@translate}<textarea name="content" id="contenteditid" rows="5" cols="80">{$comment.CONTENT|@escape}</textarea></label>
-				<input type="hidden" name="key" value="{$comment.KEY}">
+		<form method="post" action="{$comment.U_EDIT}" id="editComment">
+			<p><label>{'Edit a comment'|@translate} :</label></p>
+			<p><textarea name="content" id="contenteditid" rows="5" cols="80">{$comment.CONTENT|@escape}</textarea></p>
+			<p><input type="hidden" name="key" value="{$comment.KEY}">
+				<input type="hidden" name="pwg_token" value="{$comment.PWG_TOKEN}">
 				<input type="hidden" name="image_id" value="{$comment.IMAGE_ID|@default:$current.id}">
 				<input type="submit" value="{'Submit'|@translate}">
-			</fieldset>
+			</p>
 		</form>
 		{else}
 		<blockquote><div>{$comment.CONTENT}</div></blockquote>
diff --git a/themes/default/template/index.tpl b/themes/default/template/index.tpl
index 9e21bd41b..3f49aee06 100644
--- a/themes/default/template/index.tpl
+++ b/themes/default/template/index.tpl
@@ -7,7 +7,7 @@
 		<li>{strip}<a id="sortOrderLink" title="{'Sort order'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
 			<span class="pwg-icon pwg-icon-sort">&nbsp;</span><span class="pwg-button-text">{'Sort order'|@translate}</span>
 		</a>
-		<div id="sortOrderBox" class="switchBox" style="display:none">
+		<div id="sortOrderBox" class="switchBox">
 			<div class="switchBoxTitle">{'Sort order'|@translate}</div>
 			{foreach from=$image_orders item=image_order name=loop}{if !$smarty.foreach.loop.first}<br>{/if}
 			{if $image_order.SELECTED}
@@ -18,25 +18,14 @@
 			{/foreach}
 		</div>
 		{footer_script}{literal}
-$(document).ready(function() {
-  $("#sortOrderBox").css({'top':0,'left':0});
-  var sortOrderBox_width = $("#sortOrderBox").outerWidth(true);
-  var sortOrderBox_height = $("#sortOrderBox").outerHeight(true);
-  
-  $("#sortOrderLink").click(function() {
-    $("#sortOrderBox").toggle();
-    
-    if ($(this).offset().left + sortOrderBox_width > $(window).width()) {
-      $("#sortOrderBox").css("left", $(window).width() - sortOrderBox_width - 5);
-    } else {
-      $("#sortOrderBox").css("left", $(this).offset().left);
-    }
-    $("#sortOrderBox").css("top", $(this).offset().top + $(this).outerHeight(true));
-  });
-  
-  $("#sortOrderBox").bind("mouseleave", function() {
-    $(this).hide();
-  });
+$("#sortOrderLink").click(function() {
+	var elt = $("#sortOrderBox");
+	elt.css("left", Math.min( $(this).offset().left, $(window).width() - elt.outerWidth(true) - 5))
+		.css("top", $(this).offset().top + $(this).outerHeight(true))
+		.toggle();
+});
+$("#sortOrderBox").on("mouseleave", function() {
+	$(this).hide();
 });
 		{/literal}{/footer_script}
 		{/strip}</li>
@@ -46,7 +35,7 @@ $(document).ready(function() {
 		<li>{strip}<a id="derivativeSwitchLink" 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" style="display:none">
+		<div id="derivativeSwitchBox" class="switchBox">
 			<div class="switchBoxTitle">{'Photo sizes'|@translate}</div>
 			{foreach from=$image_derivatives item=image_derivative name=loop}{if !$smarty.foreach.loop.first}<br>{/if}
 			{if $image_derivative.SELECTED}
@@ -57,25 +46,14 @@ $(document).ready(function() {
 			{/foreach}
 		</div>
 		{footer_script}{literal}
-$(document).ready(function() {
-  $("#derivativeSwitchBox").css({'top':0,'left':0});
-  var derivativeSwitchBox_width = $("#derivativeSwitchBox").outerWidth(true);
-  var derivativeSwitchBox_height = $("#derivativeSwitchBox").outerHeight(true);
-  
-  $("#derivativeSwitchLink").click(function() {
-    $("#derivativeSwitchBox").toggle();
-    
-    if ($(this).offset().left + derivativeSwitchBox_width > $(window).width()) {
-      $("#derivativeSwitchBox").css("left", $(window).width() - derivativeSwitchBox_width - 5);
-    } else {
-      $("#derivativeSwitchBox").css("left", $(this).offset().left);
-    }
-    $("#derivativeSwitchBox").css("top", $(this).offset().top + $(this).outerHeight(true));
-  });
-  
-  $("#derivativeSwitchBox").bind("mouseleave", function() {
-    $(this).hide();
-  });
+$("#derivativeSwitchLink").click(function() {
+	var elt = $("#derivativeSwitchBox");
+	elt.css("left", Math.min( $(this).offset().left, $(window).width() - elt.outerWidth(true) - 5))
+		.css("top", $(this).offset().top + $(this).outerHeight(true))
+		.toggle();
+});
+$("#derivativeSwitchBox").on("mouseleave", function() {
+	$(this).hide();
 });
 		{/literal}{/footer_script}
 		{/strip}</li>
diff --git a/themes/default/template/picture.tpl b/themes/default/template/picture.tpl
index c0f44ffa4..5450dce85 100644
--- a/themes/default/template/picture.tpl
+++ b/themes/default/template/picture.tpl
@@ -35,31 +35,20 @@ function changeImgSrc(url,typeSave,typeMap)
 	document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}';
 }
 
-$(document).ready(function() {
-  $("#derivativeSwitchBox").css({'top':0,'left':0});
-  var derivativeSwitchBox_width = $("#derivativeSwitchBox").outerWidth(true);
-  var derivativeSwitchBox_height = $("#derivativeSwitchBox").outerHeight(true);
-  
-  $("#derivativeSwitchLink").click(function() {
-    $("#derivativeSwitchBox").toggle();
-    
-    if ($(this).offset().left + derivativeSwitchBox_width > $(window).width()) {
-      $("#derivativeSwitchBox").css("left", $(window).width() - derivativeSwitchBox_width - 5);
-    } else {
-      $("#derivativeSwitchBox").css("left", $(this).offset().left);
-    }
-    $("#derivativeSwitchBox").css("top", $(this).offset().top + $(this).outerHeight(true));
-  });
-  
-  $("#derivativeSwitchBox").bind("mouseleave click", function() {
-    $(this).hide();
-  });
+$("#derivativeSwitchLink").click(function() {
+	var elt = $("#derivativeSwitchBox");
+	elt.css("left", Math.min( $(this).offset().left, $(window).width() - elt.outerWidth(true) - 5))
+		.css("top", $(this).offset().top + $(this).outerHeight(true))
+		.toggle();
+});
+$("#derivativeSwitchBox").on("mouseleave click", function() {
+	$(this).hide();
 });
 {/literal}{/footer_script}
 {strip}<a id="derivativeSwitchLink" 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" style="display:none">
+<div id="derivativeSwitchBox" class="switchBox">
   <div class="switchBoxTitle">{'Photo sizes'|@translate}</div>
   {foreach from=$current.unique_derivatives item=derivative key=derivative_type}
   <span class="switchCheck" id="derivativeChecked{$derivative_type}"{if $derivative->get_type() ne $current.selected_derivative->get_type()} style="visibility:hidden"{/if}>&#x2714; </span>
@@ -209,7 +198,7 @@ y.callService(
 	</div>
 	{/if}
 	{if $display_info.categories and isset($related_categories)}
-	<div id="Categories"  class="imageInfo">
+	<div id="Categories" class="imageInfo">
 		<dt>{'Albums'|@translate}</dt>
 		<dd>
 			<ul>
@@ -305,7 +294,7 @@ function togglePrivacyLevelBox()
 	{
 		elt.style.left = (ePos.offsetLeft)+"px";
 		elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px";
-		elt.style.display="";
+		elt.style.display="block";
 	}
 	else
 		elt.style.display="none";
@@ -350,15 +339,15 @@ function togglePrivacyLevelBox()
 		{if isset($comment_add)}
 			<div id="commentAdd">
 				<h4>{'Add a comment'|@translate}</h4>
-				<form  method="post" action="{$comment_add.F_ACTION}" id="addComment" >
+				<form method="post" action="{$comment_add.F_ACTION}" id="addComment" >
 					{if $comment_add.SHOW_AUTHOR}
-						<p><label>{'Author'|@translate}&nbsp;:</label></p>
+						<p><label>{'Author'|@translate} :</label></p>
 						<p><input type="text" name="author" /></p>
-						<p><label>{'Comment'|@translate}&nbsp;:</label></p>
+						<p><label>{'Comment'|@translate} :</label></p>
 					{/if}
 					<p><textarea name="content" id="contentid" rows="5" 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>
+						<input type="submit" value="{'Submit'|@translate}"></p>
 				</form>
 			</div>
 		{/if}
diff --git a/themes/default/theme.css b/themes/default/theme.css
index f04d37679..b6f03efc8 100644
--- a/themes/default/theme.css
+++ b/themes/default/theme.css
@@ -270,6 +270,7 @@ TD.calDayHead {
 }
 
 .commentElement {
+	border-radius: 5px;
 	margin: 5px;
 	padding: 2px 0 0 2px;
 	float: left;
@@ -366,8 +367,10 @@ TD.calDayHead {
 	padding: 0.5em 5px;
 	border-radius: 4px;
 	z-index: 100;
-    text-align:left;
-	position: absolute; /*left, right set through js*/
+	text-align:left;
+	display: none;
+	position: absolute;
+	left: 0; top: 0; /*left, right set through js*/
 }
 
 .switchBoxTitle {
@@ -528,9 +531,6 @@ FIELDSET {
 	overflow: hidden; /* <- makes Opera happy */
 }
 
-.filter UL {
-  margin: 0;
-}
 .filter UL,
 .filter LABEL {
 	display: block;
@@ -557,31 +557,19 @@ FIELDSET {
 
 /*IE6 needs override because of > selector*/
 .filter LABEL>INPUT,
-.filter LABEL>SELECT,
-.filter LABEL>SPAN,
-.filter LABEL>TEXTAREA {
+.filter LABEL>SELECT {
 	display: block;
 	margin: 0.5em 0;
 }
 
 .filter FIELDSET * LABEL>INPUT,
-.filter FIELDSET * LABEL>SELECT,
-.filter FIELDSET * LABEL>TEXTAREA,
-.filter SPAN>INPUT,
-.filter SPAN>SELECT,
-.filter SPAN>TEXTAREA {
+.filter FIELDSET * LABEL>SELECT {
 	display: inline;
 	vertical-align: top;
 	margin: 0 0.5em 0 0;
 }
 
 
-
-
-.filter INPUT[type="submit"] {
-	margin-top: 1em;
-}
-
 .properties UL {
 	list-style-type: none;
 	margin: 0;
@@ -804,13 +792,9 @@ LEGEND {
 #pictureCommentList 					{ float: right; }
 
 #commentAdd input[type="text"],
-#commentAdd textarea {
-	max-width: 100%;
-	width: 100%;
-}
-
-#pictureCommentList .commentElement {
-	border-radius: 5px;
+#comments TEXTAREA {
+	max-width: 99%;
+	width: 99%;
 }
 
 .commentAuthor {
@@ -824,8 +808,10 @@ LEGEND {
 #pictureCommentList .commentsOrder	{ float: left; margin-bottom: 5px;}
 #pictureCommentList .navigationBar	{ float: right; margin-bottom: 5px;}
 #pictureComments h4					{ margin: 0;}
-#pictureComments form p				{ margin: 5px 0; text-align: left;}
-#pictureComments form p textarea		{ margin: 10px 0;}
+#comments FORM P	 {
+	margin: 5px 0; text-align: left;
+}
+
 #pictureComments INPUT[type=submit]	{ margin: 0;}
 
 /* image info table */
-- 
cgit v1.2.3