codeandomexico / frenalacurvamx

Repositorio con landing page para mexico.frenalacurva.net

Frena La Curva México - Landing page

Este repositorio contiene la landing page para México trabajando con <frenalacurva.net>.

Puedes ver el demo aquí.

Requerimientos

Para utilizar esta plantilla, tu computadora necesita:

• Node.js. Para armar los paquetes. (https://nodejs.org/en/download/)
• Prueba usando node -v en la terminal
• npm. Usado para gestionar las dependencias.
• Prueba usando npm -v en la terminal
• Gulp. Es un task runner. npm install -g gulp
• Prueba usando gulp -v en la terminal

Instalación:

• Instala los paquetes de node: npm install
• Corre gulp dev
• Tu sitio está visible en el URL: http://localhost:3000
• Nota: Modifica sólo los archivos en la carpeta src/

Desarrollo con Docker

Para hacer y probar cambios locales en el contenido, estilos, imagenes, etc. puedes usar un contenedor docker.

• docker build . -t frenalacurva:dev
• docker run --rm -it --init -p 3000:3000 -v $PWD/src/:/app/src frenalacurva:dev
• Tu sitio está visible en el URL: http://localhost:3000

Usar docker-compose (1.20+)

• docker-compose up
• Tu sitio está visible en el URL: http://localhost:3000

Si necesitas cambiar algun archivo fuera de ./src solo vuelve a ejectuar ambos comandos.

Deployment en gh-pages:

• Una vez hayas concluido el desarrollo, deberás cambiar la carpeta dist/ que se generó por docs/:
  mv dist/ docs/
• Haz un push de tus cambios al repositori
• En la sección de settings de tu repositorio, ve a la opción de GitHub Pages y selección como Source la carpeta docs/
• ¡Listo! Tu landing quedará servida en <usario-u-organizacio>.github.io/<repositorio>

Atribuciones

• Link al repo/plantilla original: https://github.com/cssninjaStudio/fresh
• Si tienes preguntas, puedes escribir a [email protected]
• Gracias a la comunidad es que este repositorio se mantiene vivo

frenalacurvamx's Issues

Sección de header

Crear bloque para header acorde al diseño especificado en el issue #11.

Las imágenes y textos pueden ser provistas por Rox, porfa escribirle por nuestro canal de Telegram.

Centrar header de la sección de foro

El header de la sección del foro parece estar cargado ligeramente a la izquierda.

Añadir bloque de información verificada

Especificaciones:

• Cambiar la sección de "Cuidarnos | Aprender | Compartir" por un bloque de "Información verificada" como se muestra en el mockup: #1
• Para las tres imágenes que se requieren, especificar en este issue las dimensiones. El equipo de mexico.frenalacurva.net puede proporcionar las imágenes, diseños y links.
• Ya hay una clase de CSS llamada section-feature-grey que puede ayudar para ir alternando los fondos.

El banner del header en la sección del Foro no se adapta bien en móvil

El banner del header en la sección del Foro no se adapta bien en móvil.

Cambiar color de subcategorías para tarjetas en el Foro

Cambiar los colores de las subcategorías de las tarjetas en la sección del Foro. Los colores deben corresponder al de la categoría.

Tamaño fijo en las tarjetas

Definir un tamaño fijo para las tarjetas, con un número de caracteres definidos, en lugar de que se alarguen cuando haya más información

Cambiar la distribución de las tarjetas en la sección de Foro

Parece que las tarjetas no se adaptan bien en móvil y se ven muy angostas. (¿flex?)

La barra de navegación no se adapta bien en la versión móvil

[COMIENZA AQUÍ] Descripción de updates

Echa un ojo a los issues del tablero y solicita que se te asigne el que quieras trabajar.

Update general de la landing page (24/04/2020)

La imagen a contnuación ilustra un poco los bloques que esperan ser añadidos (3). Cada bloque será separado en un issue distinto (se hará referencia a ellos) y las contribuciones podrán ser enviadas a través de Pull Requests (siguiendo el git flow tradicional).

Los issues son:

• Añadir bloque de información verificada: #2
• Añadir bloque de iniciativas: #3
• Añadir bloque de Telegram: #4

Cambiar link del botón "Comparte contenido"

El botón debería dirigir a: https://frenalacurvamx.typeform.com/to/gYdVBR

Texto con salto de línea en sección de Foro

Parece ser que hay un salto de línea innecesario en la sección del texto en el header del Foro. Dice:

Somos *salto de línea*
432 personas que hemos subido 216 publicaciones

Sección de footer

Crear sección de footer acorde al diseño especificado en el issue #11.

Las imágenes y textos pueden ser provistas por Rox, porfa escribirle por nuestro canal de Telegram.

Sección "¿Qué puedo encontrar en el mapa?"

Crear sección "¿Qué puedo encontrar en el mapa?" acorde al diseño especificado en el issue #11.

Las imágenes y textos pueden ser provistas por Rox, porfa escribirle por nuestro canal de Telegram.

Añadir bloque de iniciativas

Especificaciones:

• Añadir una sección de "Conoce las iniciativas" como se muestra en el mockup: #1
• Para las imágenes que se requieren, especificar en este issue las dimensiones. El equipo de mexico.frenalacurva.net puede proporcionar las imágenes y diseños.
• Para las iniciativas a desplegar, el equipo de mexico.frenalacurva.net puede proporcionar las que se vayan a poner, así como los links a las mismas y al documento que se menciona en la sección.
• Este bloque tiene una propuesta de diseño en el mockup ya mencionado, pero en realidad es un bloque abierto a sugerencias.
• Ya hay una clase de CSS llamada section-feature-grey que puede ayudar para ir alternando los fondos de las secciones.

Centrar imágenes en las tarjetas en lugar de modificarlas para encajar

Cuando una tarjeta tenga una imagen, que se despliegue el centro en lugar de modificar el tamaño de la imagen para que quepa porque se distorsionan.

Remover borde azul del botón en las iniciativas de la sección del Foro

Updates para Frena La Curva Mapa

Descripción

La contribución general consiste en añadir una sección nueva con el diseño que se despliega al final de esta descripción en un nuevo URL /mapa.

La estructura general del sitio y plataformas quedaría como sigue:

Issues

Los updates serán descompuestos en issues para trabajar los distintos bloques:

• HTML Base + Navbar
• Sección de header
• Sección "¿Qué puedo encontrar en el mapa?"
• Sección "¿Quieres ser parte del equipo de moderación?"
• Sección de footer

Diseño

Sección "¿Quieres ser parte del equipo de moderación?"

Crear sección "¿Quieres ser parte del equipo de moderación?" acorde al diseño especificado en el issue #11.

Las imágenes y textos pueden ser provistas por Rox, porfa escribirle por nuestro canal de Telegram.

Generar un URL único por entrada

Añadir contenedor a filtros de categorías

El texto de los filtros y los selectores se ven muy pegados a los bordes.

Añadir bloque de Telegram

Especificaciones:

• Cambiar la sección de "Infórmate" (con el Twitter) como se muestra en el mockup: #1
• Para las imágenes que se requieren, especificar en este issue las dimensiones. El equipo de mexico.frenalacurva.net puede proporcionar las imágenes y diseños.
• El URL al chat de Telegram es el siguiente: https://t.me/frenalacurvamx
• Este bloque tiene una propuesta de diseño en el mockup ya mencionado, pero en realidad es un bloque abierto a sugerencias. Puede en realidad dejarse de un lado el link al Telegram y del otro a Twitter o hacer una propuesta propia.
• Ya hay una clase de CSS llamada section-feature-grey que puede ayudar para ir alternando los fondos de las secciones.

Actualizar src del mapa en la sección de "Conoce los medios oficiales..."

Cambiar el source del mapa actual (EL ECONOMISTA) de la sección "Conoce los medios oficiales en donde podrás encontrar información verificada" por: https://covid19enmexico.com/

• La imagen en SVG del mapa puede quedarse, sólo se debe actualizar el label del mapa y el src del URL.

Añadir 1 tarjeta por renglón en Foro

Añadir 1 tarjeta por renglón de tarjetas de la sección de Foro, para que haya 4 en lugar de 3.

HTML Base + Navbar

Crear URL base /mapa y añadir Navbar acorde al diseño especificado en el issue #11.