From f87326dfdf26e3eba9b4cb6ffa15f0659c126e3e Mon Sep 17 00:00:00 2001 From: Pedro Espindula Date: Sat, 26 Oct 2019 17:54:59 -0300 Subject: [PATCH 1/8] Adiciona icones do material e fonte roboto --- package.json | 1 + public/index.html | 24 +++++++++++++----------- src/components/app/App.css | 4 ++++ yarn.lock | 20 +++++++++++++++----- 4 files changed, 33 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 40e1cfa..3da485c 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "@fortawesome/free-solid-svg-icons": "^5.10.1", "@fortawesome/react-fontawesome": "^0.1.4", "katex": "0.9.0", + "material-design-icons": "^3.0.1", "path": "^0.12.7", "prettier": "^1.18.2", "prop-types": "^15.7.2", diff --git a/public/index.html b/public/index.html index c7fd447..1345125 100644 --- a/public/index.html +++ b/public/index.html @@ -1,14 +1,16 @@ - - - - - - - POSCOMP - - -
- + + + + + + + + + POSCOMP + + +
+ diff --git a/src/components/app/App.css b/src/components/app/App.css index 072edef..060c119 100644 --- a/src/components/app/App.css +++ b/src/components/app/App.css @@ -14,6 +14,10 @@ body, box-sizing: border-box; } +html { + font-family: 'Roboto', sans-serif; +} + body { font-family: 'Roboto', sans-serif; } diff --git a/yarn.lock b/yarn.lock index f0a1f43..ad3bc48 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5783,12 +5783,12 @@ jsx-ast-utils@^2.0.1, jsx-ast-utils@^2.1.0, jsx-ast-utils@^2.2.1: array-includes "^3.0.3" object.assign "^4.1.0" -katex@^0.10.2: - version "0.10.2" - resolved "https://registry.yarnpkg.com/katex/-/katex-0.10.2.tgz#39973edbb65eda5b6f9e7f41648781e557dd4932" - integrity sha512-cQOmyIRoMloCoSIOZ1+gEwsksdJZ1EW4SWm3QzxSza/QsnZr6D4U1V9S4q+B/OLm2OQ8TCBecQ8MaIfnScI7cw== +katex@0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/katex/-/katex-0.9.0.tgz#26a7d082c21d53725422d2d71da9b2d8455fbd4a" + integrity sha512-lp3x90LT1tDZBW2tjLheJ98wmRMRjUHwk4QpaswT9bhqoQZ+XA4cPcjcQBxgOQNwaOSt6ZeL/a6GKQ1of3LFxQ== dependencies: - commander "^2.19.0" + match-at "^0.1.1" killable@^1.0.0: version "1.0.1" @@ -6045,6 +6045,16 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +match-at@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/match-at/-/match-at-0.1.1.tgz#25d040d291777704d5e6556bbb79230ec2de0540" + integrity sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q== + +material-design-icons@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/material-design-icons/-/material-design-icons-3.0.1.tgz#9a71c48747218ebca51e51a66da682038cdcb7bf" + integrity sha1-mnHEh0chjrylHlGmbaaCA4zct78= + md5.js@^1.3.4: version "1.3.5" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f" From 513ebab3da1503abe227678e47e7d1817dbf7e81 Mon Sep 17 00:00:00 2001 From: Pedro Espindula Date: Sat, 26 Oct 2019 17:55:22 -0300 Subject: [PATCH 2/8] Adiciona versao inicial da navbar --- src/components/app/App.css | 1 + src/components/header/PageHeader.css | 2 ++ src/components/header/PageHeader.js | 5 ++++- src/components/icon/Icon.js | 17 ++++++++++++++ src/components/navbar/Navbar.css | 23 +++++++++++++++++++ src/components/navbar/Navbar.js | 33 ++++++++++++++++++++++++++++ 6 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 src/components/icon/Icon.js create mode 100644 src/components/navbar/Navbar.css create mode 100644 src/components/navbar/Navbar.js diff --git a/src/components/app/App.css b/src/components/app/App.css index 060c119..4f8ff4b 100644 --- a/src/components/app/App.css +++ b/src/components/app/App.css @@ -15,6 +15,7 @@ body, } html { + background-color: #7f6eb2; font-family: 'Roboto', sans-serif; } diff --git a/src/components/header/PageHeader.css b/src/components/header/PageHeader.css index 2126a4e..ec6d9ec 100644 --- a/src/components/header/PageHeader.css +++ b/src/components/header/PageHeader.css @@ -1,4 +1,6 @@ .page-header { + display: grid; + grid-auto-flow: column; } @media (min-width: 801px) { diff --git a/src/components/header/PageHeader.js b/src/components/header/PageHeader.js index f4e9ad6..a7d8435 100644 --- a/src/components/header/PageHeader.js +++ b/src/components/header/PageHeader.js @@ -3,11 +3,14 @@ import PropTypes from 'prop-types'; import './PageHeader.css'; import ToggleButton from '../toggleButton/ToggleButton'; +import Navbar from '../navbar/Navbar'; + const PageHeader = ({ drawerClickHandler }) => { return (
-

SOLUCIONARIO - POSCOMP

+

SOLUCIONARIO POSCOMP

+
); }; diff --git a/src/components/icon/Icon.js b/src/components/icon/Icon.js new file mode 100644 index 0000000..edc9b52 --- /dev/null +++ b/src/components/icon/Icon.js @@ -0,0 +1,17 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const getIconColorStyle = (color) => ({ color }); + +const Icon = ({ icon, iconColor }) => ( + + {icon} + +); + +Icon.propTypes = { + icon: PropTypes.string, + iconColor: PropTypes.string, +}; + +export default Icon; diff --git a/src/components/navbar/Navbar.css b/src/components/navbar/Navbar.css new file mode 100644 index 0000000..f5c3316 --- /dev/null +++ b/src/components/navbar/Navbar.css @@ -0,0 +1,23 @@ +.navbar { + display: grid; + grid-auto-flow: column; +} + +.navbar-option > a { + border-bottom: 1px solid white; + text-decoration: none; + display: grid; + grid-gap: 0.5em; + padding: 0.8em; + justify-content: center; + text-align: center; + color: #fff7f8; +} + +.navbar-option.selected-option > a { + border-bottom: 3px solid white; +} + +.navbar-option > a > i { + font-size: 2em; +} diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js new file mode 100644 index 0000000..6ef7c0f --- /dev/null +++ b/src/components/navbar/Navbar.js @@ -0,0 +1,33 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './Navbar.css'; + +import Icon from '../icon/Icon'; + +const getNavbarOptionClass = (selected) => 'navbar-option' + (selected ? ' selected-option' : ''); + +const NavbarOption = ({ name, icon, link, selected }) => ( +
+ + +

{name.toUpperCase()}

+ +
+); + +const navbarOption = (name, icon, link, selected) => ({ name, icon, link, selected }); + +const navbarOptions = [ + navbarOption('Questões', 'assignment', '/', true), + navbarOption('Info', 'error_outline', '/info'), + navbarOption('Ajuda', 'help_outline', '/ajuda'), + navbarOption('Estatísticas', 'assessment', '/estatisticas'), +]; + +const Navbar = () => { + return ; +}; + +Navbar.propTypes = {}; + +export default Navbar; From 0da8fae592a95e9ac326e130e322a6159050343e Mon Sep 17 00:00:00 2001 From: Ivyna Santino Date: Sat, 26 Oct 2019 18:01:36 -0300 Subject: [PATCH 3/8] inicia card --- src/components/card/Card.css | 61 ++++++++++++++++++++++++++++++++++++ src/components/card/Card.js | 13 ++++++++ 2 files changed, 74 insertions(+) create mode 100644 src/components/card/Card.css create mode 100644 src/components/card/Card.js diff --git a/src/components/card/Card.css b/src/components/card/Card.css new file mode 100644 index 0000000..275780c --- /dev/null +++ b/src/components/card/Card.css @@ -0,0 +1,61 @@ + +.term-card__container { + background: #fff7f8; + font-family: 'Ikaros', sans-serif; + border-radius: 10px; + padding: 30px 50px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + width: 100%; + display: grid; + grid-gap: 0 2em; + grid-template-columns: 1.5fr 1fr; + grid-template-areas: + 'title title' + 'subtitle subtitle' + 'left-content right-content'; + } + + .term-card__title-1 { + grid-area: title; + margin: 0; + line-height: 1.2em; + } + + .term-card__list-phrase { + padding-left: 15px; + } + + .term-card__item-phrase { + margin-bottom: 10px; + font-style: italic; + } + + .term-card__subtitle { + grid-area: subtitle; + font-family: 'Krub', 'sans-serif'; + font-weight: 500; + color: gray; + font-style: italic; + } + + .term-card__title-2 { + margin-top: 20px; + color: gray; + } + + @media screen and (max-width: 720px) { + .term-card__container { + display: grid; + grid-gap: 1em; + grid-template-columns: 1fr; + grid-template-areas: + 'title' + 'subtitle' + 'content-left' + 'content-right'; + } + + .term-card__title-2 { + margin-top: 0; + } + } \ No newline at end of file diff --git a/src/components/card/Card.js b/src/components/card/Card.js new file mode 100644 index 0000000..31497d2 --- /dev/null +++ b/src/components/card/Card.js @@ -0,0 +1,13 @@ +import React from 'react'; +import './Card.css' + +const Card = () => { + return ( +
+

Questão 01 - 2018

+ Matemática +
+ ) + }; + +export default Card; \ No newline at end of file From a747efd7e8c81fe0a6ef62d8fcb909ee56888128 Mon Sep 17 00:00:00 2001 From: Ivyna Santino Date: Sat, 26 Oct 2019 22:20:47 -0300 Subject: [PATCH 4/8] adiciona sombra --- src/components/card/Card.css | 44 ++++++++++++++++++++---------------- src/components/card/Card.js | 31 +++++++++++++++++++------ 2 files changed, 48 insertions(+), 27 deletions(-) diff --git a/src/components/card/Card.css b/src/components/card/Card.css index 275780c..22f93d5 100644 --- a/src/components/card/Card.css +++ b/src/components/card/Card.css @@ -1,36 +1,35 @@ -.term-card__container { - background: #fff7f8; +.card__container { + background: #FFF7F8; font-family: 'Ikaros', sans-serif; border-radius: 10px; padding: 30px 50px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - width: 100%; + height: 150px; display: grid; - grid-gap: 0 2em; - grid-template-columns: 1.5fr 1fr; grid-template-areas: 'title title' 'subtitle subtitle' 'left-content right-content'; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.1s; + width: 40%; } - .term-card__title-1 { + .card__container:hover { + box-shadow: 0 16px 32px 0 black; + } + + .card__space { + padding: 20px 50px; + } + + .card__title-1 { grid-area: title; margin: 0; line-height: 1.2em; } - .term-card__list-phrase { - padding-left: 15px; - } - - .term-card__item-phrase { - margin-bottom: 10px; - font-style: italic; - } - - .term-card__subtitle { + .card__subtitle { grid-area: subtitle; font-family: 'Krub', 'sans-serif'; font-weight: 500; @@ -38,13 +37,18 @@ font-style: italic; } - .term-card__title-2 { + .card__title-2 { margin-top: 20px; + font-family: 'Ikaros', sans-serif; color: gray; } + + .card__theme { + border-radius: 10px; + } @media screen and (max-width: 720px) { - .term-card__container { + .card__container { display: grid; grid-gap: 1em; grid-template-columns: 1fr; @@ -55,7 +59,7 @@ 'content-right'; } - .term-card__title-2 { + .card__title-2 { margin-top: 0; } } \ No newline at end of file diff --git a/src/components/card/Card.js b/src/components/card/Card.js index 31497d2..ce8d0c5 100644 --- a/src/components/card/Card.js +++ b/src/components/card/Card.js @@ -1,13 +1,30 @@ import React from 'react'; -import './Card.css' +import './Card.css'; + +import PropType from 'prop-types'; const Card = () => { return ( -
-

Questão 01 - 2018

- Matemática +
+
+

Questão 02 - 2019

+ Tema 1 + Matemática +

Sobre árvores, é correto afirmar que:

+
- ) - }; - + ); +}; + +Card.PropType = { + question: PropType.shape({ + number: PropType.string, + year: PropType.string, + area: PropType.string, + theme: PropType.string, + textQuestion: PropType.string, + + }) +}; + export default Card; \ No newline at end of file From 2b5825dd2b332ff63205df5ad8d17cda7e244345 Mon Sep 17 00:00:00 2001 From: Ivyna Santino Date: Sun, 27 Oct 2019 21:15:25 -0300 Subject: [PATCH 5/8] adiciona componente card --- src/components/card/Card.css | 32 ++------------------------------ src/components/card/Card.js | 7 +------ 2 files changed, 3 insertions(+), 36 deletions(-) diff --git a/src/components/card/Card.css b/src/components/card/Card.css index 22f93d5..09f85ab 100644 --- a/src/components/card/Card.css +++ b/src/components/card/Card.css @@ -3,7 +3,7 @@ background: #FFF7F8; font-family: 'Ikaros', sans-serif; border-radius: 10px; - padding: 30px 50px; + padding: 40px 310px; height: 150px; display: grid; grid-template-areas: @@ -16,36 +16,12 @@ } .card__container:hover { - box-shadow: 0 16px 32px 0 black; + box-shadow: 0 16px 32px 0 rgba(0,0,0,0.5); } .card__space { padding: 20px 50px; } - - .card__title-1 { - grid-area: title; - margin: 0; - line-height: 1.2em; - } - - .card__subtitle { - grid-area: subtitle; - font-family: 'Krub', 'sans-serif'; - font-weight: 500; - color: gray; - font-style: italic; - } - - .card__title-2 { - margin-top: 20px; - font-family: 'Ikaros', sans-serif; - color: gray; - } - - .card__theme { - border-radius: 10px; - } @media screen and (max-width: 720px) { .card__container { @@ -58,8 +34,4 @@ 'content-left' 'content-right'; } - - .card__title-2 { - margin-top: 0; - } } \ No newline at end of file diff --git a/src/components/card/Card.js b/src/components/card/Card.js index ce8d0c5..79f481e 100644 --- a/src/components/card/Card.js +++ b/src/components/card/Card.js @@ -6,12 +6,7 @@ import PropType from 'prop-types'; const Card = () => { return (
-
-

Questão 02 - 2019

- Tema 1 - Matemática -

Sobre árvores, é correto afirmar que:

-
+
); }; From f136566ce1432fa029799f1dfa7ae65977fe6ae6 Mon Sep 17 00:00:00 2001 From: Ivyna Santino Date: Sun, 27 Oct 2019 21:15:55 -0300 Subject: [PATCH 6/8] testa componente --- src/components/content/main/MainField.js | 5 ++++- src/components/header/PageHeader.css | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/content/main/MainField.js b/src/components/content/main/MainField.js index 874309b..2d00fb3 100644 --- a/src/components/content/main/MainField.js +++ b/src/components/content/main/MainField.js @@ -1,8 +1,11 @@ import React from 'react'; import './MainField.css'; +import Card from '../../card/Card'; const MainField = () => { - return <>; + return ( + + ) }; export default MainField; diff --git a/src/components/header/PageHeader.css b/src/components/header/PageHeader.css index ec6d9ec..36c9e0e 100644 --- a/src/components/header/PageHeader.css +++ b/src/components/header/PageHeader.css @@ -3,6 +3,10 @@ grid-auto-flow: column; } +.page-header__space { + grid-row-gap: 1cm; +} + @media (min-width: 801px) { .header-toggle-button { display: none; From 774418c25bda45135bfc33d4875c1cfd248ca073 Mon Sep 17 00:00:00 2001 From: Ivyna Santino Date: Fri, 1 Nov 2019 13:26:44 -0300 Subject: [PATCH 7/8] adiciona resposividade ao card --- src/components/card/Card.css | 9 +++++---- src/components/header/PageHeader.css | 2 +- src/components/sidenav/PageSideNav.css | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/card/Card.css b/src/components/card/Card.css index 09f85ab..81bb0f7 100644 --- a/src/components/card/Card.css +++ b/src/components/card/Card.css @@ -2,9 +2,9 @@ .card__container { background: #FFF7F8; font-family: 'Ikaros', sans-serif; - border-radius: 10px; - padding: 40px 310px; - height: 150px; + border-radius: 12px; + padding: 5% 30%; + height: 120px; display: grid; grid-template-areas: 'title title' @@ -23,9 +23,10 @@ padding: 20px 50px; } - @media screen and (max-width: 720px) { + @media screen and (max-width: 1400px) { .card__container { display: grid; + padding: 5% 30%; grid-gap: 1em; grid-template-columns: 1fr; grid-template-areas: diff --git a/src/components/header/PageHeader.css b/src/components/header/PageHeader.css index 36c9e0e..b5c3577 100644 --- a/src/components/header/PageHeader.css +++ b/src/components/header/PageHeader.css @@ -7,7 +7,7 @@ grid-row-gap: 1cm; } -@media (min-width: 801px) { +@media (min-width: 720px) { .header-toggle-button { display: none; } diff --git a/src/components/sidenav/PageSideNav.css b/src/components/sidenav/PageSideNav.css index d202b0c..0e27c57 100644 --- a/src/components/sidenav/PageSideNav.css +++ b/src/components/sidenav/PageSideNav.css @@ -14,7 +14,7 @@ color: #909399; } -@media (max-width: 800px) { +@media screen and (max-width: 1024px) { .drawer { width: 70%; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3); From afa4f83cad503bc41a55d4f29a58c915d3e98d66 Mon Sep 17 00:00:00 2001 From: Ivyna Santino Date: Sun, 8 Dec 2019 17:25:27 -0300 Subject: [PATCH 8/8] =?UTF-8?q?troca=20cores=20da=20aplica=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/app/App.css | 2 +- src/components/sidenav/PageSideNav.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/app/App.css b/src/components/app/App.css index 4f8ff4b..eb093d3 100644 --- a/src/components/app/App.css +++ b/src/components/app/App.css @@ -15,7 +15,7 @@ body, } html { - background-color: #7f6eb2; + background-color: #FFC09E; font-family: 'Roboto', sans-serif; } diff --git a/src/components/sidenav/PageSideNav.css b/src/components/sidenav/PageSideNav.css index d202b0c..1227957 100644 --- a/src/components/sidenav/PageSideNav.css +++ b/src/components/sidenav/PageSideNav.css @@ -4,8 +4,8 @@ /* height: 100%; */ width: 300px; flex-shrink: 0; - border-right: 1px solid #ddd; - background-color: #fff; + border-right: 1px solid #F9DBBD; + background-color: #F9DBBD; box-sizing: border-box; }