From c8b8afc27d37e4bd84c4c8f416ce34312df032d3 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Sun, 10 Jul 2022 19:20:13 -0400 Subject: [PATCH] Read flag to handle redesign --- packages/fakeyou/src/App.tsx | 15 +- .../fakeyou/src/{App.scss => AppNew.scss} | 0 packages/fakeyou/src/AppOld.scss | 305 ++++++++++++++++++ 3 files changed, 317 insertions(+), 3 deletions(-) rename packages/fakeyou/src/{App.scss => AppNew.scss} (100%) create mode 100644 packages/fakeyou/src/AppOld.scss diff --git a/packages/fakeyou/src/App.tsx b/packages/fakeyou/src/App.tsx index 3729429f34..f2b81fac15 100644 --- a/packages/fakeyou/src/App.tsx +++ b/packages/fakeyou/src/App.tsx @@ -1,6 +1,3 @@ -// import 'bulma/css/bulma.css' -import "./App.scss"; - import React from "react"; import { ApiConfig } from "@storyteller/components"; import { @@ -58,6 +55,8 @@ enum MigrationMode { OLD_VOCODES, } +const USE_REFRESH = false; + interface Props { enableSpectrograms: boolean; @@ -169,6 +168,16 @@ class App extends React.Component { }; } + componentWillMount() { + // Handle redesign + if (USE_REFRESH) { + require("./AppNew.scss"); + } else { + require("bulma/css/bulma.css"); + require("./AppOld.scss"); + } + } + async componentDidMount() { await this.querySession(); await this.queryLanguage(); diff --git a/packages/fakeyou/src/App.scss b/packages/fakeyou/src/AppNew.scss similarity index 100% rename from packages/fakeyou/src/App.scss rename to packages/fakeyou/src/AppNew.scss diff --git a/packages/fakeyou/src/AppOld.scss b/packages/fakeyou/src/AppOld.scss new file mode 100644 index 0000000000..f1f998bcdd --- /dev/null +++ b/packages/fakeyou/src/AppOld.scss @@ -0,0 +1,305 @@ +//@import-normalize; /* bring in normalize.css styles */ + +$page-width: 700px; + +$light-text-color: #777; +$button-text-color: #666; + +$body-font-family: 'Fira Sans', serif; +$nav-font-family: 'Fira Sans', sans-serif; +$footer-font-family: 'Fira Sans Condensed', sans-serif; +$textarea-font-family: 'Fira Sans', sans-serif; +$headings-font-family: 'Merriweather', serif; + +body { + font-family: $body-font-family; + font-weight: 300; // For Fira Sans +} + +// Style for user text input that overflows +.overflow-fix { + overflow-wrap: anywhere; +} + +.mainwrap { + max-width: 800px; + margin: auto; +} + +canvas#spectrogram { + margin: 0.5em 0; + transform: scaleY(-1); /* Spectrograms are flipped */ + height: 300px; + width: 100%; + cursor: pointer; +} + +/*p { + a:link, + a:visited { + color: rgb(119, 165, 235); + font-weight: bold; + } + a:hover, + a:active{ + color: rgb(85, 133, 204); + font-weight: bold; + } +}*/ + +p { + a:before { + content: ' '; + } +} + +#main { + position: relative; // Footer attachment. + min-height: 100vh; +} + +$footer-height: 6rem; + +#viewable { + padding-bottom: $footer-height; +} + +footer { + font-family: $footer-font-family; + text-align: center; + width: 100%; + position: absolute; // Footer attachment. + bottom: 0; + // NB: Setting explicit height doesn't appear to be necessary, and + // it was creating an annoying scrollbar. + //height: $footer-height; + color: $light-text-color; +} + +.social { + img { + max-width: 70px; + max-height: 70px; + padding: 1em; + } +} + +// Tech logos need a hack to not have margin. +.vocodes-grid-marginless { + margin-left: 0 !important; + margin-right: 0 !important; +} + +nav { + font-family: "Fugaz One"; + margin: 0.2em 0 0 0; + padding: 0; + + .signup { + font-weight: bold; + font-size: 1.2em; + } + a:link.signup, + a:visited.signup { + color: #da4f18; + } + a:hover.signup, + a:active.signup{ + color: #da4f18; + text-decoration: underlinegt; + } + + #logo_text { + font-family: "Fugaz One"; + font-size: 1.5em; + margin: 0 0.3em 0 0; + padding: 0; + .vo { + color: #209CEE; + padding: 0; + margin: 0; + } + .codes { + color: rgba(32, 156, 238, 0.685); + padding: 0; + margin: 0; + } + a { + padding: 0; + margin: 0; + } + a:link, + a:visited { + text-decoration: none; + background-color: #fff; + } + a:active, + a:hover{ + text-decoration: underline; + background-color: #fff; + } + } + a { + margin: 0; + padding: 0; + } + a, + a:link { + text-decoration: none; + color: $light-text-color; + padding: 0 10px; + cursor: pointer; + } + a:after { + content: ''; + width: 99.5%; + } + a:hover, + a:active { + background-color: #bfdff5; + } + + hr { + margin: 5px 0 15px 0; + } +} + +.button-group { + padding: 1em 0; +} + +#status { + .info { + color: #888888; + } + .warn { + color: #aaaa00; + } + .error { + color: #aa0000; + } + min-height: 1.5em; +} + +.upload-box { + padding: 0 0 1em; +} + +.video-template-selector { + margin: 1.5em 0 1.5em 0; + text-align: center; + + .thumbnail { + max-width: 220px; + padding: 0em; + margin: 5px; + filter: brightness(70%) grayscale(1); + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + } + + .selected { + filter: brightness(100%) grayscale(0); + box-shadow: 0px 0px 25px #209CEE + } +} + +.video-wrapper { + text-align: center; +} + +#usage, +#updates, +#help-wanted, +#terms { + h1, h2 { + font-family: $headings-font-family; + } + p { + text-align: justify; + } + li { + font-size: 1.2em; + text-align: justify; + margin-bottom: 1em; + } +} + +.template-preview { + text-align: center; +} + +/* V2 (but probably defined elsewhere too) */ + +.mascot { + text-align: center; + margin: auto; +} + +.mascot img { + max-width: 200px; +} + +.main-form { + padding: 0 15px; +} + +.git-sha { + color: #999; + font-size: 0.8rem; +} + +/* TAILWIND STYLE CLASSES */ + +.display-inline { + display: inline; +} + +.white-space-nowrap { + white-space: nowrap; +} + +.padding-bottom-1em { + padding-bottom: 1em; +} + +/** RESPONSIVENESS **/ + +/** Hide footer when using onscreen keyboard. */ +/* Actually, let's not do that because people filed bug reports. +@media screen and (max-height: 550px) { + footer { + display: none; + } + nav { + display: none; + } +} +*/ + +@media screen and (max-height: 740px) { + footer p { + display: inline; + } + footer p:after { + content: ' '; // Not sure why the space disappears when inline. + } + + .social { + img { + max-width: 50px; + max-height: 50px; + padding: 0.2em; + } + } +} + +// Prevent Android devices from horizontal scrolling +// Mine is 412x846. +@media screen and (max-width: 412px) { + #root { + max-width: 380px; + margin: auto; + } +}