jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/391899 )
Change subject: Chore: load wordmark as a separate request
......................................................................
Chore: load wordmark as a separate request
Instead of inlining the Wikipedia logo SVG, make a separate image
request. This improves bundle sizes and cache longevity at the expense
of an additional HTTP request. This patch also fixes the server-side
render of the wordmark.
Additional changes:
* Remove header wordmark margin that was used for the menu button
* Fix vertical centering of the logo in the header
Bug: T180623
Change-Id: I571d45760170e3e7cbb3ef989f621a792d1d3e7a
---
M package.json
M src/common/components/header/header.css
M src/common/components/wordmark/wordmark.tsx
R src/public/wordmark-en.svg
4 files changed, 8 insertions(+), 11 deletions(-)
Approvals:
Niedzielski: Looks good to me, approved
Jhernandez: Looks good to me, but someone else must approve
jenkins-bot: Verified
diff --git a/package.json b/package.json
index 22d7429..f41f9be 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,7 @@
"bundlesize": [
{
"path": "dist/public/index.*.js",
- "maxSize": "5.1KB"
+ "maxSize": "2.8KB"
},
{
"path": "dist/public/runtime.*.js",
diff --git a/src/common/components/header/header.css
b/src/common/components/header/header.css
index fe36b98..1b925e3 100644
--- a/src/common/components/header/header.css
+++ b/src/common/components/header/header.css
@@ -29,7 +29,9 @@
}
.Header-wordmark {
- /* Per design specs, wordmark needs extra separation between the menu icon
and
- itself */
- margin-left: var(--half-space);
+ /*
+ * Vertically center the contents of the workdmark link making them respect
the
+ * parent's flex settings
+ */
+ display: flex;
}
diff --git a/src/common/components/wordmark/wordmark.tsx
b/src/common/components/wordmark/wordmark.tsx
index 2ffa909..33f78f0 100644
--- a/src/common/components/wordmark/wordmark.tsx
+++ b/src/common/components/wordmark/wordmark.tsx
@@ -1,12 +1,7 @@
import { h } from "preact";
import "./wordmark.css";
-import wordmarkEn from "./wordmark-en.svg";
+import { asset } from "../../assets/manifest";
export default function Wordmark(): JSX.Element {
- return (
- <div
- className="Wordmark"
- dangerouslySetInnerHTML={{ __html: wordmarkEn }}
- />
- );
+ return <img className="Wordmark" src={asset("wordmark-en", "svg")} />;
}
diff --git a/src/common/components/wordmark/wordmark-en.svg
b/src/public/wordmark-en.svg
similarity index 100%
rename from src/common/components/wordmark/wordmark-en.svg
rename to src/public/wordmark-en.svg
--
To view, visit https://gerrit.wikimedia.org/r/391899
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I571d45760170e3e7cbb3ef989f621a792d1d3e7a
Gerrit-PatchSet: 5
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Niedzielski <[email protected]>
Gerrit-Reviewer: Jhernandez <[email protected]>
Gerrit-Reviewer: Niedzielski <[email protected]>
Gerrit-Reviewer: Sniedzielski <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
