Removed animated backgrounds

SAEON · Jun 3, 2021 · 9d6bfb8 · 9d6bfb8
1 parent de37a9c
commit 9d6bfb8
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 267 deletions.
diff --git a/src/client/src/contexts/background-image.jsx b/src/client/src/contexts/background-image.jsx
@@ -1,53 +1,13 @@
 import { createContext } from 'react'
-import { NCCRD_CLIENT_BACKGROUNDS } from '../config'
-import { isIE } from 'react-device-detect'
-import clsx from 'clsx'
 import useTheme from '@material-ui/core/styles/useTheme'
 
-/**
- * Provides some measure of control over which background
- * image is displayed throughout the application. This
- * is not yet fully implemented - current the background
- * is chosen at random.
- *
- * NOTE there is currently a Material-UI bug that means
- * form controls will jump when a select is chosen: https://github.com/mui-org/material-ui/issues/17353
- * when using background cover
- */
-
-const getBackgroundImagePath = () => {
-  const backgrounds = NCCRD_CLIENT_BACKGROUNDS.split(',')
-  const min = 0
-  const max = backgrounds.length - 1
-  const i = Math.floor(Math.random() * (max - min + 1) + min)
-  return `url(/bg/${backgrounds[i]})`
-}
-
 export const BgImageContext = createContext()
 
 export default ({ children }) => {
   const theme = useTheme()
 
   return (
     <>
-      {/* {!isIE && (
-        <div
-          id="bg"
-          style={{
-            position: 'fixed',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            backgroundSize: 'auto',
-            backgroundPosition: 'left',
-            backgroundImage: getBackgroundImagePath(),
-            zIndex: -1,
-            backgroundAttachment: 'fixed',
-          }}
-        />
-      )} */}
-
       <div
         id="bg"
         style={{
@@ -58,17 +18,7 @@ export default ({ children }) => {
           left: 0,
           right: 0,
         }}
-      >
-        <div className={clsx('light', 'x1')}></div>
-        <div className={clsx('light', 'x2')}></div>
-        <div className={clsx('light', 'x3')}></div>
-        <div className={clsx('light', 'x4')}></div>
-        <div className={clsx('light', 'x5')}></div>
-        <div className={clsx('light', 'x6')}></div>
-        <div className={clsx('light', 'x7')}></div>
-        <div className={clsx('light', 'x8')}></div>
-        <div className={clsx('light', 'x9')}></div>
-      </div>
+      />
 
       {children}
     </>

diff --git a/src/client/src/scss/layout.scss b/src/client/src/scss/layout.scss
@@ -6,219 +6,3 @@ body,
   margin: 0;
   padding: 0;
 }
-
-#bg {
-  margin: 0;
-  height: 100vh;
-  font-weight: 100;
-  -webkit-overflow-y: hidden;
-  -moz-overflow-y: hidden;
-  -o-overflow-y: hidden;
-  overflow-y: hidden;
-  -webkit-animation: fadeIn 1 1s ease-out;
-  -moz-animation: fadeIn 1 1s ease-out;
-  -o-animation: fadeIn 1 1s ease-out;
-  animation: fadeIn 1 1s ease-out;
-}
-
-.light {
-  position: absolute;
-  width: 0px;
-  opacity: 0.75;
-  background-color: white;
-  box-shadow: #e9f1f1 0px 0px 20px 2px;
-  opacity: 0;
-  top: 100vh;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  margin: auto;
-}
-
-.x1 {
-  -webkit-animation: floatUp 4s infinite linear;
-  -moz-animation: floatUp 4s infinite linear;
-  -o-animation: floatUp 4s infinite linear;
-  animation: floatUp 4s infinite linear;
-  -webkit-transform: scale(1);
-  -moz-transform: scale(1);
-  -o-transform: scale(1);
-  transform: scale(1);
-}
-
-.x2 {
-  -webkit-animation: floatUp 7s infinite linear;
-  -moz-animation: floatUp 7s infinite linear;
-  -o-animation: floatUp 7s infinite linear;
-  animation: floatUp 7s infinite linear;
-  -webkit-transform: scale(1.6);
-  -moz-transform: scale(1.6);
-  -o-transform: scale(1.6);
-  transform: scale(1.6);
-  left: 15%;
-}
-
-.x3 {
-  -webkit-animation: floatUp 2.5s infinite linear;
-  -moz-animation: floatUp 2.5s infinite linear;
-  -o-animation: floatUp 2.5s infinite linear;
-  animation: floatUp 2.5s infinite linear;
-  -webkit-transform: scale(0.5);
-  -moz-transform: scale(0.5);
-  -o-transform: scale(0.5);
-  transform: scale(0.5);
-  left: -15%;
-}
-
-.x4 {
-  -webkit-animation: floatUp 4.5s infinite linear;
-  -moz-animation: floatUp 4.5s infinite linear;
-  -o-animation: floatUp 4.5s infinite linear;
-  animation: floatUp 4.5s infinite linear;
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  transform: scale(1.2);
-  left: -34%;
-}
-
-.x5 {
-  -webkit-animation: floatUp 8s infinite linear;
-  -moz-animation: floatUp 8s infinite linear;
-  -o-animation: floatUp 8s infinite linear;
-  animation: floatUp 8s infinite linear;
-  -webkit-transform: scale(2.2);
-  -moz-transform: scale(2.2);
-  -o-transform: scale(2.2);
-  transform: scale(2.2);
-  left: -57%;
-}
-
-.x6 {
-  -webkit-animation: floatUp 3s infinite linear;
-  -moz-animation: floatUp 3s infinite linear;
-  -o-animation: floatUp 3s infinite linear;
-  animation: floatUp 3s infinite linear;
-  -webkit-transform: scale(0.8);
-  -moz-transform: scale(0.8);
-  -o-transform: scale(0.8);
-  transform: scale(0.8);
-  left: -81%;
-}
-
-.x7 {
-  -webkit-animation: floatUp 5.3s infinite linear;
-  -moz-animation: floatUp 5.3s infinite linear;
-  -o-animation: floatUp 5.3s infinite linear;
-  animation: floatUp 5.3s infinite linear;
-  -webkit-transform: scale(3.2);
-  -moz-transform: scale(3.2);
-  -o-transform: scale(3.2);
-  transform: scale(3.2);
-  left: 37%;
-}
-
-.x8 {
-  -webkit-animation: floatUp 4.7s infinite linear;
-  -moz-animation: floatUp 4.7s infinite linear;
-  -o-animation: floatUp 4.7s infinite linear;
-  animation: floatUp 4.7s infinite linear;
-  -webkit-transform: scale(1.7);
-  -moz-transform: scale(1.7);
-  -o-transform: scale(1.7);
-  transform: scale(1.7);
-  left: 62%;
-}
-
-.x9 {
-  -webkit-animation: floatUp 4.1s infinite linear;
-  -moz-animation: floatUp 4.1s infinite linear;
-  -o-animation: floatUp 4.1s infinite linear;
-  animation: floatUp 4.1s infinite linear;
-  -webkit-transform: scale(0.9);
-  -moz-transform: scale(0.9);
-  -o-transform: scale(0.9);
-  transform: scale(0.9);
-  left: 85%;
-}
-
-@-webkit-keyframes floatUp {
-  0% {
-    top: 100vh;
-    opacity: 0;
-  }
-  25% {
-    opacity: 1;
-  }
-  50% {
-    top: 0vh;
-    opacity: 0.8;
-  }
-  75% {
-    opacity: 1;
-  }
-  100% {
-    top: -100vh;
-    opacity: 0;
-  }
-}
-@-moz-keyframes floatUp {
-  0% {
-    top: 100vh;
-    opacity: 0;
-  }
-  25% {
-    opacity: 1;
-  }
-  50% {
-    top: 0vh;
-    opacity: 0.8;
-  }
-  75% {
-    opacity: 1;
-  }
-  100% {
-    top: -100vh;
-    opacity: 0;
-  }
-}
-@-o-keyframes floatUp {
-  0% {
-    top: 100vh;
-    opacity: 0;
-  }
-  25% {
-    opacity: 1;
-  }
-  50% {
-    top: 0vh;
-    opacity: 0.8;
-  }
-  75% {
-    opacity: 1;
-  }
-  100% {
-    top: -100vh;
-    opacity: 0;
-  }
-}
-@keyframes floatUp {
-  0% {
-    top: 100vh;
-    opacity: 0;
-  }
-  25% {
-    opacity: 1;
-  }
-  50% {
-    top: 0vh;
-    opacity: 0.8;
-  }
-  75% {
-    opacity: 1;
-  }
-  100% {
-    top: -100vh;
-    opacity: 0;
-  }
-}