Pantalla validacion by brankitoCruz17 · Pull Request #4 · Ezequiiel98/blockchain

brankitoCruz17 · 2020-04-07T06:03:21Z

Summary
Maquete pantalla validación.
Hice pantalla de validación, coloque imágenes, hice tableros y botones.
Tuve problemas para empezar, para usar flexbox y hacer los botones.

Screenshots

InVision
https://projects.invisionapp.com/d/#/console/19366632/404500035/preview

Trello
https://trello.com/c/ZYtnjSlb/16-maquetar-pantalla-validacion

… deja e la imagen de x

…pacio entre los cuadros

…ntre los cuadrados de los 24 - cambiar la tipografia del 24 - cambiar span por botones - bajar el cuadrado de resolucion un poco - centrar resolucion y botones

…por botones

…ar las imagenes dentro de los botones

…cisiones

MMarussi

Buen trabajo! Estamos cerca de tenerlo 👌

Hay 2 pares de componentes que tienen un compartamiento/estructura parecida (redButon/greenButton y ImagenSuperior/Inferior) en ambos casos se da que el jsx es muy parecido y el scss utilizado es casi el mismo excepto algun que otro atributo. Así no estaría mal fijarte que modificaciones tenés que hacer en algun par para eliminar sus duplicados y asi tener menos código que mantener!

MMarussi · 2020-04-07T16:39:02Z

src/components/App/index.js

 function App() {
-  return <h1> Proyecto blockchain </h1>;
+  return (
+    <div>


Me parece que este div sobra 👀

MMarussi · 2020-04-07T18:44:00Z

src/components/PantallaValidacion/Board/index.js

+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>
+
+        <div className={styles.cell} >
+          <span className={styles.number}>24</span>
+        </div>


Acá tenés repetido varias veces el mismo componente, acordate que en vez de tenerlo copiado y pegado varias veces podés hacerlo en menos líneas con una función.

function Board() { const renderCells = () => [...Array(CELL_NUMBERS)].map(() => ( <div className={styles.cell} > <span className={styles.number}>24</span> </div>) ); return ( <div className={styles.containerBoard}> <div className={styles.board}> {renderCells()} </div> </div> ) }

renderCells() va a crearnos un array vacío y por cada uno de esos elementos vamos a renderear una celda
CELLS_NUMBER es una constante con la cantidad de veces que se tiene que renderear una celda (creo que sería 16)

MMarussi · 2020-04-07T18:45:12Z

src/components/PantallaValidacion/Board/index.module.scss

+  border-radius: 4px;
+  background-color: #FFFFFF;
+  margin-right: 21px; 
+


Esta línea vacía se puede borrar

MMarussi · 2020-04-07T18:58:19Z

src/components/PantallaValidacion/Board/index.module.scss

+.cell {
+  min-width: 25%;
+  min-height: 25%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cell:nth-child(odd) {
+  background-color: #FEC34D;
+}


Tené en cuenta que podés usar la sintaxis de SASS para anidar los pseudo selectores que apliquen a .cell

.cell { min-width: 25%; min-height: 25%; text-align: center; display: flex; justify-content: center; align-items: center; &:nth-child(odd) { background-color: #FEC34D; } &:nth-child(...) { background-color: ...; } }

MMarussi · 2020-04-07T19:02:12Z

src/components/PantallaValidacion/Board/index.module.scss

+.cell:nth-child(9) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(7) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(10) {
+  background-color: #22465C;
+}
+
+
+
+.cell:nth-child(16) {
+  background-color: #33BFC6;
+}
+
+.cell:nth-child(1) {
+  background-color: #AED750;
+}
+
+.cell:nth-child(2) {
+  background-color: #33BFC6;
+}
+
+.cell:nth-child(3) {
+  background-color: #AED750;
+}
+
+.cell:nth-child(4) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(5) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(6) {
+  background-color: #AED750;
+}
+
+.cell:nth-child(7) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(8) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(9) {
+  background-color: #FEC34D;
+}
+
+.cell:nth-child(10) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(11) {
+  background-color: #F2754C;
+}
+
+.cell:nth-child(12) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(13) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(14) {
+  background-color: #FEC34D;
+}
+
+.cell:nth-child(15) {
+  background-color: #22465C;
+}
+
+.cell:nth-child(16) {
+  background-color: #FEC34D;
+}
+
+.cell{
+  border: 4px solid white;
+}


.cell:nth-child(odd) { background-color: #FEC34D; }

El pseudo-selector anterior aplica el color #FEC34D al background. Es necesario este estilo si va a ser sobreescrito por todos estos?

MMarussi · 2020-04-07T19:43:52Z

src/components/PantallaValidacion/Score/index.js

+        <span className={styles.iconContainer}>
+          <span className={styles.iconScore}>+</span>
+        </span>


Podrías combinar las clases de scss .iconContainer y .iconScore en una sola, ya que no tiene mucho sentido tener 1 <span> que sólo tiene otro <span> adentro

MMarussi · 2020-04-07T19:44:42Z

src/components/PantallaValidacion/Score/index.module.scss

+.container{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 36px;  
+
+}


Suggested change

.container{

display: flex;

justify-content: space-between;

margin-bottom: 36px;

}

.container {

display: flex;

justify-content: space-between;

margin-bottom: 36px;

}

MMarussi · 2020-04-07T19:45:08Z

src/components/PantallaValidacion/Text/index.js

+
+function Text() {
+  return (
+


Esta línea se puede borrar

MMarussi · 2020-04-07T19:47:01Z

src/components/PantallaValidacion/RedButton/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import Styles from './index.module.scss';


Intenta que los imports que se usen en el código no empiecen con mayúscula así no se los confunde con otro componente.

Suggested change

import Styles from './index.module.scss';

import styles from './index.module.scss';

MMarussi · 2020-04-07T19:48:06Z

src/components/PantallaValidacion/GreenButton/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import Styles from './index.module.scss';


Mismo que Styles de redButton

MMarussi

Sólo faltan unos detalles, ya casi estamoooos!!

MMarussi · 2020-04-13T12:15:08Z

src/components/PantallaValidacion/Buttons/index.js

+        <Fragment>
+          <button type="button" className={styles.buttonRed} />
+        </Fragment>
+      </div>
+      <div className={styles.containerGreen}>
+        <Fragment>
+          <button type="button" className={styles.buttonGreen} />
+        </Fragment>


Estos 2 pares de fragments no son necesarios, así que podés borrarlos

MMarussi · 2020-04-13T12:15:51Z

src/components/PantallaValidacion/Buttons/index.module.scss

+  border-radius: 4px;
+  transition: background-color .1s ease, transform .2s ease;
+}
+.containerGreen {


Acordate de separar clase y clase con una línea vacía

MMarussi · 2020-04-13T12:16:42Z

src/components/PantallaValidacion/ImageLineas/index.module.scss

@@ -1,6 +1,6 @@
-.lineasGrises {
+.lineasGrises{


El espacio separando nombre de clase y { estaba bien 😇

MMarussi · 2020-04-13T12:18:40Z

src/components/PantallaValidacion/index.module.scss

 }

-.button{
+.buttons{


Suggested change

.buttons{

.buttons {

MMarussi · 2020-04-13T12:20:08Z

src/components/PantallaValidacion/index.module.scss

+.inferior {
+    transform: scaleY(-1);
+}


Ojo con la identación de este file (pasalo todo a 2 espacios):

Suggested change

.inferior {

transform: scaleY(-1);

}

.inferior {

transform: scaleY(-1);

}

MMarussi · 2020-04-13T12:26:12Z

src/components/screens/Validacion/components/ImageLineas/index.js

+
+function ImageLineas() {
+  return (
+    <div>


Me parece que no necesitas este div

MMarussi · 2020-04-13T12:27:36Z

src/components/screens/Validacion/components/index.module.scss

+.pantallaValidacion{
+    width: 1024px;
+    margin: 0 auto;
+}


Cuidado con la identación en todo el archivo (se están usando 4 espacios y en el proyecto usan 2):

Suggested change

.pantallaValidacion{

width: 1024px;

margin: 0 auto;

}

.pantallaValidacion {

width: 1024px;

margin: 0 auto;

}

MMarussi · 2020-04-13T12:28:13Z

src/index.css

+html {
+  box-sizing: border-box;
+}
+*,*:before,*:after {


Agrega una línea vacía para separar estos selectores

MMarussi · 2020-04-13T12:31:47Z

src/components/screens/Validacion/components/Text/index.module.scss

+  .texto {
+    width: 384px;
+    color: #525256;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 24px;
+    font-weight: bold;
+    letter-spacing: 0;
+  }
+
+  .revision {
+    width: 92px;
+    color: #7758A2;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 24px;
+    font-weight: bold;
+    letter-spacing: 0;
+    margin-bottom: 36px;
+    margin-top: 14px;
+  }


Cuidado con la identación:

Suggested change

.texto {

width: 384px;

color: #525256;

font-family: 'Montserrat', sans-serif;

font-size: 24px;

font-weight: bold;

letter-spacing: 0;

}

.revision {

width: 92px;

color: #7758A2;

font-family: 'Montserrat', sans-serif;

font-size: 24px;

font-weight: bold;

letter-spacing: 0;

margin-bottom: 36px;

margin-top: 14px;

}

.texto {

width: 384px;

color: #525256;

font-family: 'Montserrat', sans-serif;

font-size: 24px;

font-weight: bold;

letter-spacing: 0;

}

.revision {

width: 92px;

color: #7758A2;

font-family: 'Montserrat', sans-serif;

font-size: 24px;

font-weight: bold;

letter-spacing: 0;

margin-bottom: 36px;

margin-top: 14px;

}

MMarussi · 2020-04-13T12:45:33Z

src/components/BoardResolution/index.module.scss

+.cell:nth-child(1n) {
+  border-bottom: 4px solid white;
+  border-left: 4px solid white;
+}


Fijate que nth-child(1n) en realidad terminaría aplicando a todos los hijos, asi que podés redefinir esto usando el selector hijo:
Suponiendo que cell es el padre de un div que usa la clase .block

.cell { > .block { } }

MMarussi

Bien ahí!!!

brankitoCruz17 and others added 30 commits March 13, 2020 17:07

coloque la imagene superior

973655e

centre la imagen superior

6ba050e

ubique el h1 y le agregue sus styles

b6b03ff

puse la revision y su styles

ff53149

rectangulo de puntaje

9e4e79b

texto listo falta las posicion

548e178

eze fijate jaja

5abb27c

resolucion lista falta ubicarlo

dce86d8

solo la imagen pude poner ahora voy por lo demas

f45a312

imagen lista

58c5d14

agrego comentarios al codigo señalando errores

26ae808

corrijo estilo de pantalla resolucion

7053ade

pude solucionar algunos problemas

d11a30f

pushssss jajaj

31ecd67

puede colocar boton rojo faltaria posicionar la parte bordo que no se…

a35de98

… deja e la imagen de x

boton rojo no toma los colores

e718b6f

los botones estan terminados, arregle los colores y centre los iconos

18f1850

el elemento board: casi terminado, faltaria centrar el numero 24

b21302d

Board: faltaria modificar el 4 por el que esta en el invision y el es…

01dd426

…pacio entre los cuadros

arreglo ruta de img

210b738

faltaria ordenar bien todos los elementos con flexbox

8dca386

faltaria detallar bien las posiciones

21510e9

falta posicionar la resolucion y los botones

e2611aa

detalles: puntaje subir un poco hasta el punto gris - la separacion e…

fb5791f

…ntre los cuadrados de los 24 - cambiar la tipografia del 24 - cambiar span por botones - bajar el cuadrado de resolucion un poco - centrar resolucion y botones

corregimos todas las detalles anteriores, faltaria solo cambiar span …

ac3dade

…por botones

botones y tipografia cambiar

410cb8d

faltaria arreglar los botones

cb3f826

corregi el error de la imagen superior

88838ff

coloque los botones en sus posiciones y tienen hover - faltaria coloc…

8b742a8

…ar las imagenes dentro de los botones

los botones estan listos y funcionados - las imagenes estan en sus po…

5f63bd6

…cisiones

brankitoCruz17 requested review from Ezequiiel98, MMarussi, briangerez and vivianachoque April 7, 2020 06:03

brankitoCruz17 assigned briangerez, MMarussi, Ezequiiel98 and vivianachoque Apr 7, 2020

MMarussi requested changes Apr 7, 2020

View reviewed changes

brankitoCruz17 added 4 commits April 8, 2020 01:02

corregi y acepte las sugerencias de martin

d2edf95

agregue componete button

fd5aac1

corregi los botones y las imagenes de las lineas grises

ce18abb

acomode los componetes

ad02bb7

MMarussi reviewed Apr 13, 2020

View reviewed changes

corregui los errores que me marcaron

45b11a5

MMarussi approved these changes Apr 14, 2020

View reviewed changes

		@@ -0,0 +1,13 @@
		import React from 'react';

		import Styles from './index.module.scss';

		@@ -1,6 +1,6 @@
		.lineasGrises {
		.lineasGrises{

Conversation

brankitoCruz17 commented Apr 7, 2020

Uh oh!

MMarussi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MMarussi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MMarussi left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants