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

Solution added page prepared.

Browse Source
This commit is contained in:
FilipHalon 2020-01-20 02:06:25 +01:00
parent 23edf46820
commit 830c9cbf05
4 changed files with 120 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pages/components/ActiveTask.js
View File

@ -1,6 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTasks } from '@fortawesome/free-solid-svg-icons';
import ActiveTasks from './ActiveTasks';
const ActiveTask = () => {
return (

46
pages/components/SolutionAdded.js Normal file
View File

@ -0,0 +1,46 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLightbulb, faCheck, faLongArrowAltRight, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
const SolutionAdd = () => {
return (
<section className="task-description">
<div className="task-description">
<div className="task-general-info">
<div>
<h2>Implementacja algorytmu sortowania</h2>
<h2>Uniwersytet im. Adama Mickiewicza</h2>
</div>
<div>
<img src="/UAM-logo-siw-amu.jpg" alt="" />
</div>
</div>
<div className="task-border">
<div className="task-description-heading">
<FontAwesomeIcon icon={faLightbulb} />
<span>Zgłaszanie rozwiązania</span>
</div>
<div className="solution-add-area">
<div className="solution-add-message">
<div className="solution-add-message-top">
<div><FontAwesomeIcon icon={faLightbulb} /></div>
<div>
<span>Twoje rozwiązanie trafiło do skrzynki Microsoft Polska Inc.</span>
<span><FontAwesomeIcon icon={faLongArrowAltRight} /> Wysłanych rozwiązań: 1</span>
</div>
</div>
<div className="solution-add-message-bottom">
<button><FontAwesomeIcon icon={faPaperPlane} /> Wyślij wiadomość</button>
</div>
</div>
<div className="solution-add-status">
<FontAwesomeIcon icon={faCheck} />
<span> Rozwiązanie wysłano pomyślnie</span>
</div>
</div>
</div>
</div>
</section>
)
};
export default SolutionAdd;

14
pages/solution-added.js Normal file
View File

@ -0,0 +1,14 @@
import Sidebar from "./components/Sidebar";
import SolutionAdd from "./components/SolutionAdded";
const SolutionAddedPage = () => {
return(
<main className="solution-add">
<Sidebar />
<SolutionAdd />
</main>
)
};
export default SolutionAddedPage;

60
style.css
View File

@ -514,3 +514,63 @@ div.task-description {
grid: auto / 1fr 1fr;
grid-gap: 2em;
}
/* solution add */
main.solution-add .task-description {
width: 90%;
height: 100%;
}
.solution-add-area {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 400px;
}
.solution-add-message {
margin: 2rem 4rem;
}
.solution-add-message-top {
display: flex;
background: #4457F3;
color: #FFF;
}
.solution-add-message-top div {
padding: .6rem;
}
.solution-add-message-top > div:last-of-type {
display: flex;
flex-direction: column;
}
.solution-add-message-top > div:last-of-type span {
padding: .3rem;
}
.solution-add-message-bottom {
background: #212844;
}
.solution-add-message-bottom button {
padding: .2rem;
margin: .5rem 1.5rem;
border: 1px solid #838DAC;
border-radius: 4px;
background: #212844;
color: #838DAC;
}
.solution-add-status {
align-self: center;
padding: .6rem;
margin: 1.5rem;
border-radius: 4px;
background: #4457F3;
color: #FFF;
text-align: center;
}