From 29142a9977583f3e109d318c1bc8a579bf78f404 Mon Sep 17 00:00:00 2001 From: cami Date: Thu, 27 May 2021 03:07:54 +0200 Subject: [PATCH] Refactoring because of local scripts and tabs In this commit I want to refactor some things. - I don't want to use external connections so I moved all that shit to localhost - I do not need so many spaces as it is bad for formatting --- frontend/src/App.js | 30 ++- frontend/src/Footer.js | 65 ++++--- frontend/src/components/Button.css | 85 ++++---- frontend/src/components/Button.js | 54 +++--- frontend/src/components/CardItem.js | 38 ++-- frontend/src/components/Cards.css | 225 +++++++++++----------- frontend/src/components/Cards.js | 92 ++++----- frontend/src/components/HeroSection.js | 55 +++--- frontend/src/components/Navbar.js | 48 ++--- frontend/src/components/pages/Home.js | 26 +-- frontend/src/components/pages/Products.js | 16 +- frontend/src/components/pages/Services.js | 14 +- frontend/src/components/pages/SignUp.js | 14 +- frontend/src/index.js | 11 +- 14 files changed, 393 insertions(+), 380 deletions(-) diff --git a/frontend/src/App.js b/frontend/src/App.js index 7c8d72b..f87389e 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,15 +1,11 @@ -import React, { useState, useEffect, Component } from 'react'; -import Navbar from './components/Navbar'; -import './App.css'; -import { - BrowserRouter as Router, - Switch, - Route -} from 'react-router-dom'; -import Home from './components/pages/Home'; -import Services from './components/pages/Services'; -import Products from './components/pages/Products'; -import SignUp from './components/pages/SignUp'; +import React, { useState, useEffect, Component } from "react"; +import Navbar from "./components/Navbar"; +import "./App.css"; +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; +import Home from "./components/pages/Home"; +import Services from "./components/pages/Services"; +import Products from "./components/pages/Products"; +import SignUp from "./components/pages/SignUp"; function App() { return ( @@ -17,14 +13,14 @@ function App() { - - - - + + + + ); } -export default App; \ No newline at end of file +export default App; diff --git a/frontend/src/Footer.js b/frontend/src/Footer.js index c911a56..59298b6 100644 --- a/frontend/src/Footer.js +++ b/frontend/src/Footer.js @@ -2,7 +2,7 @@ import React from "react"; import { Button } from "./components/Button"; import { Link } from "react-router-dom"; import "./Footer.css"; -import "@fortawesome/fontawesome-free/css/all.css" +import "@fortawesome/fontawesome-free/css/all.css"; function Footer() { return ( @@ -65,37 +65,40 @@ function Footer() {
-
-
- - TRVL - -
- TRVL © 2 -
- - - - - - - - - -
+
+
+ + TRVL +
+ TRVL © 2 +
+ + + + + + + + + +
+
); diff --git a/frontend/src/components/Button.css b/frontend/src/components/Button.css index 10b300c..8f7448e 100644 --- a/frontend/src/components/Button.css +++ b/frontend/src/components/Button.css @@ -1,44 +1,43 @@ :root { - --primary: #fff; - } - - .btn { - padding: 8px 20px; - border-radius: 2px; - outline: none; - border: none; - cursor: pointer; - } - - .btn--primary { - background-color: var(--primary); - color: #242424; - border: 1px solid var(--primary); - } - - .btn--outline { - background-color: transparent; - color: #fff; - padding: 8px 20px; - border: 1px solid var(--primary); - transition: all 0.3s ease-out; - } - - .btn--medium { - padding: 8px 20px; - font-size: 18px; - } - - .btn--large { - padding: 12px 26px; - font-size: 20px; - } - - .btn--large:hover, - .btn--medium:hover { - transition: all 0.3s ease-out; - background: #fff; - color: #242424; - transition: 250ms; - } - \ No newline at end of file + --primary: #fff; +} + +.btn { + padding: 8px 20px; + border-radius: 2px; + outline: none; + border: none; + cursor: pointer; +} + +.btn--primary { + background-color: var(--primary); + color: #242424; + border: 1px solid var(--primary); +} + +.btn--outline { + background-color: transparent; + color: #fff; + padding: 8px 20px; + border: 1px solid var(--primary); + transition: all 0.3s ease-out; +} + +.btn--medium { + padding: 8px 20px; + font-size: 18px; +} + +.btn--large { + padding: 12px 26px; + font-size: 20px; +} + +.btn--large:hover, +.btn--medium:hover { + transition: all 0.3s ease-out; + background: #fff; + color: #242424; + transition: 250ms; +} diff --git a/frontend/src/components/Button.js b/frontend/src/components/Button.js index 253c3ce..a5c2335 100644 --- a/frontend/src/components/Button.js +++ b/frontend/src/components/Button.js @@ -1,32 +1,32 @@ -import React from 'react'; -import './Button.css'; -import { Link } from 'react-router-dom'; +import React from "react"; +import "./Button.css"; +import { Link } from "react-router-dom"; -const STYLES = ['btn--primary', 'btn--outline']; +const STYLES = ["btn--primary", "btn--outline"]; -const SIZES = ['btn--medium', 'btn--large']; +const SIZES = ["btn--medium", "btn--large"]; export const Button = ({ - children, - type, - onClick, - buttonStyle, - buttonSize + children, + type, + onClick, + buttonStyle, + buttonSize, }) => { - const checkButtonStyle = STYLES.includes(buttonStyle) - ? buttonStyle - : STYLES[0]; - - const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0]; + const checkButtonStyle = STYLES.includes(buttonStyle) + ? buttonStyle + : STYLES[0]; - return ( - - - - ); -}; \ No newline at end of file + const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0]; + + return ( + + + + ); +}; diff --git a/frontend/src/components/CardItem.js b/frontend/src/components/CardItem.js index d4e3439..6e2ddb6 100644 --- a/frontend/src/components/CardItem.js +++ b/frontend/src/components/CardItem.js @@ -1,21 +1,25 @@ -import React from 'react' -import { Link } from 'react-router-dom' +import React from "react"; +import { Link } from "react-router-dom"; function CardItem(props) { - return ( - <> -
  • - -
    - Travel Image -
    -
    -
    {props.text}
    -
    - -
    • - - ) + return ( + <> +
  • + +
    + Travel Image +
    +
    +
    {props.text}
    +
    + +
    • + + ); } -export default CardItem +export default CardItem; diff --git a/frontend/src/components/Cards.css b/frontend/src/components/Cards.css index cbe9383..4e5df7d 100644 --- a/frontend/src/components/Cards.css +++ b/frontend/src/components/Cards.css @@ -1,119 +1,118 @@ .cards { - padding: 4rem; - background: #fff; + padding: 4rem; + background: #fff; +} + +h1 { + text-align: center; +} + +.cards__container { + display: flex; + flex-flow: column; + align-items: center; + max-width: 1120px; + width: 90%; + margin: 0 auto; +} + +.cards__wrapper { + position: relative; + margin: 50px 0 45px; +} + +.cards__items { + margin-bottom: 24px; +} + +.cards__item { + display: flex; + flex: 1; + margin: 0 1rem; + border-radius: 10px; +} + +.cards__item__link { + display: flex; + flex-flow: column; + width: 100%; + box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17); + -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); + filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); + border-radius: 10px; + overflow: hidden; + text-decoration: none; +} + +.cards__item__pic-wrap { + position: relative; + width: 100%; + padding-top: 67%; + overflow: hidden; +} + +.fade-img { + animation-name: fade-img; + animation-duration: 2s; +} + +.cards__item__pic-wrap::after { + content: attr(data-category); + position: absolute; + bottom: 0; + margin-left: 10px; + padding: 6px 8px; + max-width: calc((100%) - 60px); + font-size: 12px; + font-weight: 700; + color: #fff; + background-color: #1f98f4; + box-sizing: border-box; +} + +.cards__item__img { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + width: 100%; + max-width: 100%; + height: 100%; + max-height: 100%; + object-fit: cover; + transition: all 0.2s linear; +} + +.cards__item__img:hover { + transform: scale(1.1); +} + +.cards__item__info { + padding: 20px 30px 30px; +} + +.cards__item__text { + color: #252e48; + font-size: 18px; + line-height: 24px; +} + +@media only screen and (min-width: 1200px) { + .content__blog__container { + width: 84%; } - - h1 { - text-align: center; - } - - .cards__container { - display: flex; - flex-flow: column; - align-items: center; - max-width: 1120px; - width: 90%; - margin: 0 auto; - } - - .cards__wrapper { - position: relative; - margin: 50px 0 45px; - } - +} + +@media only screen and (min-width: 1024px) { .cards__items { - margin-bottom: 24px; + display: flex; } - +} + +@media only screen and (max-width: 1024px) { .cards__item { - display: flex; - flex: 1; - margin: 0 1rem; - border-radius: 10px; + margin-bottom: 2rem; } - - .cards__item__link { - display: flex; - flex-flow: column; - width: 100%; - box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17); - -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); - filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); - border-radius: 10px; - overflow: hidden; - text-decoration: none; - } - - .cards__item__pic-wrap { - position: relative; - width: 100%; - padding-top: 67%; - overflow: hidden; - } - - .fade-img { - animation-name: fade-img; - animation-duration: 2s; - } - - .cards__item__pic-wrap::after { - content: attr(data-category); - position: absolute; - bottom: 0; - margin-left: 10px; - padding: 6px 8px; - max-width: calc((100%) - 60px); - font-size: 12px; - font-weight: 700; - color: #fff; - background-color: #1f98f4; - box-sizing: border-box; - } - - .cards__item__img { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - width: 100%; - max-width: 100%; - height: 100%; - max-height: 100%; - object-fit: cover; - transition: all 0.2s linear; - } - - .cards__item__img:hover { - transform: scale(1.1); - } - - .cards__item__info { - padding: 20px 30px 30px; - } - - .cards__item__text { - color: #252e48; - font-size: 18px; - line-height: 24px; - } - - @media only screen and (min-width: 1200px) { - .content__blog__container { - width: 84%; - } - } - - @media only screen and (min-width: 1024px) { - .cards__items { - display: flex; - } - } - - @media only screen and (max-width: 1024px) { - .cards__item { - margin-bottom: 2rem; - } - } - \ No newline at end of file +} diff --git a/frontend/src/components/Cards.js b/frontend/src/components/Cards.js index f346890..cf0985a 100644 --- a/frontend/src/components/Cards.js +++ b/frontend/src/components/Cards.js @@ -1,51 +1,51 @@ -import React from 'react' -import CardItem from './CardItem' -import './Cards.css' +import React from "react"; +import CardItem from "./CardItem"; +import "./Cards.css"; function Cards() { - return ( -
    -

    Check out these EPIC Destinations

    -
    -
    -
      - - -
    -
      - - - -
    -
    -
    + return ( +
    +

    Check out these EPIC Destinations

    +
    +
    +
      + + +
    +
      + + + +
    - ) +
    +
    + ); } -export default Cards +export default Cards; diff --git a/frontend/src/components/HeroSection.js b/frontend/src/components/HeroSection.js index 549f103..28e6034 100644 --- a/frontend/src/components/HeroSection.js +++ b/frontend/src/components/HeroSection.js @@ -1,32 +1,31 @@ -import React from 'react'; -import '../App.css'; -import { Button } from './Button'; -import './HeroSection.css'; -import '@fortawesome/fontawesome-free/css/all.css' +import React from "react"; +import "../App.css"; +import { Button } from "./Button"; +import "./HeroSection.css"; +import "@fortawesome/fontawesome-free/css/all.css"; function HeroSection() { - return ( -
    -

    ADVENTURE wartet

    -

    What are you waiting for?

    -
    - - -
    -
    - ) + return ( +
    +

    Herzlich Willkommen

    +
    + + +
    +
    + ); } -export default HeroSection +export default HeroSection; diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js index 9ee07f1..7fdae15 100644 --- a/frontend/src/components/Navbar.js +++ b/frontend/src/components/Navbar.js @@ -1,8 +1,8 @@ -import React, { useState, useEffect } from 'react'; -import { Button } from './Button'; -import { Link } from 'react-router-dom'; -import './Navbar.css'; -import '@fortawesome/fontawesome-free/css/all.css' +import React, { useState, useEffect } from "react"; +import { Button } from "./Button"; +import { Link } from "react-router-dom"; +import "./Navbar.css"; +import "@fortawesome/fontawesome-free/css/all.css"; function Navbar() { const [click, setClick] = useState(false); @@ -24,38 +24,38 @@ function Navbar() { showButton(); }, []); - window.addEventListener('resize', showButton); + window.addEventListener("resize", showButton); return ( <> -