#14 Adiciona fancybox à página de richpictures

Co-authored-by: Isaque Alves <[email protected]>
DesenhoSoftware-2018-2 · Nov 19, 2018 · dacf00c · dacf00c
1 parent 89b657a
commit dacf00c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 33 deletions.
diff --git a/src/assets/files/dinamica01/pre-rastreabilidade/richpictures.md b/src/assets/files/dinamica01/pre-rastreabilidade/richpictures.md
@@ -30,36 +30,4 @@ Visões conflitantes entre stakeholders.
 Versões
 
 
-##### Aqui encontram-se todas as rich pictures produzidas durante esta dinâmica da disciplina.
-
-
-
-###### Cadastro do Usuário v1.0
-![richpicture_cadastro](richpictures/richpictureCadastroIsaque.jpg)  
-Autor: Isaque Alves
-
-###### Fluxo de Monitoria v1.0
-![richpicture_cadastro](richpictures/richpictureMonitoriaIsaque.jpg)  
-Autor: Isaque Alves
-
-###### Conceitual v1.0
-![richpicture conceitual](richpictures/richpictureConceitualAmanda.jpg)
-Autor: Amanda Muniz
-
-###### Conceitual 2 v1.0
-![richpicture conceitual_2](richpictures/richpictureConceitualVitor.jpg)  
-Autor: Vítor Cardoso
-
-###### Conceitual 3 v1.0
-![richpicture conceitual_3](richpictures/richpictureConceitualJoao.jpg)  
-Autor: João Vitor
-
-###### Conceitual 3 v2.0
-![richpicture conceitual_3V2](richpictures/richpictureConceitualV2Joao.jpg)  
-Autor: Joao Vitor
-
-###### Conceitual 4 v1.0
-![richpicture conceitual_4](richpictures/richpictureConceitualBruno.jpg)
-
-Autor: Bruno Dantas
-
+##### Aqui encontram-se todas as rich pictures produzidas durante esta dinâmica da disciplina.
diff --git a/src/components/contents/dinamica01/pre-rastreabilidade/richpictures.js b/src/components/contents/dinamica01/pre-rastreabilidade/richpictures.js
@@ -1,14 +1,60 @@
 import React, { Component } from "react";
 import Markdown from '../../../structures/dynamicsComponents/markdown';
 import PreRastreabilidadeNav from "./pre-rastreabilidadeNav";
+import ReactFancyBox from 'react-fancybox'
+import 'react-fancybox/lib/fancybox.css'
+const cadastroIsaque = require("../../../../assets/imgs/richpictures/richpictureCadastroIsaque.jpg");
+const conceitualAmanda = require("../../../../assets/imgs/richpictures/richpictureConceitualAmanda.jpg");
+const conceitualBruno = require("../../../../assets/imgs/richpictures/richpictureConceitualBruno.jpg");
+const conceitualJoao = require("../../../../assets/imgs/richpictures/richpictureConceitualJoao.jpg");
+const conceitualAtualizadoJoao = require("../../../../assets/imgs/richpictures/richpictureConceitualV2Joao.jpg");
+const conceitualVitor = require("../../../../assets/imgs/richpictures/richpictureConceitualVitor.jpg");
+const monitoriaIsaque = require("../../../../assets/imgs/richpictures/richpictureMonitoriaIsaque.jpg");
 
 class Richpictures extends Component {
   render() {
     return (
       <div>
         <PreRastreabilidadeNav />
         <div className="container">
+        <div className="designPhotos">
           <Markdown file="dinamica01/pre-rastreabilidade/richpictures" />
+          <div>
+            <h1>Cadastro do Usuário v1.0</h1>
+            <ReactFancyBox thumbnail={cadastroIsaque} image={cadastroIsaque}/>
+            <p>Autor: Isaque Alves</p>
+          </div>
+          <div>
+            <h1>Fluxo de Monitoria v1.0</h1>
+            <ReactFancyBox thumbnail={monitoriaIsaque} image={monitoriaIsaque}/>
+            <p>Autor: Isaque Alves</p>
+          </div>
+          <div>
+            <h1>Conceitual v1.0</h1>
+            <ReactFancyBox thumbnail={conceitualAmanda} image={conceitualAmanda}/>
+            <p>Autor: Amanda Muniz</p>
+          </div>
+          <div>
+            <h1>Conceitual 2 v1.0</h1>
+            <ReactFancyBox thumbnail={conceitualVitor} image={conceitualVitor}/>
+            <p>Autor: Vitor Cardoso</p>
+          </div>
+          <div>
+            <h1>Conceitual 3 v1.0</h1>
+            <ReactFancyBox thumbnail={conceitualJoao} image={conceitualJoao}/>
+            <p>Autor: João Vitor</p>
+          </div>
+          <div>
+            <h1>Conceitual 3 v2.0</h1>
+            <ReactFancyBox thumbnail={conceitualAtualizadoJoao} image={conceitualAtualizadoJoao}/>
+            <p>Autor: João Vitor</p>
+          </div>
+          <div>
+            <h1>Conceitual 3 v2.0</h1>
+            <ReactFancyBox thumbnail={conceitualBruno} image={conceitualBruno}/>
+            <p>Autor: Bruno Dantas</p>
+          </div>
+        </div>
         </div>
       </div>
     );