From 1cb20649f6bc852ed21b96a0cd5285aa8c8b6104 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Wed, 25 Jul 2018 22:30:00 +0000
Subject: [PATCH] Migrate homepage to use local CSS references
---
src/assets/stylesheets/index.scss | 84 +++++++++++++++----------------
src/react-components/home-root.js | 68 +++++++++++++------------
2 files changed, 77 insertions(+), 75 deletions(-)
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 6b13dabd4..a7ef0f248 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -24,26 +24,26 @@ body {
padding: 0;
}
-.home {
+:local(.home) {
position: absolute;
display: flex;
width: 100%;
height: 100%;
}
-.main-content {
+:local(.main-content) {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
z-index: 2;
- &--noninteractive {
+ &:local(.noninteractive) {
pointer-events: none;
}
}
-.background-video {
+:local(.background-video) {
position: fixed;
top: 0;
left: 0;
@@ -53,7 +53,7 @@ body {
z-index: 1;
}
-.header-content {
+:local(.header-content) {
padding: 1.5em 2.5em 1.5em 2.5em;
background-color: $darkest-transparent;
min-height: 90px;
@@ -61,7 +61,7 @@ body {
display: flex;
border-bottom: 1px solid $darkest-grey;
- &__title {
+ :local(.title) {
display: flex;
width: $header-section-width;
@@ -73,17 +73,17 @@ body {
flex: 1 1 $header-section-width;
}
- &__name {
+ :local(.name) {
width: 200px;
}
- &__preview {
+ :local(.preview) {
color: $grey-text;
margin-left: 10px;
}
}
- &__entry-code {
+ :local(.entry-code) {
@media (max-width: 1024px) {
display: none;
}
@@ -95,13 +95,13 @@ body {
justify-content: center;
align-items: center;
- &__link {
+ :local(.link) {
color: white;
text-decoration-color: $light-grey;
}
}
- &__experiment {
+ :local(.experiment) {
text-align: right;
flex: 1 1 $header-section-width;
width: $header-section-width;
@@ -114,36 +114,36 @@ body {
display: none;
}
- &__container {
+ :local(.container) {
display: flex;
justify-content: flex-end;
}
- &__icon {
+ :local(.icon) {
margin-left: 12px;
margin-right: 12px;
}
- &__info {
+ :local(.info) {
display: flex;
flex-direction: column;
justify-content: center;
- &__header {
- a {
- color: $grey-text;
- }
+ :local(.header) {
+ a {
+ color: $grey-text;
+ }
}
- &__link {
- color: $dark-grey;
- font-size: 0.8em;
+ :local(.link) {
+ color: $dark-grey;
+ font-size: 0.8em;
}
}
}
}
-.header-subtitle {
+:local(.header-subtitle) {
@media (min-width: 1024px) {
display: none;
}
@@ -157,13 +157,13 @@ body {
align-items: center;
border-bottom: 2px solid $darkest-grey;
- &__link {
+ :local(.link) {
color: white;
text-decoration-color: $light-grey;
}
}
-.hero-content {
+:local(.hero-content) {
flex: 10;
min-height: 740px;
display: flex;
@@ -176,7 +176,7 @@ body {
min-height: 490px;
}
- &__attribution {
+ :local(.attribution) {
position: absolute;
right: 12px;
bottom: 12px;
@@ -189,7 +189,7 @@ body {
}
}
- &__container {
+ :local(.container) {
padding-top: 2vw;
padding-left: 2.1em;
padding-right: 2.1em;
@@ -204,44 +204,44 @@ body {
padding-bottom: 0px;
}
- &__title {
+ :local(.title) {
font-size: 4vw;
font-weight: bold;
@media (max-width: 768px) , (max-height: 715px) {
- font-size: 1.9em;
+ font-size: 1.9em;
}
@media (max-width: 768px) {
- text-align: center;
+ text-align: center;
}
@media (min-width: 1824px) {
- font-size: 4.5em;
+ font-size: 4.5em;
}
}
- &__subtitle {
+ :local(.subtitle) {
font-size: 2.5vw;
font-weight: lighter;
color: $light-text;
@media (max-width: 768px) , (max-height: 715px) {
- font-size: 1.1em;
- margin-top: 0.2em;
+ font-size: 1.1em;
+ margin-top: 0.2em;
}
@media (max-width: 768px) {
- text-align: center;
+ text-align: center;
}
@media (min-width: 1824px) {
- font-size: 2.8em;
+ font-size: 2.8em;
}
}
}
- &__create {
+ :local(.create) {
padding: 2.1em;
padding-bottom: 3.5vw;
@@ -252,7 +252,7 @@ body {
}
}
-.footer-content {
+:local(.footer-content) {
padding: 1em 2.25em 1em 2.25em;
background-color: $darkest-transparent;
min-height: 80px;
@@ -261,28 +261,28 @@ body {
align-items: center;
justify-content: center;
- &__links {
+ :local(.links) {
text-align: center;
color: $dark-grey;
display: flex;
flex-direction: column;
- &__top {
+ :local(.top) {
display: flex;
justify-content: space-between;
}
- &__link {
+ :local(.link) {
color: $grey-text;
margin-left: 8px;
margin-right: 8px;
}
- &__bottom {
+ :local(.bottom) {
margin-top: 8px;
a {
- color: $grey-text;
+ color: $grey-text;
}
}
}
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index d27bc310d..6b6e28a44 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -9,6 +9,8 @@ import homeVideoMp4 from "../assets/video/home.mp4";
import classNames from "classnames";
import { ENVIRONMENT_URLS } from "../assets/environments/environments";
+import styles from "../assets/stylesheets/index.scss";
+
import HubCreatePanel from "./hub-create-panel.js";
import InfoDialog from "./info-dialog.js";
@@ -77,30 +79,30 @@ class HomeRoot extends Component {
render() {
const mainContentClassNames = classNames({
- "main-content": true,
- "main-content--noninteractive": !!this.state.dialogType
+ [styles.mainContent]: true,
+ [styles.noninteractive]: !!this.state.dialogType
});
const dialogTypes = InfoDialog.dialogTypes;
return (
<IntlProvider locale={lang} messages={messages}>
- <div className="home">
+ <div className={styles.home}>
<div className={mainContentClassNames}>
- <div className="header-content">
- <div className="header-content__title">
- <img className="header-content__title__name" src="../assets/images/logo.svg" />
- <div className="header-content__title__preview">preview</div>
+ <div className={styles.headerContent}>
+ <div className={styles.title}>
+ <img className={styles.name} src="../assets/images/logo.svg" />
+ <div className={styles.preview}>preview</div>
</div>
- <div className="header-content__entry-code">
- <a className="header-content__entry-code__link" href="/link" rel="nofollow">
+ <div className={styles.entryCode}>
+ <a className={styles.link} href="/link" rel="nofollow">
<FormattedMessage id="home.have_entry_code" />
</a>
</div>
- <div className="header-content__experiment">
- <div className="header-content__experiment__container">
- <img src="../assets/images/webvr_cube.svg" className="header-content__experiment__icon" />
- <div className="header-content__experiment__info">
- <div className="header-content__experiment__info__header">
+ <div className={styles.experiment}>
+ <div className={styles.container}>
+ <img src="../assets/images/webvr_cube.svg" className={styles.icon} />
+ <div className={styles.info}>
+ <div className={styles.header}>
<span>
<FormattedMessage id="home.webvr_disclaimer_pre" />
</span>
@@ -117,7 +119,7 @@ class HomeRoot extends Component {
<div>
<a
- className="header-content__experiment__info__link"
+ className={styles.link}
rel="noopener noreferrer"
target="_blank"
href="https://github.com/mozilla/hubs"
@@ -129,15 +131,15 @@ class HomeRoot extends Component {
</div>
</div>
</div>
- <div className="header-subtitle">
+ <div className={styles.headerSubtitle}>
<div>
- <a className="header-subtitle__link" href="/link" rel="nofollow">
+ <a className={styles.link} href="/link" rel="nofollow">
<FormattedMessage id="home.have_entry_code" />
</a>
</div>
</div>
- <div className="hero-content">
- <div className="hero-content__attribution">
+ <div className={styles.heroContent}>
+ <div className={styles.attribution}>
Medieval Fantasy Book by{" "}
<a
target="_blank"
@@ -147,15 +149,15 @@ class HomeRoot extends Component {
Pixel
</a>
</div>
- <div className="hero-content__container">
- <div className="hero-content__container__title">
+ <div className={styles.container}>
+ <div className={styles.title}>
<FormattedMessage id="home.hero_title" />
</div>
- <div className="hero-content__container__subtitle">
+ <div className={styles.subtitle}>
<FormattedMessage id="home.hero_subtitle" />
</div>
</div>
- <div className="hero-content__create">
+ <div className={styles.create}>
{this.state.environments.length > 0 && (
<HubCreatePanel
initialEnvironment={this.props.initialEnvironment}
@@ -164,11 +166,11 @@ class HomeRoot extends Component {
)}
</div>
</div>
- <div className="footer-content">
- <div className="footer-content__links">
- <div className="footer-content__links__top">
+ <div className={styles.footerContent}>
+ <div className={styles.links}>
+ <div className={styles.top}>
<a
- className="footer-content__links__link"
+ className={styles.link}
rel="noopener noreferrer"
href="#"
onClick={this.showDialog(dialogTypes.slack)}
@@ -176,7 +178,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.join_us" />
</a>
<a
- className="footer-content__links__link"
+ className={styles.link}
rel="noopener noreferrer"
href="#"
onClick={this.showDialog(dialogTypes.updates)}
@@ -184,7 +186,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.get_updates" />
</a>
<a
- className="footer-content__links__link"
+ className={styles.link}
rel="noopener noreferrer"
href="#"
onClick={this.showDialog(dialogTypes.report)}
@@ -192,7 +194,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.report_issue" />
</a>
<a
- className="footer-content__links__link"
+ className={styles.link}
target="_blank"
rel="noopener noreferrer"
href="https://github.com/mozilla/hubs/blob/master/TERMS.md"
@@ -200,7 +202,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.terms_of_use" />
</a>
<a
- className="footer-content__links__link"
+ className={styles.link}
target="_blank"
rel="noopener noreferrer"
href="https://github.com/mozilla/hubs/blob/master/PRIVACY.md"
@@ -208,7 +210,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.privacy_notice" />
</a>
</div>
- <div className="footer-content__links__bottom">
+ <div className={styles.bottom}>
<div>
<FormattedMessage id="home.made_with_love" />
<span style={{ fontWeight: "bold", color: "white" }}>Mozilla</span>
@@ -217,7 +219,7 @@ class HomeRoot extends Component {
</div>
</div>
</div>
- <video playsInline muted loop autoPlay className="background-video" id="background-video">
+ <video playsInline muted loop autoPlay className={styles.backgroundVideo} id="background-video">
<source src={homeVideoWebM} type="video/webm" />
<source src={homeVideoMp4} type="video/mp4" />
</video>
--
GitLab