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

Tasks page styled.

Browse Source
This commit is contained in:
FilipHalon 2020-01-19 20:09:02 +01:00
parent 07c8c92f0a
commit 2563edef07
6 changed files with 269 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/_document.js
View File

@ -9,7 +9,9 @@ class MyDocument extends Document {
render() { render() {
return ( return (
<Html> <Html>
<Head /> <Head>
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap&subset=latin-ext" rel="stylesheet" />
</Head>
<body> <body>
<Main /> <Main />
<NextScript /> <NextScript />

12
pages/components/RecentTask.js
View File

@ -4,11 +4,13 @@ import { faTasks, faCloud } from '@fortawesome/free-solid-svg-icons';
const RecentTask = () => { const RecentTask = () => {
return ( return (
<div> <div className="recent-task">
<FontAwesomeIcon icon={faTasks} /> <span><FontAwesomeIcon icon={faTasks} /></span>
<span>Sortowanie bąbelkowe</span> <span className="recent-task-description">
<span>Napisać algorytm sortowania bąbelkowego z implementacją…</span> <span>Sortowanie bąbelkowe</span>
<FontAwesomeIcon icon={faCloud} /> <span>Napisać algorytm sortowania bąbelkowego z implementacją…</span>
</span>
<span><FontAwesomeIcon icon={faCloud} /></span>
</div> </div>
) )
} }

12
pages/components/Sidebar.js
View File

@ -5,15 +5,17 @@ import RecentTask from './RecentTask';
const Sidebar = () => { const Sidebar = () => {
return ( return (
<section className="sidebar"> <section className="sidebar">
<div> <div className="search-area">
<FontAwesomeIcon icon={faSearch} /> <FontAwesomeIcon icon={faSearch} />
<input type="text" placeholder="Wyszukaj"/> <input type="text" placeholder="Wyszukaj"/>
</div> </div>
<div> <div className="recent-task-list">
Ostatnie zadania <div>Ostatnie zadania</div>
<ul>
<li><RecentTask /></li>
<li><RecentTask /></li>
</ul>
</div> </div>
<RecentTask />
<RecentTask />
</section> </section>
) )
} }

80
pages/components/TaskDescription.js
View File

@ -1,38 +1,58 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLightbulb, faCommentAlt, faThumbsUp } from '@fortawesome/free-solid-svg-icons'; import { faLightbulb, faCommentAlt, faThumbsUp, faCloudUploadAlt, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
const TaskDescription = () => { const TaskDescription = () => {
return ( return (
<section> <section className="task-description">
<div> <div className="task-description">
<FontAwesomeIcon icon={faLightbulb} /> <div className="task-general-info">
<span>Opis zadania</span> <div>
{/* <div> <h2>Implementacja algorytmu sortowania</h2>
<span><FontAwesomeIcon icon={faCommentAlt} /></span> <h2>Uniwersytet im. Adama Mickiewicza</h2>
<span>100%</span> </div>
</div> <div>
<div> <img src="/UAM-logo-siw-amu.jpg" alt="" />
<span><FontAwesomeIcon icon={faThumbsUp} /></span> </div>
<span>1000</span> </div>
</div> */} <div className="task-border">
</div> <div className="task-description-heading">
<div> <FontAwesomeIcon icon={faLightbulb} />
{/* <div> <span>Opis zadania</span>
<span>Limit pamięci</span> {/* <div>
<span>1024 MB</span> <span><FontAwesomeIcon icon={faCommentAlt} /></span>
</div> */} <span>100%</span>
<span>Dowolny język programowania</span> </div>
</div> <div>
<div> <span><FontAwesomeIcon icon={faThumbsUp} /></span>
Twoim zadaniem będzie posortowanie ciągu liczb całkowitych. Jednakże nie podajemy ograniczenia na liczbę elementów tego ciągu. Napisz program, który będzie wczytywał liczby ze standardowego wejścia, tak długo, aż wczytaną liczbą będzie 0 oraz wypisze wszystkie wczytane liczby w porządku niemalejącym. <span>1000</span>
</div> </div> */}
<div> </div>
<h2>Szczegóły zadania</h2> <div className="programming-languages">
<div> {/* <div>
<p>Napisz program, który: wczyta ze standardowego ciąg liczb całkowitych nieujemnych zakończony liczbą 0, wypisze wszystkie wszystkie liczby z tego ciągu (wraz z końcowym zerem) w porządku niemalejącym.</p> <span>Limit pamięci</span>
<p>Wejście zawiera pewną ilość liczb całkowitych nieujemnych, nie większych niż . Każda z tych liczb zapisana będzie w osobnym wierszu. W ostatnim wierszu zapisana będzie liczba 0. Możesz założyć, że liczba 0 nie pojawi się nigdzie wcześniej wśród podanych elementów.</p> <span>1024 MB</span>
<p>Wyjście Twojego programu powinno stanowić dokładnie tyle samo wierszy, ile liczb było na standardowym wejściu. Liczby te muszą być wypisane w porządku niemalejącym.</p> </div> */}
<span>Dowolny język programowania</span>
</div>
<div className="task-description-summary">
Twoim zadaniem będzie posortowanie ciągu liczb całkowitych. Jednakże nie podajemy ograniczenia na liczbę elementów tego ciągu. Napisz program, który będzie wczytywał liczby ze standardowego wejścia, tak długo, aż wczytaną liczbą będzie 0 oraz wypisze wszystkie wczytane liczby w porządku niemalejącym.
</div>
<div className="actions">
<span>Możliwe akcje</span>
<span>
<FontAwesomeIcon icon={faCloudUploadAlt} />
<FontAwesomeIcon icon={faPaperPlane} />
</span>
</div>
<div className="task-description-details">
<h2>Szczegóły zadania</h2>
<div>
<p>Napisz program, który: wczyta ze standardowego ciąg liczb całkowitych nieujemnych zakończony liczbą 0, wypisze wszystkie wszystkie liczby z tego ciągu (wraz z końcowym zerem) w porządku niemalejącym.</p>
<p>Wejście zawiera pewną ilość liczb całkowitych nieujemnych, nie większych niż 10. Każda z tych liczb zapisana będzie w osobnym wierszu. W ostatnim wierszu zapisana będzie liczba 0. Możesz założyć, że liczba 0 nie pojawi się nigdzie wcześniej wśród podanych elementów.</p>
<p>Wyjście Twojego programu powinno stanowić dokładnie tyle samo wierszy, ile liczb było na standardowym wejściu. Liczby te muszą być wypisane w porządku niemalejącym.</p>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>

BIN
public/UAM-logo-siw-amu.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 331 KiB

210
style.css
View File

@ -1,9 +1,11 @@
:root { :root {
--navbar-text-color: #B5BDFB; --navbar-text-color: #B5BDFB;
--sidebar-border: 1px solid #E6EBF1;
} }
* { * {
font-family: sans-serif; font-family: 'Oswald', sans-serif;
letter-spacing: .05em;
} }
html { html {
@ -15,10 +17,6 @@ body {
height: 100%; height: 100%;
} }
/* body div:first-child {
height: 100%;
} */
#__next, #__next,
.root-container { .root-container {
height: 100%; height: 100%;
@ -28,7 +26,9 @@ body {
header { header {
width: 100%; width: 100%;
position: fixed; /* position: fixed; */
position: sticky;
top: 0;
} }
nav ul { nav ul {
@ -235,8 +235,202 @@ form button:last-of-type {
main { main {
display: flex; display: flex;
margin: 0;
padding: 0;
height: 100%;
background: #E6EBF1;
} }
.sidebar { div.task-description {
position: absolute; /* position: absolute;
left: 350px; */
display: flex;
flex-direction: column;
width: 100%;
max-width: 900px;
margin: 10%;
line-height: 1.2em;
}
.task-general-info {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 900px;
}
.task-general-info > div:first-of-type {
display: flex;
flex-direction: column;
}
.task-general-info h2:first-of-type {
font-size: 120%;
}
.task-general-info h2:last-of-type {
margin-top: 0;
color: #838EAB;
}
.task-general-info img {
width: 4rem;
}
.task-border {
background: #FFF;
border-radius: 4px;
}
.task-description-heading {
display: flex;
height: 2.5rem;
align-items: center;
border-bottom: var(--sidebar-border);
}
.task-description-heading svg {
padding: 15px;
font-size: 120%;
color: #838DAC;
}
.programming-languages {
display: flex;
align-items: center;
justify-content: flex-end;
height: 3.5rem;
padding-right: 15px;
font-size: 90%;
border-bottom: var(--sidebar-border);
}
.programming-languages span {
padding: 1%;
border-radius: 10px;
background: #D7D0F0;
color: #5D47AA;
}
.task-description-summary,
.task-description-details {
padding: 15px;
}
.task-description-summary {
background: #F6F9FD;
}
.actions {
align-self: center;
justify-self: center;
display: flex;
height: 3.5rem;
width: 30%;
padding: 2rem;
border-radius: 4px;
}
.actions span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
box-shadow: 0px 7px 14px #32325D1A;
border-radius: 4px;
}
.actions span:first-of-type {
background: #465DEF;
color: #FFF;
}
.actions svg {
padding: 15px;
color: #838DAC;
}
.task-description h2 {
font-size: 100%;
}
/* sidebar */
.sidebar {
/* position: absolute; */
width: 500px;
height: 100%;
border: var(--sidebar-border);
background: #F6F9FC;
}
.sidebar > div {
background: #FFF;
}
.search-area {
display: flex;
align-items: center;
height: 3.5rem;
border-bottom: var(--sidebar-border);
}
.search-area svg {
padding-right: 15px;
}
.search-area input {
border: none;
}
.recent-task-list > div {
/* position: relative; */
display: flex;
align-items: center;
width: 100%;
height: 2.5rem;
border-bottom: var(--sidebar-border);
}
.recent-task-list > ul {
/* position: absolute; */
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
}
.recent-task-list > ul li {
display: block;
padding: 10px 10px 10px 15px;
border-bottom: var(--sidebar-border);
}
.search-area,
.recent-task-list > div {
padding-left: 15px;
}
/* recent task */
.recent-task {
display: flex;
font-size: 90%;
}
.recent-task span {
padding: 3px;
}
.recent-task-description {
display: flex;
flex-direction: column;
}
.recent-task > span:last-of-type {
align-self: center;
color: #838EAB;
} }