6 files changed, 168 insertions, 44 deletions
diff --git a/template/cclear/admin/comments.tpl b/template/cclear/admin/comments.tpl
index 93e5c4ed9..d903c332a 100644
--- a/template/cclear/admin/comments.tpl
+++ b/template/cclear/admin/comments.tpl
@@ -1,6 +1,6 @@
 <h2>{lang:User comments validation}</h2>
 
-<form method="post" action="{F_ACTION}" id="comment">
+<form method="post" action="{F_ACTION}">
 
   <input type="hidden" name="list" value="{LIST}" />
 
diff --git a/template/cclear/comments.tpl b/template/cclear/comments.tpl
index 085c0860a..2ea1dc1bb 100644
--- a/template/cclear/comments.tpl
+++ b/template/cclear/comments.tpl
@@ -1,47 +1,96 @@
-<!-- BEGIN title -->
-<h2>{L_COMMENT_TITLE}</h2>
-<!-- END title -->
-<!-- TODO -->
-<div class="admin">
-      [
-      <!-- BEGIN last_day_option -->
-      <a class="admin" href="{last_day_option.U_OPTION}" style="{last_day_option.T_STYLE}">{last_day_option.OPTION}</a>{T_SEPARATION}
-      <!-- END last_day_option -->
-      {L_COMMENT_STATS}
-      ]
-	  <!-- BEGIN title -->
-      [ <a class="admin" href="{U_HOME}" title="{L_COMMENT_RETURN_HINT}">{L_COMMENT_RETURN}</a> ]
-	  <!-- END title -->
-</div>
-<!-- BEGIN validation -->
-<form action="{F_ACTION}" method="post">
-<!-- END validation -->
+<div id="commentsPage">
 
-<!-- BEGIN picture -->
-<div class="commentTitle">{picture.TITLE_IMG}</div>
+<div id="content">
 
-<div style="margin-left:auto;margin-right:auto;text-align:center;">
-  <a href="{picture.U_THUMB}" title="{picture.TITLE_IMG}"><img src="{picture.I_THUMB}" class="thumbLink" alt="{picture.THUMB_ALT_IMG}"/></a>
-</div>
+  <div class="titrePage">
+    <ul class="categoryActions">
+      <li><a href="{U_HOME}" title="{lang:return to homepage}"><img src="./template/cclear/theme/home.png" alt="{lang:home}"/></a></li>
+    </ul>
+    <h2>{lang:User comments}</h2>
+  </div>
 
-<!-- BEGIN comment -->
-<div class="userCommentHeader">
-  <!-- BEGIN validation -->
-  <p class="userCommentDelete">
-    <input type="checkbox" name="comment_id[]" value="{picture.comment.validation.ID}" {picture.comment.validation.CHECKED} />
-  </p>
-  <!-- END validation -->
-  <strong>{picture.comment.COMMENT_AUTHOR}</strong> - {picture.comment.COMMENT_DATE}
-</div>
+<form class="filter" action="{F_ACTION}" method="get">
 
-<blockquote>{picture.comment.COMMENT}</blockquote>
-<!-- END comment -->
-<!-- END picture -->
+  <fieldset>
+    <legend>{lang:Filter}</legend>
+
+    <label>{lang:Keyword}<input type="text" name="keyword" value="{F_KEYWORD}" /></label>
+
+    <label>{lang:Author}<input type="text" name="author" value="{F_AUTHOR}" /></label>
+
+    <label>
+      {lang:Category}
+      <select name="cat">
+        <!-- BEGIN category -->
+        <option class="{category.CLASS}" {category.SELECTED} value="{category.VALUE}">{category.OPTION}</option>
+        <!-- END category -->
+      </select>
+    </label>
+
+    <label>
+      {lang:Since}
+      <select name="since">
+        <!-- BEGIN since_option -->
+        <option {since_option.SELECTED} value="{since_option.VALUE}">{since_option.CONTENT}</option>
+        <!-- END since_option -->
+      </select>
+    </label>
+
+  </fieldset>
+
+  <fieldset>
+
+    <legend>{lang:Display}</legend>
+
+    <label>
+      {lang:Sort by}
+      <select name="sort_by">
+        <!-- BEGIN sort_by_option -->
+        <option value="{sort_by_option.VALUE}" {sort_by_option.SELECTED} >{sort_by_option.CONTENT}</option>
+        <!-- END sort_by_option -->
+      </select>
+    </label>
+
+    <label>
+      {lang:Sort order}
+      <select name="sort_order">
+        <!-- BEGIN sort_order_option -->
+        <option value="{sort_order_option.VALUE}" {sort_order_option.SELECTED} >{sort_order_option.CONTENT}</option>
+        <!-- END sort_order_option -->
+      </select>
+    </label>
+
+    <label>
+      {lang:Number of items}
+      <select name="items_number">
+        <!-- BEGIN items_number_option -->
+        <option value="{items_number_option.VALUE}" {items_number_option.SELECTED} >{items_number_option.CONTENT}</option>
+        <!-- END items_option -->
+      </select>
+    </label>
+
+  </fieldset>
+
+  <input type="submit" name="submit" value="{lang:Filter and display}" />
 
-<!-- BEGIN validation -->
-<div align="center">
-<input type="submit" name="validate" class="bouton" value="{L_VALIDATE}" />
-<input type="submit" name="delete" class="bouton" value="{L_DELETE}" />
-</div>
 </form>
-<!-- END validation -->
+
+<div class="navigationBar">{NAVBAR}</div>
+
+<div id="comments">
+
+  <!-- BEGIN comment -->
+  <div class="comment">
+    <a class="illustration" href="{comment.U_PICTURE}"><img src="{comment.TN_SRC}" /></a>
+    <p class="commentHeader"><span class="author">{comment.AUTHOR}</span> - <span class="date">{comment.DATE}</span></p>
+    <blockquote>{comment.CONTENT}</blockquote>
+    <hr class="separation">
+  </div>
+
+  <!-- END comment -->
+
+</div>
+
+</div> <!-- content -->
+
+</div> <!-- commentsPage -->
diff --git a/template/cclear/content.css b/template/cclear/content.css
index 355358ba3..0ed06dd4c 100644
--- a/template/cclear/content.css
+++ b/template/cclear/content.css
@@ -5,6 +5,10 @@
     margin-bottom: 1em; /* when it's longer than menu bar */
 }
 
+#commentsPage #content {
+  margin: 1em;
+}
+
 #content H2 {
     margin-bottom: 1ex;
 }
@@ -96,7 +100,7 @@ doesn't work :-((*/
 /* actions */
 ul.categoryActions {
   text-align: center;
-  margin: 0;
+  margin: 1px 1px 0 0;
   padding: 0;
   text-indent: 0;
 }
@@ -113,3 +117,41 @@ ul.categoryActions {
   border: none;
 }
 
+/* User comments */
+
+#content DIV.comment {
+  margin: 5px;
+  border: 1px solid gray;
+}
+
+#content DIV.comment > A.illustration {
+  display: block;
+  float: left;
+  margin: 5px;
+}
+
+#content DIV.comment > A.illustration IMG {
+  border: 1px solid gray;
+}
+
+#content DIV.comment P.commentHeader {
+  text-align: right;
+  margin: 0.5em 0.5em 0 0;
+}
+
+#content DIV.comment UL.actions {
+  text-align: center;
+  margin: 0.2em;
+  clear: left;
+}
+
+#content DIV.comment > UL.actions > LI {
+  display: inline;
+}
+
+#content DIV.comment BLOCKQUOTE {
+  margin: 1em 1em 1em 150px; /* margin-left corresponds to maximum thumbnail width */
+  border: 1px solid #d3d3d3; 
+  border-left: 2px solid gray;
+  padding: 0.5em;
+}
diff --git a/template/cclear/default-layout.css b/template/cclear/default-layout.css
index d8af28a93..e15db32c6 100644
--- a/template/cclear/default-layout.css
+++ b/template/cclear/default-layout.css
@@ -176,3 +176,36 @@ form#categoryOrdering ul.categoryActions {
 }
 
 form#cat_modify table { width: auto; }
+
+/**
+ * Filter forms are displayed label by label with the input (or select...)
+ * below the label
+ */
+FORM.filter FIELDSET {
+  padding: 10px;
+}
+
+FORM.filter FIELDSET LABEL {
+  display: block;
+  float: left;
+  width: auto;
+  margin-right: 10px;
+  padding: 0;
+}
+
+FORM.filter>FIELDSET>LABEL>INPUT, FORM.filter>FIELDSET>LABEL>SELECT {
+  display: block;
+}
+
+FORM.filter FIELDSET P, FORM.filter FIELDSET>INPUT {
+  clear: left;
+  display: block;
+}
+
+FORM.filter FIELDSET {
+  border: 1px solid gray;
+}
+
+FORM.filter FIELDSET + INPUT {
+  margin-top: 10px;
+}
diff --git a/template/cclear/image.css b/template/cclear/image.css
index 4c587f205..74f9e1a66 100644
--- a/template/cclear/image.css
+++ b/template/cclear/image.css
@@ -58,7 +58,7 @@ de l'image...
     clear: left;
 }
 
-#theImage * {
+#theImage>IMG {
     display: block;
     margin: 0 auto;
 }
diff --git a/template/cclear/theme/home.png b/template/cclear/theme/home.png
new file mode 100644
index 000000000..a7714756b
--- /dev/null
+++ b/template/cclear/theme/home.png