JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/87014
Change subject: Story 1030: Clean up toggle.less
......................................................................
Story 1030: Clean up toggle.less
Also, clean up typography.less a bit more.
Change-Id: I93758deb5f117957578082214da41cd587893650
---
M less/common/pageactions.less
M less/common/typography.less
M less/modules/toggle.less
M less/variables.less
M stylesheets/common/pageactions.css
M stylesheets/common/typography.css
M stylesheets/modules/editor.css
M stylesheets/modules/languages.css
M stylesheets/modules/toggle.css
M stylesheets/specials/userlogin.css
M tests/javascripts/modules/test_mf-toggle.js
11 files changed, 32 insertions(+), 116 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/14/87014/1
diff --git a/less/common/pageactions.less b/less/common/pageactions.less
index bc68fc1..7b1fd77 100644
--- a/less/common/pageactions.less
+++ b/less/common/pageactions.less
@@ -11,8 +11,8 @@
}
#section_0 {
- margin: 14px @contentMarginRight 0 @contentMarginLeft;
- padding-bottom: 9px;
+ margin: 12px @contentMarginRight 0 @contentMarginLeft;
+ padding-bottom: 7px;
border-bottom: dotted 1px #CACACA;
}
diff --git a/less/common/typography.less b/less/common/typography.less
index f2db6af..5af3518 100644
--- a/less/common/typography.less
+++ b/less/common/typography.less
@@ -7,7 +7,7 @@
}
@bodyLineHeight: ( @baseFontSize / 3 ) * 4; /* = 16pt */
-@headingLineHeight: 22pt;
+@headingLineHeight: 1.3;
body {
font-family: @fontFamily;
@@ -26,17 +26,14 @@
}
.content {
- h1, h2, h3 {
+ h1, h2, h3, h4, h5, h6 {
line-height: @headingLineHeight;
- }
-
- h2, h3, h4, h5, h6 {
font-family: @fontFamilyHeading;
padding: @headingMargin 0;
}
p {
- margin-bottom: 8pt;
+ margin-bottom: .7em;
}
}
@@ -58,7 +55,6 @@
h3 {
font-size: ( @baseFontSize / 6 ) * 7; /* 14pt */
font-weight: bold;
- margin-bottom: 8pt;
}
h4 {
@@ -79,17 +75,11 @@
}
.content {
- margin: @headingMargin @contentMarginRight 0 @contentMarginLeft;
+ margin: .8em @contentMarginRight 0 @contentMarginLeft;
// make sure that the spinner is visible on lazy loading
// (room for spinner + margins)
min-height: 100px;
-
- .content_block {
- h3:first-child {
- margin-top: 0;
- }
- }
.thumb {
margin: 15px 0 15px 0;
diff --git a/less/modules/toggle.less b/less/modules/toggle.less
index 708144e..5d58611 100644
--- a/less/modules/toggle.less
+++ b/less/modules/toggle.less
@@ -11,10 +11,15 @@
}
.client-js {
+ .section_heading,
+ .content_block {
+ border-bottom: solid 1px @sectionBorderColor;
+ clear: both;
+ }
.section_heading {
position: relative;
- background: url(images/show.png) left 1.1em no-repeat;
+ background: url(images/show.png) left 1.05em no-repeat;
.background-size( 15px, auto );
padding-left: 24px;
cursor: pointer;
@@ -27,50 +32,11 @@
}
}
- h1.section_heading {
- background-position: left 0.9em;
- padding: 9pt 24px 9pt;
- }
-
- a.section_anchors {
+ .content_block {
display: none;
+
&.openSection {
display: block;
}
-
- margin-bottom: 5px;
- margin-top: 7px;
- color: blue;
- }
- .openSection.content_block {
- -webkit-tap-highlight-color: normal; /* fix for Bug 36196 */
- display: block;
- }
- .content_block {
- position: relative;
- overflow: hidden;
- -webkit-tap-highlight-color: rgba(0,0,0,0); /* fix for Bug
36196 */
}
}
-
-.page-loading .section_anchors,
-.page-loading .content_block,
-.client-js .content_block {
- display: none;
-
- &.openSection {
- display: block;
- }
-}
-
-#content_wrapper {
- .section_heading,
- .content_block {
- border-bottom: solid 1px @sectionBorderColor;
- }
-
- .content_block {
- clear: both;
- }
-}
-
diff --git a/less/variables.less b/less/variables.less
index d4ab920..103d06d 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -33,7 +33,7 @@
@fontScalingFactor: 0.9;
// FIXME: Deprecate use of @baseFontSize;
@baseFontSize: 1em;
-@headingMargin: 9pt;
+@headingMargin: .5em;
@sectionBorderColor: #E2E3E4;
@sectionIconWidth: 30px;
diff --git a/stylesheets/common/pageactions.css
b/stylesheets/common/pageactions.css
index f8df77b..2cb4ff3 100644
--- a/stylesheets/common/pageactions.css
+++ b/stylesheets/common/pageactions.css
@@ -13,8 +13,8 @@
display: none;
}
#section_0 {
- margin: 14px 16px 0 16px;
- padding-bottom: 9px;
+ margin: 12px 16px 0 16px;
+ padding-bottom: 7px;
border-bottom: dotted 1px #CACACA;
}
#page-actions {
diff --git a/stylesheets/common/typography.css
b/stylesheets/common/typography.css
index 6cb4541..9394fef 100644
--- a/stylesheets/common/typography.css
+++ b/stylesheets/common/typography.css
@@ -24,23 +24,20 @@
font-family: Georgia, serif;
}
#content_wrapper h1 {
- line-height: 22pt;
+ line-height: 1.3;
}
.content h1,
-.content h2,
-.content h3 {
- line-height: 22pt;
-}
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
+ line-height: 1.3;
font-family: Georgia, serif;
- padding: 9pt 0;
+ padding: 0.5em 0;
}
.content p {
- margin-bottom: 8pt;
+ margin-bottom: .7em;
}
dl {
margin-left: 1em;
@@ -61,7 +58,6 @@
/* 14pt */
font-weight: bold;
- margin-bottom: 8pt;
}
h4 {
font-weight: bold;
@@ -77,11 +73,8 @@
font-size: 0.75em;
}
.content {
- margin: 9pt 16px 0 16px;
+ margin: 0.8em 16px 0 16px;
min-height: 100px;
-}
-.content .content_block h3:first-child {
- margin-top: 0;
}
.content .thumb {
margin: 15px 0 15px 0;
diff --git a/stylesheets/modules/editor.css b/stylesheets/modules/editor.css
index f1f0fdd..330f286 100644
--- a/stylesheets/modules/editor.css
+++ b/stylesheets/modules/editor.css
@@ -7,7 +7,7 @@
*/
.content .edit-page {
position: absolute;
- background: url(../common/images/pagemenu/edit.png) 100% 9pt no-repeat;
+ background: url(../common/images/pagemenu/edit.png) 100% 0.5em no-repeat;
/* use -webkit prefix for older android browsers eg. nexus 1 */
-o-background-size: auto 30px;
diff --git a/stylesheets/modules/languages.css
b/stylesheets/modules/languages.css
index be7683b..7caea2a 100644
--- a/stylesheets/modules/languages.css
+++ b/stylesheets/modules/languages.css
@@ -6,7 +6,7 @@
* See README.mediawiki for details on installing.
*/
button.languageSelector {
- margin-top: 9pt;
+ margin-top: 0.5em;
}
.language-overlay > ul {
padding-bottom: 0;
diff --git a/stylesheets/modules/toggle.css b/stylesheets/modules/toggle.css
index d9365ba..aa29e30 100644
--- a/stylesheets/modules/toggle.css
+++ b/stylesheets/modules/toggle.css
@@ -14,9 +14,14 @@
.content_block {
width: 100%;
}
+.client-js .section_heading,
+.client-js .content_block {
+ border-bottom: solid 1px #e2e3e4;
+ clear: both;
+}
.client-js .section_heading {
position: relative;
- background: url(images/show.png) left 1.1em no-repeat;
+ background: url(images/show.png) left 1.05em no-repeat;
/* use -webkit prefix for older android browsers eg. nexus 1 */
-o-background-size: 15px auto;
@@ -29,48 +34,11 @@
background-image: url(images/hide.png);
padding-right: 45px;
border-bottom: solid 1px #e2e3e4;
- margin-bottom: 9pt;
+ margin-bottom: 0.5em;
}
-.client-js h1.section_heading {
- background-position: left 0.9em;
- padding: 9pt 24px 9pt;
-}
-.client-js a.section_anchors {
- display: none;
- margin-bottom: 5px;
- margin-top: 7px;
- color: blue;
-}
-.client-js a.section_anchors.openSection {
- display: block;
-}
-.client-js .openSection.content_block {
- -webkit-tap-highlight-color: normal;
- /* fix for Bug 36196 */
-
- display: block;
-}
-.client-js .content_block {
- position: relative;
- overflow: hidden;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- /* fix for Bug 36196 */
-
-}
-.page-loading .section_anchors,
-.page-loading .content_block,
.client-js .content_block {
display: none;
}
-.page-loading .section_anchors.openSection,
-.page-loading .content_block.openSection,
.client-js .content_block.openSection {
display: block;
-}
-#content_wrapper .section_heading,
-#content_wrapper .content_block {
- border-bottom: solid 1px #e2e3e4;
-}
-#content_wrapper .content_block {
- clear: both;
}
diff --git a/stylesheets/specials/userlogin.css
b/stylesheets/specials/userlogin.css
index d0c5b06..4e23b94 100644
--- a/stylesheets/specials/userlogin.css
+++ b/stylesheets/specials/userlogin.css
@@ -13,7 +13,7 @@
text-align: center;
height: 72px;
width: 100%;
- margin-bottom: 9pt;
+ margin-bottom: 0.5em;
}
#mw-mf-login .watermark img,
#mw-mf-accountcreate .watermark img {
diff --git a/tests/javascripts/modules/test_mf-toggle.js
b/tests/javascripts/modules/test_mf-toggle.js
index 96477bd..7f878c9 100644
--- a/tests/javascripts/modules/test_mf-toggle.js
+++ b/tests/javascripts/modules/test_mf-toggle.js
@@ -5,7 +5,6 @@
$container = $( '<div id="content_wrapper">' ).appendTo( document.body
);
$( '<h2 class="section_heading" id="section_1"><span
id="First_Section">First Section</span></h2>' ).appendTo( $container );
$( '<div class="content_block" id="content_1"><p>Text</p></div>'
).appendTo( $container );
- $( '<div id="anchor_1" class="section_anchors" style="display:none"><a
href="#section_1" class="back_to_top">↑Jump back a section</a></div>'
).appendTo( $container );
$( '<h2 class="section_heading" id="section_2">' ).appendTo( $container
);
$( '<div class="content_block" id="content_2">' ).appendTo( $container
);
--
To view, visit https://gerrit.wikimedia.org/r/87014
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I93758deb5f117957578082214da41cd587893650
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
