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

Merge pull request 'Frontend/Css Things' (#46) from frontend/css-things into main

Browse source
This commit is contained in:
cami 2021-06-23 01:17:22 +00:00
commit b9fea5455a
11 changed files with 48 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/App.css
View file

@ -7,8 +7,10 @@
:root {
--primary: rgb(41, 63, 87);
--primary-contr: rgb(9, 11, 46);
--secondary: rgb(218,218,218);
--third: rgb(171, 183, 183);
--forth: rgb(255,255,255);
}
.home,
@ -37,7 +39,7 @@
color: var(--primary);
}
.sitePage h1 {
h1 {
font-size: 5em;
margin: 0.7em auto;
}
@ -48,7 +50,7 @@
}
.sitePage p {
font-size: 2em;
font-size: 1.5em;
max-width: 60%;
margin-bottom: 4vh;
}

19
frontend/src/Footer.css
View file

@ -1,5 +1,5 @@
.footer-container {
background-color: rgb(41, 63, 87);
background-color: var(--primary);
padding: 4rem 0 2rem 0;
display: flex;
flex-direction: column;
@ -15,7 +15,7 @@
text-align: center;
margin-bottom: 24px;
padding: 24px;
color: #fff;
color: var(--secondary);
}
.footer-subscription > p {
@ -41,7 +41,7 @@
border: none;
font-size: 18px;
margin-bottom: 16px;
border: 1px solid #fff;
border: 1px solid var(--secondary);
}
.footer-links {
@ -70,11 +70,11 @@
}
.footer-link-items > h2 {
color: #fff;
color: var(--secondary);
}
.footer-link-items a {
color: #fff;
color: var(--secondary);
text-decoration: none;
margin-bottom: 8px;
}
@ -94,7 +94,7 @@
/* Social Icons */
.social-icon-link {
color: #fff;
color: var(--forth);
font-size: 24px;
}
@ -120,7 +120,7 @@
}
.social-logo {
color: #fff;
color: var(--forth);
justify-self: start;
margin-left: 20px;
cursor: pointer;
@ -131,11 +131,6 @@
margin-bottom: 16px;
}
.website-rights {
color: #fff;
margin-bottom: 16px;
}
@media screen and (max-width: 820px) {
.footer-links {
padding-top: 2rem;

1
frontend/src/auth/PrivateRoute.js
View file

@ -1,4 +1,3 @@
import { Component } from "react";
import { Redirect, Route } from "react-router-dom";
import { useAuth } from "./AuthProvider";

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

@ -2,7 +2,6 @@ import React from "react";
import "./Button.css";
import { Link } from "react-router-dom";
const newTo = (props) => "#";
const STYLES = ["btn--primary", "btn--outline"];

20
frontend/src/components/Input.css
View file

@ -2,10 +2,26 @@
width: auto;
}
.input-field p{
font-size: 36px;
.input-field p {
font-size: 1.5em;
}
.input-field input {
width: 100%;
border-color: var(--primary);
background-color: var(--secondary);
padding: 0.25em 0.5em;
border: 3px solid var(--primary);
border-radius: 10.5em;
}
.input-field input[type="submit"] {
margin-top: 1em;
border-radius: 10.5em;
background-color: var(--primary);
color: var(--secondary);
}
.input-field input[type="submit"]:hover {
background-color: var(--primary-contr);
}

2
frontend/src/components/InputField.js
View file

@ -5,7 +5,7 @@ function InputField(props) {
return (
<label className="input-field">
<p>{props.LabelName}</p>
<input name={props.InputName} onChange={props.onChange} type={props.InputType} />
<input name={props.InputName} onChange={props.onChange} type={props.InputType} placeholder={props.InputPlaceHolder}/>
</label>
);
}

13
frontend/src/components/Navbar.css
View file

@ -29,11 +29,6 @@
align-items: center;
}
.fa-typo3 {
margin-left: 0.5rem;
font-size: 1.8rem;
}
.nav-menu {
display: grid;
grid-template-columns: repeat(4, auto);
@ -59,14 +54,10 @@
}
.nav-links:hover {
border-bottom: 4px solid var(--secondary);
border-bottom: 4px dotted var(--secondary);
transition: all 0.2s ease-out;
}
.fa-bars {
color: var(--secondary);
}
.nav-links-mobile {
display: none;
}
@ -109,7 +100,7 @@
.nav-links:hover {
background-color: var(--secondary);
color: #000;
color: var(--primary);
border-radius: 0;
}

2
frontend/src/components/SubmitField.js
View file

@ -5,7 +5,7 @@ import "./Button.css"
function SubmitField(props) {
const InputValue = props.LabelName;
return (
<label className="input-field" className="btn btn--primary btn--medium">
<label className="input-field">
<input type="submit" onClick={props.onClick} value={InputValue} />
</label>
);

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

@ -1,10 +1,10 @@
import React from "react";
import { useState, useEffect } from "react/cjs/react.development";
import { useState } from "react/cjs/react.development";
import "../../App.css";
import Footer from "../../Footer";
import InputField from "../InputField";
import SubmitField from "../SubmitField";
import { login, authFetch, useAuth, logout } from "../../auth/AuthProvider";
import { login, useAuth, logout } from "../../auth/AuthProvider";
import Secret from "./Secret";
export default function Login() {
@ -49,23 +49,25 @@ export default function Login() {
{!logged ? (
<form action="#">
<InputField
LabelName="Benutzername / Kennung"
LabelName="Benutzername"
onChange={handleUsernameChange}
InputType="text"
InputName="username"
InputPlaceHolder="Benutzername"
/>
<InputField
LabelName="Passwort"
InputType="password"
onChange={handlePasswordChange}
InputName="password"
InputPlaceHolder="Passwort"
/>
<br />
<SubmitField onClick={onSubmitClick} LabelName="Einloggen" />
</form>
) : (
<>
<Secret/>
<Secret />
<button onClick={() => logout()}>Logout</button>
</>
)}

4
frontend/src/components/pages/Manual.js
View file

@ -1,10 +1,8 @@
import React, {useState, useEffect} from "react";
import React from "react";
import "../../App.css";
import Footer from "../../Footer";
export default function Manual() {
const [currentTime, setCurrentTime] = useState(0);
return (
<>
<div className="sitePage">

2
frontend/src/components/pages/Register.js
View file

@ -36,7 +36,7 @@ export default function Login() {
<h1>Registrierung</h1>
<form>
<InputField
LabelName="Benutzername / Kennung"
LabelName="Benutzername"
InputType="text"
onChange={handleUsernameChange}
InputName="username"