r82155 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r82154‎ | r82155 | r82156 >
Date:00:23, 15 February 2011
Author:tparscal
Status:ok (Comments)
Tags:
Comment:
Resolves bug #27332 - now using absolute positioning with em measurements to layout search controls. Tested in Internet Explore (6, 7 & 8) as well as a few Gecko and Webkit browsers.
Modified paths:
  • /trunk/phase3/skins/vector/screen.css (modified) (history)

Diff [purge]

Index: trunk/phase3/skins/vector/screen.css
@@ -350,6 +350,9 @@
351351 margin-top: 0.4em;
352352 }
353353 div#simpleSearch {
 354+ display: block;
 355+ width: 14em;
 356+ height: 1.4em;
354357 margin-top: 0.65em;
355358 position: relative;
356359 min-height: 1px; /* Gotta trigger hasLayout for IE7 */
@@ -368,9 +371,11 @@
369372 */
370373 font-size: 13px;
371374 top: 0.25em;
 375+ direction: ltr;
372376 }
373377 div#simpleSearch input {
374378 color: black;
 379+ direction: ltr;
375380 }
376381 div#simpleSearch input:focus {
377382 outline: none;
@@ -382,39 +387,49 @@
383388 color: #999999;
384389 }
385390 div#simpleSearch input#searchInput {
 391+ position: absolute;
 392+ top: 0;
 393+ left: 0;
 394+ width: 90%;
386395 margin: 0;
387 - border-width: 0;
388 - padding: 3px;
389 - vertical-align: top;
 396+ padding: 0;
 397+ padding-left: 0.2em;
 398+ padding-top: 0.2em;
 399+ padding-bottom: 0.2em;
 400+ outline: none;
 401+ border: none;
390402 /*
391403 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
392404 * this from ever being shown anyways.
393405 */
394406 font-size: 13px;
395 - width: 14em;
396407 background-color: transparent;
397408 direction: ltr;
398409 }
399410 div#simpleSearch button#searchButton {
 411+ position: absolute;
 412+ width: 10%;
 413+ right: 0;
 414+ top: 0;
400415 padding: 0;
401 - margin: 0 5px;
 416+ padding-top: 0.2em;
 417+ padding-bottom: 0.2em;
 418+ padding-right: 0.4em;
 419+ margin: 0;
402420 border: none;
403421 cursor: pointer;
404422 background-color: transparent;
405 - font-size: x-small;
406423 }
407424 /* OVERRIDDEN BY COMPLIANT BROWSERS */
408425 div#simpleSearch button#searchButton img {
409426 border: none;
410427 margin: 0;
 428+ margin-top: -3px;
411429 padding: 0;
412 - padding-top: 0.5em;
413 - vertical-align: middle;
414430 }
415431 /* IGNORED BY IE6 */
416432 div#simpleSearch button#searchButton > img {
417 - padding-top: 0;
418 - margin-top: -1px;
 433+ margin: 0;
419434 }
420435 /* Panel */
421436 div#mw-panel {

Follow-up revisions

RevisionCommit summaryAuthorDate
r822201.17wmf1: MFT r80495, r80765, r81177, r82000, r82155, r82156, r82191, r82200,...catrope07:23, 16 February 2011
r85151MFT: r82000, r82004, r82020, r82025, r82038, r82039, r82048, r82070, r82081, ...demon20:39, 1 April 2011

Comments

#Comment by Kaldari (talk | contribs)   01:36, 16 February 2011

This all looks fine. A couple comments though:

  • The IE6 rendering problems will also be present in IE7 if it is rendering in quirks mode. This isn't an issue for the Wikimedia wikis since they all have DOCTYPE declarations that prevent IE7 from using quirks mode. However, I don't think MediaWiki uses a DOCTYPE declaration out of the box. I have no idea how the DOCTYPE stuff is controlled or configured, but it should probably be set to give you some kind of declaration by default, preferably one that avoids quirks mode. Otherwise, IE7 users still see all the layout bugs.
  • In addition to the formatting bugs in IE6 that you've already fixed, I've noticed that IE6 also gives the search box double margin on the right side. You might want to fix that one as well, although it is quite minor.
#Comment by Saper (talk | contribs)   00:49, 29 March 2011

I have installed vector on a 1.18alpha wiki running r84930 with the following bits from LocalConfig.php:

$wgDefaultSkin = 'vector';
require_once "$IP/extensions/CharInsert/CharInsert.php";
require_once "$IP/extensions/Cite/Cite.php";
require_once "$IP/extensions/CategoryTree/CategoryTree.php";
require_once "$IP/extensions/DeleteBatch/DeleteBatch.php";
require_once "$IP/extensions/ExpandTemplates/ExpandTemplates.php";
require_once "$IP/extensions/Gadgets/Gadgets.php";
require_once "$IP/extensions/InputBox/InputBox.php";
require_once "$IP/extensions/OggHandler/OggHandler.php";
require_once "$IP/extensions/ParserFunctions/ParserFunctions.php";
require_once "$IP/extensions/PasswordReset/PasswordReset.php";
require_once("$IP/extensions/Renameuser/SpecialRenameuser.php");
require_once "$IP/extensions/TimelineTable/TimelineTable.php";
require_once "$IP/extensions/TitleKey/TitleKey.php";
require_once "$IP/extensions/Vector/Vector.php";
$wgVectorUseSimpleSearch = true;

I have removed all MediaWiki:Common.css/Vector.css customizations as well as javascripts.

This is how it looks like with this patch (as of today's trunk):

Login-applied-82155.png

This is how it looks like without this patch (trunk with r82155 reverted):

Login-reverted-82155.png

On Wikimedia (r84908 as of now) it looks ok in this browser (the little search icon is positioned properly and the search box does not cross the line), but I can't find a clean Wikimedia setup without CSSS customizations to test:

Login-simplesearch-84908.png

#Comment by Kaldari (talk | contribs)   01:28, 29 March 2011

What browser are you using and what DocType is your local wiki?

#Comment by Saper (talk | contribs)   01:46, 29 March 2011

The response looks like:

GET /wiki/Specjalna:Zaloguj HTTP/1.0
Host: komar.wikimedia.pl

HTTP/1.1 200 OK
Date: Tue, 29 Mar 2011 01:41:23 GMT
Server: Apache
Set-Cookie: komarwiki_komar__session=f9gcfa17rgnuc3k7a6ii430o55; path=/; HttpOnly
Content-language: pl
X-Frame-Options: DENY
Vary: Accept-Encoding,Cookie
Expires: Thu, 01 Jan 1970 00:00:00 GMT
Cache-Control: private, must-revalidate, max-age=0
Connection: close
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html lang="pl" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Zaloguj się – Komar</title>
<meta name="generator" content="MediaWiki 1.18alpha" />
...

The browser is Mozilla/5.0 (X11; U; FreeBSD amd64; en-US; rv:1.9.1.13) Gecko/20100920 SeaMonkey/2.0.8 and it says it is in Standard compliance mode with content type text/html.

#Comment by Kaldari (talk | contribs)   03:15, 29 March 2011

It looks like the problem is caused by the premature switch to the HTML5 doctype in MediaWiki. I'll see if I can get the doctype change reverted in trunk.

Status & tagging log