- Improve thumbnailCategories display : This new display looks quite good with both themes.

	Handle long category description with automatic scrollbars.
	Got rid of the hr.separation which mess the display sometimes.

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

5 files changed, 28 insertions, 15 deletions

diff --git a/template-common/default-layout.css b/template-common/default-layout.css
index 5f8cf62e1..87ef74fb2 100644
--- a/template-common/default-layout.css
+++ b/template-common/default-layout.css
@@ -16,17 +16,26 @@ BODY#theAdminPage #content {
   margin-left: 14em;
 }
 
-/* Set some sizes according to your maximum thumbnail width adn height */
-#content UL.thumbnails SPAN, #content UL.thumbnails SPAN.wrap2 A {
+/* Set some sizes according to your maximum thumbnail width and height */
+#content UL.thumbnails SPAN,
+#content UL.thumbnails SPAN.wrap2 A,
+#content DIV.thumbnailCategory DIV.illustration {
   width: 140px;			/* max thumbnail width + 2px */
 }
-#content UL.thumbnails SPAN.wrap2 {
+#content UL.thumbnails SPAN.wrap2,
+#content DIV.thumbnailCategory DIV.description {
   height: 140px;		/* max thumbnail height + 2px */
 }
-#content DIV.comment BLOCKQUOTE {
+#content DIV.comment BLOCKQUOTE/*,
+#content DIV.thumbnailCategory DIV.description*/ {
   margin-left: 150px;		/*maximum thumbnail width + ~10px */
 }
 
+/* Category thumbnails on main page */
+#content UL.thumbnailCategories LI {
+  width: 49.9%; /* 49.9% for 2 per line, 33.3% for 3 per line*/
+}
+
 /* display/hide thumbnails legend */
 #content UL.thumbnails SPAN.thumbLegend {
   display: block;		/* display: none; if you don't want legend */
diff --git a/template/yoga/content.css b/template/yoga/content.css
index 9fc3f996d..970e5d93c 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -266,10 +266,15 @@ DIV.calImg {
   padding: 0;
   list-style: none;
   text-align: center;
+  overflow: hidden;
+  width: 100%;
+}
+
+* html #content UL.thumbnailCategories {
+  width: 99%; /* buggy IE box model */
 }
 
 #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;
@@ -277,18 +282,19 @@ DIV.calImg {
 
 #content DIV.thumbnailCategory {
   display:block;
-  border: 1px solid #aaa;
-  padding: 5px 0px 0px 4px;
+  padding: 2px 0px 0px 2px;
   margin: 5px;
 }
 
 #content DIV.thumbnailCategory DIV.description {
   font-size: 90%;
+  overflow: auto;
+  width: inherit;
 }
 
 #content DIV.thumbnailCategory DIV.description H3 {
   text-align: left;
-  background: #eee;
+  background: transparent;
   margin: 0;
   padding: 0.1em;
   font-size: 120%;
@@ -300,8 +306,6 @@ DIV.calImg {
 
 #content DIV.thumbnailCategory DIV.illustration {
   text-align: left;
-  padding: 2px;
+  margin: 2px 0 2px 2px;
   float: left;
-  width: 110px;   /* sorry, this is a very personal value :-( */
-  height: 110px;
 }
diff --git a/template/yoga/mainpage_categories.tpl b/template/yoga/mainpage_categories.tpl
index de0ed498e..1bc0a9e73 100644
--- a/template/yoga/mainpage_categories.tpl
+++ b/template/yoga/mainpage_categories.tpl
@@ -18,10 +18,8 @@
         <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 -->
diff --git a/template/yoga/theme/clear/theme.css b/template/yoga/theme/clear/theme.css
index 07cdffabb..31e88d90d 100644
--- a/template/yoga/theme/clear/theme.css
+++ b/template/yoga/theme/clear/theme.css
@@ -33,7 +33,8 @@ H2, #menubar DT, #imageHeaderBar, #imageToolBar A:hover {
 }
 
 FIELDSET, INPUT, SELECT, TEXTAREA,
-#content DIV.comment  A.illustration IMG, #infos {
+#content DIV.comment  A.illustration IMG, #infos,
+#content DIV.thumbnailCategory {
   border: 1px solid gray;
 }
 
diff --git a/template/yoga/theme/dark/theme.css b/template/yoga/theme/dark/theme.css
index 157c7c371..2bbe9533b 100644
--- a/template/yoga/theme/dark/theme.css
+++ b/template/yoga/theme/dark/theme.css
@@ -60,7 +60,8 @@ H2, #menubar DT, .throw  {
 }
 
 FIELDSET, INPUT, SELECT, TEXTAREA,
-#content DIV.comment  A.illustration IMG, #infos {
+#content DIV.comment  A.illustration IMG, #infos,
+#content DIV.thumbnailCategory {
   border: 1px solid gray;
 }