- 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
This commit is contained in:
chrisaga
2006-04-09 10:53:14 +00:00
parent 86a90feddf
commit ba711b68b3
5 changed files with 28 additions and 15 deletions
+13 -4
View File
@@ -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 */
+11 -7
View File
@@ -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;
}
-2
View File
@@ -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 -->
+2 -1
View File
@@ -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;
}
+2 -1
View File
@@ -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;
}