JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/90068
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/NotificationsOverlay.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 templates/articleList.html
M templates/overlays/languages.html
M templates/overlays/talk.html
12 files changed, 102 insertions(+), 160 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/68/90068/1
diff --git a/includes/specials/SpecialMobileWatchlist.php
b/includes/specials/SpecialMobileWatchlist.php
index 4fc6808..be7941e 100644
--- a/includes/specials/SpecialMobileWatchlist.php
+++ b/includes/specials/SpecialMobileWatchlist.php
@@ -317,7 +317,7 @@
$output->addHtml(
Html::openElement( 'ul',
array(
- 'class' => $feed ? 'page-list'
: 'page-list a-to-z',
+ 'class' => 'watchlist ' . (
$feed ? 'page-list' : 'page-list a-to-z' ),
)
)
);
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/NotificationsOverlay.js
b/javascripts/modules/NotificationsOverlay.js
index 300db0c..448b11b 100644
--- a/javascripts/modules/NotificationsOverlay.js
+++ b/javascripts/modules/NotificationsOverlay.js
@@ -5,7 +5,7 @@
NotificationsOverlay = Overlay.extend( {
active: false,
- className: 'mw-mf-overlay list-overlay',
+ className: 'mw-mf-overlay',
template: M.template.get( 'overlays/notifications' ),
defaults: {
heading: mw.msg( 'notifications' ),
diff --git a/javascripts/modules/nearby/NearbyOverlay.js
b/javascripts/modules/nearby/NearbyOverlay.js
index e22dc09..30108ff 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 dcd816d..14a4754 100644
--- a/javascripts/modules/talk/TalkOverlay.js
+++ b/javascripts/modules/talk/TalkOverlay.js
@@ -64,7 +64,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 31a2842..4075c9e 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;
}
}
}
@@ -109,7 +103,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;
@@ -120,67 +114,17 @@
.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;
- }
- }
+ li:hover {
+ background-color: #ACD1E9;
}
- }
-}
-
-.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..a6fb493 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,113 @@
.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: @articleListPaddingTop @contentMarginRight
@articleListPaddingTop @contentMarginLeft;
+ // avoid the gap between thumbnails
+ margin: -1px 0;
- .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;
+ color: #666;
- h2 {
- .watchlist-heading();
- // 22px is the width of the watchlist star,
+2px for additional padding
- padding: 20px 24px 0 0;
- }
-
- &.new {
- h2 {
- color: @redBase;
- }
+ &:active,
+ &:hover,
+ &:visited {
+ text-decoration: none;
+ color: #666;
}
}
+ }
- a:active {
- .background-alpha(232, 232, 233, .5);
- }
+ .listThumb {
+ position: absolute;
+ width: @thumbWidth;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
- div, p {
- font-size: .9em;
- margin: 0;
- color: #999b9e;
- }
+ // something on watchlist that doesn't exist
+ .title.new h2 {
+ color: @redBase;
+ }
- p {
- white-space: nowrap;
- text-overflow: ellipsis;
- -webkit-text-overflow: ellipsis;
- overflow: hidden;
- line-height: 1;
- margin: .25em 0 0;
- }
+ div, p {
+ font-size: .9em;
+ margin: 0;
+ color: #999b9e;
+ }
- .info {
- color: #a6a6a6;
- font-size: .7em;
- text-transform: uppercase;
- margin: .6em 0 0;
- }
+ p {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ -webkit-text-overflow: ellipsis;
+ overflow: hidden;
+ line-height: 1;
+ margin: .25em 0 0;
+ }
- .mw-mf-user {
- margin: .5em 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 {
+.watchlist {
+ &.a-to-z li {
+ padding-left: @thumbSpace;
+ }
+
li {
- a.title {
- padding-left: @thumbSpace;
+ line-height: 1;
+ }
+
+ .title {
+ // 22px is the width of the watchlist star, +2px for additional
padding
+ padding: 5px 24px 0 0;
+
+ h2 {
+ .watchlist-heading();
}
}
}
.mw-mf-overlay {
- ul.a-to-z li {
- font-size: 0.9em;
- h2 {
- font-weight: normal;
- color: #666;
+ .page-list {
+ font-size: .9em;
+
+ li {
+ padding-left: @searchBarPaddingLeft;
}
+
+ h2 {
+ font: inherit;
+ }
+
.listThumb {
width: @thumbOverlayWidth;
- height: 100%;
- margin-left: -@thumbOverlaySpace;
- }
- a.title {
- padding-left: @thumbOverlaySpace;
}
}
}
-// 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 with page images
+.alpha,
+.beta {
+ .suggestions-results {
+ li {
+ padding-left: @thumbOverlaySpace;
}
}
}
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/templates/articleList.html b/templates/articleList.html
index 3d608a6..15c48f4 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 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: newchange
Gerrit-Change-Id: I14e46ce0445c268773eb08eab409599f4768197a
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
