cami/Bachelorthesis_Code
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Wiki Activity

Merge pull request 'Refactoring because of local scripts and tabs' (#9) from refactor/code_externalthings into main

Browse source 
Reviewed-on: #9
This commit is contained in:
cami 2021-05-27 01:08:41 +00:00
commit 9f7c8c18b4
14 changed files with 393 additions and 380 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/App.js
View file

@ -1,15 +1,11 @@
import React, { useState, useEffect, Component } from 'react'; import React, { useState, useEffect, Component } from "react";
import Navbar from './components/Navbar'; import Navbar from "./components/Navbar";
import './App.css'; import "./App.css";
import { import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
BrowserRouter as Router, import Home from "./components/pages/Home";
Switch, import Services from "./components/pages/Services";
Route import Products from "./components/pages/Products";
} from 'react-router-dom'; import SignUp from "./components/pages/SignUp";
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() { function App() {
return ( return (
@ -17,10 +13,10 @@ function App() {
<Router> <Router>
<Navbar /> <Navbar />
<Switch> <Switch>
<Route path='/' exact component={Home} /> <Route path="/" exact component={Home} />
<Route path='/services' component={Services} /> <Route path="/services" component={Services} />
<Route path='/products' component={Products} /> <Route path="/products" component={Products} />
<Route path='sign-up' component={SignUp} /> <Route path="/sign-up" component={SignUp} />
</Switch> </Switch>
</Router> </Router>
</> </>

65
frontend/src/Footer.js
View file

@ -2,7 +2,7 @@ import React from "react";
import { Button } from "./components/Button"; import { Button } from "./components/Button";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import "./Footer.css"; import "./Footer.css";
import "@fortawesome/fontawesome-free/css/all.css" import "@fortawesome/fontawesome-free/css/all.css";
function Footer() { function Footer() {
return ( return (
@ -65,37 +65,40 @@ function Footer() {
</div> </div>
</div> </div>
<section className="social-media"> <section className="social-media">
<div className="social-media-wrap"> <div className="social-media-wrap">
<div className="footer-logo"> <div className="footer-logo">
<Link to='/' className="social-logo"> <Link to="/" className="social-logo">
TRVL <i className="fab fa-typo3"></i> TRVL <i className="fab fa-typo3"></i>
</Link> </Link>
</div>
<small className="website-rights">TRVL © 2</small>
<div className="social-icons">
<Link className="social-icon-link facebook"
to='/'
target="_blank"
aria-label="Facebook"
>
<i className="fab fa-facebook-f"></i>
</Link>
<Link className="social-icon-link instagram"
to='/'
target="_blank"
aria-label="Instagram"
>
<i className="fab fa-instagram"></i>
</Link>
<Link className="social-icon-link linkedin"
to='/'
target="_blank"
aria-label="LinkedIn"
>
<i className="fab fa-linkedin"></i>
</Link>
</div>
</div> </div>
<small className="website-rights">TRVL © 2</small>
<div className="social-icons">
<Link
className="social-icon-link facebook"
to="/"
target="_blank"
aria-label="Facebook"
>
<i className="fab fa-facebook-f"></i>
</Link>
<Link
className="social-icon-link instagram"
to="/"
target="_blank"
aria-label="Instagram"
>
<i className="fab fa-instagram"></i>
</Link>
<Link
className="social-icon-link linkedin"
to="/"
target="_blank"
aria-label="LinkedIn"
>
<i className="fab fa-linkedin"></i>
</Link>
</div>
</div>
</section> </section>
</div> </div>
); );

73
frontend/src/components/Button.css
View file

@ -1,44 +1,43 @@
:root { :root {
--primary: #fff; --primary: #fff;
} }
.btn { .btn {
padding: 8px 20px; padding: 8px 20px;
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
.btn--primary { .btn--primary {
background-color: var(--primary); background-color: var(--primary);
color: #242424; color: #242424;
border: 1px solid var(--primary); border: 1px solid var(--primary);
} }
.btn--outline { .btn--outline {
background-color: transparent; background-color: transparent;
color: #fff; color: #fff;
padding: 8px 20px; padding: 8px 20px;
border: 1px solid var(--primary); border: 1px solid var(--primary);
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.btn--medium { .btn--medium {
padding: 8px 20px; padding: 8px 20px;
font-size: 18px; font-size: 18px;
} }
.btn--large { .btn--large {
padding: 12px 26px; padding: 12px 26px;
font-size: 20px; font-size: 20px;
} }
.btn--large:hover,
.btn--medium:hover {
transition: all 0.3s ease-out;
background: #fff;
color: #242424;
transition: 250ms;
}
.btn--large:hover,
.btn--medium:hover {
transition: all 0.3s ease-out;
background: #fff;
color: #242424;
transition: 250ms;
}

50
frontend/src/components/Button.js
View file

@ -1,32 +1,32 @@
import React from 'react'; import React from "react";
import './Button.css'; import "./Button.css";
import { Link } from 'react-router-dom'; 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 = ({ export const Button = ({
children, children,
type, type,
onClick, onClick,
buttonStyle, buttonStyle,
buttonSize buttonSize,
}) => { }) => {
const checkButtonStyle = STYLES.includes(buttonStyle) const checkButtonStyle = STYLES.includes(buttonStyle)
? buttonStyle ? buttonStyle
: STYLES[0]; : STYLES[0];
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0]; const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
return ( return (
<Link to='sign-up' className='btn-mobile'> <Link to="sign-up" className="btn-mobile">
<button <button
className={`btn ${checkButtonStyle} ${checkButtonSize}`} className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onClick} onClick={onClick}
type={type} type={type}
> >
{children} {children}
</button> </button>
</Link> </Link>
); );
}; };

38
frontend/src/components/CardItem.js
View file

@ -1,21 +1,25 @@
import React from 'react' import React from "react";
import { Link } from 'react-router-dom' import { Link } from "react-router-dom";
function CardItem(props) { function CardItem(props) {
return ( return (
<> <>
<li className="cards__item"> <li className="cards__item">
<Link className="cards__item__link" to={props.path}> <Link className="cards__item__link" to={props.path}>
<figure className="cards__item__pic-wrap" data-category={props.label}> <figure className="cards__item__pic-wrap" data-category={props.label}>
<img src={props.src} alt="Travel Image" className="cards__item__img" /> <img
</figure> src={props.src}
<div className="cards__item__info"> alt="Travel Image"
<h5 className="cards__item__text">{props.text}</h5> className="cards__item__img"
</div> />
</Link> </figure>
</li> <div className="cards__item__info">
</> <h5 className="cards__item__text">{props.text}</h5>
) </div>
</Link>
</li>
</>
);
} }
export default CardItem export default CardItem;

217
frontend/src/components/Cards.css
View file

@ -1,119 +1,118 @@
.cards { .cards {
padding: 4rem; padding: 4rem;
background: #fff; background: #fff;
} }
h1 { h1 {
text-align: center; text-align: center;
} }
.cards__container { .cards__container {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
max-width: 1120px; max-width: 1120px;
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
} }
.cards__wrapper { .cards__wrapper {
position: relative; position: relative;
margin: 50px 0 45px; 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%;
}
}
@media only screen and (min-width: 1024px) {
.cards__items { .cards__items {
margin-bottom: 24px; display: flex;
} }
}
@media only screen and (max-width: 1024px) {
.cards__item { .cards__item {
display: flex; margin-bottom: 2rem;
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%;
}
}
@media only screen and (min-width: 1024px) {
.cards__items {
display: flex;
}
}
@media only screen and (max-width: 1024px) {
.cards__item {
margin-bottom: 2rem;
}
}

92
frontend/src/components/Cards.js
View file

@ -1,51 +1,51 @@
import React from 'react' import React from "react";
import CardItem from './CardItem' import CardItem from "./CardItem";
import './Cards.css' import "./Cards.css";
function Cards() { function Cards() {
return ( return (
<div className='cards'> <div className="cards">
<h1>Check out these EPIC Destinations</h1> <h1>Check out these EPIC Destinations</h1>
<div className="cards__container"> <div className="cards__container">
<div className="cards__wrapper"> <div className="cards__wrapper">
<ul className="cards__items"> <ul className="cards__items">
<CardItem <CardItem
src="/images/img-4.jpg" src="/images/img-4.jpg"
text="Explore the hidden waterfall deep inside the Amazon Jungle" text="Explore the hidden waterfall deep inside the Amazon Jungle"
label="Adventure" label="Adventure"
path="/services" path="/services"
/> />
<CardItem <CardItem
src="/images/img-4.jpg" src="/images/img-4.jpg"
text="Travel through the Islands of Bali in a Private Cruise" text="Travel through the Islands of Bali in a Private Cruise"
label="Luxury" label="Luxury"
path="/services" path="/services"
/> />
</ul> </ul>
<ul className="cards__items"> <ul className="cards__items">
<CardItem <CardItem
src="/images/img-4.jpg" src="/images/img-4.jpg"
text="Explore the hidden waterfall deep inside the Amazon Jungle" text="Explore the hidden waterfall deep inside the Amazon Jungle"
label="Adventure" label="Adventure"
path="/services" path="/services"
/> />
<CardItem <CardItem
src="/images/img-4.jpg" src="/images/img-4.jpg"
text="Travel through the Islands of Bali in a Private Cruise" text="Travel through the Islands of Bali in a Private Cruise"
label="Luxury" label="Luxury"
path="/services" path="/services"
/> />
<CardItem <CardItem
src="/images/img-4.jpg" src="/images/img-4.jpg"
text="Travel through the Islands of Bali in a Private Cruise" text="Travel through the Islands of Bali in a Private Cruise"
label="Luxury" label="Luxury"
path="/services" path="/services"
/> />
</ul> </ul>
</div>
</div>
</div> </div>
) </div>
</div>
);
} }
export default Cards export default Cards;

55
frontend/src/components/HeroSection.js
View file

@ -1,32 +1,31 @@
import React from 'react'; import React from "react";
import '../App.css'; import "../App.css";
import { Button } from './Button'; import { Button } from "./Button";
import './HeroSection.css'; import "./HeroSection.css";
import '@fortawesome/fontawesome-free/css/all.css' import "@fortawesome/fontawesome-free/css/all.css";
function HeroSection() { function HeroSection() {
return ( return (
<div className='hero-container'> <div className="hero-container">
<h1>ADVENTURE wartet</h1> <h1>Herzlich Willkommen</h1>
<p>What are you waiting for?</p> <div className="hero-btns">
<div className="hero-btns"> <Button
<Button className="btns"
className='btns' buttonStyle="btn--outline"
buttonStyle='btn--outline' buttonSize="btn--large"
buttonSize='btn--large' >
> GET STARTED
GET STARTED </Button>
</Button> <Button
<Button className="btns"
className='btns' buttonStyle="btn--primary"
buttonStyle='btn--primary' buttonSize="btn--large"
buttonSize='btn--large' >
> WATCH TRAILER <i className="far fa-play-circle" />
WATCH TRAILER <i className='far fa-play-circle' /> </Button>
</Button> </div>
</div> </div>
</div> );
)
} }
export default HeroSection export default HeroSection;

48
frontend/src/components/Navbar.js
View file

@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react";
import { Button } from './Button'; import { Button } from "./Button";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import './Navbar.css'; import "./Navbar.css";
import '@fortawesome/fontawesome-free/css/all.css' import "@fortawesome/fontawesome-free/css/all.css";
function Navbar() { function Navbar() {
const [click, setClick] = useState(false); const [click, setClick] = useState(false);
@ -24,38 +24,38 @@ function Navbar() {
showButton(); showButton();
}, []); }, []);
window.addEventListener('resize', showButton); window.addEventListener("resize", showButton);
return ( return (
<> <>
<nav className='navbar'> <nav className="navbar">
<div className='navbar-container'> <div className="navbar-container">
<Link to='/' className='navbar-logo' onClick={closeMobileMenu}> <Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
TRVL TRVL
<i class='fab fa-typo3' /> <i class="fab fa-typo3" />
</Link> </Link>
<div className='menu-icon' onClick={handleClick}> <div className="menu-icon" onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'} /> <i className={click ? "fas fa-times" : "fas fa-bars"} />
</div> </div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}> <ul className={click ? "nav-menu active" : "nav-menu"}>
<li className='nav-item'> <li className="nav-item">
<Link to='/' className='nav-links' onClick={closeMobileMenu}> <Link to="/" className="nav-links" onClick={closeMobileMenu}>
Home Home
</Link> </Link>
</li> </li>
<li className='nav-item'> <li className="nav-item">
<Link <Link
to='/services' to="/services"
className='nav-links' className="nav-links"
onClick={closeMobileMenu} onClick={closeMobileMenu}
> >
Services Services
</Link> </Link>
</li> </li>
<li className='nav-item'> <li className="nav-item">
<Link <Link
to='/products' to="/products"
className='nav-links' className="nav-links"
onClick={closeMobileMenu} onClick={closeMobileMenu}
> >
Products Products
@ -64,15 +64,15 @@ function Navbar() {
<li> <li>
<Link <Link
to='/sign-up' to="/sign-up"
className='nav-links-mobile' className="nav-links-mobile"
onClick={closeMobileMenu} onClick={closeMobileMenu}
> >
Sign Up Sign Up
</Link> </Link>
</li> </li>
</ul> </ul>
{button && <Button buttonStyle='btn--outline'>SIGN UP</Button>} {button && <Button buttonStyle="btn--outline">SIGN UP</Button>}
</div> </div>
</nav> </nav>
</> </>

24
frontend/src/components/pages/Home.js
View file

@ -1,17 +1,17 @@
import React from 'react'; import React from "react";
import '../../App.css' import "../../App.css";
import HeroSection from '../HeroSection' import HeroSection from "../HeroSection";
import Cards from '../Cards' import Cards from "../Cards";
import Footer from '../../Footer'; import Footer from "../../Footer";
function Home() { function Home() {
return ( return (
<> <>
<HeroSection /> <HeroSection />
<Cards /> <Cards />
<Footer /> <Footer />
</> </>
) );
} }
export default Home; export default Home;

14
frontend/src/components/pages/Products.js
View file

@ -1,8 +1,12 @@
import React from 'react' import React from "react";
import '../../App.css' import "../../App.css";
import Footer from "../../Footer";
export default function Products() { export default function Products() {
return ( return (
<h1 className='products'>PRODUCTS</h1> <>
); <h1 className="products">PRODUCTS</h1>
<Footer />
</>
);
} }

12
frontend/src/components/pages/Services.js
View file

@ -1,6 +1,12 @@
import React from 'react' import React from "react";
import '../../App.css' import "../../App.css";
import Footer from "../../Footer";
export default function Services() { export default function Services() {
return <h1 className="services">SERVICES</h1>; return (
<>
<h1 className="services">SERVICES</h1>
<Footer />
</>
);
} }

12
frontend/src/components/pages/SignUp.js
View file

@ -1,6 +1,12 @@
import React from 'react' import React from "react";
import '../../App.css' import "../../App.css";
import Footer from "../../Footer";
export default function SignUp() { export default function SignUp() {
return <h1 className="sign-up">SIGN UP</h1>; return (
<>
<h1 className="sign-up">SIGN UP</h1>
<Footer />
</>
);
} }

11
frontend/src/index.js
View file

@ -1,8 +1,5 @@
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom'; import ReactDOM from "react-dom";
import App from './App'; import App from "./App";
ReactDOM.render( ReactDOM.render(<App />, document.getElementById("root"));
<App />,
document.getElementById('root')
);