jenkins-bot has submitted this change and it was merged.
Change subject: Tablet styling tweaks
......................................................................
Tablet styling tweaks
* Make ToC's width auto so that it stays narrow when it can and expands
if section names are long (consulted with Moiz)
* Every section after second section has extra line above section header
which should get removed
* Remove vertical line next to section edit icons
* Article title and article action icons should be aligned (currently the
latter are sitting a little lower than the former on the line)
Bug: 65201
Conflicts:
less/modules/toc/toc.less
less/modules/toggle.less
Change-Id: Ib40c0db2e9d3edd4b598b7028bad90e58bb05a25
---
M less/common/ui.less
M less/modules/toc/toc.less
M less/modules/toggle.less
M less/tablet/common.less
4 files changed, 14 insertions(+), 17 deletions(-)
Approvals:
MaxSem: Looks good to me, approved
jenkins-bot: Verified
diff --git a/less/common/ui.less b/less/common/ui.less
index e060c2e..e663615 100644
--- a/less/common/ui.less
+++ b/less/common/ui.less
@@ -122,7 +122,6 @@
display: none;
position: absolute;
background-position: 100% @headingMargin;
- border-left: solid 1px @sectionBorderColor;
width: @sectionIconWidth + 5px;
top: 0;
bottom: 0;
diff --git a/less/modules/toc/toc.less b/less/modules/toc/toc.less
index c2b3b32..c16cae4 100644
--- a/less/modules/toc/toc.less
+++ b/less/modules/toc/toc.less
@@ -1,9 +1,11 @@
@import "minerva.mixins";
@import "minerva.variables";
-@leftMargin: 1.5em;
-@iconSize: 1em;
-@iconHeadingGap: 1em;
+@paddingHorizontal: 24px;
+@iconSize: 16px;
+@iconHeadingGap: 12px;
+@paddingVertical: 16px;
+@fontSize: .8em;
.client-js .toc-mobile {
// FIXME: Use predefined colors?
@@ -11,20 +13,18 @@
border: solid 1px @grayLightest;
font-size: 1.3em;
float: left;
- width: @wgMFDeviceWidthTablet - @infoboxWidth;
+ margin: 1em 0;
- @paddingVertical: 1em;
- @fontSize: .8em;
h2 {
font-family: @fontFamily;
line-height: @iconSize;
- margin-left: @leftMargin;
- margin-right: @leftMargin;
background-position: right center;
font-size: @fontSize;
font-weight: bold;
- padding: @paddingVertical 0 @paddingVertical @iconSize +
@iconHeadingGap;
+ padding: @paddingVertical @paddingHorizontal @paddingVertical
(@paddingHorizontal + @iconSize + @iconHeadingGap);
border-bottom: none;
+ // add right padding to the chevron without reducing tapable
area
+ border-right: @paddingHorizontal solid transparent;
.icon {
.background-image('images/contents.png');
@@ -32,7 +32,7 @@
height: @iconSize;
display: block;
position: absolute;
- left: 0;
+ left: @paddingVertical;
top: @paddingVertical;
}
}
@@ -40,8 +40,8 @@
.content_block {
// Override default toggle styles
border-bottom: none;
- margin-left: @leftMargin + @iconSize + @iconHeadingGap;
- margin-right: @leftMargin;
+ margin-left: @paddingHorizontal + @iconSize + @iconHeadingGap;
+ margin-right: @paddingHorizontal;
font-size: (7 * @fontSize) / 8;
> ul {
diff --git a/less/modules/toggle.less b/less/modules/toggle.less
index fc8c953..7e07149 100644
--- a/less/modules/toggle.less
+++ b/less/modules/toggle.less
@@ -15,7 +15,6 @@
.client-js {
.section_heading,
.content_block {
- border-bottom: solid 1px @sectionBorderColor;
clear: both;
}
@@ -24,12 +23,11 @@
.background-image('images/show.png');
background-position: left 1.05;
padding-left: 24px;
- cursor: pointer;
+ border-bottom: solid 1px @sectionBorderColor;
&.openSection {
.background-image('images/hide.png');
padding-right: @sectionIconWidth + 15px;
- border-bottom: solid 1px @sectionBorderColor;
margin-bottom: @headingMargin;
}
}
diff --git a/less/tablet/common.less b/less/tablet/common.less
index 951c478..94c2021 100644
--- a/less/tablet/common.less
+++ b/less/tablet/common.less
@@ -30,7 +30,7 @@
}
#page-actions {
- padding: 40px @contentPaddingTablet 0 0;
+ padding: 36px @contentPaddingTablet 0 0;
position: absolute;
right: 0;
top: 0;
--
To view, visit https://gerrit.wikimedia.org/r/140025
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ib40c0db2e9d3edd4b598b7028bad90e58bb05a25
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: wmf/1.24wmf8
Gerrit-Owner: JGonera <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: MaxSem <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
