✨ Creates history page

higorpo · higorpo · commit 5f1f80be238f · 2020-09-14T11:07:48.000-03:00
diff --git a/src/index.scss b/src/index.scss
@@ -23,8 +23,10 @@ div.router {
 	display: flex;
 	flex-direction: column;
 
-	img {
+	a.logo {
+		text-align: center;
 		margin-top: 50px;
+		margin-bottom: 0px;
 	}
 }
 
@@ -65,6 +67,9 @@ div.container {
 	}
 
 	header {
+		position: fixed;
+		height: 100%;
+
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
@@ -73,9 +78,8 @@ div.container {
 		background-color: var(--primaryColor);
 		color: white;
 		min-width: 35%;
-		position: relative;
 		z-index: 1;
-		margin-right: 50px;
+		// margin-right: 50px;
 		padding-left: 40px;
 
 		&::before {
@@ -90,7 +94,7 @@ div.container {
 			z-index: -1;
 		}
 		
-		img {
+		a {
 			margin-top: auto;
 		}
 
@@ -105,7 +109,10 @@ div.container {
 	}
 
 	div.router {
-		img {
+		margin-left: calc(35% + 88px);
+		width: 100%;
+
+		a.logo {
 			display: none;
 		}
 	}
diff --git a/src/pages/History/index.tsx b/src/pages/History/index.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { MdArrowBack } from 'react-icons/md';
+
+import './styles.scss';
+
+const History: React.FC = () => {
+    return (
+        <div id="history-page" className="container">
+            <Link to="/">
+                <div className="back">
+                    <MdArrowBack size={22} />
+                    <span>Voltar</span>
+                </div>
+            </Link>
+            <h2 className="title">Seus últimos cálculos fatorais.</h2>
+
+            {
+                false &&
+                <ul className="history">
+                    {
+                        [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19].map((item) => (
+                            <li key={String(item)} className="history-item">
+                                <span className="factorial">14</span>
+                                <span className="result">9823823</span>
+                            </li>
+                        ))
+                    }
+                </ul>
+            }
+
+            {
+                true &&
+                <p>
+                    Você ainda não realizou nenhum cálculo.
+                </p>
+            }
+        </div>
+    );
+}
+
+export default History;
diff --git a/src/pages/History/styles.scss b/src/pages/History/styles.scss
@@ -0,0 +1,59 @@
+#history-page {
+    justify-content: normal;
+    margin: 50px 0px;
+    height: auto;
+    width: auto;
+}
+
+
+a {
+    text-decoration: none;
+    margin-bottom: 20px;
+
+    > div.back {
+        color: var(--primaryColor);
+        display: flex;
+        align-items: center;
+
+        span {
+            margin-left: 5px;
+            text-transform: uppercase;
+            font-size: var(--textFontSize);
+            font-weight: bold;
+        }
+    }
+}
+
+ul.history {
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+
+    li.history-item {
+        color: var(--grey3);
+        background-color: var(--grey6);
+        width: 100%;
+        margin-bottom: 10px;
+        padding: 10px 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        span.factorial {
+            font-weight: bold;
+            font-size: 48px;
+
+            &:after {
+                content: "!";
+            }
+        }
+
+        span.result {
+            font-size: 30px;
+            
+            &:before {
+                content: "= ";
+            }
+        }
+    }
+}
diff --git a/src/pages/Home/styles.scss b/src/pages/Home/styles.scss
@@ -31,7 +31,7 @@ nav a {
     font-size: var(--textFontSize);
     text-decoration: none;
     position: absolute;
-    bottom: 50px;
+    bottom: 10px;
 }
 
 @media (min-width: 1000px) {
diff --git a/src/pages/routes.tsx b/src/pages/routes.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
 import { AiFillHeart } from 'react-icons/ai'
 
 import Home from './Home';
+import History from './History';
 
 import Logo from '../assets/logo.svg';
 import LogoColored from '../assets/logo-colored.svg';
@@ -11,17 +12,22 @@ const Routes: React.FC = () => {
     return (
         <BrowserRouter>
             <header>
-                <img src={Logo} alt="Logo" />
+                <Link to="/">
+                    <img src={Logo} alt="Logo" />
+                </Link>
                 <h1 className="title">Faça seus cálculos de fatorial de maneira simples e rápida.</h1>
 
                 <p className="author">
                     Feito com <AiFillHeart /> por Higor Oliveira
                 </p>
             </header>
             <div className="router">
-                <img src={LogoColored} alt="Logo" />
+                <Link className="logo" to="/">
+                    <img src={LogoColored} alt="Logo" />
+                </Link>
                 <Switch>
-                    <Route path="/" component={Home} />
+                    <Route path="/" exact component={Home} />
+                    <Route path="/history" component={History} />
                 </Switch>
             </div>
         </BrowserRouter>

Original file line number	Diff line number	Diff line change
`@@ -23,8 +23,10 @@ div.router {`
`23`	`23`	`display: flex;`
`24`	`24`	`flex-direction: column;`
`25`	`25`
`26`		`- img {`
	`26`	`+ a.logo {`
	`27`	`+ text-align: center;`
`27`	`28`	`margin-top: 50px;`
	`29`	`+ margin-bottom: 0px;`
`28`	`30`	`}`
`29`	`31`	`}`
`30`	`32`
`@@ -65,6 +67,9 @@ div.container {`
`65`	`67`	`}`
`66`	`68`
`67`	`69`	`header {`
	`70`	`+ position: fixed;`
	`71`	`+ height: 100%;`
	`72`	`+`
`68`	`73`	`display: flex;`
`69`	`74`	`flex-direction: column;`
`70`	`75`	`align-items: flex-start;`
`@@ -73,9 +78,8 @@ div.container {`
`73`	`78`	`background-color: var(--primaryColor);`
`74`	`79`	`color: white;`
`75`	`80`	`min-width: 35%;`
`76`		`- position: relative;`
`77`	`81`	`z-index: 1;`
`78`		`- margin-right: 50px;`
	`82`	`+ // margin-right: 50px;`
`79`	`83`	`padding-left: 40px;`
`80`	`84`
`81`	`85`	`&::before {`
`@@ -90,7 +94,7 @@ div.container {`
`90`	`94`	`z-index: -1;`
`91`	`95`	`}`
`92`	`96`
`93`		`- img {`
	`97`	`+ a {`
`94`	`98`	`margin-top: auto;`
`95`	`99`	`}`
`96`	`100`
`@@ -105,7 +109,10 @@ div.container {`
`105`	`109`	`}`
`106`	`110`
`107`	`111`	`div.router {`
`108`		`- img {`
	`112`	`+ margin-left: calc(35% + 88px);`
	`113`	`+ width: 100%;`
	`114`	`+`
	`115`	`+ a.logo {`
`109`	`116`	`display: none;`
`110`	`117`	`}`
`111`	`118`	`}`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ nav a {`
`31`	`31`	`font-size: var(--textFontSize);`
`32`	`32`	`text-decoration: none;`
`33`	`33`	`position: absolute;`
`34`		`- bottom: 50px;`
	`34`	`+ bottom: 10px;`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`@media (min-width: 1000px) {`