From 7e8a1321e9bd2ba915a003f865e84eb1e971be4d Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Fri, 30 Mar 2018 10:17:25 -0700
Subject: [PATCH] SCSS refactor
---
src/assets/stylesheets/hub-create.scss | 330 +++++++++++------------
src/assets/stylesheets/index.scss | 282 +++++++++----------
src/assets/stylesheets/shared.scss | 1 -
src/react-components/hub-create-panel.js | 14 +-
4 files changed, 296 insertions(+), 331 deletions(-)
diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index 78c7ad8ac..8e89596a8 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -1,188 +1,168 @@
.create-panel {
display: flex;
flex-direction: column;
-}
-@media (max-width: 768px) {
- .create-panel {
+ @media (max-width: 768px) {
align-items: center;
}
-}
-
-.create-panel__header {
- color: $grey-text;
- font-size: 1.2em;
- margin-bottom: 14px;
- margin-left: 12px;
- text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
-}
-
-@media (max-width: 768px) {
- .create-panel__header {
- text-align: center;
- }
-}
-
-.create-panel__form {
- position: relative;
- width: 700px;
-}
-
-@media (max-width: 768px) , (max-height: 715px) {
- .create-panel__form {
- width: auto;
- width: 500px;
- }
-}
-
-@media (max-width: 520px) {
- .create-panel__form {
- width: 300px;
- }
-}
-
-.create-panel__form__name {
- @extend %rounded-border;
- @extend %default-font;
-
- color: white;
- font-size: 2em;
- background: black;
- padding: 25px;
- padding-left: 90px;
- padding-right: 90px;
- width: 100%;
- line-height: 40px;
-}
-
-.create-panel__form__name--expanded {
- padding-top: 365px;
-}
-
-@media (max-width: 768px) , (max-height: 715px) {
- .create-panel__form__name {
- min-width: auto;
- font-size: 1.5em;
- width: 100%;
- text-align: center;
- }
- .create-panel__form__name--expanded {
- padding-top: 300px;
- }
-}
-
-@media (max-width: 520px) {
- .create-panel__form__name {
- padding-left: 15px;
+ &__header {
+ color: $grey-text;
font-size: 1.2em;
- }
+ margin-bottom: 14px;
+ margin-left: 12px;
+ text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
- .create-panel__form__name--expanded {
- padding-top: 190px;
+ @media (max-width: 768px) {
+ text-align: center;
+ }
}
-}
-
-.create-panel__form__name::selection {
- background-color: #2F80ED;
- color: white;
-}
-.create-panel__form__name::-moz-selection {
- background-color: #2F80ED;
- color: white;
-}
-
-.create-panel__form__left_button {
- position: absolute;
- height: 100%;
- width: 90px;
- height: 95px;
- left: 4px;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- bottom: 0;
-}
-
-@media (max-width: 520px) {
- .create-panel__form__left_button {
- display: none;
- }
-}
-
-.create-panel__form__right_button {
- position: absolute;
- height: 95px;
- width: 90px;
- right: 4px;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- bottom: 0;
-}
-
-.create-panel__form__environment {
- position: absolute;
- top: 0px;
- left: 0px;
- width: 700px;
- height: 100%;
- box-sizing: border-box;
- border-radius: 14px;
- border: 3px solid white;
- border-radius: 14px;
- overflow: hidden;
- pointer-events: none;
-}
-
-@media (max-width: 768px) , (max-height: 715px) {
- .create-panel__form__environment {
- width: 100%;
+ &__form {
+ position: relative;
+ width: 700px;
+
+ @media (max-width: 768px) , (max-height: 715px) {
+ width: auto;
+ width: 500px;
+ }
+
+ @media (max-width: 520px) {
+ width: 300px;
+ }
+
+ &__name {
+ @extend %rounded-border;
+ @extend %default-font;
+
+ color: white;
+ font-size: 2em;
+ background: black;
+ padding: 25px;
+ padding-left: 90px;
+ padding-right: 90px;
+ width: 100%;
+ line-height: 40px;
+
+ &::selection {
+ background-color: #2F80ED;
+ color: white;
+ }
+
+ &::-moz-selection {
+ background-color: #2F80ED;
+ color: white;
+ }
+
+ @media (max-width: 768px) , (max-height: 715px) {
+ min-width: auto;
+ font-size: 1.5em;
+ width: 100%;
+ text-align: center;
+ }
+
+ @media (max-width: 520px) {
+ padding-left: 15px;
+ font-size: 1.2em;
+ }
+
+ &--expanded {
+ padding-top: 365px;
+
+ @media (max-width: 768px) , (max-height: 715px) {
+ padding-top: 300px;
+ }
+
+ @media (max-width: 520px) {
+ padding-top: 190px;
+ }
+ }
+ }
+
+ &__left_button {
+ position: absolute;
+ height: 100%;
+ width: 90px;
+ height: 95px;
+ left: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ bottom: 0;
+
+ @media (max-width: 520px) {
+ display: none;
+ }
+ }
+
+ &__right_button {
+ position: absolute;
+ height: 95px;
+ width: 90px;
+ right: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ bottom: 0;
+ }
+
+ &__environment {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 700px;
+ height: 100%;
+ box-sizing: border-box;
+ border-radius: 14px;
+ border: 3px solid white;
+ border-radius: 14px;
+ overflow: hidden;
+ pointer-events: none;
+
+ @media (max-width: 768px) , (max-height: 715px) {
+ width: 100%;
+ }
+
+ &__picker {
+ width: 100%;
+ height: 340px;
+ border-bottom: 3px solid white;
+ overflow: hidden;
+ position: relative;
+
+ @media (max-width: 768px) , (max-height: 715px) {
+ height: 280px;
+ }
+
+ @media (max-width: 520px) {
+ height: 165px;
+ }
+
+ &__image {
+ width: 112%;
+ position: absolute;
+ top: -3%;
+ left: -3%;
+ }
+
+ &__labels {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+
+ &__controls {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
}
}
-
-.create-panel__form__environment__picker {
- width: 100%;
- height: 340px;
- border-bottom: 3px solid white;
- overflow: hidden;
- position: relative;
-}
-
-@media (max-width: 768px) , (max-height: 715px) {
- .create-panel__form__environment__picker {
- height: 280px;
- }
-}
-
-@media (max-width: 520px) {
- .create-panel__form__environment__picker {
- height: 165px;
- }
-}
-
-.create-panel__form__environment__picker__image {
- width: 112%;
- position: absolute;
- top: -3%;
- left: -3%;
-}
-
-.create-panel__form__environment__picker__labels {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
-}
-
-.create-panel__form__environment__picker__controls {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
-}
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 201d64f11..e5c55294d 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -52,160 +52,137 @@ body {
min-height: 90px;
display: flex;
border-bottom: 2px solid #242424;
-}
-
-.header-content__title {
- flex: 10;
- display: flex;
-}
-
-@media (max-width: 768px) {
- .header-content__title {
- justify-content: center;
- }
-}
-
-.header-content__title__name {
- font-size: 2.0em;
-}
-.header-content__title__preview {
- color: $grey-text;
- margin-left: 10px;
-}
+ &__title {
+ flex: 10;
+ display: flex;
-.header-content__experiment {
- text-align: right;
- flex: 1 1 350px;
- color: $grey-text;
- font-size: 1.0em;
- font-weight: lighter;
-}
+ @media (max-width: 768px) {
+ justify-content: center;
+ }
-.header-content__experiment__container {
- display: flex;
- justify-content: flex-end;
-}
+ &__name {
+ font-size: 2.0em;
+ }
-.header-content__experiment__icon {
- margin-left: 12px;
- margin-right: 12px;
-}
-
-@media (max-width: 768px) {
- .header-content__experiment {
- display: none;
+ &__preview {
+ color: $grey-text;
+ margin-left: 10px;
+ }
}
-}
-
-.header-content__experiment__info {
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
-.header-content__experiment__info__header a {
- color: $grey-text;
-}
-
-.header-content__experiment__info__link {
- color: $dark-grey;
- font-size: 0.8em;
+ &__experiment {
+ text-align: right;
+ flex: 1 1 350px;
+ color: $grey-text;
+ font-size: 1.0em;
+ font-weight: lighter;
+
+ @media (max-width: 768px) {
+ display: none;
+ }
+
+ &__container {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ &__icon {
+ margin-left: 12px;
+ margin-right: 12px;
+ }
+
+ &__info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ &__header {
+ a {
+ color: $grey-text;
+ }
+ }
+
+ &__link {
+ color: $dark-grey;
+ font-size: 0.8em;
+ }
+ }
+ }
}
.hero-content {
- // background-color: blue;
flex: 10;
text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
min-height: 740px;
display: flex;
flex-direction: column;
-}
-@media (max-width: 768px) {
- .hero-content {
+ @media (max-width: 768px) {
padding: 1em 1.5em 1em 1.5em;
justify-content: space-around;
min-height: 490px;
}
-}
-
-.hero-content__container {
- padding-top: 2vw;
- padding-left: 2.1em;
- padding-right: 2.1em;
- flex: 10;
-}
-
-@media (max-height: 812px) , (max-width: 768px) {
- .hero-content__container {
- flex: 0 0 auto;
- }
-}
-
-@media (max-height: 720px) {
- .hero-content__container {
- padding-bottom: 0px;
- }
-}
-
-.hero-content__container__title {
- font-size: 4vw;
- font-weight: bold;
-}
-
-@media (max-width: 768px) , (max-height: 715px) {
- .hero-content__container__title {
- font-size: 1.9em;
- }
-}
-
-@media (max-width: 768px) {
- .hero-content__container__title {
- text-align: center;
- }
-}
-
-@media (min-width: 1824px) {
- .hero-content__container__title {
- font-size: 4.5em;
- }
-}
-
-.hero-content__container__subtitle {
- font-size: 2.5vw;
- font-weight: lighter;
- color: $light-text;
-}
-
-@media (max-width: 768px) , (max-height: 715px) {
- .hero-content__container__subtitle {
- font-size: 1.1em;
- margin-top: 0.2em;
- }
-}
-
-@media (max-width: 768px) {
- .hero-content__container__subtitle {
- text-align: center;
- }
-}
-@media (min-width: 1824px) {
- .hero-content__container__subtitle {
- font-size: 2.8em;
+ &__container {
+ padding-top: 2vw;
+ padding-left: 2.1em;
+ padding-right: 2.1em;
+ flex: 10;
+
+ @media (max-height: 812px) , (max-width: 768px) {
+ flex: 0 0 auto;
+ }
+
+ @media (max-height: 720px) {
+ padding-bottom: 0px;
+ }
+
+ &__title {
+ font-size: 4vw;
+ font-weight: bold;
+
+ @media (max-width: 768px) , (max-height: 715px) {
+ font-size: 1.9em;
+ }
+
+ @media (max-width: 768px) {
+ text-align: center;
+ }
+
+ @media (min-width: 1824px) {
+ font-size: 4.5em;
+ }
+ }
+
+ &__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;
+ }
+
+ @media (max-width: 768px) {
+ text-align: center;
+ }
+
+ @media (min-width: 1824px) {
+ font-size: 2.8em;
+ }
+ }
}
-}
-.hero-content__create {
- padding: 2.1em;
- padding-bottom: 3.5vw;
-}
+ &__create {
+ padding: 2.1em;
+ padding-bottom: 3.5vw;
-@media (max-width: 768px) {
- .hero-content__create {
- padding: 0.5em;
- align-self: center;
+ @media (max-width: 768px) {
+ padding: 0.5em;
+ align-self: center;
+ }
}
}
@@ -217,27 +194,26 @@ body {
border-top: 2px solid #242424;
align-items: center;
justify-content: center;
-}
-
-.footer-content__links {
- text-align: center;
- color: $dark-grey;
- display: flex;
- flex-direction: column;
-}
-.footer-content__links__top {
- display: flex;
- justify-content: space-between;
-}
-
-.footer-content__links__link {
- color: $grey-text;
- margin-left: 8px;
- margin-right: 8px;
-}
-
-.footer-content__links__bottom {
- margin-top: 4px;
+ &__links {
+ text-align: center;
+ color: $dark-grey;
+ display: flex;
+ flex-direction: column;
+
+ &__top {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__link {
+ color: $grey-text;
+ margin-left: 8px;
+ margin-right: 8px;
+ }
+
+ &__bottom {
+ margin-top: 4px;
+ }
+ }
}
-
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index a353915f5..d51c344bc 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -32,4 +32,3 @@ $darker-grey: rgba(64, 64, 64, 1.0);
font-size: 1.0em;
padding-top: 4px;
}
-
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index ce80de428..52cbbb29d 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -3,6 +3,9 @@ import PropTypes from "prop-types";
import { injectIntl, FormattedMessage } from "react-intl";
import { generateHubName } from "../utils/name-generation";
import classNames from "classnames";
+import faAngleLeft from "@fortawesome/fontawesome-free-solid/faAngleLeft";
+import faAngleRight from "@fortawesome/fontawesome-free-solid/faAngleRight";
+import FontAwesomeIcon from "@fortawesome/react-fontawesome";
const HUB_NAME_PATTERN = "^[A-Za-z0-9-'\":!@#$%^&*(),.?~ ]{4,64}$";
@@ -18,7 +21,7 @@ class HubCreatePanel extends Component {
this.state = {
name: generateHubName(),
environmentIndex: Math.floor(Math.random() * props.environments.length),
- expanded: true
+ expanded: false
};
}
@@ -118,7 +121,14 @@ class HubCreatePanel extends Component {
<div className="create-panel__form__environment__picker">
<img className="create-panel__form__environment__picker__image" srcSet={environmentImageSrcSet} />
<div className="create-panel__form__environment__picker__labels">labels</div>
- <div className="create-panel__form__environment__picker__controls">controls</div>
+ <div className="create-panel__form__environment__picker__controls">
+ <button
+ className="create-panel__form__environment__picker__controls__prev"
+ onClick={this.setToPreviousEnvironment}
+ >
+ <FontAwesomeIcon icon={faAngleLeft} />
+ </button>
+ </div>
</div>
</div>
)}
--
GitLab