Revert "Revert "toggle animation and vue scroll reveal""

my/src/assets/css/status.css

@@ -682,6 +682,13 @@ a {
     -moz-animation: statusanimation 140s ease infinite;
     animation: statusanimation 140s ease infinite; */
 }
+.staticBackground {
+    background: rgb(0,0,0);
+    /* background: linear-gradient(180deg,#7a72e5 45%, #ab5797 50%); */
+    background: linear-gradient(270deg,#7067e0,#973d82);
+    /* background-size: 800% 800%; */
+    background-size: 200% 200%;
+}
 
 @-webkit-keyframes statusanimation {
     0% {
@@ -839,4 +846,37 @@ a {
 .swag-url {
     color: orange;
     font-weight: 500;
-}
+}
+.act-btn {
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+    font-family: 'Montserrat', sans-serif;
+    opacity: 0.99;
+    padding: 10px 23%;
+    color: white;
+    transition: 0.1s ease-in-out;
+    cursor: pointer;
+    z-index: 100;
+    width: 97.5%;
+  }
+
+  .act-btn-group {
+    z-index: 10;
+    float:right !important;
+  }
+
+  .toggle-btn-grp{
+    padding: 0px !important;
+    float:right !important;
+  }
+
+  .act-btn__reset {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2) !important;
+    padding: 0 !important;
+  }
+
+  .togbtn {
+      padding:0 !important;
+  }

my/src/store.ts

@@ -12,6 +12,7 @@ interface StoreState {
   db: firebase.firestore.Firestore;
   firebase: any;
   currentHackathon: string;
+  animationToggle: boolean,
 }
 
 // export the store
@@ -21,5 +22,19 @@ export default new Vuex.Store({
     db,
     firebase,
     currentHackathon: 'DH7',
+    animationToggle: window.localStorage.getItem('animationToggle') === 'true',
   } as StoreState,
+  getters:{
+    animateBackground: state => {
+      return state.animationToggle;
+    }
+  },
+  mutations:{
+    changeAnimate (state, payload){
+      state.animationToggle = payload;
+      localStorage.setItem('animationToggle', payload);
+      location.reload();
+    }
+  }
 });
+sessionStorage.clear();

my/src/types.ts

@@ -11,19 +11,21 @@ export interface ApplicationModel {
   snack: SnackBar;
   resetDialogue: boolean;
   submitDialogue: boolean;
+  toggleAnimation: boolean;
+
 }
 
-export interface SubmitModel {
-  app: AppContents;
+export interface SubmitModel {	
+  app: AppContents;	
 
-  // this needs to be typed
-  questions: any;
-  authorizations: any;
-  updateTimeout: any;
-  snack: SnackBar;
-  resetDialogue: boolean;
-  submitDialogue: boolean;
-  loadingDialogue: boolean;
+  // this needs to be typed	
+  questions: any;	
+  authorizations: any;	
+  updateTimeout: any;	
+  snack: SnackBar;	
+  resetDialogue: boolean;	
+  submitDialogue: boolean;	
+  loadingDialogue: boolean;	
   loadingError: boolean;
 }
 
@@ -88,7 +90,6 @@ export interface AppContents {
   };
   general: {
     coffee: string;
-    emails: boolean,
     team: string;
     termsAndConditions: boolean;
     code: boolean;
@@ -160,6 +161,7 @@ export interface StatusModel {
   splashMessage: string;
   busSelected: string;
   rsvp: {coming: boolean, origin: string};
+  toggleAnimation: boolean;
 }
 
 export interface ApplyState {

my/src/views/Apply.vue

@@ -11,14 +11,23 @@
       </a><br>
       </div>
     </div>
-    <div class="background">
+    <div :class="{backgroundStatic: toggleAnimation, background: !toggleAnimation}">
       <Nav class="fit" />
+        <v-container class="act-btn-group toggle-btn-grp" text-xs-center>
+        <v-layout align-center justify-center row wrap>
+          <v-flex xs12>
+            <v-btn class="act-btn act-btn__reset"   @click="changeAnimation">Toggle Animations</v-btn>
+          </v-flex>
+        </v-layout>
+      </v-container>
+
       <v-snackbar top right :color="snack.color" v-model="snack.visible" :timeout="snack.timeout">
         {{ snack.message }}
         <v-btn :color="snack.btnColor" flat text @click="snack.visible = false">Close</v-btn>
       </v-snackbar>
       <ValidationObserver ref="form">
         <form action>
+
           <div class="cardify">
             <p class="big">Apply here.</p>
             <p class="small">
@@ -62,7 +71,7 @@
           <ValidationProvider
             v-for="(authorization, i) in authorizations"
             :key="'authorization_' + i"
-            :rules="authorization.requirements"
+            :rules="{ mustBe: true }"
             :name="authorization.label"
             v-slot="{ errors }"
           >
@@ -115,6 +124,7 @@ import 'firebase/firestore';
 import 'firebase/storage';
 import VueScrollReveal from 'vue-scroll-reveal';
 import deepmerge from 'deepmerge';
+import store from '../store';
 
 import Nav from '@/components/Nav.vue';
 import Card from '@/components/Card.vue';
@@ -140,7 +150,8 @@ Vue.use(VueScrollReveal, {
   duration: 1000,
   scale: 1.35,
   distance: '10px',
-  mobile: true,
+  mobile: !store.getters.animateBackground,
+  desktop: !store.getters.animateBackground,
   reset: true,
 });
 
@@ -180,6 +191,7 @@ Vue.component('ValidationProvider', ValidationProvider);
 Vue.component('ValidationObserver', ValidationObserver);
 
 export default Vue.extend({
+  store,
   data(): ApplicationModel {
     return {
       app: getBlankApplication(),
@@ -193,9 +205,11 @@ export default Vue.extend({
         visible: false,
         message: 'Progress saved!',
       },
+      toggleAnimation: this.$store.getters.animateBackground,
       resetDialogue: false,
       submitDialogue: false,
     };
+
   },
   components: {
     Card,
@@ -204,6 +218,10 @@ export default Vue.extend({
     Dialog,
   },
   methods: {
+    changeAnimation: function(){
+      this.toggleAnimation = !this.toggleAnimation;
+      this.$store.commit("changeAnimate", this.toggleAnimation)
+    },
     async logout() {
       try {
         await firebase.auth().signOut();
@@ -365,6 +383,7 @@ export default Vue.extend({
   mounted(): void {
     this.questions = applicationQuestions;
     this.authorizations = authorizations;
+
   },
 });
 </script>
@@ -420,6 +439,10 @@ export default Vue.extend({
   padding: 20px 0 40px 0;
 }
 
+.toggle-btn-grp{
+  padding-bottom: 0px !important;
+}
+
 @media only screen and (max-width: 960px) {
   .act-btn-group {
     width: 90%;
@@ -480,7 +503,25 @@ export default Vue.extend({
 v-snackbar {
   background-color: red !important;
 }
-
+.backgroundStatic{
+  width: 100% !important;
+  min-width: 100vw;
+  height: 100%;
+  background-size: cover;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  /* background: linear-gradient(269deg, #6D0169, #D9636D, #405BC4, #1D847C, #7C2ECC, #4179BE); */
+  background: linear-gradient(
+    269deg,
+    #7c1078,
+    #e8727c,
+    #4f6ad3,
+    #2c938b,
+    #8b3ddb,
+    #5088cd
+  );
+  background-size: 1400% 1400%;
+}
 .background {
   width: 100% !important;
   min-width: 100vw;

my/src/views/Status.vue

@@ -13,8 +13,9 @@
           />
         </div>
       </v-app>
-      <v-app key="2" v-if="true" class="dashboard statusbackground">
+      <v-app key="2" v-if="true" class="dashboard" :class="{staticBackground: toggleAnimation, statusbackground: !toggleAnimation}">
         <Navbar2 />
+
         <div class="wrap">
           <!--Column#1-->
           <div class="col col6">
@@ -250,6 +251,13 @@
                 </a>
               </div>
             </div>
+            <v-container class="act-btn-group toggle-btn-grp" text-xs-center>
+                <v-layout align-center justify-center row wrap class="togbtn">
+                  <v-flex xs12>
+                    <v-btn class="act-btn act-btn__reset"   @click="changeAnimation">Toggle Animations</v-btn>
+                  </v-flex>
+                </v-layout>
+              </v-container>
           </div>
           <div class="box box5 status tablet">
             <div class="currentStatus" v-if="step < 8">
@@ -294,6 +302,7 @@
             </div>
           </div>
         </div>
+
         <v-snackbar top right :color="snack.color" v-model="snack.visible" :timeout="snack.timeout">
           {{ snack.message }}
           <v-btn :color="snack.btnColor" flat text @click="snack.visible = false">Close</v-btn>
@@ -318,10 +327,12 @@ import { mapGetters } from 'vuex';
 import db from '../firebase_init';
 import { StatusModel } from '../types';
 import { busCities } from '../data';
+import store from '../store';
 
 
 const allUniversities = [];
 export default Vue.extend({
+  store,
   mixins: [validationMixin],
   name: 'Status',
   data(): StatusModel {
@@ -420,6 +431,7 @@ export default Vue.extend({
       splashMessage: '',
       busSelected: 'Not bussing',
       rsvp: { coming: false, origin: '' },
+      toggleAnimation: this.$store.getters.animateBackground,
     };
   },
   components: {
@@ -447,6 +459,10 @@ export default Vue.extend({
   },
   methods: {
     // Grabs the application from where its store in firebase
+    changeAnimation: function(){
+      this.toggleAnimation = !this.toggleAnimation;
+      this.$store.commit("changeAnimate", this.toggleAnimation)
+    },
     fetchFromFirebase(): Promise<any> {
       return this.$store.state.db
         .collection(this.$store.state.currentHackathon)