Niedzielski has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/399664 )
Change subject: Chore: convert CSS media query breakpoints to symbols
......................................................................
Chore: convert CSS media query breakpoints to symbols
Declare variables for medium and large document width breakpoints. Add
postcss-at-rules-variables to allow usage in media queries. Update
existing hardcoded values to the new symbols.
Bug: T175806
Change-Id: Id576bb94ed79990900f25a8c981c7d8bb699d229
---
M .postcssrc.json
M package-lock.json
M package.json
M src/client/index.css
M src/common/components/app/app.css
M src/common/components/content/styles/tables.css
M src/common/components/thumbnail/thumbnail.css
7 files changed, 84 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/64/399664/1
diff --git a/.postcssrc.json b/.postcssrc.json
index 57d6e77..d45a8b2 100644
--- a/.postcssrc.json
+++ b/.postcssrc.json
@@ -1 +1,12 @@
-{ "plugins": { "autoprefixer": { "browsers": ["last 2 versions"] } } }
+{
+ "plugins": {
+ "postcss-at-rules-variables": {
+ "variables": {
+ "--min-width-medium": "452px",
+ "--min-width-large": "912px"
+ },
+ "atRules": ["for", "if", "else", "each", "mixin", "custom-media",
"media"]
+ },
+ "autoprefixer": { "browsers": ["last 2 versions"] }
+ }
+}
diff --git a/package-lock.json b/package-lock.json
index 1cc57ae..8296cdf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5630,6 +5630,69 @@
}
}
},
+ "postcss-at-rules-variables": {
+ "version": "0.1.2",
+ "resolved":
"https://registry.npmjs.org/postcss-at-rules-variables/-/postcss-at-rules-variables-0.1.2.tgz";,
+ "integrity":
"sha512-k0WLYsdm9wd0APJcjKjFDK2g/avA199mSbLEWwVRL5VfWXTCEdsGs/2A4SEQ8+hd2O9pgiemKT7w2FcVuaxM+Q==",
+ "dev": true,
+ "requires": {
+ "postcss": "6.0.14"
+ },
+ "dependencies": {
+ "ansi-styles": {
+ "version": "3.2.0",
+ "resolved":
"https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz";,
+ "integrity":
"sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+ "dev": true,
+ "requires": {
+ "color-convert": "1.9.0"
+ }
+ },
+ "chalk": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz";,
+ "integrity":
"sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
+ "dev": true,
+ "requires": {
+ "ansi-styles": "3.2.0",
+ "escape-string-regexp": "1.0.5",
+ "supports-color": "4.5.0"
+ }
+ },
+ "has-flag": {
+ "version": "2.0.0",
+ "resolved":
"https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz";,
+ "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
+ "dev": true
+ },
+ "postcss": {
+ "version": "6.0.14",
+ "resolved":
"https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz";,
+ "integrity":
"sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==",
+ "dev": true,
+ "requires": {
+ "chalk": "2.3.0",
+ "source-map": "0.6.1",
+ "supports-color": "4.5.0"
+ }
+ },
+ "source-map": {
+ "version": "0.6.1",
+ "resolved":
"https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz";,
+ "integrity":
"sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+ "dev": true
+ },
+ "supports-color": {
+ "version": "4.5.0",
+ "resolved":
"https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz";,
+ "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+ "dev": true,
+ "requires": {
+ "has-flag": "2.0.0"
+ }
+ }
+ }
+ },
"postcss-calc": {
"version": "5.3.1",
"resolved":
"https://registry.npmjs.org/postcss-calc/-/postcss-calc-5.3.1.tgz";,
diff --git a/package.json b/package.json
index d7d88df..6cd774c 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
"mocha": "4.0.1",
"nodemon": "1.13.2",
"npm-run-all": "4.1.2",
+ "postcss-at-rules-variables": "0.1.2",
"postcss-loader": "2.0.9",
"prettier": "1.9.2",
"sinon": "4.1.3",
diff --git a/src/client/index.css b/src/client/index.css
index fb9779d..7a71189 100644
--- a/src/client/index.css
+++ b/src/client/index.css
@@ -1,4 +1,8 @@
:root {
+ /* These variables must be kept in sync manually with .postcssrc.json. */
+ --min-width-medium: 452px;
+ --min-width-large: 912px;
+
/*
Font sizes, see:
*
https://wikimedia.github.io/WikimediaUI-Style-Guide/visual-style_typography.html
diff --git a/src/common/components/app/app.css
b/src/common/components/app/app.css
index d41ee62..3ed4491 100644
--- a/src/common/components/app/app.css
+++ b/src/common/components/app/app.css
@@ -6,7 +6,6 @@
padding: 0 0 var(--space) 0;
/* Cap max-width of app in big screens and center it horizontally */
- /* TODO: Remove magic number and replace with variable, matching the
responsive cuts */
- max-width: 1024px;
+ max-width: var(--min-width-large);
margin: auto;
}
diff --git a/src/common/components/content/styles/tables.css
b/src/common/components/content/styles/tables.css
index d362c59..78882eb 100644
--- a/src/common/components/content/styles/tables.css
+++ b/src/common/components/content/styles/tables.css
@@ -46,7 +46,7 @@
max-width: 22em !important;
}
-@media (min-width: 1000px) {
+@media (min-width: var(--min-width-large)) {
.Content .infobox {
/* http://localhost:3000/wiki/Wolverine?oldid=804085375 */
float: right;
diff --git a/src/common/components/thumbnail/thumbnail.css
b/src/common/components/thumbnail/thumbnail.css
index 38adedf..7e79fd6 100644
--- a/src/common/components/thumbnail/thumbnail.css
+++ b/src/common/components/thumbnail/thumbnail.css
@@ -12,8 +12,7 @@
margin-top: var(--space);
}
-/* TODO: use CSS variable. */
-@media (min-width: 1024px) {
+@media (min-width: var(--min-width-large)) {
.Thumbnail {
/* Wrap the container to the width of the image and left-align it. Floating
takes precedence over display. */
@@ -50,8 +49,7 @@
width: 100%;
}
-/* TODO: use CSS variable. */
-@media (min-width: 1024px) {
+@media (min-width: var(--min-width-large)) {
.Thumbnail-image-landscape {
/* The screen is too large to maximize the image. Use the image's native
width and height. */
--
To view, visit https://gerrit.wikimedia.org/r/399664
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id576bb94ed79990900f25a8c981c7d8bb699d229
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Niedzielski <[email protected]>
Gerrit-Reviewer: Sniedzielski <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
