Tasks page styled.

2020-01-19 20:09:02 +01:00 · 2020-01-19 20:09:02 +01:00 · 2563edef07
parent 07c8c92f0a
commit 2563edef07
6 changed files with 269 additions and 49 deletions
--- a/pages/_document.js
+++ b/pages/_document.js
@ -9,7 +9,9 @@ class MyDocument extends Document {
  render() {
    return (
      <Html>
-        <Head />
+        <Head>
+          <link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap&subset=latin-ext" rel="stylesheet" />
+        </Head>
        <body>
          <Main />
          <NextScript />
--- a/pages/components/RecentTask.js
+++ b/pages/components/RecentTask.js
@ -4,11 +4,13 @@ import { faTasks, faCloud } from '@fortawesome/free-solid-svg-icons';

 const RecentTask = () => {
    return (
-        <div>
-            <FontAwesomeIcon icon={faTasks} />
-            <span>Sortowanie bąbelkowe</span>
-            <span>Napisać algorytm sortowania bąbelkowego z implementacją…</span>
-            <FontAwesomeIcon icon={faCloud} />
+        <div className="recent-task">
+            <span><FontAwesomeIcon icon={faTasks} /></span>
+            <span className="recent-task-description">
+                <span>Sortowanie bąbelkowe</span>
+                <span>Napisać algorytm sortowania bąbelkowego z implementacją…</span>
+            </span>
+            <span><FontAwesomeIcon icon={faCloud} /></span>
        </div>
    )
 }
--- a/pages/components/Sidebar.js
+++ b/pages/components/Sidebar.js
@ -5,15 +5,17 @@ import RecentTask from './RecentTask';
 const Sidebar = () => {
    return (
        <section className="sidebar">
-            <div>
+            <div className="search-area">
                <FontAwesomeIcon icon={faSearch} />
                <input type="text" placeholder="Wyszukaj"/>
            </div>
-            <div>
-                Ostatnie zadania
+            <div className="recent-task-list">
+                <div>Ostatnie zadania</div>
+                <ul>
+                    <li><RecentTask /></li>
+                    <li><RecentTask /></li>
+                </ul>
            </div>
-            <RecentTask />
-            <RecentTask />
        </section>
    )
 }
--- a/pages/components/TaskDescription.js
+++ b/pages/components/TaskDescription.js
@ -1,38 +1,58 @@
 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 = () => {
    return (
-        <section>
-            <div>
-               <FontAwesomeIcon icon={faLightbulb} />
-               <span>Opis zadania</span>
-               {/* <div>
-                   <span><FontAwesomeIcon icon={faCommentAlt} /></span>
-                   <span>100%</span>
-               </div>
-               <div>
-                   <span><FontAwesomeIcon icon={faThumbsUp} /></span>
-                   <span>1000</span>
-               </div> */}
-            </div>
-            <div>
-                {/* <div>
-                    <span>Limit pamięci</span>
-                    <span>1024 MB</span>
-                </div> */}
-                <span>Dowolny język programowania</span>
-            </div>
-            <div>
-                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>
-                <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ż . 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>
+        <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>Opis zadania</span>
+                    {/* <div>
+                        <span><FontAwesomeIcon icon={faCommentAlt} /></span>
+                        <span>100%</span>
+                    </div>
+                    <div>
+                        <span><FontAwesomeIcon icon={faThumbsUp} /></span>
+                        <span>1000</span>
+                    </div> */}
+                    </div>
+                    <div className="programming-languages">
+                        {/* <div>
+                            <span>Limit pamięci</span>
+                            <span>1024 MB</span>
+                        </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>
        </section>
--- a/public/UAM-logo-siw-amu.jpg
+++ b/public/UAM-logo-siw-amu.jpg
--- a/style.css
+++ b/style.css
@ -1,9 +1,11 @@
 :root {
    --navbar-text-color: #B5BDFB;
+    --sidebar-border: 1px solid #E6EBF1;
 }

 * {
-    font-family: sans-serif;
+    font-family: 'Oswald', sans-serif;
+    letter-spacing: .05em;
 }

 html {
@ -15,10 +17,6 @@ body {
    height: 100%;
 }

-/* body div:first-child {
-    height: 100%;
-} */
-
 #__next,
 .root-container {
    height: 100%;
@ -28,7 +26,9 @@ body {

 header {
    width: 100%;
-    position: fixed;
+    /* position: fixed; */
+    position: sticky;
+    top: 0;
 }

 nav ul {
@ -235,8 +235,202 @@ form button:last-of-type {

 main {
    display: flex;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background: #E6EBF1;
+
 }

-.sidebar {
-    position: absolute;
+div.task-description {
+    /* 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;
 }