From: Gabriel Wicke <gwicke@users.mediawiki.org>
Date: Thu, 22 Apr 2004 18:42:13 +0000 (+0000)
Subject: thumbnail tweaks
X-Git-Tag: 1.3.0beta1~326
X-Git-Url: https://git.cyclocoop.org/%27.WWW_URL.%27admin/?a=commitdiff_plain;h=9df79bf2489b22010c3a6cc02a684ff53c741144;p=lhc%2Fweb%2Fwiklou.git

thumbnail tweaks

* zoom icon dimensions adjusted to the new icon
* div wrapper around zoom icon with class, float on div instead of align on image
* caption as div with class to allow extra styling in future skins
* width set on outer div as well (width + 2)
* using the zoom icon as centered bg image in the monobook css, with a { display: block }
* print css update (class name for caption div instead of p)
---

diff --git a/includes/Skin.php b/includes/Skin.php
index f078b36567..de5b001819 100644
--- a/includes/Skin.php
+++ b/includes/Skin.php
@@ -1760,27 +1760,30 @@ class Skin {
 			$boxwidth  = $width;
 			$boxheight = $height;
 		}
-		
+		$oboxwidth = $boxwidth + 2;
 		$thumbUrl = $this->createThumb( $name, $boxwidth );
 
 		$u = $nt->escapeLocalURL();
 
 		$more = htmlspecialchars( wfMsg( "thumbnail-more" ) );
 		$magnifyalign = $wgLang->isRTL() ? "left" : "right";
-		$textalign = $wgLang->isRTL() ? " style=\"text-align:right\"" : "";
+		$textalign = $wgLang->isRTL() ? ' style="text-align:right"' : "";
 
-		$s = "<div class=\"thumbnail-{$align}\" style=\"width:{$boxwidth}px;\"><div>";
+		$s = "<div class=\"thumbnail-{$align}\" style=\"width:{$oboxwidth}px;\"><div style=\"width:{$boxwidth}px;\">";
 		if ( $thumbUrl == "" ) {
 			$s .= str_replace( "$1", $name, wfMsg("missingimage") );
+			$zoom = '';
 		} else {
-		  	$s .= '<a href="'.$u.'" class="internal" title="'.$alt.'">'.
-		  		'<img src="'.$thumbUrl.'" alt="'.$alt.'" ' .
-				'width="'.$boxwidth.'" height="'.$boxheight.'" /></a>'.
-		  		'<a href="'.$u.'" class="internal" title="'.$more.'"> '.
-		    		'<img src="'.$wgUploadPath.'/magnify-clip.png" ' .
-				'width="26" height="24" align="'.$magnifyalign.'" alt="'.$more.'" /> </a>';
-		}
-		$s .= '  <div'.$textalign.'>'.$label."</div></div>\n</div>";
+			$s .= '<a href="'.$u.'" class="internal" title="'.$alt.'">'.
+				'<img src="'.$thumbUrl.'" alt="'.$alt.'" ' .
+				'width="'.$boxwidth.'" height="'.$boxheight.'" /></a>';
+			$zoomicon =  '<div class="magnify" style="float:'.$magnifyalign.'">'.
+				'<a href="'.$u.'" class="internal" title="'.$more.'">'.
+				'<img src="'.$wgUploadPath.'/magnify-clip.png" ' .
+				'width="15" height="11" alt="'.$more.'" /></a></div>';
+
+		}
+		$s .= '  <div class="thumbcaption" '.$textalign.'>'.$zoomicon.$label."</div></div>\n</div>";
 		return $s;
 	}
 
diff --git a/stylesheets/cologneblue.css b/stylesheets/cologneblue.css
index 15bc3b5a30..50a6452de0 100644
--- a/stylesheets/cologneblue.css
+++ b/stylesheets/cologneblue.css
@@ -112,8 +112,9 @@ div.thumbnail-none, div.thumbnail-right, div.thumbnail-left {
 	font-size: 85%;
 }
 
-div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
+div.thumbcaption {
 	margin-top:3px; margin-bottom:3px;
+        text-align: left;
 }
 
 div.thumbnail-right {
diff --git a/stylesheets/commonPrint.css b/stylesheets/commonPrint.css
index 81c218fa02..62343dee50 100644
--- a/stylesheets/commonPrint.css
+++ b/stylesheets/commonPrint.css
@@ -25,52 +25,74 @@ a.new{ color:#ba0000; text-decoration:none; }
 .toctoggle, .editsection {
 	font-size: smaller;
 }
-
 /* images */
-div.floatright { float: right; 
-    margin: 0 0 1em 1em;
+div.floatright { 
+    float: right; 
+    margin: 0;
     position:relative;
-
+    border: 0.5em solid White;
+    border-width: 0.5em 0 0.8em 1.4em;
 }
 div.floatright p { font-style: italic;} 
-div.floatleft { float: left; margin: 0.3em 0.5em 0.5em 0;
+div.floatleft { 
+    float: left; 
+    margin: 0.3em 0.5em 0.5em 0;
     position:relative;
+    border: 0.5em solid White;
+    border-width: 0.5em 1.4em 0.8em 0;
 }
 div.floatleft p { font-style: italic; } 
-
 /* thumbnails */
 div.thumbnail-none,
 div.thumbnail-right,
 div.thumbnail-left {
- /*   border:1px solid #2f6fab;*/
-      border:1px solid #cccccc;
-    
     background-color:#f9f9f9;
-    padding: 2px;
-    position:relative;
+    padding: none;
     margin: 0.3em 0 0.5em;
     font-size: 95%;
+}
+div.thumbnail-none div,
+div.thumbnail-right div,
+div.thumbnail-left div {
+    border:1px solid #cccccc;
     text-align: center;
 }
-
-div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
-    margin-top:3px; margin-bottom:3px;
-    position:relative;
+div div.thumbcaption {
+    border: none;
     text-align: left;
+    padding: 2px;
 }
-
 div.thumbnail-right {
     float: right;
-    position:relative;
-    margin-left:0.5em;
+    border-style: solid;
+    border-color: White;
+    border-width: 0.5em 0 0.8em 1.4em;
+}
+div div.magnify {
+    border: none !important;
+    background: url(magnify-clip.png) center no-repeat;
+    width: 20px;
+    height: 20px;
+    float: right;
+    margin: 0;
+}
+div div.magnify a {
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    border: none;
+}
+div.magnify img {
+    visibility: hidden;
 }
-
 div.thumbnail-left {
     float: left;
-    position:relative;
     margin-right:0.5em;
+    border-style: solid;
+    border-color: White;
+    border: 0.5em 1.4em 0.8em 0;
 }
-
 /* table standards */
 table.rimage {
     float:right; 
@@ -81,7 +103,6 @@ table.rimage {
     text-align:center;
 }
 
-
 body {
     background: White;
     font-family: "Bitstream Vera Sans",Verdana, sans;
diff --git a/stylesheets/monobook/main.css b/stylesheets/monobook/main.css
index da45e939b1..3ce0169191 100644
--- a/stylesheets/monobook/main.css
+++ b/stylesheets/monobook/main.css
@@ -389,34 +389,51 @@ div.floatleft p { font-style: italic; }
 div.thumbnail-none,
 div.thumbnail-right,
 div.thumbnail-left {
- /*   border:1px solid #2f6fab;*/
     background-color:#f9f9f9;
-    padding: 2px;
-    position:relative;
+    padding: none;
     margin: 0.3em 0 0.5em;
     font-size: 95%;
-    text-align: center;
 }
 div.thumbnail-none div,
 div.thumbnail-right div,
-div.thumbnail-left div{
+div.thumbnail-left div {
     border:1px solid #cccccc;
+    text-align: center;
 }
-div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
-    margin-top:3px; margin-bottom:3px;
+div div.thumbcaption {
+    border: none;
     text-align: left;
+    padding: 2px;
 }
 div.thumbnail-right {
     float: right;
-    position:relative;
-    border: 0.5em solid White;
+    border-style: solid;
+    border-color: White;
     border-width: 0.5em 0 0.8em 1.4em;
 }
+div div.magnify {
+    border: none !important;
+    background: url(magnify-clip.png) center no-repeat;
+    width: 20px;
+    height: 20px;
+    float: right;
+    margin: 0;
+}
+div div.magnify a {
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    border: none;
+}
+div.magnify img {
+    visibility: hidden;
+}
 div.thumbnail-left {
     float: left;
-    position:relative;
     margin-right:0.5em;
-    border: 0.5em solid White;
+    border-style: solid;
+    border-color: White;
     border: 0.5em 1.4em 0.8em 0;
 }
 /* table standards */
diff --git a/stylesheets/nostalgia.css b/stylesheets/nostalgia.css
index 18b38a471f..ca4874b583 100644
--- a/stylesheets/nostalgia.css
+++ b/stylesheets/nostalgia.css
@@ -35,7 +35,7 @@ div.thumbnail-none, div.thumbnail-right, div.thumbnail-left {
 	font-size: 85%;
 }
 
-div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
+div.thumbcaption {
 	margin-top:3px; margin-bottom:3px;
 }
 
diff --git a/stylesheets/wikistandard.css b/stylesheets/wikistandard.css
index f22d619fbb..19e8d97288 100644
--- a/stylesheets/wikistandard.css
+++ b/stylesheets/wikistandard.css
@@ -73,7 +73,7 @@ div.thumbnail-none, div.thumbnail-right, div.thumbnail-left {
 	text-align: center;
 }
 
-div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
+div.thumbcaption {
 	margin-top:3px; margin-bottom:3px;
 	text-align: left;
 }