mobile home img

.firebase/hosting.ZGlzdA.cache

@@ -1,35 +1,35 @@
-favicon.ico,1628189092996,409de290015176870145391771ae3ab563156ef270a952e8990ee564af6e77d4
-index.html,1628189092996,70f6cc330e4adccedf2a7f7b26d3c80fe15672b8adf8ecebd11cb81d3042efb3
-assets/fonts/stellar-bold.woff,1628189093000,54bf9228fb96f76653690637c4bff9a90f183a2ed7397f48bdbf7595f7b25598
-assets/fonts/stellar-light.woff,1628189093000,aac42a50bf4b87192df14520b53bb0d85ef4bb33a09cf29d1ad98ef8bb6bf074
-assets/fonts/stellar-medium.woff,1628189092999,1e7f58b7dadc18bc77a45dea33c6f5ee39fdfcb4a02509e3e1a2a4cb3bf34352
-assets/fonts/stellar-regular.woff,1628189092998,9fcb1872f99e51d0a2c194ab7185b30f87f850646f2e0d886187eebe276282ad
-assets/images/ApplyButton.png,1628189093000,74123a1dc50a1661f1d9fe8bc13fa53636d35d15534a6f2d29f9c65291c1e4e8
-assets/images/ApplyButtonAlt.png,1628189093004,3849e6665ddd94a4bca0a23a974bc250c1b8ff11981de474e92d53cfdce0d1e4
-assets/images/Menu.png,1628189093006,4467d24f239025258ede69cdb70c7ec57346dbe82c46535f9dcfa6c959a08796
-assets/images/next.png,1628189093005,30671f49b5471d0366521a05aab19d0b916397c6797e3c2b5dd420904cbf5d23
-assets/images/prev.png,1628189093007,754991c3985de3f87209d9ef27e0c011dcc5535ce5e1ba2ea32aa9650e18ba2e
-static/assets/fonts/stellar-light.woff,1628189092998,aac42a50bf4b87192df14520b53bb0d85ef4bb33a09cf29d1ad98ef8bb6bf074
-static/assets/fonts/stellar-regular.woff,1628189092999,9fcb1872f99e51d0a2c194ab7185b30f87f850646f2e0d886187eebe276282ad
-static/assets/images/ApplyButton.png,1628189092997,74123a1dc50a1661f1d9fe8bc13fa53636d35d15534a6f2d29f9c65291c1e4e8
-static/assets/images/ApplyButtonAlt.png,1628189092999,3849e6665ddd94a4bca0a23a974bc250c1b8ff11981de474e92d53cfdce0d1e4
-static/assets/images/next.png,1628189092999,30671f49b5471d0366521a05aab19d0b916397c6797e3c2b5dd420904cbf5d23
-static/assets/images/prev.png,1628189093000,754991c3985de3f87209d9ef27e0c011dcc5535ce5e1ba2ea32aa9650e18ba2e
-assets/images/facebook.png,1628189093005,dcc4efd484883cbf91dd6fcc38e240ef9d77cc880afdcdb38ffbda1f905fbe1d
-assets/images/facebookalt.png,1628189093003,59704fa8a222794b9dd75266937964d2dfd932815885fa7580c53e7d960aaa7c
-assets/images/instagram.png,1628189093005,0cabe18257b586c9de0ca6603815bfe871e59247098d55caf0964ed0c111af87
-assets/images/instagramalt.png,1628189093005,3b9ca13e674d3c20bccba4b7f04a6203eebcc6139a597a6fc6b9571b8e650f18
-assets/images/linkedin.png,1628189093005,68df3d621fa96a8ad6cfce5642357dad4c7cd600c6669f370299f0cb2abea299
-assets/images/linkedinalt.png,1628189093005,4d1e6f44b05e69eefb6eb032fcb16466505ff8a65926adddedc2f5d22eeb038d
-assets/images/twitter.png,1628189093007,9b023cb0ab84c8756213dade70cc2c8da6124dabc58e8a80be1f8f1af4aa8f3b
-assets/images/twitteralt.png,1628189093008,8b09b19b1a5140ce41e5102a643f9439b74adee0bc9ea11040901f6481e38db1
-assets/images/Website Graphics-14.png,1628189093008,5c571035ba039fca806b98d7a0ad86f2ac7d4320c527efbc838075eeedf253fb
-assets/images/ccslogo.png,1628189093004,2217970ecf6f44920ad17c8637903f7557997fe177d5769cbaca586fd3162f44
-vendor-1f98aeb719a3a764f8b9.min.js,1628189092993,43d1c9a81a2530d627331ee6c6674db04ff5be3c10200739c9649a36307694ce
-assets/images/SpiralNotebook.png,1628189093007,18fc61e4a6b60c9723468b732190353cc7843ad02b9f9f3aec44466664d071bb
-assets/images/Address-01.png,1628189093001,1b1cd1b6852167ab0815c83116d19bbb8320338c54664f4b2fe734b23af2bde5
-assets/images/Address-02.png,1628189093002,69701d28b69c05ed3db17dc29c539ecbc70775e4344cbadf90b2858d7fdb980f
-vendor-1f98aeb719a3a764f8b9.map,1628189092994,c26cb3dee6f47b7ac82389fcb6932ffb19dbdcce3229758dd6620a901cad417f
-app-0d7b17d63f90b609a7f3.min.css,1628189092993,a9715d5200b732c5ed35314f8cb5474fa30cb499a44b57721b2efcde6654104a
-app-1f98aeb719a3a764f8b9.map,1628189092995,7e2523b1bca32d258585ad7db5ec7af22c933ef4805cbe42bd0f4adf0ba596ff
-app-1f98aeb719a3a764f8b9.min.js,1628189092995,69282fdd63c1f6155020271a4cea35357e0b2d16f6541ff8f91892f16b3878e4
+favicon.ico,1628533005050,409de290015176870145391771ae3ab563156ef270a952e8990ee564af6e77d4
+index.html,1628533005050,b9e865454605f69a56ef996cfca2ff3b00cde74b9048e1d5a36bacd7b7cec47c
+assets/fonts/stellar-bold.woff,1628533005054,54bf9228fb96f76653690637c4bff9a90f183a2ed7397f48bdbf7595f7b25598
+assets/fonts/stellar-light.woff,1628533005056,aac42a50bf4b87192df14520b53bb0d85ef4bb33a09cf29d1ad98ef8bb6bf074
+assets/fonts/stellar-regular.woff,1628533005058,9fcb1872f99e51d0a2c194ab7185b30f87f850646f2e0d886187eebe276282ad
+assets/fonts/stellar-medium.woff,1628533005056,1e7f58b7dadc18bc77a45dea33c6f5ee39fdfcb4a02509e3e1a2a4cb3bf34352
+assets/images/ApplyButton.png,1628533005061,74123a1dc50a1661f1d9fe8bc13fa53636d35d15534a6f2d29f9c65291c1e4e8
+assets/images/ApplyButtonAlt.png,1628533005059,3849e6665ddd94a4bca0a23a974bc250c1b8ff11981de474e92d53cfdce0d1e4
+assets/images/Menu.png,1628533005065,4467d24f239025258ede69cdb70c7ec57346dbe82c46535f9dcfa6c959a08796
+assets/images/prev.png,1628533005065,754991c3985de3f87209d9ef27e0c011dcc5535ce5e1ba2ea32aa9650e18ba2e
+assets/images/next.png,1628533005064,30671f49b5471d0366521a05aab19d0b916397c6797e3c2b5dd420904cbf5d23
+static/assets/fonts/stellar-light.woff,1628533005055,aac42a50bf4b87192df14520b53bb0d85ef4bb33a09cf29d1ad98ef8bb6bf074
+static/assets/images/ApplyButtonAlt.png,1628533005055,3849e6665ddd94a4bca0a23a974bc250c1b8ff11981de474e92d53cfdce0d1e4
+static/assets/fonts/stellar-regular.woff,1628533005056,9fcb1872f99e51d0a2c194ab7185b30f87f850646f2e0d886187eebe276282ad
+static/assets/images/ApplyButton.png,1628533005052,74123a1dc50a1661f1d9fe8bc13fa53636d35d15534a6f2d29f9c65291c1e4e8
+static/assets/images/next.png,1628533005055,30671f49b5471d0366521a05aab19d0b916397c6797e3c2b5dd420904cbf5d23
+static/assets/images/prev.png,1628533005056,754991c3985de3f87209d9ef27e0c011dcc5535ce5e1ba2ea32aa9650e18ba2e
+assets/images/facebook.png,1628533005062,dcc4efd484883cbf91dd6fcc38e240ef9d77cc880afdcdb38ffbda1f905fbe1d
+assets/images/facebookalt.png,1628533005062,59704fa8a222794b9dd75266937964d2dfd932815885fa7580c53e7d960aaa7c
+assets/images/instagram.png,1628533005064,0cabe18257b586c9de0ca6603815bfe871e59247098d55caf0964ed0c111af87
+assets/images/instagramalt.png,1628533005063,3b9ca13e674d3c20bccba4b7f04a6203eebcc6139a597a6fc6b9571b8e650f18
+assets/images/linkedin.png,1628533005064,68df3d621fa96a8ad6cfce5642357dad4c7cd600c6669f370299f0cb2abea299
+assets/images/linkedinalt.png,1628533005065,4d1e6f44b05e69eefb6eb032fcb16466505ff8a65926adddedc2f5d22eeb038d
+assets/images/twitter.png,1628533005066,9b023cb0ab84c8756213dade70cc2c8da6124dabc58e8a80be1f8f1af4aa8f3b
+assets/images/twitteralt.png,1628533005066,8b09b19b1a5140ce41e5102a643f9439b74adee0bc9ea11040901f6481e38db1
+assets/images/Website Graphics-14.png,1628533005067,5c571035ba039fca806b98d7a0ad86f2ac7d4320c527efbc838075eeedf253fb
+assets/images/ccslogo.png,1628533005062,2217970ecf6f44920ad17c8637903f7557997fe177d5769cbaca586fd3162f44
+vendor-91ec1b81086bf042edde.min.js,1628533005045,4602005296e8693dc23eb11262412332015092389891ffb91f70a667bd37364c
+assets/images/SpiralNotebook.png,1628533005067,18fc61e4a6b60c9723468b732190353cc7843ad02b9f9f3aec44466664d071bb
+assets/images/Address-01.png,1628533005061,1b1cd1b6852167ab0815c83116d19bbb8320338c54664f4b2fe734b23af2bde5
+assets/images/Address-02.png,1628533005056,69701d28b69c05ed3db17dc29c539ecbc70775e4344cbadf90b2858d7fdb980f
+vendor-91ec1b81086bf042edde.map,1628533005047,5ea9cfd57baeaaae82eb3ac735009a912e7763872f7c9e03322001d80b16c650
+app-8bd80aec862dca3c7f02.min.css,1628533005046,ac42ae656ab30ce563d2029a28bf5f2e1c5bc81ef7654129737a1e297f43926d
+app-91ec1b81086bf042edde.map,1628533005048,556102aa12a29782f63df4c15a140ce38ae30246e60044fa473a5f675b1e9bc9
+app-91ec1b81086bf042edde.min.js,1628533005048,f444d374c9c5df58407ec7cdb5d39dcb767d3594a5de8d2798ecf8e67c3b19ca

src/components/buttons/homebuttons-component.js

@@ -17,12 +17,14 @@ class HomeButtonsComponent extends Component {
         super(props);
         this.state={
             isLoaded: false,
-            articles: []
+            articles: [],
+            mobileImage: [],
         }
       }
 
       componentDidMount() {
-        this.getMyArticles()
+        this.getMyArticles(),
+        this.getMyMobileImage()
       }
 
       getMyArticles = () => {
@@ -52,10 +54,38 @@ class HomeButtonsComponent extends Component {
         })
       }
 
+      getMyMobileImage = () => {
+        db
+        .collection( 'HeroImageMobile' )
+        .get()
+        .then(docs => {
+          if(!docs.empty){
+            let allImages = []
+            docs.forEach(function (doc) {
+              const Image = {
+                id: doc.id,
+                ...doc.data()
+              }
+
+              allImages.push(Image)
+            })
+
+            this.setState({
+              mobileImage: allImages
+            }, () => {
+              this.setState ({
+                isLoaded: true
+              })
+            })
+          }
+        })
+      }
+
     render() {
         return (
             <div className='homebutton-container'>
             <div className='hero-img'>
+              <div className="hero-img-desktop">
             {
                       this.state.isLoaded ?
                         this.state.articles.map((article, index) => {
@@ -68,6 +98,7 @@ class HomeButtonsComponent extends Component {
                         })
                         : '' 
                       }
+                      </div>
             <div className='home-button-group'>
             <div className='escape-button'>
                 <EscapeButton />
@@ -85,7 +116,22 @@ class HomeButtonsComponent extends Component {
                 <ContactButton />
             </div>
             </div>
+            <div className="hero-img-mobile">
+              {
+                      this.state.isLoaded ?
+                        this.state.mobileImage.map((image, index) => {
+                          return(
+                          <HeroImageMobile className='Hero'
+                            key={index}
+                            data={image}
+                          />
+                          )
+                        })
+                        : '' 
+                      }
+              </div>
             <div className='mobile-button-group'>
+
             <div className='escape-button-mobile'>
                 <EscapeButton />
             </div>
@@ -110,4 +156,19 @@ class HomeButtonsComponent extends Component {
     }
 }
 
+const HeroImageMobile = (props) => {
+  return (
+      <div className='hero-image-mobile-container'>
+      <div className="hero-image-mobile-img">
+      <img
+      top
+      src={props.data.featuredImage}
+      alt="Card Image"
+      className="CardImage"
+      />
+      </div>
+      </div>
+  );
+}
+
 export default HomeButtonsComponent;

src/components/homepage/homepage.js

@@ -6,6 +6,7 @@ import LeftColumn from './left-column';
 import HomeButtonsComponent from '../buttons/homebuttons-component';
 import CenterPiece from './centerpiece';
 import SimpleModal from '../modals/heroimage-modal';
+import MobileModal from '../modals/HeroImageMobileModal';
 import SmallNavDrawer from '../navigation/SmallNavDrawer';
 import HomepageSocialMedia from '../homepage/homepage-socialmedia';
 
@@ -40,9 +41,18 @@ class Homepage extends Component {
             <div className='centerpiece'>
             <div className='homebutton-component'>
                 <HomeButtonsComponent />
-                <SimpleModal />
+
             </div>
+
             </div>
+            <div className="home-modals">
+                <div className="desktop-modal">
+                <SimpleModal />
+                </div>
+                <div className="mobile-modal">
+                <MobileModal />
+                </div>
+                </div>
 
                 <div className='home-page-content'>
                 <div className='left-side-column'>

src/components/modals/HeroImageMobileModal.js

@@ -0,0 +1,149 @@
+import React, { Component } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+import {Container, FormGroup, Input, Button} from 'reactstrap';
+import { useAuth } from '../../contexts/AuthContext';
+import firebase from "firebase";
+import { v4 as uuidv4 } from 'uuid'
+
+
+function rand() {
+    return Math.round(Math.random() * 20) - 10;
+  }
+
+  function getModalStyle() {
+    const top = 50 + rand();
+    const left = 50 + rand();
+
+    return {
+      top: `${top}%`,
+      left: `${left}%`,
+      transform: `translate(-${top}%, -${left}%)`,
+    };
+  }
+
+  const useStyles = makeStyles((theme) => ({
+    paper: {
+      position: 'absolute',
+      width: 400,
+      backgroundColor: theme.palette.background.paper,
+      border: '2px solid #000',
+      boxShadow: theme.shadows[5],
+      padding: theme.spacing(2, 4, 3),
+    },
+  }));
+
+  export default function MobileModal() {
+    const classes = useStyles();
+    // getModalStyle is not a pure function, we roll the style only on the first render
+    const [modalStyle] = React.useState(getModalStyle);
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = () => {
+      setOpen(true);
+    };
+
+    const handleClose = () => {
+      setOpen(false);
+    };
+
+
+    const { currentUser } = useAuth();
+
+    return (
+        currentUser ? (
+      <div className='banner-button-container'>
+        <button type="button" className='homepage-img-button' onClick={handleOpen}>
+          Edit Mobile Image
+        </button>
+        <Modal
+          open={open}
+          onClose={handleClose}
+        >
+      <div className='HomepageEdit'>
+      <HeroImageMobileEdit />
+      </div>
+        </Modal>
+      </div> ) : null
+    );
+  }
+
+  const db = firebase.default.firestore()
+const storageRef = firebase.storage()
+
+class HeroImageMobileEdit extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state={
+            article: {
+                featuredImage: ''
+            }
+        }
+    }
+
+    submitEdit = async () => {
+        const article = this.state.article
+       await db.collection("HeroImageMobile").doc("8U5hPHeLJrHv9YYRLBeh")
+            .update(
+                article
+                )
+
+            .catch( err => console.log(err))
+            location.reload()
+    }
+
+    uploadImageCallBack = (e) => {
+        return new Promise(async(resolve, reject) => {
+            const file = e.target.files[0]
+            const fileName = uuidv4()
+            storageRef.ref().child("HeroImageMobile/" + fileName).put(file)
+            .then( async snapshot => {
+
+                const downloadURL = await storageRef.ref().child("HeroImageMobile/" +fileName).getDownloadURL()
+
+                resolve({
+                    success: true,
+                    data: {link: downloadURL}
+                })
+            })
+        })
+    }
+
+
+    render() {
+        return (
+            <Container>
+
+                        <FormGroup className='edit-status-button'>
+                                <Button className='edit-submit'
+                                onClick={(e) => this.submitEdit()}>
+                                    Submit
+                                </Button> 
+                            </FormGroup>
+
+                            <FormGroup className='edit-featured-image'> Featured Mobile Image
+                                <Input type="file" accept='image/*' className="image-uploader"
+                                onChange={async (e) => {
+                                    const uploadState = await this.uploadImageCallBack(e)
+                                    if(uploadState.success) {
+                                        this.setState({
+                                            hasFeaturedImage: true,
+                                            article: {
+                                                ...this.state.article,
+                                                featuredImage: uploadState.data.link
+                                            }
+                                        })
+                                    }
+                                }}> 
+                                </Input>
+                                <div className='image'>
+                                {
+                                    this.state.hasFeaturedImage ?
+                                        <img src={this.state.article.featuredImage} /> : ''
+                                }</div>
+                            </FormGroup>
+            </Container>
+        );
+    }
+}

src/components/modals/heroimage-modal.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Modal from '@material-ui/core/Modal';
 import { useAuth } from '../../contexts/AuthContext';
+import firebase from "firebase";
 import HeroImageEdit from './heroimage-edit';
 
 function rand() {
@@ -63,4 +64,6 @@ export default function SimpleModal() {
       </Modal>
     </div> ) : null
   );
-}
+}
+
+

src/style/home.scss

@@ -325,4 +325,16 @@ transition: opacity 1s ease !important;
 
 .small-ad-mobile {
   font-size: 10px;
+}
+
+.home-modals {
+  display: flex;
+}
+
+.desktop-modal {
+  margin-right: 75px;
+}
+
+.hero-img-mobile {
+  position: absolute;
 }