Fix Bug 11270 & Bug 11555 : Make editsection link more understandable by positioning...

Patch by Aryeh Gregor, updated by Roan Kattouw, and updated again by me. I also fixed one bug with modern.css.
Tested in IE6,7,8, Chrome & FF in all skins and both LTR and RTL contexts. I tested with floating images above and below the headers and couldn't find regressions.

diff --git a/includes/DefaultSettings.php b/includes/DefaultSettings.php
index 0e79603..01590a5 100644 (file)
--- a/includes/DefaultSettings.php
+++ b/includes/DefaultSettings.php
@@ -1617,7 +1617,7 @@ $wgCacheEpoch = '20030516000000';
  * to ensure that client-side caches do not keep obsolete copies of global
  * styles.
  */
-$wgStyleVersion = '303';
+$wgStyleVersion = '304';
 
 /**
  * This will cache static pages for non-logged-in users to reduce

diff --git a/includes/Linker.php b/includes/Linker.php
index 525a6fa..9a4e6fe 100644 (file)
--- a/includes/Linker.php
+++ b/includes/Linker.php
@@ -1506,10 +1506,11 @@ class Linker {
         * @return String: HTML headline
         */
        public static function makeHeadline( $level, $attribs, $anchor, $text, $link, $legacyAnchor = false ) {
-               $ret = "<h$level$attribs"
-                       . $link
+               $ret = "<div class=\"mw-h$level\">"
+                       . "<h$level$attribs"
                        . " <span class=\"mw-headline\" id=\"$anchor\">$text</span>"
-                       . "</h$level>";
+                       . "</h$level>"
+                       . "$link </div>";
                if ( $legacyAnchor !== false ) {
                        $ret = "<div id=\"$legacyAnchor\"></div>$ret";
                }

diff --git a/skins/MonoBook.php b/skins/MonoBook.php
index ab72506..adebc50 100644 (file)
--- a/skins/MonoBook.php
+++ b/skins/MonoBook.php
@@ -78,7 +78,7 @@ class MonoBookTemplate extends BaseTemplate {
        <a id="top"></a>
        <?php if($this->data['sitenotice']) { ?><div id="siteNotice"><?php $this->html('sitenotice') ?></div><?php } ?>
 
-       <h1 id="firstHeading" class="firstHeading"><?php $this->html('title') ?></h1>
+       <div class="mw-h1 firstHeading"><h1><?php $this->html('title') ?></h1></div>
        <div id="bodyContent">
                <div id="siteSub"><?php $this->msg('tagline') ?></div>
                <div id="contentSub"<?php $this->html('userlangattributes') ?>><?php $this->html('subtitle') ?></div>

diff --git a/skins/Vector.php b/skins/Vector.php
index e0d87a8..18c9d46 100644 (file)
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -144,7 +144,7 @@ class VectorTemplate extends BaseTemplate {
                        <!-- /sitenotice -->
                        <?php endif; ?>
                        <!-- firstHeading -->
-                       <h1 id="firstHeading" class="firstHeading"><?php $this->html( 'title' ) ?></h1>
+                       <div class="mw-h1 firstHeading"><h1><?php $this->html( 'title' ) ?></h1></div>
                        <!-- /firstHeading -->
                        <!-- bodyContent -->
                        <div id="bodyContent">

diff --git a/skins/chick/IE60Fixes.css b/skins/chick/IE60Fixes.css
index feec15f..a4c0a8f 100644 (file)
--- a/skins/chick/IE60Fixes.css
+++ b/skins/chick/IE60Fixes.css
@@ -70,7 +70,6 @@ textarea {
     width: 96%;
 }
 
-div.editsection,
 #catlinks,
 div.tright,
 div.tleft {

diff --git a/skins/chick/main.css b/skins/chick/main.css
index cdcd42c..8b2c755 100644 (file)
--- a/skins/chick/main.css
+++ b/skins/chick/main.css
@@ -42,34 +42,36 @@ hr {
        margin: 0.2em 0 0.2em 0;
 }
 
-h1, h2, h3, h4, h5, h6 {
+/* Headers */
+.mw-h1, .mw-h2, .mw-h3, .mw-h4, .mw-h5, .mw-h6 {
        color: black;
        background: none;
-       font-weight: normal;
        margin: 0;
-       overflow: hidden;
-       padding-top: 0.5em;
-       padding-bottom: 0.17em;
-       border-bottom: 1px solid #aaaaaa;
+       border-bottom: 1px solid #aaa;
 }
-.editsection {
+.mw-h3, .mw-h4, .mw-h5, .mw-h6 {
+       border-bottom: none;
+}
+h1, h2 {
        font-weight: normal;
 }
 h1 { font-size: 188%; }
-h1 .editsection { font-size: 53.2%; }
 h2 { font-size: 150%; }
-h2 .editsection { font-size: 66.7%; }
-h3, h4, h5, h6 {
-       border-bottom: none;
-       font-weight: bold;
-}
 h3 { font-size: 132%; }
-h3 .editsection { font-size: 75.8%; }
 h4 { font-size: 116%; }
-h4 .editsection { font-size: 86.2%; }
 h5 { font-size: 100%; }
 h6 { font-size: 80%;  }
-h6 .editsection { font-size: 125%; }
+
+/* To replicate the old padding, where h# were block-level elements and edit
+ * links were floated, we need to multiply .5em top padding and .17em bottom
+ * padding by the header text sizes. */
+.mw-h1 { padding: .94em 0 .32em; } /* (0.5*1.88)em 0 (0.17*1.88)em */
+.mw-h2 { padding: .75em 0 .26em; } /* (0.5*1.50)em 0 (0.17*1.50)em */
+.mw-h3 { padding: .66em 0 .22em; } /* etc. */
+.mw-h4 { padding: .58em 0 .20em; }
+.mw-h5 { padding: .50em 0 .17em; }
+.mw-h6 { padding: .40em 0 .14em; }
+
 
 ul {
        line-height: 1.5em;

diff --git a/skins/cologneblue/screen.css b/skins/cologneblue/screen.css
index d5ed280..a706857 100644 (file)
--- a/skins/cologneblue/screen.css
+++ b/skins/cologneblue/screen.css
@@ -164,10 +164,6 @@ h1 {
        line-height: 21pt;
 }
 
-h1 .editsection {
-       font-size: 55.6%;
-}
-
 h1.pagetitle {
        padding-bottom: 0;
        margin-bottom: 0;
@@ -207,7 +203,7 @@ a.new, #quickbar a.new {
        color: #CC2200;
 }
 
-h2, h3, h4, h5, h6 {
+.mw-h2, .mw-h3, .mw-h4, .mw-h5, .mw-h6 {
        margin-bottom: 0;
 }
 

diff --git a/skins/common/oldshared.css b/skins/common/oldshared.css
index 071e521..8abae41 100644 (file)
--- a/skins/common/oldshared.css
+++ b/skins/common/oldshared.css
@@ -4,30 +4,6 @@
  * CologneBlue, the old pre-Monobook skins
  */
 
-/* For clarity, explicitly state some recommendations from <http://www.w3.org/
-   TR/CSS21/sample.html> to make sure the editsection links scale right */
-
-h1 { font-size: 2em; }
-h2 { font-size: 1.5em; }
-h3 { font-size: 1.17em; }
-h5 { font-size: .83em; }
-h6 { font-size: .75em; }
-h1, h2, h3, h4, h5, h6 {
-       font-weight: bolder;
-}
-
-/* Now the custom parts */
-
-/* Make edit sections (which are inside h# tags) normal-sized */
-.editsection {
-       font-weight: normal;
-}
-h1 .editsection { font-size: 50%; }
-h2 .editsection { font-size: 66.7%; }
-h3 .editsection { font-size: 85.5%; }
-h5 .editsection { font-size: 120%; }
-h6 .editsection { font-size: 133%; }
-
 #footer { clear: both }
 /* images */
 /* @noflip */

diff --git a/skins/common/shared.css b/skins/common/shared.css
index b0d0689..6b72d09 100644 (file)
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -82,14 +82,22 @@ div#mw-js-message {
        background-color: #fcfcfc;
 }
 
-/* Edit section links */
+/* Display headings on the same line as edit link */
+h1, h2, h3, h4, h5, h6 { display: inline; margin: 0; }
+/* But then we have to reintroduce the margin.  We use the W3 recommended mar-
+ * gins <http://www.w3.org/TR/CSS21/sample.html>, multiplying by the recom-
+ * mended font-size. */
+.mw-h1 { margin: 1.34em 0; }
+.mw-h2 { margin: 1.13em 0; }
+.mw-h3 { margin: 0.97em 0; }
+.mw-h4 { margin: 1.12em 0; }
+.mw-h5 { margin: 1.25em 0; }
+.mw-h6 { margin: 1.25em 0; }
+
+/* Give edi section link some space */
 .editsection {
-       float: right;
-       margin-left: 5px;
+       margin: 0 .8em;
 }
-/* Correct directionality when page dir is different from site/user dir */
-/* @noflip */.mw-content-ltr .editsection, .mw-content-rtl .mw-content-ltr .editsection { float: right; }
-/* @noflip */.mw-content-rtl .editsection, .mw-content-ltr .mw-content-rtl .editsection { float: left; }
 /**
  * File histories
  */

diff --git a/skins/common/wikistandard.css b/skins/common/wikistandard.css
index 6205092..e647fb2 100644 (file)
--- a/skins/common/wikistandard.css
+++ b/skins/common/wikistandard.css
@@ -96,18 +96,10 @@ h1.pagetitle {
        font-size: 150%;
 }
 
-h1.pagetitle .editsection {
-       font-size: 66.7%;
-}
-
 h2 {
        font-size: 120%;
 }
 
-h2 .editsection {
-       font-size: 83.3%;
-}
-
 h2, h3, h4, h5, h6 {
        margin-bottom: 0;
 }
@@ -116,34 +108,18 @@ h3 {
        font-size: 106.25%;
 }
 
-h3 .editsection {
-       font-size: 94.1%;
-}
-
 h4 {
        font-size: 103.125%;
 }
 
-h4 .editsection {
-       font-size: 97.0%;
-}
-
 h5 {
        font-size: 100%;
 }
 
-h5 .editsection {
-       font-size: 100%;
-}
-
 h6 {
        font-size: 95%;
 }
 
-h6 .editsection {
-       font-size: 105.3%;
-}
-
 hr.sep {
        color: gray;
        height: 1px;

diff --git a/skins/modern/main.css b/skins/modern/main.css
index 860de36..001ad8f 100644 (file)
--- a/skins/modern/main.css
+++ b/skins/modern/main.css
@@ -334,12 +334,17 @@ span.editsection {
        font-size: small;
 }
 
-h1, h2 {
+.mw-h1,
+.mw-h2,
+.mw-h3,
+.mw-h4,
+.mw-h5,
+.mw-h6 {
+       overflow: hidden;
        border-bottom: solid 1px #036;
 }
-
-h1, h2, h3, h4, h5, h6 {
-       overflow: hidden;
+.mw-h3, .mw-h4, .mw-h5, .mw-h6 {
+       border-bottom: none;
 }
 
 #preftoc {

diff --git a/skins/monobook/main.css b/skins/monobook/main.css
index 0fcb478..6ab45d9 100644 (file)
--- a/skins/monobook/main.css
+++ b/skins/monobook/main.css
@@ -107,32 +107,40 @@ hr {
        margin: .2em 0 .2em 0;
 }
 
-h1, h2, h3, h4, h5, h6 {
+/* Headers */
+.mw-h1, .mw-h2, .mw-h3, .mw-h4, .mw-h5, .mw-h6 {
        color: black;
        background: none;
-       font-weight: normal;
        margin: 0;
        overflow: hidden;
-       padding-top: .5em;
-       padding-bottom: .17em;
        border-bottom: 1px solid #aaa;
 }
+.mw-h3, .mw-h4, .mw-h5, .mw-h6 {
+       border-bottom: none;
+}
+h1, h2 { font-weight: normal; }
+
 h1 { font-size: 188%; }
-h1 .editsection { font-size: 53%; }
 h2 { font-size: 150%; }
-h2 .editsection { font-size: 67%; }
 h3, h4, h5, h6 {
        border-bottom: none;
        font-weight: bold;
 }
 h3 { font-size: 132%; }
-h3 .editsection { font-size: 76%; font-weight: normal; }
 h4 { font-size: 116%; }
-h4 .editsection { font-size: 86%; font-weight: normal; }
 h5 { font-size: 100%; }
-h5 .editsection { font-weight: normal; }
 h6 { font-size: 80%; }
-h6 .editsection { font-size: 125%; font-weight: normal; }
+
+/* To replicate the old padding, where h# were block-level elements and edit
+ * links were floated, we need to multiply .5em top padding and .17em bottom
+ * padding by the header text sizes. */
+.mw-h1 { padding: .94em 0 .32em; } /* (0.5*1.88)em 0 (0.17*1.88)em */
+.mw-h2 { padding: .75em 0 .26em; } /* (0.5*1.50)em 0 (0.17*1.50)em */
+.mw-h3 { padding: .66em 0 .22em; } /* etc. */
+.mw-h4 { padding: .58em 0 .20em; }
+.mw-h5 { padding: .50em 0 .17em; }
+.mw-h6 { padding: .40em 0 .14em; }
+
 
 ul {
        line-height: 1.5em;

diff --git a/skins/simple/main.css b/skins/simple/main.css
index db889b9..4524a7e 100644 (file)
--- a/skins/simple/main.css
+++ b/skins/simple/main.css
@@ -1,26 +1,3 @@
-/* For clarity, explicitly state some recommendations from <http://www.w3.org/
-   TR/CSS21/sample.html> to make sure the editsection links scale right */
-
-h1 { font-size: 2em; }
-h2 { font-size: 1.5em; }
-h3 { font-size: 1.17em; }
-h5 { font-size: .83em; }
-h6 { font-size: .75em; }
-h1, h2, h3, h4, h5, h6 { font-weight: bolder }
-
-/* Now the custom parts */
-
-/* Make edit sections (which are inside h# tags) normal-sized */
-.editsection {
-       font-weight: normal;
-}
-h1 .editsection { font-size: 50% }
-h2 .editsection { font-size: 66.7% }
-h3 .editsection { font-size: 85.5% }
-h5 .editsection { font-size: 120% }
-h6 .editsection { font-size: 133% }
-
-
 #toolbar {
   display: none;
 }
@@ -86,11 +63,22 @@ p {
 }
 p img { margin: 0; }
 
-h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-    padding-top: 0.5em;
-    padding-bottom: 0.17em;
-}
+.mw-h1, .mw-h2, .mw-h3, .mw-h4, .mw-h5, .mw-h6 {
+ margin: 0;
+}
+/* To replicate the old padding, where h# were block-level elements and edit
+ * links were floated, we need to multiply .5em top padding and .17em bottom
+ * padding by the header text sizes.  We assume the W3 recommendations are
+ * used: 200%, 150%, 117%, 100%, 83%, 75% size in that order
+ * <http://www.w3.org/TR/CSS21/sample.html>.  If not the padding may be margin-
+ * ally off. */
+.mw-h1 { padding: .94em 0 .32em; } /* (0.5*1.88)em 0 (0.17*1.88)em */
+.mw-h2 { padding: .75em 0 .26em; } /* (0.5*1.50)em 0 (0.17*1.50)em */
+.mw-h3 { padding: .66em 0 .22em; } /* etc. */
+.mw-h4 { padding: .58em 0 .20em; }
+.mw-h5 { padding: .50em 0 .17em; }
+.mw-h6 { padding: .40em 0 .14em; }
+
 fieldset {
     margin: 1em 0em 1em 0em;
     padding: 0em 1em 1em 1em;
@@ -195,7 +183,7 @@ pre {
   border: solid 1px black;
 }
 
-h1.firstHeading, h2 {
+.firstHeading, .mw-h2 {
   border-bottom: solid 1px black;
 }
 #bodyContent a[href ^="http://"],

diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index ba604b4..d4698f0 100644 (file)
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -727,42 +727,41 @@ hr {
 }
 
 /* Structural Elements */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+.mw-h1,
+.mw-h2,
+.mw-h3,
+.mw-h4,
+.mw-h5,
+.mw-h6 {
        color: black;
        background: none;
-       font-weight: normal;
        margin: 0;
        overflow: hidden;
-       padding-top: .5em;
-       padding-bottom: .17em;
        border-bottom: 1px solid #aaa;
        width: auto;
 }
-h1 { font-size: 188%; }
-h1 .editsection { font-size: 53%; }
-h2 { font-size: 150%; }
-h2 .editsection { font-size: 67%; }
-h3,
-h4,
-h5,
-h6 {
+.mw-h3, .mw-h4, .mw-h5, .mw-h6 {
        border-bottom: none;
-       font-weight: bold;
 }
+h1, h2 { font-weight: normal; }
+h1 { font-size: 188%; }
+h2 { font-size: 150%; }
 h3 { font-size: 132%; }
-h3 .editsection { font-size: 76%; font-weight: normal; }
 h4 { font-size: 116%; }
-h4 .editsection { font-size: 86%; font-weight: normal; }
 h5 { font-size: 100%; }
-h5 .editsection { font-weight: normal; }
 h6 { font-size: 80%;  }
-h6 .editsection { font-size: 125%; font-weight: normal; }
-.editsection { float: right; }
+
+/* To replicate the old padding, where h# were block-level elements and edit
+ * links were floated, we need to multiply .5em top padding and .17em bottom
+ * padding by the header text sizes. */
+.mw-h1 { padding: .94em 0 .32em; } /* (0.5*1.88)em 0 (0.17*1.88)em */
+.mw-h2 { padding: .75em 0 .26em; } /* (0.5*1.50)em 0 (0.17*1.50)em */
+.mw-h3 { padding: .66em 0 .22em; } /* etc. */
+.mw-h4 { padding: .58em 0 .20em; }
+.mw-h5 { padding: .50em 0 .17em; }
+.mw-h6 { padding: .40em 0 .14em; }
+
+
 p {
        margin: .4em 0 .5em 0;
        line-height: 1.5em;