Merge pull request #101 from DemocraciaEnRed/3.0.3

3.0.3
DemocraciaEnRed · Jul 23, 2019 · b2e1b95 · b2e1b95
2 parents 116e056 + bf6b73b
commit b2e1b95
Show file tree

Hide file tree

Showing 18 changed files with 144 additions and 78 deletions.
diff --git a/api/lib/medium-casos.js b/api/lib/medium-casos.js
@@ -3,7 +3,8 @@ const moment = require('moment')
 
 function getPublicacionesCasos (req, res) {
   getMediumCasos()
-    .then(mediumResponse => {
+    .then(mediumResponse => 
+       {
       res.json(parsePublicaciones(mediumResponse, req.query.lang))
     })
     .catch(err => {
@@ -40,7 +41,7 @@ function parsePublicaciones (mediumResponse, lang) {
   return posts.map(p => (
     {
 
-    url: `${process.env.MEDIUM_URL_CASOS}/${p.uniqueSlug}`,
+    url: `${process.env.MEDIUM_URL}/${p.uniqueSlug}`,
     title: p.title,
     claps: p.virtuals.totalClapCount,
     createdAt: moment(p.createdAt).format('LT, dddd'),

diff --git a/components/Facebook.js b/components/Facebook.js
@@ -10,14 +10,14 @@ const Facebook = (props) => (
     </g>
     <style jsx> {`
         .cls-1{
-          fill:#fff;
+          fill:#000;
         }
         .cls-2:hover .cls-1{
-          fill: ${props.hover};
+          fill: #F4CD45;
         }
         @media (max-width: 1024px) {
           .cls-2:hover .cls-1{
-          fill: ${props.mobileHover};
+          fill: #F4CD45;
         }
       `}</style>
   </svg>

diff --git a/components/Github.js b/components/Github.js
@@ -8,14 +8,14 @@ const Github = (props) => (
     </g>
     <style jsx>{`
        .cls-1{
-          fill:#fff;
+          fill:#000;
         }
         .cls-2:hover .cls-1{
-          fill: ${props.hover};
+          fill: #EA1B3B;
         }
         @media (max-width: 1024px) {
           .cls-2:hover .cls-1{
-          fill: ${props.mobileHover};
+          fill: #EA1B3B;
         }
     `}</style>
   </svg>

diff --git a/components/Instagram.js b/components/Instagram.js
@@ -1,21 +1,25 @@
 
 const Instagram = (props) =>  (
-  <svg viewBox="0 0 512.00096 512.00096" className="cls-2" xmlns="http://www.w3.org/2000/svg">
+  // <svg viewBox="0 0 512.00096 512.00096" className="cls-2" xmlns="http://www.w3.org/2000/svg">
 
-      <path id="Layer_2"  className="cls-1" d="m373.40625 0h-234.8125c-76.421875 0-138.59375 62.171875-138.59375 138.59375v234.816406c0 76.417969 62.171875 138.589844 138.59375 138.589844h234.816406c76.417969 0 138.589844-62.171875 138.589844-138.589844v-234.816406c0-76.421875-62.171875-138.59375-138.59375-138.59375zm108.578125 373.410156c0 59.867188-48.707031 108.574219-108.578125 108.574219h-234.8125c-59.871094 0-108.578125-48.707031-108.578125-108.574219v-234.816406c0-59.871094 48.707031-108.578125 108.578125-108.578125h234.816406c59.867188 0 108.574219 48.707031 108.574219 108.578125zm0 0"/>
-    <path className="cls-1" d="m256 116.003906c-77.195312 0-139.996094 62.800782-139.996094 139.996094s62.800782 139.996094 139.996094 139.996094 139.996094-62.800782 139.996094-139.996094-62.800782-139.996094-139.996094-139.996094zm0 249.976563c-60.640625 0-109.980469-49.335938-109.980469-109.980469 0-60.640625 49.339844-109.980469 109.980469-109.980469 60.644531 0 109.980469 49.339844 109.980469 109.980469 0 60.644531-49.335938 109.980469-109.980469 109.980469zm0 0"/>
-    <path className="cls-1" d="m399.34375 66.285156c-22.8125 0-41.367188 18.558594-41.367188 41.367188 0 22.8125 18.554688 41.371094 41.367188 41.371094s41.371094-18.558594 41.371094-41.371094-18.558594-41.367188-41.371094-41.367188zm0 52.71875c-6.257812 0-11.351562-5.09375-11.351562-11.351562 0-6.261719 5.09375-11.351563 11.351562-11.351563 6.261719 0 11.355469 5.089844 11.355469 11.351563 0 6.257812-5.09375 11.351562-11.355469 11.351562zm0 0"/>
-
+  //     <path id="Layer_2"  className="cls-1" d="m373.40625 0h-234.8125c-76.421875 0-138.59375 62.171875-138.59375 138.59375v234.816406c0 76.417969 62.171875 138.589844 138.59375 138.589844h234.816406c76.417969 0 138.589844-62.171875 138.589844-138.589844v-234.816406c0-76.421875-62.171875-138.59375-138.59375-138.59375zm108.578125 373.410156c0 59.867188-48.707031 108.574219-108.578125 108.574219h-234.8125c-59.871094 0-108.578125-48.707031-108.578125-108.574219v-234.816406c0-59.871094 48.707031-108.578125 108.578125-108.578125h234.816406c59.867188 0 108.574219 48.707031 108.574219 108.578125zm0 0"/>
+  //   <path className="cls-1" d="m256 116.003906c-77.195312 0-139.996094 62.800782-139.996094 139.996094s62.800782 139.996094 139.996094 139.996094 139.996094-62.800782 139.996094-139.996094-62.800782-139.996094-139.996094-139.996094zm0 249.976563c-60.640625 0-109.980469-49.335938-109.980469-109.980469 0-60.640625 49.339844-109.980469 109.980469-109.980469 60.644531 0 109.980469 49.339844 109.980469 109.980469 0 60.644531-49.335938 109.980469-109.980469 109.980469zm0 0"/>
+  //   <path className="cls-1" d="m399.34375 66.285156c-22.8125 0-41.367188 18.558594-41.367188 41.367188 0 22.8125 18.554688 41.371094 41.367188 41.371094s41.371094-18.558594 41.371094-41.371094-18.558594-41.367188-41.371094-41.367188zm0 52.71875c-6.257812 0-11.351562-5.09375-11.351562-11.351562 0-6.261719 5.09375-11.351563 11.351562-11.351563 6.261719 0 11.355469 5.089844 11.355469 11.351563 0 6.257812-5.09375 11.351562-11.355469 11.351562zm0 0"/>
+
+  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" className="cls-2">
+    <path className="cls-1"  d="m437 0h-362c-41.351562 0-75 33.648438-75 75v362c0 41.351562 33.648438 75 75 75h362c41.351562 0 75-33.648438 75-75v-362c0-41.351562-33.648438-75-75-75zm-180 390c-74.441406 0-135-60.558594-135-135s60.558594-135 135-135 135 60.558594 135 135-60.558594 135-135 135zm150-240c-24.8125 0-45-20.1875-45-45s20.1875-45 45-45 45 20.1875 45 45-20.1875 45-45 45zm0 0"/>
+    <path className="cls-1"  d="m407 90c-8.277344 0-15 6.722656-15 15s6.722656 15 15 15 15-6.722656 15-15-6.722656-15-15-15zm0 0"/>
+    <path className="cls-1"  d="m257 150c-57.890625 0-105 47.109375-105 105s47.109375 105 105 105 105-47.109375 105-105-47.109375-105-105-105zm0 0"/>
       <style jsx> {`
         .cls-1{
-          fill:#fff;
+          fill:#000;
         }
         .cls-2:hover .cls-1{
-          fill: ${props.hover};
+          fill: #77549E;
         }
         @media (max-width: 1024px) {
           .cls-2:hover .cls-1{
-          fill: ${props.mobileHover};
+          fill: #77549E;
         }
       `}</style>
     </svg>

diff --git a/components/Medium.js b/components/Medium.js
@@ -0,0 +1,26 @@
+const Medium = (props) => (
+<svg xmlns="http://www.w3.org/2000/svg" className="cls-2" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256" version="1.1" preserveAspectRatio="xMidYMid">
+		<g>
+				<rect className="cls-1"  x="0" y="0" width="256" height="256"/>
+				<path  d="M61.0908952,85.6165814 C61.3045665,83.5054371 60.4994954,81.4188058 58.9230865,79.9979257 L42.8652446,60.6536969 L42.8652446,57.7641026 L92.7248438,57.7641026 L131.263664,142.284737 L165.145712,57.7641026 L212.676923,57.7641026 L212.676923,60.6536969 L198.947468,73.8174045 C197.763839,74.719636 197.176698,76.2025173 197.421974,77.670197 L197.421974,174.391342 C197.176698,175.859021 197.763839,177.341902 198.947468,178.244134 L212.355766,191.407842 L212.355766,194.297436 L144.91283,194.297436 L144.91283,191.407842 L158.802864,177.923068 C160.16778,176.558537 160.16778,176.157205 160.16778,174.070276 L160.16778,95.8906948 L121.54867,193.97637 L116.329871,193.97637 L71.3679139,95.8906948 L71.3679139,161.628966 C70.9930375,164.392788 71.9109513,167.175352 73.8568795,169.174019 L91.9219516,191.086776 L91.9219516,193.97637 L40.6974359,193.97637 L40.6974359,191.086776 L58.7625081,169.174019 C60.6942682,167.172038 61.5586577,164.371016 61.0908952,161.628966 L61.0908952,85.6165814 Z" fill="#FFFFFF"/>
+		</g>
+
+
+
+    <style jsx> {`
+        .cls-1{
+          fill:#000;
+        }
+        .cls-2:hover .cls-1{
+          fill: #3CA2DA;
+        }
+        @media (max-width: 1024px) {
+          .cls-2:hover .cls-1{
+          fill: #3CA2DA;
+        }
+      `}</style>
+    </svg>
+
+)
+
+export default Medium
diff --git a/components/SocialBar.js b/components/SocialBar.js
@@ -3,6 +3,7 @@ import Twitter from './Twitter'
 import Github from './Github'
 import Instagram from "./Instagram" 
 import Youtube from "./Youtube"
+import Medium from "./Medium"
 
 const SocialBar = ( { alignSelf, iconsSize, width, mobileWidth, justifyContent, iconHover, iconMobileHover } ) => (
 	<nav className='social-bar'>
@@ -18,12 +19,16 @@ const SocialBar = ( { alignSelf, iconsSize, width, mobileWidth, justifyContent,
     <a href='https://www.instagram.com/democraciaenred' className='ins' target='_blank' rel='external'>
       <Instagram hover={iconHover} mobileHover={iconMobileHover} />
     </a>
+    <a href='https://medium.com/multitudes' className='medium' target='_blank' rel='external' >
+      <Medium hover={iconHover} mobileHover={iconMobileHover} />
+    </a>
     <a href='https://www.youtube.com/channel/UCm5n0zxmfWN0pMuMPxk7psw/featured' className='fb' target='_blank' rel='external'>
       <Youtube hover={iconHover} mobileHover={iconMobileHover} />
+
     </a>
 		<style jsx>{`
       .social-bar {
-        justify-content: space-between;
+        justify-content: space-around;
         align-self: ${alignSelf};
         display: flex;
         width: ${width};

diff --git a/components/Twitter.js b/components/Twitter.js
@@ -14,14 +14,14 @@ const Twitter = ( props ) => (
     </g>
     <style jsx>{`
         .cls-1{
-          fill:#fff;
+          fill:#000;
         }
         .cls-2:hover .cls-1:hover{
-          fill: ${props.hover};
+          fill: #F27057;
         }
         @media (max-width: 1024px) {
           .cls-2:hover .cls-1:hover{
-          fill: ${props.mobileHover};
+          fill: #F27057};
         }
     `}</style>
 </svg>

diff --git a/components/Youtube.js b/components/Youtube.js
@@ -42,14 +42,14 @@ viewBox="0 0 455 455" /* style="enable-background:new 0 0 455 455;" */ xmlxspace
 </g>
 <style jsx> {`
   .cls-1{
-    fill:#fff;
+    fill:#000;
   }
   .cls-2:hover .cls-1{
-    fill: ${props.hover};
+    fill: #53C1B4;
   }
   @media (max-width: 1024px) {
     .cls-2:hover .cls-1{
-    fill: ${props.mobileHover};
+    fill: #53C1B4;
   }
 `}</style>
 </svg>

diff --git a/containers/Header.js b/containers/Header.js
@@ -14,7 +14,7 @@ const Header = ( { title, bg }) => (
         width: 100%;
       }
       .about-us-title {
-        color: var(--white);
+        color: var(--black);
         font-size: 4.2rem;
       }
       @media screen and (max-width: 1024px) {

diff --git a/pages/about.js b/pages/about.js
@@ -47,7 +47,8 @@ export default class extends Component {
           currentLang={this.state.currentLang} >
           <Header 
             title={t('aboutUs.title')}
-            bg={'../static/assets/header/headerWeb.jpg'} />
+            // bg={'../static/assets/header/headerWeb.jpg'}
+             />
           <AboutUs />
           {/* <Content>
         </Content> */}

diff --git a/sections/about/containers/Content.js b/sections/about/containers/Content.js
@@ -7,7 +7,7 @@ class Content extends React.Component{
     super(props)
     this.playlistId = 'PL-5jaKJlVw82dWX3ZNG5uVmoD9b5yf2bd'
     this.state = {
-      currentVideo : 'LhcS-IbQbTk',
+      currentVideo : 'TXNo80KL8Cg',
       videos: null
     }
   }
@@ -19,6 +19,7 @@ class Content extends React.Component{
 
 
 componentDidMount () {
+  console.log(this.state.currentVideo)
   const youtube = localStorage.getItem('youtube')
   fetch(`https://www.googleapis.com/youtube/v3/playlistItems?key=${youtube}&playlistId=${this.playlistId}&part=snippet&maxResults=12`)
   .then((response) => response.json())

diff --git a/sections/index/containers/Collaborate.js b/sections/index/containers/Collaborate.js
@@ -38,7 +38,7 @@ class Collaborate extends Component {
   render () {
     return (
       <section className='collaborate-section' id='collaborate'>
-           <div className='carousel' ref='carousel'>
+           <div className='carousel'>
             {data.map((i)=> 
               <div className='collaborate-container' key={i}>
                 <h2 className='section-title'> {t(`index.collaborate.content.${i}.title`)} </h2>
@@ -63,7 +63,7 @@ class Collaborate extends Component {
           .carousel {
             display: flex;
             flex-wrap: wrap;
-            justify-content: space-between;
+            justify-content: center;
             width: 100%;
           }
           .collaborate-container {

diff --git a/sections/index/containers/Header.js b/sections/index/containers/Header.js
@@ -5,28 +5,55 @@ import SocialBar from '../../../components/SocialBar.js'
 
 const Header = ( {modal, content, hideModal} ) => (
 	<header>
-		<div className="img-container"><img className='logoDerMenu' src='../static/assets/Logo-der-header.svg'/></div>
+    <div className="super">
+      <div className="img-container">
+        <img className='logoDerMenu' src='../static/assets/der_black.svg'/>
+      </div>
+    </div>
+
 		<div className="subtext-container"><p className='subtext'>{t('index.header.subtitle')}</p></div>
+    <div className="subtext-title"><span>CONOCENOS</span></div>
 		{/* <Submit /> */}
-		<SocialBar alignSelf={'center'} iconsSize={'30px'} width={'214px'} mobileWidth={'100%'} justifyContent={'space-around'} iconHover={'#3CA2DA'} iconMobileHover={'#999'} />
+		<SocialBar alignSelf={'center'} iconsSize={'30px'} width={'25%'} mobileWidth={'100%'} justifyContent={'space-around'} iconHover={'#3CA2DA'} iconMobileHover={'#999'} />
 		{modal && 
       <Modal content={content} hideModal={hideModal} />
     }
     <style jsx>{`
+      .super {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
       .img-container {
         background-position: center bottom;
-        width: 100%;
+        width: 30%;
         display: flex;
         justify-content: center;
       }
+      .logo-der-header {
+        fill: black;
+      }
       .subtext-container {
         width: 100%;
         display: flex;
         justify-content: center;
       }
+      .subtext-title {
+        margin: 20px;
+        display: flex;
+        justify-content: center;
+      }
+      .subtext-title span {
+        font-weight: 800;
+        text-align: center;
+        font-size: 3rem;
+        letter-spacing: 3px;
+        color: #8A509F;
+        padding: 20px;
+      }
       img.logoDerMenu{
-        width:45em;
-        padding-bottom:4em;
+        width:65em;
+        // padding-bottom:4em;
       }
       @media (max-width: 440px) {
         img.logoDerMenu{
@@ -35,7 +62,7 @@ const Header = ( {modal, content, hideModal} ) => (
         }
       }
       header {
-     		background-image: url('../static/assets/header/headerWeb.jpg');
+     		// background-image: url('../static/assets/header/headerWeb.jpg');
         background-repeat: no-repeat;
         background-size: cover;
         display: flex;
@@ -44,13 +71,13 @@ const Header = ( {modal, content, hideModal} ) => (
         background-position: center bottom;
     	}
     	header h1 {
-    		color: var(--white);
+    		color: var(--black);
     	}
     	header p {
-    		color: var(--white);
+    		color: var(--black);
         line-height: 1.5;
         letter-spacing: 0.08rem;
-        margin: 24px 0 53px;
+        margin: 24px 0 30px;
         max-width: 598px;
     	}
       @media (max-width: 1024px) {

diff --git a/static/assets/Logo-der-header.svg b/static/assets/Logo-der-header.svg