From 6ba8300a944369e9631c4419e52b2507aaeadf26 Mon Sep 17 00:00:00 2001 From: Erick Noiztbander Date: Thu, 20 May 2021 19:11:42 +0200 Subject: [PATCH 1/9] CSS Defined --- .eslintrc.js | 23 ++++++- src/App.js | 12 +--- src/components/AppHeader/AppHeader.js | 23 +++++++ src/components/AppHeader/AppHeader.scss | 17 +++++ src/components/AppHeader/index.js | 1 + src/components/BgPicture/BgPicture.js | 15 ++++ src/components/BgPicture/BgPicture.scss | 14 ++++ src/components/BgPicture/index.js | 1 + src/components/CardFooter/CardFooter.js | 13 ++++ src/components/CardFooter/CardFooter.scss | 21 ++++++ src/components/CardFooter/index.js | 1 + src/components/Footer/Footer.js | 11 +++ src/components/Footer/Footer.scss | 11 +++ src/components/Footer/index.js | 1 + src/components/NewTodoCard/NewTodoCard.js | 19 ++++++ src/components/NewTodoCard/index.js | 1 + src/components/TodoCard/TodoCard.js | 21 ++++++ src/components/TodoCard/TodoCard.scss | 59 ++++++++++++++++ src/components/TodoCard/index.js | 1 + src/pages/Home/Home.js | 35 ++++++++++ src/pages/Home/Home.scss | 83 +++++++++++++++++++++++ src/pages/Home/index.js | 1 + 22 files changed, 374 insertions(+), 10 deletions(-) create mode 100644 src/components/AppHeader/AppHeader.js create mode 100644 src/components/AppHeader/AppHeader.scss create mode 100644 src/components/AppHeader/index.js create mode 100644 src/components/BgPicture/BgPicture.js create mode 100644 src/components/BgPicture/BgPicture.scss create mode 100644 src/components/BgPicture/index.js create mode 100644 src/components/CardFooter/CardFooter.js create mode 100644 src/components/CardFooter/CardFooter.scss create mode 100644 src/components/CardFooter/index.js create mode 100644 src/components/Footer/Footer.js create mode 100644 src/components/Footer/Footer.scss create mode 100644 src/components/Footer/index.js create mode 100644 src/components/NewTodoCard/NewTodoCard.js create mode 100644 src/components/NewTodoCard/index.js create mode 100644 src/components/TodoCard/TodoCard.js create mode 100644 src/components/TodoCard/TodoCard.scss create mode 100644 src/components/TodoCard/index.js create mode 100644 src/pages/Home/Home.js create mode 100644 src/pages/Home/Home.scss create mode 100644 src/pages/Home/index.js diff --git a/.eslintrc.js b/.eslintrc.js index 17514e75..4e8e6fef 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -49,7 +49,12 @@ module.exports = { }, ], rules: { - "prettier/prettier": "error", + "prettier/prettier": [ + "error", + { + endOfLine: "auto", + }, + ], "react/jsx-filename-extension": "off", "import/prefer-default-export": "off", "prefer-destructuring": "off", @@ -59,5 +64,21 @@ module.exports = { "no-underscore-dangle": "off", "react/forbid-prop-types": "off", "react/prop-types": "off", + "jsx-a11y/label-has-associated-control": [ + "error", + { + required: { + some: ["nesting", "id"], + }, + }, + ], + "jsx-a11y/label-has-for": [ + "error", + { + required: { + some: ["nesting", "id"], + }, + }, + ], }, }; diff --git a/src/App.js b/src/App.js index de524524..3a49c0e1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,9 @@ import React from "react"; +import Home from "./pages/Home"; + function App() { - return ( -
-
-
-

Hola mundo

-
-
-
- ); + return ; } export default App; diff --git a/src/components/AppHeader/AppHeader.js b/src/components/AppHeader/AppHeader.js new file mode 100644 index 00000000..f2c53720 --- /dev/null +++ b/src/components/AppHeader/AppHeader.js @@ -0,0 +1,23 @@ +import React from "react"; + +import "./AppHeader.scss"; + +export default function AppHeader() { + return ( +
+

TODO

+ + + + + +
+ ); +} diff --git a/src/components/AppHeader/AppHeader.scss b/src/components/AppHeader/AppHeader.scss new file mode 100644 index 00000000..79d8aefa --- /dev/null +++ b/src/components/AppHeader/AppHeader.scss @@ -0,0 +1,17 @@ +.gridMode { + display: grid; + grid-template-columns: auto 40px; + width: 100%; + height: fit-content; + align-items: center; +} + +.mainBackgroundHeader { + background-color: rgba(139, 214, 34, 0); +} + +.big-title { + font-size: 50px; + font-weight: bold; + letter-spacing: 12px; +} diff --git a/src/components/AppHeader/index.js b/src/components/AppHeader/index.js new file mode 100644 index 00000000..8ad0d174 --- /dev/null +++ b/src/components/AppHeader/index.js @@ -0,0 +1 @@ +export { default } from "./AppHeader"; diff --git a/src/components/BgPicture/BgPicture.js b/src/components/BgPicture/BgPicture.js new file mode 100644 index 00000000..028e386c --- /dev/null +++ b/src/components/BgPicture/BgPicture.js @@ -0,0 +1,15 @@ +import React from "react"; + +import "./BgPicture.scss"; + +export default function BgPicture() { + return ( +
+ foto +
+ ); +} diff --git a/src/components/BgPicture/BgPicture.scss b/src/components/BgPicture/BgPicture.scss new file mode 100644 index 00000000..1dc054c7 --- /dev/null +++ b/src/components/BgPicture/BgPicture.scss @@ -0,0 +1,14 @@ +.bgPicture { + background-color: white; + position: absolute; + transform: translateY(-10vh); + z-index: 50; + height: 40vh; + width: 100%; + overflow: hidden; +} + +.bgImg { + width: 100%; + object-fit: cover; +} diff --git a/src/components/BgPicture/index.js b/src/components/BgPicture/index.js new file mode 100644 index 00000000..8c8b91b6 --- /dev/null +++ b/src/components/BgPicture/index.js @@ -0,0 +1 @@ +export { default } from "./BgPicture"; diff --git a/src/components/CardFooter/CardFooter.js b/src/components/CardFooter/CardFooter.js new file mode 100644 index 00000000..29459450 --- /dev/null +++ b/src/components/CardFooter/CardFooter.js @@ -0,0 +1,13 @@ +import React from "react"; + +import "./CardFooter.scss"; + +export default function CardFooter() { + return ( +
+

5 items left

+
All Active Completed
+
Clear completed
+
+ ); +} diff --git a/src/components/CardFooter/CardFooter.scss b/src/components/CardFooter/CardFooter.scss new file mode 100644 index 00000000..08760865 --- /dev/null +++ b/src/components/CardFooter/CardFooter.scss @@ -0,0 +1,21 @@ +.gridFooter { + display: grid; + grid-template-columns: 1fr 5fr 1.5fr; + grid-template-rows: fit-content; + width: 100%; + height: fit-content; + padding: 1%; + align-items: center; + justify-content: center; + justify-items: center; + margin: 0; +} + +.text-center { + text-align: center; + margin-bottom: 0px; + p { + text-align: center; + margin-bottom: 0px; + } +} diff --git a/src/components/CardFooter/index.js b/src/components/CardFooter/index.js new file mode 100644 index 00000000..0c2197fe --- /dev/null +++ b/src/components/CardFooter/index.js @@ -0,0 +1 @@ +export { default } from "./CardFooter"; diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js new file mode 100644 index 00000000..7812e3c4 --- /dev/null +++ b/src/components/Footer/Footer.js @@ -0,0 +1,11 @@ +import React from "react"; + +import "./Footer.scss"; + +export default function Footer() { + return ( +
+

Drag and drop to reorder list

+
+ ); +} diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss new file mode 100644 index 00000000..80b998bc --- /dev/null +++ b/src/components/Footer/Footer.scss @@ -0,0 +1,11 @@ +.centerText { + text-align: center; +} + +.font-size-10 { + font-size: 10; +} + +.gray-color { + color: gray; +} diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js new file mode 100644 index 00000000..3738288b --- /dev/null +++ b/src/components/Footer/index.js @@ -0,0 +1 @@ +export { default } from "./Footer"; diff --git a/src/components/NewTodoCard/NewTodoCard.js b/src/components/NewTodoCard/NewTodoCard.js new file mode 100644 index 00000000..0ef8ccd7 --- /dev/null +++ b/src/components/NewTodoCard/NewTodoCard.js @@ -0,0 +1,19 @@ +import React from "react"; + +export default function NewTodoCard() { + return ( +
+ + +
+ ); +} diff --git a/src/components/NewTodoCard/index.js b/src/components/NewTodoCard/index.js new file mode 100644 index 00000000..2f38a9ab --- /dev/null +++ b/src/components/NewTodoCard/index.js @@ -0,0 +1 @@ +export { default } from "./NewTodoCard"; diff --git a/src/components/TodoCard/TodoCard.js b/src/components/TodoCard/TodoCard.js new file mode 100644 index 00000000..af0ea08e --- /dev/null +++ b/src/components/TodoCard/TodoCard.js @@ -0,0 +1,21 @@ +import React from "react"; + +import "./TodoCard.scss"; + +export default function TodoCard() { + return ( +
+ + TodoCard +
+ +
+
+ ); +} diff --git a/src/components/TodoCard/TodoCard.scss b/src/components/TodoCard/TodoCard.scss new file mode 100644 index 00000000..cb69d1a4 --- /dev/null +++ b/src/components/TodoCard/TodoCard.scss @@ -0,0 +1,59 @@ +$backgroundColor: #ffffff; + +.flex-row { + display: flex; + flex-direction: row; + justify-items: center; +} + +.card-wide { + width: 100%; + border-bottom: 1px solid gray; + height: 50px; + padding: 10px; + background-color: $backgroundColor; + gap: 10px; + align-items: center; +} + +.font-bold { + font-weight: bold; +} + +.font-big { + font-size: 18px; +} + +.font-light { + font-weight: 100; +} + +label { + display: inline-block; + margin-bottom: 0px; +} + +input.blue-checkbox { + width: 20px; + height: 20px; + border: 1px red solid; +} + +.full-width { + width: 100%; +} + +.input-no-border { + border: none; + outline: none; + :focus { + background-color: red; + } +} + +.clickable { + cursor: pointer; +} +.no-border { + border: none; +} diff --git a/src/components/TodoCard/index.js b/src/components/TodoCard/index.js new file mode 100644 index 00000000..0e041b8e --- /dev/null +++ b/src/components/TodoCard/index.js @@ -0,0 +1 @@ +export { default } from "./TodoCard"; diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js new file mode 100644 index 00000000..df71e302 --- /dev/null +++ b/src/pages/Home/Home.js @@ -0,0 +1,35 @@ +import React from "react"; + +import "./Home.scss"; +import AppHeader from "../../components/AppHeader/index"; +import Footer from "../../components/Footer/index"; +import TodoCard from "../../components/TodoCard/index"; +import NewTodoCard from "../../components/NewTodoCard/index"; +import BgPicture from "../../components/BgPicture/index"; +import CardFooter from "../../components/CardFooter/index"; + +export default function Home() { + return ( + + +
+ +
+ +
+
+
+ + + + + + +
+ +
+
+