s412146/tasko-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

More links added.

Browse Source
This commit is contained in:
FilipHalon 2020-01-20 13:11:45 +01:00
parent 2bc3b6f3d9
commit bd02838d6a
5 changed files with 55 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pages/components/ActiveTask.js
View File

@ -1,3 +1,4 @@
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTasks, faPaperPlane } from '@fortawesome/free-solid-svg-icons'; import { faTasks, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
@ -32,7 +33,9 @@ const ActiveTask = props => {
} }
<div> <div>
<span>1 godzinę temu</span> <span>1 godzinę temu</span>
<span>Zobacz <FontAwesomeIcon icon={faTasks} /> </span> <Link href="/tasks">
<span className="task-link">Zobacz <FontAwesomeIcon icon={faTasks} /> </span>
</Link>
</div> </div>
</div> </div>
) )

13
pages/components/Header.js
View File

@ -2,7 +2,9 @@ import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCog, faTasks, faComments, faCommentDots, faUserPlus, faUser } from '@fortawesome/free-solid-svg-icons'; import { faCog, faTasks, faComments, faCommentDots, faUserPlus, faUser } from '@fortawesome/free-solid-svg-icons';
const Header = () => { const Header = props => {
const isLogged = props.isLogged === "logged";
return ( return (
<header> <header>
<nav> <nav>
@ -35,12 +37,19 @@ const Header = () => {
</li> </li>
</div> </div>
<div className="navbar-auth"> <div className="navbar-auth">
{isLogged ?
<li>
<Link href="/profile">
<a>User name</a>
</Link>
</li>:
<li> <li>
<Link href="/login"> <Link href="/login">
<a><FontAwesomeIcon icon={faUser} /> Zaloguj się</a> <a><FontAwesomeIcon icon={faUser} /> Zaloguj się</a>
</Link> </Link>
</li> </li>
<li> }
<li className={isLogged ? "hidden" : ""}>
<Link href="/register"> <Link href="/register">
<a><FontAwesomeIcon icon={faUserPlus} /> Zarejestruj się</a> <a><FontAwesomeIcon icon={faUserPlus} /> Zarejestruj się</a>
</Link> </Link>

23
pages/components/Profile.js
View File

@ -1,15 +1,30 @@
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTasks, faCloud, faSearch } from '@fortawesome/free-solid-svg-icons'; import { faTasks, faCloud, faSearch } from '@fortawesome/free-solid-svg-icons';
const Profile = props => { const Profile = props => {
const isDeveloperAccount = props.accountType === "developer"
return ( return (
<section className="task-description"> <section className="task-description">
<div className="task-description"> <div className="task-description">
<div className="task-area"> <div className="task-area">
<div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Przeglądaj zadania</span></div> <Link href="/active-tasks">
<div className="profile-action"><span><FontAwesomeIcon icon={faTasks} /></span><span>Dodaj zadanie</span></div> <div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Przeglądaj zadania</span></div>
<div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Zobacz rozwiązania</span></div> </Link>
<div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Zobacz wstawione zadania</span></div> {!isDeveloperAccount &&
<Link href="/new-task-add">
<div className="profile-action"><span><FontAwesomeIcon icon={faTasks} /></span><span>Dodaj zadanie</span></div>
</Link>
}
<Link href="/added-tasks">
<div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Zobacz rozwiązania</span></div>
</Link>
{!isDeveloperAccount &&
<Link href="/added-tasks">
<div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Zobacz wstawione zadania</span></div>
</Link>
}
</div> </div>
</div> </div>
</section> </section>

2
pages/profile.js
View File

@ -5,7 +5,7 @@ const ProfilePage = () => {
return ( return (
<main> <main>
<Sidebar/> <Sidebar/>
<Profile/> <Profile accountType=""/>
</main> </main>
) )
}; };

25
style.css
View File

@ -30,6 +30,10 @@ body {
height: 100%; height: 100%;
} }
.hidden {
display: none;
}
/* navbar */ /* navbar */
header { header {
@ -72,6 +76,11 @@ nav a {
font-size: 80%; font-size: 80%;
} }
nav a:hover {
background-color: #5D6CED;
color: #FFF;
}
@media (min-width: 400px) { @media (min-width: 400px) {
nav a { nav a {
font-size: 90%; font-size: 90%;
@ -86,11 +95,6 @@ nav img {
border: solid 1px rgba(255, 255, 255, .1); border: solid 1px rgba(255, 255, 255, .1);
} }
.navbar-auth li:last-of-type a:last-of-type {
background-color: #5D6CED;
color: #FFF;
}
/* footer */ /* footer */
footer { footer {
@ -541,7 +545,12 @@ div.task-description {
.active-task > div:last-of-type span:last-of-type { .active-task > div:last-of-type span:last-of-type {
border-radius: 4px; border-radius: 4px;
color: #FFF; color: #FFF;
background: var(--button-blue-hover);
}
.active-task > div:last-of-type span:last-of-type:hover {
background: var(--button-blue); background: var(--button-blue);
cursor: pointer;
} }
/* active tasks */ /* active tasks */
@ -601,6 +610,12 @@ div.solution-add-area {
border-radius: 4px; border-radius: 4px;
background: #212844; background: #212844;
color: #838DAC; color: #838DAC;
transition: .4s;
}
.solution-add-message-bottom button:hover {
background: #838DAC;
color: #212844;
} }
.solution-add-status { .solution-add-status {