new: MOD subcatify integrated. On main page, thumbnails representing a

category are not displayed the same way as thumbnails representing a
picture. Feedback welcomed on this feature.


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

2 files changed, 75 insertions, 1 deletions

diff --git a/template/yoga/content.css b/template/yoga/content.css
index 56599ec93..9fc3f996d 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -259,3 +259,49 @@ DIV.calImg {
   text-align: left;
   vertical-align: top;
 }
+
+/* Category thumbnails on main page, CSS code inspired from MOD subcatify */
+#content UL.thumbnailCategories {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: center;
+}
+
+#content UL.thumbnailCategories LI {
+  width: 49.9%; /* 49.9% for 2 per line, 33.3% for 3 per line*/
+  margin:0;
+  padding:0;
+  float:left;
+}
+
+#content DIV.thumbnailCategory {
+  display:block;
+  border: 1px solid #aaa;
+  padding: 5px 0px 0px 4px;
+  margin: 5px;
+}
+
+#content DIV.thumbnailCategory DIV.description {
+  font-size: 90%;
+}
+
+#content DIV.thumbnailCategory DIV.description H3 {
+  text-align: left;
+  background: #eee;
+  margin: 0;
+  padding: 0.1em;
+  font-size: 120%;
+}
+
+#content DIV.thumbnailCategory DIV.description P {
+  margin: 0;
+}
+
+#content DIV.thumbnailCategory DIV.illustration {
+  text-align: left;
+  padding: 2px;
+  float: left;
+  width: 110px;   /* sorry, this is a very personal value :-( */
+  height: 110px;
+}
diff --git a/template/yoga/index.tpl b/template/yoga/index.tpl
index 494d2059b..e56ceaa97 100644
--- a/template/yoga/index.tpl
+++ b/template/yoga/index.tpl
@@ -176,7 +176,7 @@
 </h2>
   <!-- END calendar -->
 
-  </div> <!-- content -->
+  </div> <!-- titrePage -->
 
 <!-- BEGIN calendar -->
 <!-- BEGIN navbar -->
@@ -231,6 +231,34 @@
 </ul>
 <!-- END thumbnails -->
 
+<!-- BEGIN categories -->
+<ul class="thumbnailCategories">
+  <!-- BEGIN category -->
+  <li>
+    <div class="thumbnailCategory">
+      <div class="illustration">
+        <a href="{categories.category.URL}">
+          <img src="{categories.category.SRC}"
+               alt="{categories.category.ALT}"
+             title="{categories.category.TITLE}">
+        </a>
+      </div>
+      <div class="description">
+        <h3>
+          {categories.category.ICON}
+          <a href="{categories.category.URL}">{categories.category.NAME}</a>
+        </h3>
+        <p>{categories.category.NB_IMAGES} {lang:pictures}</p>
+        <p>{categories.category.DESCRIPTION}</p>
+      </div>
+      <hr class="separation" />
+    </div>
+  </li>
+  <!-- END category -->
+</ul>
+<hr class="separation" />
+<!-- END categories -->
+
 <!-- BEGIN cat_infos -->
 <!-- BEGIN navigation -->
 <div class="navigationBar">