Merge pull request #27 from jointDeveloper/dev

Dev
jointDeveloper · Feb 1, 2019 · 9184d82 · 9184d82
2 parents 0f93cd8 + ec154b5
commit 9184d82
Show file tree

Hide file tree

Showing 78 changed files with 553 additions and 312 deletions.
diff --git a/web-app/.gitignore b/web-app/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.firebase/
diff --git a/web-app/package-lock.json b/web-app/package-lock.json
diff --git a/web-app/package.json b/web-app/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "homepage": "https://jointdevweb.firebaseapp.com/",
   "dependencies": {
+    "chart.js": "^2.7.3",
     "firebase": "^5.7.3",
     "gh-pages": "^2.0.1",
     "react": "^16.7.0",

diff --git a/web-app/public/favicon.ico b/web-app/public/favicon.ico
diff --git a/web-app/public/images/icons/education.png b/web-app/public/images/icons/education.png
diff --git a/web-app/public/images/icons/facebook.png b/web-app/public/images/icons/facebook.png
diff --git a/web-app/public/images/icons/github-alt.png b/web-app/public/images/icons/github-alt.png
diff --git a/web-app/public/images/icons/github-blue.png b/web-app/public/images/icons/github-blue.png
diff --git a/web-app/public/images/icons/help.png b/web-app/public/images/icons/help.png
diff --git a/web-app/public/images/icons/instagram.png b/web-app/public/images/icons/instagram.png
diff --git a/web-app/public/images/icons/linkedin-blue.png b/web-app/public/images/icons/linkedin-blue.png
diff --git a/web-app/public/images/icons/linkedin.png b/web-app/public/images/icons/linkedin.png
diff --git a/web-app/public/images/icons/network.png b/web-app/public/images/icons/network.png
diff --git a/web-app/public/images/icons/slack.png b/web-app/public/images/icons/slack.png
diff --git a/web-app/public/images/icons/snapchat-ghost.png b/web-app/public/images/icons/snapchat-ghost.png
diff --git a/web-app/public/images/icons/twitter.png b/web-app/public/images/icons/twitter.png
diff --git a/web-app/public/images/icons/youtube-play.png b/web-app/public/images/icons/youtube-play.png
diff --git a/web-app/public/images/jointDev.png b/web-app/public/images/jointDev.png
diff --git a/web-app/public/images/logo_sirius.png b/web-app/public/images/logo_sirius.png
diff --git a/web-app/public/images/logo_utp.png b/web-app/public/images/logo_utp.png
diff --git a/web-app/public/images/stats/imgHombres.png b/web-app/public/images/stats/imgHombres.png
diff --git a/web-app/public/images/stats/imgMujeres.png b/web-app/public/images/stats/imgMujeres.png
diff --git a/web-app/public/images/stats/imgParticipacion.png b/web-app/public/images/stats/imgParticipacion.png
diff --git a/web-app/public/index.html b/web-app/public/index.html
@@ -22,24 +22,18 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <!--Google Fonts -->
-    <link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Raleway:600" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400i" rel="stylesheet">
 
     <!-- Bootstrap CDN -->
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
     <!-- Font Awesome icons -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 
-    <title>jointDeveloper</title>
+    <title>jointDev</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -56,7 +50,6 @@
     -->
     <script>
       $(document).ready(function() {
-        console.log( "ready!" );
         $('.carousel').carousel({
           interval: 2000
         });

diff --git a/web-app/src/App.css b/web-app/src/App.css
@@ -1,23 +1,57 @@
+@font-face {
+  font-family: fontTitle;
+  src: url(./fonts/Righteous/Righteous-Regular.ttf);
+}
+
+@font-face {
+  font-family: fontSubtitle;
+  src: url(./fonts/Raleway/Raleway-SemiBold.ttf);
+}
+
+@font-face {
+  font-family: fontParagraph;
+  src: url(./fonts/Raleway/Raleway-Medium.ttf);
+}
+
+@font-face {
+  font-family: fontQuoteAnanda;
+  src: url(./fonts/Ananda/Ananda-Black-Personal-Use.ttf);
+}
+
+@font-face {
+  font-family: fontQuoteRighteous;
+  src: url(./fonts/Righteous/Righteous-Regular.ttf);
+}
+
+@font-face {
+  font-family: highlightedParagraph;
+  src: url(./fonts/OpenSans/OpenSans-Italic.ttf);
+}
+
 .App .font-title {
   font-size: 70px;
-  font-family: 'Righteous', cursive;
+  font-family: fontTitle;
 }
 
 .App .font-subtitle {
-  font-size: 50px;
-  font-family: 'Raleway', sans-serif;
+  font-size: 70px;
+  font-family: fontSubtitle;
 }
 
 .App .font-paragraph {
-  font-family: 'Raleway', sans-serif;
+  font-family: fontParagraph;
+}
+
+.App .font-quote-ananda {
+  font-family: fontQuoteAnanda;
 }
 
 .App .font-quote {
-  font-family: 'Dancing Script', cursive;
+  font-family: fontQuoteRighteous;
 }
 
 .App .font-highlighted-paragraph {
-  font-family: 'Open Sans', sans-serif;
+  font-family: highlightedParagraph;
 }
 
 .show-red {

diff --git a/web-app/src/App.js b/web-app/src/App.js
@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import './App.css';
 import Header from './components/Header/Header';
-import SocialBar from './components/SocialBar/SocialBar';
-import Contact from './components/Contact/Contact';
+import Footer from './components/Footer/Footer';
 import Home from './components/Home/Home';
 import Members from './components/Members/Members';
 import photoGallery from './components/photoGallery/photoGallery';
@@ -16,7 +15,6 @@ class App extends Component {
     return (
       <Router>
         <div className="App">
-          <SocialBar />
           <Header image="./images/jointDev.png" />
 
           <Route exact path="/" component={ Home } />
@@ -25,7 +23,7 @@ class App extends Component {
           <Route path="/events" component={ Events } />
           <Route path="/blog" component={ Blog } />
 
-          <Contact utp_img="./images/logo_utp.png" sirius_img="./images/logo_sirius.png" />
+          <Footer />
         </div>
       </Router>
     );

diff --git a/web-app/src/components/About/About.css b/web-app/src/components/About/About.css
@@ -1,11 +1,7 @@
 .About {
   height: 100%;
   padding: 15vh;
-}
-
-.About #mision {
-  font-size: 30px;
-  padding: 15vh;
+  background: url(../../images/forma-redes-pink-top-completa.png) center top no-repeat;
 }
 
 .About .col {
@@ -30,6 +26,11 @@
   padding-top: 5vh;
 }
 
-.About .what-we-do i {
+.About .what-we-do img {
   padding-top: 5vh;
+  height: 15vw;
+}
+
+.About .what-we-do img:hover {
+  color: red;
 }
diff --git a/web-app/src/components/About/About.js b/web-app/src/components/About/About.js
@@ -7,45 +7,42 @@ class Header extends React.Component {
       {
         "title":"Enseñamos a niños y niñas",
         "text":"A través de juegos y de formas didácticas sobre programación y electrónica.",
-        "icon":"fas fa-chalkboard-teacher"
+        "icon":"fas fa-chalkboard-teacher",
+        "icon_img": "education.png"
       },
       {
         "title":"Compartimos conocimiento",
         "text":"Realizamos charlas mensuales y talleres sobre tecnología, con nuestro conocimiento y con el de personas de comunidades amigas",
-        "icon":"fas fa-share-alt"
+        "icon":"fas fa-share-alt",
+        "icon_img": "network.png"
       },
       {
         "title":"Compartimos oportunidades",
         "text":"De becas, trabajos, pasantías y de más a través de nuestras redes sociales.",
-        "icon":"fas fa-hands-helping"
+        "icon":"fas fa-hands-helping",
+        "icon_img": "help.png"
       },
     ];
 
     const items = whatWeDo.map((item, index) => {
       return (
         <div className="col d-flex justify-content-center what-we-do" key={index + "whatWeDo"}>
           <div className="row">
-            <h3 className="text-smoke-white text-center">{item.title}</h3>
+            <h3 className="text-smoke-strong text-center">{item.title}</h3>
           </div>
           <div className="row">
-            <i className={"text-smoke-white " + item.icon}></i>
+            <i className={"text-olympia-strong " + item.icon}></i>
           </div>
           <div className="row">
-            <p className="text-smoke-white text-center">{item.text}</p>
+            <p className="text-smoke-strong text-center">{item.text}</p>
           </div>
         </div>
       );
     });
     return (
-      <div className="About container-fluid bg-pink-yarrow" id="about">
+      <div className="About container-fluid" id="about">
 
-        <div className="row">
-          <div className="col">
-            <p className="font-quote text-center text-smoke-white" id="mision">Somos una comunidad que busca despertar el interés de las mujeres y niñas en la tecnología, generando espacios que promueven su participación en este campo mediante el aprendizaje colectivo, compartiendo conocimientos y recursos técnicos con otras comunidades.</p>
-          </div>
-        </div>
-
-        <h1 className="font-subtitle text-center text-smoke-white font-weight-bold">¿Qué hacemos?</h1>
+        <h1 className="font-subtitle text-center text-navy font-weight-bold">¿Qué hacemos?</h1>
 
         <div className="row" id="what-we-do-row-container">
           {items}

diff --git a/web-app/src/components/Blog/Blog.css b/web-app/src/components/Blog/Blog.css
@@ -1,6 +1,8 @@
 .Blog {
   height: 100%;
   padding: 15vh;
+  background: url(../../images/forma-redes-derecha-blue.png) right bottom no-repeat,
+              url(../../images/forma-redes-izquierda-blue.png) left top no-repeat;
 }
 
 .Blog h1 {

diff --git a/web-app/src/components/Blog/Blog.js b/web-app/src/components/Blog/Blog.js
@@ -38,7 +38,7 @@ class Blog extends React.Component {
         <div key={index + "post"} className="col-sm-6">
           <div className="card">
             <div className="card-body">
-              <h5 className="card-title font-quote">{post.title}</h5>
+              <h5 className="card-title font-highlighted-paragraph">{post.title}</h5>
               <p className="card-text">{post.description}</p>
               <a href={post.url} target="_blank" rel="noopener noreferrer" className="btn btn-primary bg-navy font-weight-bold">Leer</a>
             </div>
@@ -48,9 +48,9 @@ class Blog extends React.Component {
     });
 
     return (
-      <div className="Blog bg-navy">
+      <div className="Blog">
         <div className="row d-flex justify-content-center">
-          <h1 className="font-title text-white">Blog</h1>
+          <h1 className="font-title">Blog</h1>
         </div>
         <div className="row d-flex justify-content-center">
           {items}

diff --git a/web-app/src/components/Carousel/Carousel.css b/web-app/src/components/Carousel/Carousel.css
@@ -1,4 +1,18 @@
 .Carousel .carousel-img {
   height: 50vh;
   width: auto;
+  margin-bottom: 10vh;
+}
+
+.Carousel .carousel-control-next .carousel-control-next-icon,
+.Carousel .carousel-control-prev .carousel-control-prev-icon {
+  position: relative;
+}
+
+.Carousel .carousel-control-next .carousel-control-next-icon {
+  left: 5vw;
+}
+
+.Carousel .carousel-control-prev .carousel-control-prev-icon {
+  right: 7vw;
 }
diff --git a/web-app/src/components/Carousel/Carousel.js b/web-app/src/components/Carousel/Carousel.js
@@ -15,49 +15,22 @@ class Carousel extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     if (this.props.images !== nextProps.images) {
-      this.updateCarouselImages(nextProps.images);
-    }
-  }
-
-  updateCarouselImages = async (newImages) => {
-    let storage = this.props.firebase.getStorage();
-    await this.setState({ carouselImages: [] });
-
-    for (let i = 0; i < newImages.length; i++) {
-      let pathReference = storage.ref(newImages[i]);
-
-      pathReference.getDownloadURL().then((url) => {
-        this.setState({
-          carouselImages: [...this.state.carouselImages, url]
-        });
-      }).catch((error) => {
-        console.error(error);
-      });
+      this.setState({ carouselImages: nextProps.images });
     }
   }
 
   render() {
-    let images = this.state.carouselImages.map((image, index) => {
-      let classNameAux = "carousel-item";
-      classNameAux += index === 0 ? " active" : "";
-      return (
-        <div className={classNameAux} key={index + "carousel"}>
-          <img className="d-block w-100 carousel-img" src={image} alt="" />
-        </div>
-      );
-    });
-
     return (
-      <div className="Carousel d-flex justify-content-center">
-        <div id="carouselExampleControls" className="carousel slide" data-ride="carousel">
-          <div className="carousel-inner">
-            { images }
+      <div className="Carousel col d-flex justify-content-center">
+        <div id={ this.props.carouselId } className="carousel slide" data-ride="carousel">
+          <div className="carousel-inner row">
+            { this.state.carouselImages }
           </div>
-          <a className="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+          <a className="carousel-control-prev" href={ "#" + this.props.carouselId } role="button" data-slide="prev" onClick={(e) => this.props.isMultipleCarousel ? this.props.showPrevElement() : null }>
             <span className="carousel-control-prev-icon" aria-hidden="true"></span>
             <span className="sr-only">Previous</span>
           </a>
-          <a className="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+          <a className="carousel-control-next" href={ "#" + this.props.carouselId } role="button" data-slide="next" onClick={(e) => this.props.isMultipleCarousel ? this.props.showNextElement() : null} >
             <span className="carousel-control-next-icon" aria-hidden="true"></span>
             <span className="sr-only">Next</span>
           </a>

diff --git a/web-app/src/components/Contact/Contact.css b/web-app/src/components/Contact/Contact.css
@@ -1,7 +1,5 @@
 .Contact {
-  min-height: 100vh;
-  height: 100%;
-  padding: 15vh 15vh 0vh 15vh;
+  padding: 15vh;
 }
 
 .Contact #left .row {