jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/354712 )
Change subject: Introduce skinStyles folder for Minerva's styles
......................................................................
Introduce skinStyles folder for Minerva's styles
The purpose of the skinStyles folder is to make it more obvious when
we are shipping styles specific to Minerva. This should help with
debugging and it will also help with separating the Minerva skin from the
MobileFrontend component.
Mixing skinStyles with resources can be a little confusing as it is not
obvious that certain files are only loaded by the Minerva skin.
Changes:
* Introduce skinStyles folder for Minerva specific styles that customise
modules that will remain provided by MobileFrontend and other extensions
* Make skins.minerva.notifications.filter.styles a skin style of
ext.echo.styles.special
* Introduce skinStyles of mobile.startup module and consolidate code previously
shared between the Search, Language overlays. Shift Minerva specific styles
over there.
Change-Id: I1ee00148a248d3725b02eea3c19e6b22486ae5ba
---
M extension.json
M includes/MobileFrontend.hooks.php
M includes/skins/SkinMinerva.php
M resources/mobile.languages.structured/LanguageOverlay.less
M resources/mobile.search/SearchOverlay.less
M resources/mobile.startup/Overlay.less
M resources/skins.minerva.base.styles/ui.less
A skinStyles/README.txt
R skinStyles/ext.echo.styles.special/SpecialNotificationsOverlay.less
A skinStyles/mobile.languages.structured/LanguageOverlay.less
A skinStyles/mobile.search/SearchOverlay.less
R skinStyles/mobile.special.mobilemenu.styles/minerva.less
R skinStyles/mobile.special.nearby.styles/desktop.less
A skinStyles/mobile.startup/Overlay.less
R skinStyles/mobile.startup/toast.less
15 files changed, 104 insertions(+), 94 deletions(-)
Approvals:
Pmiazga: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index 3e0bc65..a4ffe10 100644
--- a/extension.json
+++ b/extension.json
@@ -514,9 +514,6 @@
"mobile-frontend-editor-licensing-with-terms",
"mobile-frontend-editor-terms-link"
],
- "skinStyles": {
- "minerva": "resources/mobile.startup/toast.less"
- },
"styles": [
"resources/mobile.startup/panel.less",
"resources/mobile.startup/Overlay.less",
@@ -696,6 +693,9 @@
"mobile.loggingSchemas.mobileWebSearch",
"mobile.search.images"
],
+ "skinStyles": {
+ "minerva":
"skinStyles/mobile.search/SearchOverlay.less"
+ },
"styles": [
"resources/mobile.search/SearchOverlay.less"
],
@@ -1001,6 +1001,9 @@
"mediawiki.storage",
"mobile.startup"
],
+ "skinStyles": {
+ "minerva":
"skinStyles/mobile.languages.structured/LanguageOverlay.less"
+ },
"scripts": [
"resources/mobile.languages.structured/util.js",
"resources/mobile.languages.structured/LanguageOverlay.js"
@@ -1241,8 +1244,8 @@
"resources/mobile.special.nearby.styles/specialNearby.less"
],
"skinStyles": {
- "vector":
"resources/mobile.special.nearby.styles/specialNearbyDesktop.less",
- "monobook":
"resources/mobile.special.nearby.styles/specialNearbyDesktop.less"
+ "vector":
"skinStyles/mobile.special.nearby.styles/desktop.less",
+ "monobook":
"skinStyles/mobile.special.nearby.styles/desktop.less"
},
"position": "top"
},
@@ -1626,13 +1629,21 @@
"@note1": "ResourceModuleSkinStyles must only contain customizations
for 'minerva'.",
"@note2": "For other skins, just use 'skinStyles' in module
definition.",
"@note3": "Otherwise their own customizations are overridden.
(T167216)",
+ "@note5": "Do not use it for modules which non-ResourceLoaderFileModule
classes (T167478).",
"ResourceModuleSkinStyles": {
"minerva": {
+ "mobile.startup": [
+ "skinStyles/mobile.startup/toast.less",
+ "skinStyles/mobile.startup/Overlay.less"
+ ],
"mobile.special.mobilemenu.styles": [
-
"resources/mobile.special.mobilemenu.styles/mobilemenu.less"
+
"skinStyles/mobile.special.mobilemenu.styles/minerva.less"
+ ],
+ "ext.echo.styles.special": [
+
"skinStyles/ext.echo.styles.special/SpecialNotificationsOverlay.less"
],
"mediawiki.notification": [
- "resources/mobile.startup/toast.less"
+ "skinStyles/mobile.startup/toast.less"
]
}
},
diff --git a/includes/MobileFrontend.hooks.php
b/includes/MobileFrontend.hooks.php
index 1450c12..9c70e21 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -1001,12 +1001,6 @@
],
'targets' => [ 'mobile', 'desktop' ],
],
- 'skins.minerva.notifications.filter.styles' =>
$resourceBoilerplate + [
- 'styles' => [
-
'resources/skins.minerva.notifications.filter.styles/SpecialNotificationsOverlay.less',
- ],
- 'targets' => [ 'mobile', 'desktop' ],
- ],
'mobile.notifications.filter.overlay' =>
$resourceBoilerplate + [
'dependencies' => [
'mobile.startup',
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index 2638822..e606342 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -1376,9 +1376,6 @@
$styles[] = 'mobile.messageBox.styles';
$styles['special'] = 'skins.minerva.special.styles';
}
- if ( $title->isSpecial( 'Notifications' ) ) {
- $styles[] = 'skins.minerva.notifications.filter.styles';
- }
if ( $this->getOutput()->getRequest()->getText( 'oldid' ) ) {
$styles[] = 'mobile.messageBox.styles';
}
diff --git a/resources/mobile.languages.structured/LanguageOverlay.less
b/resources/mobile.languages.structured/LanguageOverlay.less
index 5639979..ad93305 100644
--- a/resources/mobile.languages.structured/LanguageOverlay.less
+++ b/resources/mobile.languages.structured/LanguageOverlay.less
@@ -79,24 +79,3 @@
}
}
}
-
-@media screen and ( min-width: @wgMFDeviceWidthDesktop ) {
- .language-overlay {
- .overlay-content {
- margin: 0;
- min-width: 100%;
- }
-
- .panel-body,
- .overlay-content-body {
- margin-left: auto;
- margin-right: auto;
- max-width: @contentMaxWidthTablet;
- }
-
- .list-header {
- padding-left: 0;
- padding-right: 0;
- }
- }
-}
diff --git a/resources/mobile.search/SearchOverlay.less
b/resources/mobile.search/SearchOverlay.less
index 44e1357..27e5307 100644
--- a/resources/mobile.search/SearchOverlay.less
+++ b/resources/mobile.search/SearchOverlay.less
@@ -190,41 +190,3 @@
}
}
}
-
-@media all and ( min-width: @deviceWidthTablet ) {
- .search-overlay {
- .search-box {
- display: table-cell;
- }
- .spinner-container,
- .search-content,
- .results {
- width: @searchBoxWidth;
- margin-left: (@iconSize + 2 * @iconGutterWidth) +
@brandingBoxWidth;
- }
-
- .overlay-title {
- width: @searchBoxWidth;
- padding-left: (@iconSize + 2 * @iconGutterWidth) +
@brandingBoxWidth;
- }
-
- .spinner-container {
- left: auto;
- right: auto;
- }
-
- ul {
- width: auto;
- }
- }
-
-}
-
-@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
- .search-overlay {
- .overlay-content {
- // align with the search form
- max-width: @contentMaxWidthTablet + ( 2 *
@iconGutterWidth );
- }
- }
-}
diff --git a/resources/mobile.startup/Overlay.less
b/resources/mobile.startup/Overlay.less
index 5e26d4b..313deaf 100644
--- a/resources/mobile.startup/Overlay.less
+++ b/resources/mobile.startup/Overlay.less
@@ -1,6 +1,5 @@
@import 'minerva.variables';
@import 'minerva.mixins';
-@import 'mediawiki.ui/variables';
/* stylelint-disable no-descending-specificity */
@@ -10,8 +9,6 @@
// FIXME: override old overlay styles, remove when old overlays
gone
display: block;
}
-
- background-color: @skinContentBgColor;
.overlay, #mw-mf-page-center {
// use height instead of bottom 0 so that overlay expands when
there's
@@ -135,10 +132,6 @@
border-bottom: 1px solid @grayLightest;
}
- .license {
- .secondary-text();
- }
-
.content {
// AbuseFilterOverlay
// FIXME: Don't hijack formatting of all cancel buttons just to
center some
@@ -234,8 +227,6 @@
h2 {
display: table;
width: 100%;
- // FIXME: should not be necessary, scope other h2s to .content
- font-size: @headerTitleFontSize;
> * {
width: 1em;
@@ -360,13 +351,5 @@
.panel {
padding: 12px @contentPaddingTablet;
}
- }
-}
-
-@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
- .overlay-header {
- // Make sure the close button and secondary button icon images
are aligned
- // with the content.
- max-width: @contentMaxWidthTablet + ( 2 * @iconGutterWidth );
}
}
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index 160db87..ea2ac34 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -17,10 +17,14 @@
#content {
// avoid margin collapsing (see T147956)
border-top: solid 1px transparent;
- background-color: @skinContentBgColor;
padding-bottom: 32px;
}
+.overlay-enabled,
+#content {
+ background-color: @skinContentBgColor;
+}
+
.header-container {
border-bottom: solid 1px @chromeContentSeparator;
diff --git a/skinStyles/README.txt b/skinStyles/README.txt
new file mode 100644
index 0000000..957d5b9
--- /dev/null
+++ b/skinStyles/README.txt
@@ -0,0 +1,2 @@
+If a module introduced by MobileFrontend has Minerva specific styles they are
added here and applied
+as part of ResourceModuleSkinStyles.
diff --git
a/resources/skins.minerva.notifications.filter.styles/SpecialNotificationsOverlay.less
b/skinStyles/ext.echo.styles.special/SpecialNotificationsOverlay.less
similarity index 100%
rename from
resources/skins.minerva.notifications.filter.styles/SpecialNotificationsOverlay.less
rename to skinStyles/ext.echo.styles.special/SpecialNotificationsOverlay.less
diff --git a/skinStyles/mobile.languages.structured/LanguageOverlay.less
b/skinStyles/mobile.languages.structured/LanguageOverlay.less
new file mode 100644
index 0000000..f1fd903
--- /dev/null
+++ b/skinStyles/mobile.languages.structured/LanguageOverlay.less
@@ -0,0 +1,22 @@
+@import 'minerva.variables';
+
+@media screen and ( min-width: @wgMFDeviceWidthDesktop ) {
+ .language-overlay {
+ .overlay-content {
+ margin: 0;
+ min-width: 100%;
+ }
+
+ .panel-body,
+ .overlay-content-body {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: @contentMaxWidthTablet;
+ }
+
+ .list-header {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+}
diff --git a/skinStyles/mobile.search/SearchOverlay.less
b/skinStyles/mobile.search/SearchOverlay.less
new file mode 100644
index 0000000..31987d3
--- /dev/null
+++ b/skinStyles/mobile.search/SearchOverlay.less
@@ -0,0 +1,41 @@
+@import 'minerva.variables';
+
+// These styles transform the SearchOverlay appearance in the Minerva skin.
+// Since SearchOverlay can be used by other skins, these styles are kept
separate from
+// the others.
+@media all and ( min-width: @deviceWidthTablet ) {
+ .search-overlay {
+ .search-box {
+ display: table-cell;
+ }
+ .spinner-container,
+ .search-content,
+ .results {
+ width: @searchBoxWidth;
+ margin-left: (@iconSize + 2 * @iconGutterWidth) +
@brandingBoxWidth;
+ }
+
+ .overlay-title {
+ width: @searchBoxWidth;
+ padding-left: (@iconSize + 2 * @iconGutterWidth) +
@brandingBoxWidth;
+ }
+
+ .spinner-container {
+ left: auto;
+ right: auto;
+ }
+
+ ul {
+ width: auto;
+ }
+ }
+}
+
+@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
+ .search-overlay {
+ .overlay-content {
+ // align with the search form
+ max-width: @contentMaxWidthTablet + ( 2 *
@iconGutterWidth );
+ }
+ }
+}
diff --git a/resources/mobile.special.mobilemenu.styles/mobilemenu.less
b/skinStyles/mobile.special.mobilemenu.styles/minerva.less
similarity index 92%
rename from resources/mobile.special.mobilemenu.styles/mobilemenu.less
rename to skinStyles/mobile.special.mobilemenu.styles/minerva.less
index 9b7d346..dbf6b4a 100644
--- a/resources/mobile.special.mobilemenu.styles/mobilemenu.less
+++ b/skinStyles/mobile.special.mobilemenu.styles/minerva.less
@@ -1,5 +1,4 @@
@import 'minerva.variables';
-@import 'minerva.mixins';
body.navigation-full-screen {
background-color: @primaryNavBackgroundColor;
diff --git a/resources/mobile.special.nearby.styles/specialNearbyDesktop.less
b/skinStyles/mobile.special.nearby.styles/desktop.less
similarity index 100%
rename from resources/mobile.special.nearby.styles/specialNearbyDesktop.less
rename to skinStyles/mobile.special.nearby.styles/desktop.less
diff --git a/skinStyles/mobile.startup/Overlay.less
b/skinStyles/mobile.startup/Overlay.less
new file mode 100644
index 0000000..783c76c
--- /dev/null
+++ b/skinStyles/mobile.startup/Overlay.less
@@ -0,0 +1,16 @@
+@import 'minerva.variables';
+@import 'minerva.mixins';
+
+.overlay .license {
+ .license {
+ .secondary-text();
+ }
+}
+
+@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
+ .overlay-header {
+ // Make sure the close button and secondary button icon images
are aligned
+ // with the content.
+ max-width: @contentMaxWidthTablet + ( 2 * @iconGutterWidth );
+ }
+}
diff --git a/resources/mobile.startup/toast.less
b/skinStyles/mobile.startup/toast.less
similarity index 100%
rename from resources/mobile.startup/toast.less
rename to skinStyles/mobile.startup/toast.less
--
To view, visit https://gerrit.wikimedia.org/r/354712
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I1ee00148a248d3725b02eea3c19e6b22486ae5ba
Gerrit-PatchSet: 16
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Pmiazga <pmia...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
