added refresh and edit button
This commit is contained in:
13
src/App.js
13
src/App.js
@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
|
|||||||
import NewPostForm from './components/NewPostForm';
|
import NewPostForm from './components/NewPostForm';
|
||||||
import './App.scss';
|
import './App.scss';
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||||
import {faTimes} from "@fortawesome/free-solid-svg-icons";
|
import {faPenToSquare, faRotate, faTimes} from "@fortawesome/free-solid-svg-icons";
|
||||||
import {postApi} from "./api/posts.api";
|
import {postApi} from "./api/posts.api";
|
||||||
import {locationUtils} from "./utils/location";
|
import {locationUtils} from "./utils/location";
|
||||||
import Post from "./components/Post";
|
import Post from "./components/Post";
|
||||||
@@ -62,10 +62,17 @@ const App = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app">
|
<div className="app">
|
||||||
|
<div className="nav-bar">
|
||||||
|
<button className="nav-button" onClick={() => reload()}>
|
||||||
|
<FontAwesomeIcon className={"close-button"} icon={faRotate}/>
|
||||||
|
</button>
|
||||||
|
<button className="nav-button nav-space" onClick={() => keycloak.accountManagement()}>
|
||||||
|
<FontAwesomeIcon className={"close-button"} icon={faPenToSquare}/>
|
||||||
|
</button>
|
||||||
<button className="logout" onClick={() => keycloak.logout()}>Logout</button>
|
<button className="logout" onClick={() => keycloak.logout()}>Logout</button>
|
||||||
|
</div>
|
||||||
<h1>SWA - Jodel</h1>
|
<h1>SWA - Jodel</h1>
|
||||||
|
<div style={{height: selectedPost ? 0 : "auto", overflowY: "hidden"}}>
|
||||||
<div style={{height: selectedPost?0:"auto", overflowY: "hidden"}}>
|
|
||||||
<NewPostForm addPost={addPost}/>
|
<NewPostForm addPost={addPost}/>
|
||||||
{posts.map(post => <Post key={post.id} post={post} recursionDepth={5} selectPost={selectPost} reload={reload} />)}
|
{posts.map(post => <Post key={post.id} post={post} recursionDepth={5} selectPost={selectPost} reload={reload} />)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
25
src/App.scss
25
src/App.scss
@@ -267,11 +267,26 @@ button {
|
|||||||
color: #ff9908;
|
color: #ff9908;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logout {
|
|
||||||
margin-left: 75%;
|
|
||||||
width: 25%
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-bar {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
height: 3em;
|
||||||
|
width: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-space {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
width: 25%
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user