jenkins-bot has submitted this change and it was merged.
Change subject: Hygiene: Clean up overlays.less and pagelist.less
......................................................................
Hygiene: Clean up overlays.less and pagelist.less
Change-Id: I14e46ce0445c268773eb08eab409599f4768197a
---
M includes/specials/SpecialMobileWatchlist.php
M javascripts/common/languages/LanguageOverlay.js
M javascripts/modules/nearby/NearbyOverlay.js
M javascripts/modules/search/search.js
M javascripts/modules/talk/TalkOverlay.js
M less/common/overlays.less
M less/common/pagelist.less
M less/mixins.less
M less/modules/NotificationsOverlay.less
M less/specials/nearby.less
M less/variables.less
M templates/articleList.html
M templates/overlays/languages.html
M templates/overlays/talk.html
14 files changed, 127 insertions(+), 185 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/specials/SpecialMobileWatchlist.php
b/includes/specials/SpecialMobileWatchlist.php
index 3dc8b00..83dbcad 100644
--- a/includes/specials/SpecialMobileWatchlist.php
+++ b/includes/specials/SpecialMobileWatchlist.php
@@ -312,7 +312,7 @@
$output->addHtml(
Html::openElement( 'ul',
array(
- 'class' => $feed ? 'page-list'
: 'page-list a-to-z',
+ 'class' => 'watchlist ' . (
$feed ? 'page-list' : 'page-list thumbs' ),
)
)
);
diff --git a/javascripts/common/languages/LanguageOverlay.js
b/javascripts/common/languages/LanguageOverlay.js
index 1cceba2..cf37008 100644
--- a/javascripts/common/languages/LanguageOverlay.js
+++ b/javascripts/common/languages/LanguageOverlay.js
@@ -9,7 +9,7 @@
languagesText: mw.msg(
'mobile-frontend-language-footer' ),
placeholder: mw.msg(
'mobile-frontend-language-site-choose' )
},
- className: 'language-overlay mw-mf-overlay list-overlay',
+ className: 'language-overlay mw-mf-overlay',
template: M.template.get( 'overlays/languages' ),
initialize: function( options ) {
if ( options.languages && options.languages.length ) {
diff --git a/javascripts/modules/nearby/NearbyOverlay.js
b/javascripts/modules/nearby/NearbyOverlay.js
index c44a779..16ad94a 100644
--- a/javascripts/modules/nearby/NearbyOverlay.js
+++ b/javascripts/modules/nearby/NearbyOverlay.js
@@ -7,7 +7,7 @@
NearbyOverlay = Overlay.extend( {
active: false,
closeOnBack: true,
- className: 'mw-mf-overlay list-overlay',
+ className: 'mw-mf-overlay',
template: M.template.get( 'overlays/nearby' ),
defaults: {
heading: 'Nearby'
diff --git a/javascripts/modules/search/search.js
b/javascripts/modules/search/search.js
index 4b4be42..1d22270 100644
--- a/javascripts/modules/search/search.js
+++ b/javascripts/modules/search/search.js
@@ -36,7 +36,7 @@
noresults: mw.msg( 'mobile-frontend-search-noresults' ),
action: mw.config.get( 'wgScript' )
},
- className: 'mw-mf-overlay list-overlay',
+ className: 'mw-mf-overlay',
postRender: function( options ) {
var self = this;
diff --git a/javascripts/modules/talk/TalkOverlay.js
b/javascripts/modules/talk/TalkOverlay.js
index 042428c..bf6c990 100644
--- a/javascripts/modules/talk/TalkOverlay.js
+++ b/javascripts/modules/talk/TalkOverlay.js
@@ -66,7 +66,7 @@
} ),
TalkOverlay = Overlay.extend( {
template: M.template.get( 'overlays/talk' ),
- className: 'mw-mf-overlay list-overlay',
+ className: 'mw-mf-overlay',
defaults: {
heading: mw.msg(
'mobile-frontend-talk-overlay-header' ),
leadHeading: mw.msg(
'mobile-frontend-talk-overlay-lead-header' )
diff --git a/less/common/overlays.less b/less/common/overlays.less
index e45fd6e..634c434 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -25,23 +25,17 @@
top: 0;
left: 0;
width: 100%;
- background-color: white;
+ background-color: #fff;
z-index: 4;
.header .cancel {
- display: block;
position: absolute;
- cursor: pointer;
border: none;
height: @headerHeight;
width: @searchBarPaddingLeft;
- overflow: hidden; // see bug 53102
left: 0;
- background: none;
- background-image: url(images/arrow-left.png);
- background-repeat: no-repeat;
- background-position: center center;
- text-indent: -999px;
+ background: url(images/arrow-left.png) 50% 50% no-repeat;
+ text-indent: -9999px;
.background-size( auto, @headerElementHeight );
}
@@ -54,13 +48,13 @@
text-align: left;
}
+ // LearnMoreOverlay
&.informative {
- margin-left: 16px;
+ margin: 0 0 1em 16px;
list-style: outside square;
- margin-bottom: 16px;
li {
- margin-bottom: 8px;
+ margin-bottom: .5em;
}
}
}
@@ -108,7 +102,7 @@
.license {
// FIXME: move this image?
background: url('../modules/images/cc-by-sa.png') 0
10px no-repeat;
- background-size: auto 16px;
+ .background-size( auto, 16px );
padding-bottom: 0;
padding-left: 55px;
font-size: .75em !important;
@@ -119,67 +113,9 @@
.mw-mf-overlay-footer,
.mw-mf-overlay-header {
- padding: 4px 8px 4px @contentMarginLeft;
-
- margin: 0;
- font-size: 0.8em;
+ padding: 4px 8px 4px @searchBarPaddingLeft;
+ font-size: .8em;
color: #666;
border-bottom: solid 1px #eee;
- }
-
- .mw-mf-overlay-footer {
- a {
- display: inline;
- color: #002BB8;
- }
- }
-
- &.list-overlay {
- .mw-mf-overlay-footer,
- .mw-mf-overlay-header {
- padding-left: @searchBarPaddingLeft;
- }
- }
-}
-
-.mw-mf-overlay {
- ul.actionable {
- cursor: pointer;
-
- li {
- &:hover {
- background-color: #ACD1E9;
- }
- > a {
- display: block;
- color: #666;
-
- &:active,
- &:hover,
- &:visited {
- text-decoration: none;
- color: #666;
- }
- }
- }
- }
-}
-
-.mw-mf-overlay > ul {
- padding: 0;
- position: relative;
- padding-bottom: 20px;
- margin: 0;
- background-color: white;
- list-style: none;
-
- li {
- color: #666;
- border: none;
- position: relative;
- border-bottom: solid 1px #999999;
- border-bottom: solid 1px #eee;
- padding: @searchResultPaddingVertical @searchBarPaddingLeft;
- font-size: 0.9em;
}
}
diff --git a/less/common/pagelist.less b/less/common/pagelist.less
index 883b92f..71051a2 100644
--- a/less/common/pagelist.less
+++ b/less/common/pagelist.less
@@ -8,7 +8,7 @@
.listThumb {
background-repeat: no-repeat;
- background-position: center center;
+ background-position: 50% 50%;
&.needsPhoto {
.background-size(100%, auto);
background-color: #3b6fba;
@@ -24,116 +24,119 @@
.background-size(100%, auto);
}
-ul.page-list {
- list-style: none;
+.page-list {
+ cursor: pointer;
li {
- border-bottom: solid 1px #e2e2e2;
- color: #808080;
- line-height: 1;
+ color: #666;
position: relative;
+ border-bottom: solid 1px #eee;
+ padding: 18px @contentMarginRight;
+ // avoid the gap between thumbnails
+ margin: 0 0 -1px;
+ line-height: 1;
- .listThumb {
- position: absolute;
- width: @thumbWidth;
- height: 100%;
- margin: 0 0 0 -@thumbSpace;
- }
-
-
- .title {
+ > a {
display: block;
- position: relative;
- padding: 0 @contentMarginRight @articleListPaddingTop
@contentMarginLeft;
- margin: -1px 0;
- /* FIXME: remove if we reset text-decoration in common
styles */
- text-decoration: none;
-
- h2 {
- .watchlist-heading();
- // 22px is the width of the watchlist star,
+2px for additional padding
- padding: 20px 24px 0 0;
- }
-
- &.new {
- h2 {
- color: @redBase;
- }
- }
- }
-
- a:active {
- .background-alpha(232, 232, 233, .5);
- }
-
- div, p {
- font-size: .9em;
- margin: 0;
- color: #999b9e;
- }
-
- p {
- white-space: nowrap;
- text-overflow: ellipsis;
- -webkit-text-overflow: ellipsis;
- overflow: hidden;
- line-height: 1;
- margin: .25em 0 0;
- }
-
- .info {
- color: #a6a6a6;
- font-size: .7em;
- text-transform: uppercase;
- margin: .6em 0 0;
- }
-
- .mw-mf-user {
- margin: .5em 0 0;
- }
- }
-}
-
-ul.a-to-z {
- li {
- a.title {
- padding-left: @thumbSpace;
- }
- }
-}
-
-.mw-mf-overlay {
- ul.a-to-z li {
- font-size: 0.9em;
- h2 {
- font-weight: normal;
color: #666;
+
+ &:active,
+ &:hover,
+ &:visited {
+ text-decoration: none;
+ color: #666;
+ }
}
- .listThumb {
- width: @thumbOverlayWidth;
- height: 100%;
- margin-left: -@thumbOverlaySpace;
+ }
+
+ &.thumbs li {
+ padding-left: @thumbSpace;
+ }
+
+ .title {
+ // 22px is the width of the watchlist star, +2px for additional
padding
+ padding-right: 24px;
+
+ h2 {
+ .watchlist-heading();
}
- a.title {
+ }
+
+ .listThumb {
+ position: absolute;
+ width: @thumbWidth;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+
+ // something on watchlist that doesn't exist
+ .title.new h2 {
+ color: @redBase;
+ }
+
+ div, p {
+ font-size: .9em;
+ margin: 0;
+ color: #999b9e;
+ }
+
+ p {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ -webkit-text-overflow: ellipsis;
+ overflow: hidden;
+ line-height: 1;
+ margin: .25em 0 0;
+ }
+
+ .info {
+ color: #a6a6a6;
+ font-size: .7em;
+ text-transform: uppercase;
+ margin: .6em 0 0;
+ }
+
+ .mw-mf-user {
+ margin: .5em 0 0;
+ }
+}
+
+// FIXME: there is no reason for styling in overlays to be different!
+.mw-mf-overlay {
+ .page-list {
+ font-size: .9em;
+
+ li {
+ padding-left: @searchBarPaddingLeft;
+ }
+
+ &.thumbs li {
padding-left: @thumbOverlaySpace;
}
+
+ h2 {
+ font: inherit;
+ }
+
+ .listThumb {
+ width: @thumbOverlayWidth;
+ }
+ }
+
+ .actionable {
+ li:hover {
+ background-color: #ACD1E9;
+ }
}
}
-// FIXME: Remove these rules when page images in search results are moved to
stable.
-.stable .mw-mf-overlay {
- ul.a-to-z li {
- padding: 12px 40px;
- line-height: 1.65;
- a.title {
- padding: 0;
- margin: 0;
- h2 {
- padding: 0;
- }
- .info {
- display: none;
- }
+// search without page images
+// FIXME: remove when page images are in stable
+.stable {
+ .suggestions-results {
+ li {
+ padding-left: @searchBarPaddingLeft !important;
}
}
}
diff --git a/less/mixins.less b/less/mixins.less
index a37710c..c33899d 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -2,7 +2,6 @@
.watchlist-heading() {
font: inherit;
- margin: 0;
font-weight: bold;
color: #404040;
}
diff --git a/less/modules/NotificationsOverlay.less
b/less/modules/NotificationsOverlay.less
index f3845cb..429c453 100644
--- a/less/modules/NotificationsOverlay.less
+++ b/less/modules/NotificationsOverlay.less
@@ -1,5 +1,5 @@
+// FIXME: some of this could be removed if we reused .page-list styling
@import "../mixins.less";
-
.mw-mf-overlay {
.mw-mf-notifications {
@@ -20,6 +20,10 @@
.mw-echo-notification-primary-link {
display: none;
}
+ .mw-echo-notification {
+ padding: 1.2em 1em 1em 1em;
+ border-bottom: 1px solid #eee;
+ }
.mw-echo-notification:hover {
background-color: #F9F9F9;
}
diff --git a/less/specials/nearby.less b/less/specials/nearby.less
index 5f26e24..8c7bd93 100644
--- a/less/specials/nearby.less
+++ b/less/specials/nearby.less
@@ -7,7 +7,7 @@
border-bottom: solid 1px @headerBorderBottom;
}
-ul.a-to-z {
+.page-list {
li {
.proximity {
font-size: .8em;
diff --git a/less/variables.less b/less/variables.less
index c5073f7..1469c20 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -14,8 +14,6 @@
@contentMarginRight: 16px;
@contentMarginLeft: @contentMarginRight;
-// article list view
-@articleListPaddingTop: 15px;
// colors
@blueBase : #3366BB;
@greenBase : #008740;
diff --git a/templates/articleList.html b/templates/articleList.html
index 3d608a6..bfedaf0 100644
--- a/templates/articleList.html
+++ b/templates/articleList.html
@@ -7,13 +7,15 @@
{{#loadingMessage}}
<div class="content loading">{{loadingMessage}}</div>
{{/loadingMessage}}
-<ul class="page-list a-to-z actionable">
+<ul class="page-list thumbs actionable">
{{#pages}}
<li title="{{title}}">
<a href="{{url}}" class="title" name="{{anchor}}"
data-latlng="{{latitude}},{{longitude}}" data-title="{{title}}">
<div class="listThumb {{pageimageClass}}"
style="{{listThumbStyleAttribute}}"></div>
<h2>{{{heading}}}</h2>
+ {{#proximity}}
<div class="info proximity">{{proximity}}</div>
+ {{/proximity}}
</a>
</li>
{{/pages}}
diff --git a/templates/overlays/languages.html
b/templates/overlays/languages.html
index b7289d5..8ab837c 100644
--- a/templates/overlays/languages.html
+++ b/templates/overlays/languages.html
@@ -6,7 +6,7 @@
</div>
{{#variantHeader}}
<p class="mw-mf-overlay-header">{{{variantHeader}}}</p>
-<ul class="actionable">
+<ul class="page-list actionable">
{{#variants}}
<li>
<a href="{{url}}" hreflang="{{lang}}"
lang="{{lang}}"><span>{{langName}}</span>{{#pageName}}
({{pageName}}){{/pageName}}</a>
@@ -16,7 +16,7 @@
{{/variantHeader}}
{{#header}}
<p class="mw-mf-overlay-header">{{{header}}}</p>
-<ul class="actionable">
+<ul class="page-list actionable">
{{#languages}}
<li {{#preferred}}class="preferred"{{/preferred}}>
<a href="{{url}}" hreflang="{{lang}}"
lang="{{lang}}"><span>{{langName}}</span>{{#pageName}}
({{pageName}}){{/pageName}}</a>
diff --git a/templates/overlays/talk.html b/templates/overlays/talk.html
index 3763405..38648c1 100644
--- a/templates/overlays/talk.html
+++ b/templates/overlays/talk.html
@@ -4,7 +4,7 @@
<button class="add">+</button>
</div>
<p class="mw-mf-overlay-header">{{explanation}}</p>
-<ul class="actionable">
+<ul class="page-list actionable">
<li class="lead-discussion">
<a data-id="0">{{leadHeading}}</a>
</li>
--
To view, visit https://gerrit.wikimedia.org/r/90068
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I14e46ce0445c268773eb08eab409599f4768197a
Gerrit-PatchSet: 8
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
