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

Refactoring because of local scripts and tabs #9

Merged
cami merged 1 commit from refactor/code_externalthings into main 2021-05-27 01:08:42 +00:00
Conversation 0 Commits 1 Files changed 14 +393 -380
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 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,10 +13,10 @@ function App() {
<Router>
<Navbar />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/services' component={Services} />
<Route path='/products' component={Products} />
<Route path='sign-up' component={SignUp} />
<Route path="/" exact component={Home} />
<Route path="/services" component={Services} />
<Route path="/products" component={Products} />
<Route path="/sign-up" component={SignUp} />
</Switch>
</Router>
</>

19
frontend/src/Footer.js
View file

@ -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 (
@ -67,28 +67,31 @@ function Footer() {
<section className="social-media">
<div className="social-media-wrap">
<div className="footer-logo">
<Link to='/' className="social-logo">
<Link to="/" className="social-logo">
TRVL <i className="fab fa-typo3"></i>
</Link>
</div>
<small className="website-rights">TRVL © 2</small>
<div className="social-icons">
<Link className="social-icon-link facebook"
to='/'
<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='/'
<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='/'
<Link
className="social-icon-link linkedin"
to="/"
target="_blank"
aria-label="LinkedIn"
>

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

@ -41,4 +41,3 @@
color: #242424;
transition: 250ms;
}

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

@ -1,16 +1,16 @@
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
buttonSize,
}) => {
const checkButtonStyle = STYLES.includes(buttonStyle)
? buttonStyle
@ -19,7 +19,7 @@ export const Button = ({
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
return (
<Link to='sign-up' className='btn-mobile'>
<Link to="sign-up" className="btn-mobile">
<button
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onClick}

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

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

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

@ -116,4 +116,3 @@
margin-bottom: 2rem;
}
}

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

@ -1,10 +1,10 @@
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 (
<div className='cards'>
<div className="cards">
<h1>Check out these EPIC Destinations</h1>
<div className="cards__container">
<div className="cards__wrapper">
@ -45,7 +45,7 @@ function Cards() {
</div>
</div>
</div>
)
);
}
export default Cards
export default Cards;

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

@ -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 (
<div className='hero-container'>
<h1>ADVENTURE wartet</h1>
<p>What are you waiting for?</p>
<div className="hero-container">
<h1>Herzlich Willkommen</h1>
<div className="hero-btns">
<Button
className='btns'
buttonStyle='btn--outline'
buttonSize='btn--large'
className="btns"
buttonStyle="btn--outline"
buttonSize="btn--large"
>
GET STARTED
</Button>
<Button
className='btns'
buttonStyle='btn--primary'
buttonSize='btn--large'
className="btns"
buttonStyle="btn--primary"
buttonSize="btn--large"
>
WATCH TRAILER <i className='far fa-play-circle' />
WATCH TRAILER <i className="far fa-play-circle" />
</Button>
</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 { 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 (
<>
<nav className='navbar'>
<div className='navbar-container'>
<Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
<nav className="navbar">
<div className="navbar-container">
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
TRVL
<i class='fab fa-typo3' />
<i class="fab fa-typo3" />
</Link>
<div className='menu-icon' onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'} />
<div className="menu-icon" onClick={handleClick}>
<i className={click ? "fas fa-times" : "fas fa-bars"} />
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className='nav-item'>
<Link to='/' className='nav-links' onClick={closeMobileMenu}>
<ul className={click ? "nav-menu active" : "nav-menu"}>
<li className="nav-item">
<Link to="/" className="nav-links" onClick={closeMobileMenu}>
Home
</Link>
</li>
<li className='nav-item'>
<li className="nav-item">
<Link
to='/services'
className='nav-links'
to="/services"
className="nav-links"
onClick={closeMobileMenu}
>
Services
</Link>
</li>
<li className='nav-item'>
<li className="nav-item">
<Link
to='/products'
className='nav-links'
to="/products"
className="nav-links"
onClick={closeMobileMenu}
>
Products
@ -64,15 +64,15 @@ function Navbar() {
<li>
<Link
to='/sign-up'
className='nav-links-mobile'
to="/sign-up"
className="nav-links-mobile"
onClick={closeMobileMenu}
>
Sign Up
</Link>
</li>
</ul>
{button && <Button buttonStyle='btn--outline'>SIGN UP</Button>}
{button && <Button buttonStyle="btn--outline">SIGN UP</Button>}
</div>
</nav>
</>

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

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

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

@ -1,8 +1,12 @@
import React from 'react'
import '../../App.css'
import React from "react";
import "../../App.css";
import Footer from "../../Footer";
export default function Products() {
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 '../../App.css'
import React from "react";
import "../../App.css";
import Footer from "../../Footer";
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 '../../App.css'
import React from "react";
import "../../App.css";
import Footer from "../../Footer";
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 ReactDOM from 'react-dom';
import App from './App';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<App />,
document.getElementById('root')
);
ReactDOM.render(<App />, document.getElementById("root"));