Golopotw has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/358229 )
Change subject: Make Vector look more minimalistic
......................................................................
Make Vector look more minimalistic
Removes button images, break sidebar, head-nav and content with clear border.
Demo can be found on T167582
Change-Id: Ia06e39521044e508ef6caf1ccc30a0ce4debb82a
---
M VectorTemplate.php
M components/common.less
M components/footer.less
M components/navigation.less
M components/personalMenu.less
M components/search.less
M components/tabs.less
M screen-hd.less
M variables.less
9 files changed, 51 insertions(+), 120 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/Vector
refs/changes/29/358229/1
diff --git a/VectorTemplate.php b/VectorTemplate.php
index bf45341..9e43059 100644
--- a/VectorTemplate.php
+++ b/VectorTemplate.php
@@ -94,8 +94,31 @@
// Output HTML Page
$this->html( 'headelement' );
?>
- <div id="mw-page-base" class="noprint"></div>
- <div id="mw-head-base" class="noprint"></div>
+
+ <div id='body-left'>
+ <div id="mw-navigation">
+ <h2><?php $this->msg( 'navigation-heading' )
?></h2>
+ <div id="mw-panel">
+ <div id="p-logo" role="banner"><a
class="mw-wiki-logo" href="<?php
+ echo htmlspecialchars(
$this->data['nav_urls']['mainpage']['href'] )
+ ?>" <?php
+ echo Xml::expandAttributes(
Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) )
+ ?>></a></div>
+ <?php $this->renderPortals(
$this->data['sidebar'] ); ?>
+ </div>
+ </div>
+ </div>
+
+ <div id="body-right">
+ <div id="mw-head">
+ <?php $this->renderNavigation( 'PERSONAL' ); ?>
+ <div id="left-navigation">
+ <?php $this->renderNavigation( [
'NAMESPACES', 'VARIANTS' ] ); ?>
+ </div>
+ <div id="right-navigation">
+ <?php $this->renderNavigation( [
'VIEWS', 'ACTIONS', 'SEARCH' ] ); ?>
+ </div>
+ </div>
<div id="content" class="mw-body" role="main">
<a id="top"></a>
@@ -172,29 +195,8 @@
?>
<div class="visualClear"></div>
<?php $this->html( 'debughtml' ); ?>
- </div>
- </div>
- <div id="mw-navigation">
- <h2><?php $this->msg( 'navigation-heading' ) ?></h2>
-
- <div id="mw-head">
- <?php $this->renderNavigation( 'PERSONAL' ); ?>
- <div id="left-navigation">
- <?php $this->renderNavigation( [
'NAMESPACES', 'VARIANTS' ] ); ?>
- </div>
- <div id="right-navigation">
- <?php $this->renderNavigation( [
'VIEWS', 'ACTIONS', 'SEARCH' ] ); ?>
</div>
</div>
- <div id="mw-panel">
- <div id="p-logo" role="banner"><a
class="mw-wiki-logo" href="<?php
- echo htmlspecialchars(
$this->data['nav_urls']['mainpage']['href'] )
- ?>" <?php
- echo Xml::expandAttributes(
Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) )
- ?>></a></div>
- <?php $this->renderPortals(
$this->data['sidebar'] ); ?>
- </div>
- </div>
<div id="footer" role="contentinfo"<?php $this->html(
'userlangattributes' ) ?>>
<?php
foreach ( $this->getFooterLinks() as $category =>
$links ) {
@@ -234,6 +236,7 @@
?>
<div style="clear:both"></div>
</div>
+ </div>
<?php $this->printTrail(); ?>
</body>
diff --git a/components/common.less b/components/common.less
index 0c00963..1be6d4f 100644
--- a/components/common.less
+++ b/components/common.less
@@ -23,9 +23,17 @@
font-family: @content-font-family;
}
body {
- background-color: @menu-background-color;
+ background-color: #ffffff;
}
+#body-left{
+ position: absolute;
+}
+#body-right{
+ margin-left: 176px;
+ border-left: 1px solid #cacaca;
+ min-height: 100%;
+}
/* Content */
.mw-body,
.parsoid-body {
@@ -36,12 +44,8 @@
}
.mw-body {
- margin-left: 10em;
- /* Border on top, left, and bottom side */
- border: 1px solid @content-border-color;
- border-right-width: 0;
- /* Merge the border with tabs' one (in their background image) */
- margin-top: -1px;
+ border-top: 1px solid #cacaca;
+ padding: 1.25em 1.5em 1.5em 1.5em;
// h1's can exist outside of mw-body-content so some heading styles
// need to be defined in mw-body as well
@@ -70,6 +74,7 @@
.firstHeading {
/* Change the default from mediawiki.skinning CSS to let
indicators float into heading area */
overflow: visible;
+ border-bottom: 0px;
}
.mw-indicators {
diff --git a/components/footer.less b/components/footer.less
index 3d61b66..7bbc167 100644
--- a/components/footer.less
+++ b/components/footer.less
@@ -1,8 +1,6 @@
/* Footer */
div#footer {
- margin-left: 10em;
- margin-top: 0;
- padding: 0.75em;
+ padding: 0.75em 0.75em 0.75em 18px;
direction: ltr;
ul {
diff --git a/components/navigation.less b/components/navigation.less
index d1ab549..24cd175 100644
--- a/components/navigation.less
+++ b/components/navigation.less
@@ -10,27 +10,11 @@
}
/* Head */
-#mw-page-base {
- height: 5em;
- background-position: bottom left;
- background-repeat: repeat-x;
- /* This image is only a fallback (for IE 6-9), so we do not @embed it.
*/
- background-image: url( images/page-fade.png );
- .vertical-gradient(@body-background-color, @menu-background-color, 50%,
100%);
- background-color: @body-background-color;
-}
-
-#mw-head-base {
- margin-top: -5em;
- margin-left: 10em;
- height: 5em;
-}
div#mw-head {
- position: absolute;
- top: 0;
- right: 0;
width: 100%;
+ height: 82px;
+ background: #f7f7f7;
h3 {
margin: 0;
@@ -40,31 +24,22 @@
/* Navigation Containers */
#left-navigation {
- float: left;
- margin-left: 10em;
- margin-top: 2.5em;
- /* When right nav would overlap left nav, it's placed below it
- (normal CSS floats behavior). This rule ensures that no empty space
- is shown between them due to right nav's margin-top. Page layout
- is still broken, but at least the nav overlaps only the page title
- instead of half the content. */
- margin-bottom: -2.5em;
- /* IE 6 double-margin bug fix */
- display: inline;
+ position: absolute;
+ top: 40px;
+ padding-left: 12px;
}
#right-navigation {
- float: right;
- margin-top: 2.5em;
+ position: absolute;
+ top: 40px;
+ right: 0px;
}
/* Logo */
#p-logo {
- position: absolute;
- top: -160px;
- left: 0;
width: 10em;
height: 160px;
+ margin-bottom: 18px;
a {
display: block;
@@ -79,11 +54,7 @@
/* Panel */
div#mw-panel {
font-size: @menu-main-font-size;
- position: absolute;
- top: 160px;
- padding-top: 1em;
- width: 10em;
- left: 0;
+ padding: 0px 8px;
div.portal {
margin: 0 0.6em 0 0.7em;
diff --git a/components/personalMenu.less b/components/personalMenu.less
index 7688e1c..aeb2a45 100644
--- a/components/personalMenu.less
+++ b/components/personalMenu.less
@@ -2,7 +2,7 @@
#p-personal {
position: absolute;
top: 0.33em;
- right: 0.75em;
+ right: 1em;
/* Display on top of page tabs - bugs 37158, 48078 */
z-index: 100;
diff --git a/components/search.less b/components/search.less
index 50bfe13..5d3340d 100644
--- a/components/search.less
+++ b/components/search.less
@@ -5,7 +5,7 @@
#p-search {
/* @noflip */
float: left;
- margin-right: 0.5em;
+ margin-right: 1em;
margin-left: 0.5em;
h3 {
diff --git a/components/tabs.less b/components/tabs.less
index e53c179..717a5db 100644
--- a/components/tabs.less
+++ b/components/tabs.less
@@ -12,9 +12,6 @@
/* @noflip */
float: left;
height: 2.5em;
- .background-image('images/tab-break.png');
- background-position: bottom left;
- background-repeat: no-repeat;
padding-left: 1px;
ul {
@@ -25,9 +22,6 @@
list-style-image: none;
margin: 0;
padding: 0;
- .background-image('images/tab-break.png');
- background-position: right bottom;
- background-repeat: no-repeat;
li {
/* @noflip */
@@ -38,10 +32,6 @@
height: 100%;
margin: 0;
padding: 0;
- background-color: #f3f3f3;
- .background-image('images/tab-normal-fade.png');
- background-position: bottom left;
- background-repeat: repeat-x;
white-space: nowrap;
}
@@ -60,10 +50,8 @@
}
&.selected {
- .background-image('images/tab-current-fade.png');
a,
a:visited {
- color: #222;
text-decoration: none;
}
}
@@ -94,7 +82,6 @@
span {
display: inline-block;
- .background-image('images/tab-break.png');
background-position: bottom right;
background-repeat: no-repeat;
height: 100%;
@@ -132,9 +119,6 @@
div#mw-head div.vectorMenu h3 {
/* @noflip */
float: left;
- .background-image('images/tab-break.png');
- background-repeat: no-repeat;
- background-position: bottom right;
font-size: 1em;
height: 2.5em;
// This effectively moves the "background border" outside of the
element to act like a real
diff --git a/screen-hd.less b/screen-hd.less
index 96c96cc..f455028 100644
--- a/screen-hd.less
+++ b/screen-hd.less
@@ -1,30 +1,3 @@
/* Vector screen styles for high definition displays */
@import 'variables.less';
-
-.mw-body {
- margin-left: 11em;
- padding: 1.25em 1.5em 1.5em 1.5em;
-}
-#p-logo {
- left: @menu-main-logo-left;
-}
-div#footer {
- margin-left: 11em;
- padding: 1.25em;
-}
-#mw-panel {
- padding-left: 0.5em;
-}
-#p-search {
- margin-right: 1em;
-}
-#left-navigation {
- margin-left: 11em;
-}
-#p-personal {
- right: 1em;
-}
-#mw-head-base {
- margin-left: 11em;
-}
diff --git a/variables.less b/variables.less
index 98f9766..db8ab81 100755
--- a/variables.less
+++ b/variables.less
@@ -15,9 +15,6 @@
@body-background-color: #fff;
@heading-line-height: 1.3;
-// Navigation
-@menu-background-color: #f6f6f6;
-
// Common menu
@menu-link-color: #0645ad;
--
To view, visit https://gerrit.wikimedia.org/r/358229
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia06e39521044e508ef6caf1ccc30a0ce4debb82a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/Vector
Gerrit-Branch: master
Gerrit-Owner: Golopotw <golo...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
