├── .cache └── 325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee ├── .eslintrc ├── .gitignore ├── .storybook ├── addons.js └── config.js ├── .whitesource ├── LICENSE ├── NOTES.md ├── README.md ├── _visuales ├── EventPoints-logo.ai ├── bg.ai ├── colores.psd ├── desktop │ ├── UI-EventPoints-lato.png │ └── UI-EventPoints-lato.psd ├── iconos-svg │ ├── icon-01.svg │ ├── icon-02.svg │ ├── icon-03.svg │ ├── icon-04.svg │ ├── icon-05.svg │ ├── icon-06.svg │ ├── icon-07.svg │ ├── icon-08.svg │ ├── icon-09.svg │ ├── icon-10.svg │ ├── icon-11.svg │ ├── icon-12.svg │ ├── icon-13.svg │ ├── icon-14.svg │ └── icon-15.svg ├── mobile │ ├── UI-EventPoints-Mobile-screen1.png │ ├── UI-EventPoints-Mobile-screen2.png │ ├── UI-EventPoints-Mobile-v1.gif │ ├── UI-EventPoints-Mobile-v3.gif │ ├── UI-EventPoints-Mobile.gif │ ├── UI-EventPoints-Mobile_01_INICIO.psd │ └── UI-EventPoints-Mobile_02_DETALLE.psd └── pin.ai ├── package-lock.json ├── package.json ├── public └── index.html └── src ├── App.css ├── App.js ├── App.scss ├── components ├── Action.js ├── Data.js ├── DateEvent.css ├── DateEvent.js ├── DateEvent.scss ├── Detail.js ├── DetailButton.css ├── DetailButton.js ├── DetailButton.scss ├── Details.js ├── Event.css ├── Event.js ├── Event.scss ├── Events.css ├── Events.js ├── Events.scss ├── Header.js ├── Map.js ├── Marker.js ├── Popup.js ├── Search.js ├── Social.js └── Time.js ├── images ├── UI-EventPoints-lato.psd └── svg │ ├── chevron-thin-right.svg │ ├── clock.svg │ └── euro.svg ├── index.js └── stories └── index.js /.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee: -------------------------------------------------------------------------------- 1 | {"value":{"success":true,"data":{"latest":{"version":"3.4.11","info":{"plain":"If you see this message in your terminal, please open a GitHub issue"}}},"time":1540631109052},"type":"Object"} -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | /.vscode/ 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-actions/register'; 2 | import '@storybook/addon-links/register'; 3 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | function loadStories() { 4 | require('../src/stories'); 5 | } 6 | 7 | configure(loadStories, module); 8 | -------------------------------------------------------------------------------- /.whitesource: -------------------------------------------------------------------------------- 1 | { 2 | "generalSettings": { 3 | "shouldScanRepo": true 4 | }, 5 | "checkRunSettings": { 6 | "vulnerableCheckRunConclusionLevel": "success" 7 | } 8 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Loreto Vaquero Fontenla 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /NOTES.md: -------------------------------------------------------------------------------- 1 | ``` 2 | event-points 3 | ├── .gitignore 4 | ├── package.json 5 | ├── node_modules 6 | │ ├── react 7 | │ └── react-dom 8 | │ └── leaflet (para el mapa) 9 | │ └── axios (llamada a las APIS's) 10 | ├── public 11 | │ └── index.html 12 | └── src 13 | ├── images 14 | │ └── branding_images 15 | ├── services 16 | │ ├── APIsCalling.js 17 | ├── components 18 | │ └── a-component 19 | │ └── a-component.js 20 | │ └── a-component.scss 21 | │ └── a-component.css 22 | │ └── b-component 23 | │ └── b-component.js 24 | │ └── b-component.scss 25 | │ └── b-component.css 26 | │ └── c-component 27 | │ └── c-component.js 28 | │ └── c-component.scss 29 | │ └── c-component.css 30 | └── index.js 31 | ``` 32 | 33 | ``` 34 | index.js 35 | │ 36 | App.js 37 | ├── Header.js 38 | ├── Seacher.js 39 | ├── Events.js 40 | │ ├── Event.js 41 | │ └── Date.js 42 | │ └── Time.js 43 | ├── Details.js 44 | │ ├──Detail.js 45 | │ ├──Action.js 46 | │ ├──Social.js 47 | ├── Map.js 48 | └── Marker.js 49 | └── Popup.js 50 | ``` 51 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![header](https://github.com/OSWeekends/agile-project-template/raw/master/other/img/OSW-project-GitHub-template-header.jpg) 2 | 3 | # Guild EventPoints 4 | - El proyecto EventPoints va a centralizar en un calendario único todos los eventos tecnológicos de interés para OWS. El 'core business' del proyecto son una serie de scrappers en Python que se encargarán de recoger los eventos de interés de diferentes orígenes de datos. Posteriormente mostraremos dichos datos en un calendario con su geolocalización y demás ;) 5 | - Repositorios: 6 | - [Eventpoints-backend](https://github.com/OSWeekends/eventpoints-backend) 7 | - [Eventpoints-frontend](https://github.com/OSWeekends/EventPoints#start-app) 8 | - Tecnología: React + Python + [Goblin DB](http://goblindb.osweekends.com/) 9 | - Facilitador: 10 | - Ricardo García-Duarte (Slack:@RicardoGDM / GitHub:[@rgarciaduarte](https://github.com/rgarciaduarte)) 11 | - Equipo activo & contribuidores: 12 | - Adel Zarrouk (Slack:@Adel / GitHub:[@eidal](https://github.com/eidal)) 13 | - Alba Hernández (Slack:@Albita / GitHub:[@Albametnet](https://github.com/Albametnet)) 14 | - Alvaro Linares 'Chamo' (Slack:@Alvaro 'Chamo' Linares Cabre / GitHub:[@alvarolinarescabre](https://github.com/alvarolinarescabre)) 15 | - Anna Branco (Slack:@Anna / GitHub:[@annabranco](https://github.com/annabranco)) 16 | - Antonio Sejas (Slack:@Sejas / GitHub:[@sejas](https://github.com/sejas)) 17 | - Carlos Fernandez (Slack:@carlosfdez / GitHub:[@carlosfdev](https://github.com/carlosfdev)) 18 | - Daniel García Jones (Slack:@DGJones / GitHub:[@danielgj](https://github.com/danielgj)) 19 | - Gema De Rus (Slack:@gemaderus / GitHub:[@gemaderus](https://github.com/gemaderus)) 20 | - Leyla Vieira (Slack:@leyla) 21 | - Loreto Vaquero (Slack:@lvaquero / GitHub:[@VaqueroFontenla](https://github.com/VaqueroFontenla)) 22 | - Lucas Bernalte (Slack:@lucasbernalte / GitHub:[@lucbpz](https://github.com/lucbpz)) 23 | - Rumi Aguirre (Slack: @Rumi Aguirre / GitHub: [Rumi-Aguirre](https://github.com/Rumi-Aguirre)) 24 | - Sebastian Cabanas (Slack:@Sebastiancbvz) 25 | - Mentores: 26 | - Jorge Baumann (Slack:@jbaumann / GitHub:[@baumannzone](https://github.com/baumannzone)) 27 | - Ricardo García-Duarte (Slack:@RicardoGDM / GitHub:[@rgarciaduarte](https://github.com/rgarciaduarte)) 28 | - Theba Gomez (Slack:@KoolTheba / GitHub:[@KoolTheba](https://github.com/KoolTheba)) 29 | - Ulises Gascon (Slack:@ulisesgascon / GitHub:[@UlisesGascon](https://github.com/UlisesGascon)) 30 | - Canal de Slack: **#pr_eventpoints_new* 31 | - **Estado: Creando scrappers y primeros componentes de front. Primeros commits y puesta en marcha.** 32 | 33 | 34 | ## Start app 35 | npm start 36 | 37 | ## Start Storybook 38 | npm run storybook 39 | 40 | ![footer](https://github.com/OSWeekends/agile-project-template/raw/master/other/img/OSW-project-GitHub-template-footer.jpg) 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /_visuales/EventPoints-logo.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/EventPoints-logo.ai -------------------------------------------------------------------------------- /_visuales/bg.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/bg.ai -------------------------------------------------------------------------------- /_visuales/colores.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/colores.psd -------------------------------------------------------------------------------- /_visuales/desktop/UI-EventPoints-lato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/desktop/UI-EventPoints-lato.png -------------------------------------------------------------------------------- /_visuales/desktop/UI-EventPoints-lato.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/desktop/UI-EventPoints-lato.psd -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-01.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 32 | 33 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-02.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-03.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 27 | 28 | 29 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-04.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-05.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-06.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-07.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-08.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-09.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-10.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-11.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-12.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-13.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 14 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-14.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /_visuales/iconos-svg/icon-15.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 10 | 12 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /_visuales/mobile/UI-EventPoints-Mobile-screen1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/mobile/UI-EventPoints-Mobile-screen1.png -------------------------------------------------------------------------------- /_visuales/mobile/UI-EventPoints-Mobile-screen2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/mobile/UI-EventPoints-Mobile-screen2.png -------------------------------------------------------------------------------- /_visuales/mobile/UI-EventPoints-Mobile-v1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/mobile/UI-EventPoints-Mobile-v1.gif -------------------------------------------------------------------------------- /_visuales/mobile/UI-EventPoints-Mobile-v3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/mobile/UI-EventPoints-Mobile-v3.gif -------------------------------------------------------------------------------- /_visuales/mobile/UI-EventPoints-Mobile.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/mobile/UI-EventPoints-Mobile.gif -------------------------------------------------------------------------------- /_visuales/mobile/UI-EventPoints-Mobile_01_INICIO.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/mobile/UI-EventPoints-Mobile_01_INICIO.psd -------------------------------------------------------------------------------- /_visuales/mobile/UI-EventPoints-Mobile_02_DETALLE.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/mobile/UI-EventPoints-Mobile_02_DETALLE.psd -------------------------------------------------------------------------------- /_visuales/pin.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/_visuales/pin.ai -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eventpoints-frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "lint-staged": "^7.3.0", 7 | "prettier": "^1.14.3", 8 | "react": "^16.5.2", 9 | "react-dom": "^16.5.2", 10 | "react-router-dom": "^4.3.1", 11 | "react-scripts": "2.0.4" 12 | }, 13 | "eslintConfig": { 14 | "extends": "react-app" 15 | }, 16 | "browserslist": [ 17 | ">0.2%", 18 | "not dead", 19 | "not ie <= 11", 20 | "not op_mini all" 21 | ], 22 | "scripts": { 23 | "build-css": "node-sass-chokidar src/ -o src/", 24 | "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", 25 | "start-js": "react-scripts start", 26 | "start": "npm-run-all -p watch-css start-js", 27 | "build-js": "react-scripts build", 28 | "build": "npm-run-all build-css build-js", 29 | "test": "react-scripts test --env=jsdom", 30 | "eject": "react-scripts eject", 31 | "storybook": "start-storybook -p 9009 -s public", 32 | "build-storybook": "build-storybook -s public" 33 | }, 34 | "devDependencies": { 35 | "@storybook/addon-actions": "^4.0.0-alpha.4", 36 | "@storybook/addon-links": "^4.0.0-alpha.4", 37 | "@storybook/addons": "^4.0.0-alpha.4", 38 | "@storybook/react": "^4.0.0-alpha.4", 39 | "husky": "^1.1.2", 40 | "node-sass-chokidar": "^1.3.4", 41 | "npm-run-all": "^4.1.3" 42 | }, 43 | "husky": { 44 | "hooks": { 45 | "pre-commit": "lint-staged" 46 | } 47 | }, 48 | "lint-staged": { 49 | "src/**/*.{js,jsx,json,css}": [ 50 | "prettier --single-quote --write", 51 | "git add" 52 | ] 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Eventpoints 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: inherit; } 3 | 4 | html, body { 5 | height: 100%; } 6 | 7 | html { 8 | box-sizing: border-box; 9 | -webkit-font-smoothing: antialiased; } 10 | 11 | body { 12 | padding: 0; 13 | margin: 0; 14 | font-family: 'Lato', sans-serif; } 15 | 16 | ul { 17 | list-style: none; 18 | margin: 0; 19 | padding: 0; } 20 | 21 | p { 22 | margin: 0; } 23 | 24 | h1, h2, h3, h4 { 25 | margin: 0; } 26 | 27 | .TextIcon { 28 | display: flex; 29 | align-items: center; } 30 | 31 | .container { 32 | font-family: Montserrat; } 33 | 34 | .flex-grid { 35 | display: flex; } 36 | 37 | .col { 38 | flex: 1; } 39 | 40 | @media (max-width: 400px) { 41 | .flex-grid { 42 | display: block; } } 43 | 44 | .events { 45 | flex-direction: row; 46 | flex-wrap: nowrap; } 47 | 48 | li { 49 | list-style-type: none; } 50 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; 3 | 4 | import Header from './components/Header'; 5 | import Search from './components/Search'; 6 | import Events from './components/Events'; 7 | import Details from './components/Details'; 8 | import Map from './components/Map'; 9 | import './App.css'; 10 | 11 | class App extends Component { 12 | render() { 13 | return ( 14 | 15 |
16 |
17 | 18 | 19 |
20 | 21 | ); 22 | } 23 | } 24 | export default App; 25 | -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: inherit; 3 | } 4 | 5 | html, body { 6 | height: 100%; 7 | } 8 | 9 | html { 10 | box-sizing: border-box; 11 | -webkit-font-smoothing: antialiased; 12 | } 13 | 14 | body { 15 | padding: 0; 16 | margin: 0; 17 | font-family: 'Lato', sans-serif; 18 | } 19 | 20 | ul { 21 | list-style: none; 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | p { 27 | margin: 0; 28 | } 29 | 30 | h1, h2, h3, h4 { 31 | margin: 0; 32 | } 33 | 34 | .TextIcon { 35 | display: flex; 36 | align-items: center; 37 | } 38 | .container { 39 | font-family: Montserrat; 40 | } 41 | 42 | .flex-grid { 43 | display: flex; 44 | } 45 | 46 | .col { 47 | flex: 1; 48 | } 49 | 50 | @media (max-width: 400px) { 51 | .flex-grid { 52 | display: block; 53 | } 54 | } 55 | 56 | .events { 57 | flex-direction: row; 58 | flex-wrap: nowrap; 59 | } 60 | li { list-style-type: none; } 61 | -------------------------------------------------------------------------------- /src/components/Action.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | 4 | class Action extends Component { 5 | render() { 6 | return ( 7 |
8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Action; 14 | -------------------------------------------------------------------------------- /src/components/Data.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: 1234455, 4 | title: "The State of Spanish and European VC with Tech.eu and Novobrief", 5 | date: "27/02/2018", 6 | description: "Tech and Novobrief will share our new full-year data on venture capitall activity across Europe, with a focus on Spanin and our outlook for 2017", 7 | address: "c/ Moreno Nieto 2, 28005, Madrid", 8 | prices: "10 €", 9 | time: "18:00h" 10 | }, 11 | { 12 | id: 2, 13 | title: "Data Sciencie", 14 | date: "27/02/2018", 15 | description: "Tech and Novobrief will share our new full-year data on venture capitall activity across Europe, with a focus on Spanin and our outlook for 2017", 16 | address: "c/ Moreno Nieto 2, 28005, Madrid", 17 | prices: "10 €", 18 | time: "18:00h" 19 | }, 20 | { 21 | id: 3, 22 | title: "The Stateee of Spanish and European VC with Tech.eu and Novobrief", 23 | date: "27/02/2018", 24 | description: "Tech and Novobrief will share our new full-year data on venture capitall activity across Europe, with a focus on Spanin and our outlook for 2017", 25 | address: "c/ Moreno Nieto 2, 28005, Madrid", 26 | prices: "10 €", 27 | time: "18:00h" 28 | }, 29 | { 30 | id: 4, 31 | title: "Amazing React", 32 | date: "27/02/2018", 33 | description: "Tech and Novobrief will share our new full-year data on venture capitall activity across Europe, with a focus on Spanin and our outlook for 2017", 34 | address: "c/ Moreno Nieto 2, 28005, Madrid", 35 | prices: "10 €", 36 | time: "18:00h" 37 | } 38 | ]; -------------------------------------------------------------------------------- /src/components/DateEvent.css: -------------------------------------------------------------------------------- 1 | .date-event { 2 | flex-direction: column; 3 | background-color: #a42551; 4 | color: white; 5 | font-weight: 300; } 6 | 7 | .width-200 { 8 | width: 200px; } 9 | -------------------------------------------------------------------------------- /src/components/DateEvent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './DateEvent.css'; 3 | 4 | class DateEvent extends Component { 5 | render() { 6 | const date = new Date(this.props.date); 7 | const weekDay = date 8 | .toLocaleString('es-es', { weekday: 'short' }) 9 | .toUpperCase() 10 | .substr(0, 3); 11 | const monthDay = date.getDate(); 12 | const month = date 13 | .toLocaleString('es-es', { month: 'short' }) 14 | .toUpperCase() 15 | .substr(0, 3); 16 | return ( 17 |
18 |
{weekDay}
19 |
{monthDay}
20 |
{month}
21 |
22 | ); 23 | } 24 | } 25 | 26 | export default DateEvent; 27 | -------------------------------------------------------------------------------- /src/components/DateEvent.scss: -------------------------------------------------------------------------------- 1 | .date-event { 2 | flex-direction: column; 3 | background-color: #a42551; 4 | color: white; 5 | font-weight: 300; 6 | } 7 | .width-200 { 8 | width: 200px; 9 | } -------------------------------------------------------------------------------- /src/components/Detail.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | class Detail extends Component { 4 | render() { 5 | return ( 6 |
7 |
8 | ); 9 | } 10 | } 11 | 12 | export default Detail; 13 | -------------------------------------------------------------------------------- /src/components/DetailButton.css: -------------------------------------------------------------------------------- 1 | .ButtonDetail { 2 | background-color: #818181; 3 | color: #fff; 4 | text-transform: uppercase; 5 | border: 0; 6 | width: 50%; 7 | outline: none; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | font-size: 14px; } 12 | .ButtonDetail .icon { 13 | margin-left: 0.6rem; 14 | width: 1.2rem; } 15 | 16 | .ButtonDetail.isActive { 17 | background-color: #D20047; } 18 | -------------------------------------------------------------------------------- /src/components/DetailButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './DetailButton.scss'; 3 | 4 | const DetailButton = ({onClick, className = ''}) => { 5 | return ( 6 | 11 | ) 12 | } 13 | 14 | export default DetailButton; 15 | -------------------------------------------------------------------------------- /src/components/DetailButton.scss: -------------------------------------------------------------------------------- 1 | .ButtonDetail { 2 | background-color: #818181; 3 | color: #fff; 4 | text-transform: uppercase; 5 | border: 0; 6 | width: 50%; 7 | outline: none; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | font-size: 14px; 12 | 13 | .icon { 14 | margin-left: 0.6rem; 15 | width: 1.2rem; 16 | } 17 | } 18 | 19 | .ButtonDetail.isActive { 20 | background-color: #D20047; 21 | } -------------------------------------------------------------------------------- /src/components/Details.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import Detail from './Detail'; 3 | import Action from './Action'; 4 | import Social from './Social'; 5 | 6 | class Details extends Component { 7 | render() { 8 | return ( 9 |
10 | 11 | 12 | 13 |
14 | ); 15 | } 16 | } 17 | 18 | export default Details; 19 | -------------------------------------------------------------------------------- /src/components/Event.css: -------------------------------------------------------------------------------- 1 | .Event { 2 | background-color: #212121; 3 | padding-top: 1rem; } 4 | .Event .icon { 5 | display: block; 6 | fill: #C7C7C7; 7 | margin-right: 0.3rem; } 8 | 9 | .EventTitle { 10 | color: #fff; 11 | padding: 0 1rem; 12 | margin-bottom: 0.5rem; 13 | text-transform: uppercase; 14 | font-size: 18px; } 15 | 16 | .EventDescription { 17 | color: #6B6B6B; 18 | padding: 0 1rem; 19 | font-size: 0.75rem; 20 | margin-bottom: 0.75rem; } 21 | 22 | .EventDetails { 23 | display: flex; 24 | justify-content: space-between; } 25 | 26 | .EventInfo { 27 | color: #C7C7C7; 28 | display: flex; 29 | align-items: center; } 30 | 31 | .EventInfo { 32 | display: flex; 33 | background-color: #5C5C5C; 34 | padding: 0.6rem 1rem; 35 | width: 50%; } 36 | 37 | .EventInfoItem { 38 | display: flex; 39 | align-items: center; } 40 | .EventInfoItem:first-child { 41 | margin-right: 0.5rem; } 42 | .EventInfoItem:first-child::after { 43 | content: ''; 44 | display: inline-block; 45 | width: 1px; 46 | height: 10px; 47 | margin-left: 0.5rem; 48 | background-color: #C7C7C7; } 49 | .EventInfoItem .icon { 50 | width: 0.8rem; } 51 | -------------------------------------------------------------------------------- /src/components/Event.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import DateEvent from './DateEvent'; 3 | import Time from './Time'; 4 | import DetailButton from './DetailButton'; 5 | import './Event.scss'; 6 | import '../images/svg/clock.svg'; 7 | import '../images/svg/euro.svg'; 8 | 9 | const Event = ({ event, onSelect, selected, color }) => { 10 | const css = selected ? 'Event is-selected' : 'Event'; 11 | 12 | return ( 13 |
  • 14 |
    Date
    15 |

    {event.title}

    16 |

    {event.abstract}

    17 |
    18 | 49 | { 51 | onSelect(event.id); 52 | }} 53 | /> 54 |
    55 |
    • 56 | ); 57 | }; 58 | 59 | export default Event; 60 | -------------------------------------------------------------------------------- /src/components/Event.scss: -------------------------------------------------------------------------------- 1 | .Event { 2 | background-color: #212121; 3 | padding-top: 1rem; 4 | 5 | .icon { 6 | display: block; 7 | fill: #C7C7C7; 8 | margin-right: 0.3rem; 9 | } 10 | } 11 | 12 | .EventTitle { 13 | color: #fff; 14 | padding: 0 1rem; 15 | margin-bottom: 0.5rem; 16 | text-transform: uppercase; 17 | font-size: 18px; 18 | } 19 | 20 | .EventDescription { 21 | color: #6B6B6B; 22 | padding: 0 1rem; 23 | font-size: 0.75rem; 24 | margin-bottom: 0.75rem; 25 | } 26 | 27 | .EventDetails { 28 | display: flex; 29 | justify-content: space-between; 30 | } 31 | 32 | .EventInfo { 33 | color: #C7C7C7; 34 | display: flex; 35 | align-items: center; 36 | } 37 | 38 | .EventInfo { 39 | display: flex; 40 | background-color: #5C5C5C; 41 | padding: 0.6rem 1rem; 42 | width: 50%; 43 | } 44 | 45 | .EventInfoItem { 46 | display: flex; 47 | align-items: center; 48 | 49 | &:first-child { 50 | margin-right: 0.5rem; 51 | 52 | &::after { 53 | content: ''; 54 | display: inline-block; 55 | width: 1px; 56 | height: 10px; 57 | margin-left: 0.5rem; 58 | background-color: #C7C7C7; 59 | } 60 | } 61 | 62 | .icon { 63 | width: 0.8rem; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/components/Events.css: -------------------------------------------------------------------------------- 1 | .Events { 2 | max-width: 380px; 3 | min-height: 100vh; 4 | background-color: #212121; } 5 | -------------------------------------------------------------------------------- /src/components/Events.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Event from './Event'; 3 | import './Events.scss'; 4 | 5 | class Events extends Component { 6 | constructor() { 7 | super(); 8 | 9 | this.state = { load: 'loading', events: [] }; 10 | this.requestEvents = this.requestEvents.bind(this); 11 | 12 | this.requestEvents(); 13 | } 14 | 15 | async requestEvents() { 16 | const headers = new Headers(); 17 | headers.set('Access-Control-Allow-Credentials', 'true'); 18 | headers.set('Access-Control-Allow-Origin', '*'); 19 | headers.set('Access-Control-Allow-Headers', '*'); 20 | headers.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE'); 21 | 22 | const myInit = { headers: headers }; 23 | try { 24 | const eventsResponse = await fetch( 25 | 'http://localhost:3000/api/v1/events', 26 | myInit 27 | ); 28 | const events = await eventsResponse.json(); 29 | this.setState({ events: events }); 30 | } catch (e) { 31 | console.log(`Error while fetching: ${e}`); 32 | } 33 | } 34 | 35 | state = { 36 | current: null 37 | }; 38 | 39 | onSelect = eventID => { 40 | this.setState({ 41 | current: eventID 42 | }); 43 | }; 44 | 45 | render() { 46 | const data = this.state.events || []; 47 | const { current } = this.state; 48 | const colores = ['red', 'green', 'yellow', '#fabada', 'purple']; 49 | 50 | return ( 51 | 67 | ); 68 | } 69 | } 70 | 71 | export default Events; 72 | -------------------------------------------------------------------------------- /src/components/Events.scss: -------------------------------------------------------------------------------- 1 | .Events { 2 | max-width: 380px; 3 | min-height: 100vh; 4 | background-color: #212121; 5 | } -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Header extends Component { 4 | render() { 5 | return
    HEADER
    ; 6 | } 7 | } 8 | 9 | export default Header; 10 | -------------------------------------------------------------------------------- /src/components/Map.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import Marker from './Marker'; 3 | 4 | 5 | class Map extends Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default Map; 16 | -------------------------------------------------------------------------------- /src/components/Marker.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import Popup from './Popup'; 3 | 4 | 5 | class Marker extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 | ); 11 | } 12 | } 13 | 14 | export default Marker; 15 | -------------------------------------------------------------------------------- /src/components/Popup.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | 4 | class Popup extends Component { 5 | render() { 6 | return ( 7 |
    8 |
    9 | ); 10 | } 11 | } 12 | 13 | export default Popup; 14 | -------------------------------------------------------------------------------- /src/components/Search.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | 4 | class Search extends Component { 5 | render() { 6 | return ( 7 |
    8 |
    9 | ); 10 | } 11 | } 12 | 13 | export default Search; 14 | -------------------------------------------------------------------------------- /src/components/Social.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | 4 | class Social extends Component { 5 | render() { 6 | return ( 7 |
    8 |
    9 | ); 10 | } 11 | } 12 | 13 | export default Social; 14 | -------------------------------------------------------------------------------- /src/components/Time.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | 4 | class Time extends Component { 5 | render() { 6 | return ( 7 |
    8 |
    9 | ); 10 | } 11 | } 12 | 13 | export default Time; 14 | -------------------------------------------------------------------------------- /src/images/UI-EventPoints-lato.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OSWeekends/EventPoints/2a075b2841fc2373e24ed2ea65ffde43a262c54c/src/images/UI-EventPoints-lato.psd -------------------------------------------------------------------------------- /src/images/svg/chevron-thin-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/svg/clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/svg/euro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /src/stories/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { storiesOf } from '@storybook/react'; 4 | import { action } from '@storybook/addon-actions'; 5 | import { linkTo } from '@storybook/addon-links'; 6 | 7 | import { Button, Welcome } from '@storybook/react/demo'; 8 | import Event from '../components/Event'; 9 | 10 | const eventMock = { 11 | abstract: 12 | 'El email marketing es uno de los canales más potentes de adquisición de clientes. Por ello, TechHub lanza este Expert Talk con Clara Ávila, ...', 13 | abstract_details: 14 | 'El email marketing es uno de los canales más potentes de adquisición de clientes. Por ello, TechHub lanza este Expert Talk con Clara Ávila, responsable de contenido online en Save The Children, con experiencia en The Cocktail y autora del blog claraavilac. En él se profundizará en las distintas estrategias de marketing de contenidos y cómo obtener los mejores resultados.\n\nAgenda:- Email marketing - presente y futuro- Inbound marketing y categorías de contenido- Planificación de contenidos y automatización- Cómo preparar una campaña: contenidos del mensaje, prototipado- Cómo conseguir nuevos suscriptores- Analítica y KPIs- Best Practices', 15 | date: '2017-01-24T19:00:00Z', 16 | location: { 17 | lat: 40.41249699999999, 18 | lng: -3.7182264000000487, 19 | name: 'Campus Madrid', 20 | notes: 'Auditorium' 21 | }, 22 | price: { 23 | details: 'estimado', 24 | isFree: true, 25 | isTrusted: false 26 | }, 27 | source: { 28 | event_url: 29 | 'https://www.campus.co/madrid/en/events/ag1zfmd3ZWItY2FtcHVzcj8LEgZDYW1wdXMiBFJvb3QMCxIGQ2FtcHVzIgZtYWRyaWQMCxIFRXZlbnQiEmExOWowMDAwMDAxVHFhZUFBQww', 30 | logo: 31 | 'http://tetuanvalley.com/wp-content/uploads/2016/03/opengraph-768x403.jpg', 32 | name: 'Campus Madrid', 33 | url: 'http://campus.co/madrid' 34 | }, 35 | target_url: 36 | 'https://www.techhub.com/events/improve-your-email-marketing-strategy-with-clara', 37 | title: 'Mejora tu estrategia de Email Marketing con Clara Ávila', 38 | id: 'b63ba480-f937-4ac2-8f16-46ce738a5231' 39 | }; 40 | 41 | storiesOf('Welcome', module).add('to Storybook', () => ( 42 | 43 | )); 44 | 45 | storiesOf('Button', module) 46 | .add('with text', () => ( 47 | 48 | )) 49 | .add('with some emoji', () => ( 50 | 55 | )); 56 | 57 | storiesOf('Event', module) 58 | .add('with no event', () => ) 59 | .add('with event', () => ); 60 | --------------------------------------------------------------------------------