From a9baae1e2fcafc970370a0f04bcba2f183665c26 Mon Sep 17 00:00:00 2001
From: rotimi_best <best@classroomio.com>
Date: Wed, 7 Apr 2021 09:33:04 +0300
Subject: [PATCH 1/2] Improve timetable visibility

---
 src/components/TimeTable/RowItem.svelte |  58 ++++++------
 src/components/TimeTable/index.svelte   | 115 +++++++++++-------------
 src/routes/timetable.svelte             |  53 ++++++++++-
 3 files changed, 138 insertions(+), 88 deletions(-)

diff --git a/src/components/TimeTable/RowItem.svelte b/src/components/TimeTable/RowItem.svelte
index 587343e5..30db76a3 100644
--- a/src/components/TimeTable/RowItem.svelte
+++ b/src/components/TimeTable/RowItem.svelte
@@ -1,4 +1,6 @@
 <script>
+  import Edit24 from "carbon-icons-svelte/lib/Edit24";
+  import Save24 from "carbon-icons-svelte/lib/Save24";
   import Input from "./Input.svelte";
 
   export let item, current;
@@ -9,31 +11,6 @@
   }
 </script>
 
-<div class="rowItem">
-  <div class="rowItemHeader">
-    <Input className="small" value={item.lessonType} {editing} />
-    <Input className="small alignRight" value={item.lectureHall} {editing} />
-  </div>
-
-  <div class="rowItemHeader">
-    <Input
-      className={`large ${current && "current"}`}
-      value={item.subject}
-      {editing}
-    />
-  </div>
-
-  <div class="rowItemHeader">
-    <div class="rowItemFooter" style="width: 70%">
-      <Input className="small" value={item.lecturerOne} {editing} />
-      <Input className="small" value={item.lecturerTwo} {editing} />
-    </div>
-    <button on:click={toggle}>
-      {!editing ? "✏️" : "💾"}
-    </button>
-  </div>
-</div>
-
 <style>
   .rowItem {
     border-right: 1px solid;
@@ -65,4 +42,35 @@
     flex-direction: column;
     align-items: flex-start;
   }
+  :global(svg.icon) {
+    fill: red;
+  }
 </style>
+
+<div class="rowItem">
+  <div class="rowItemHeader">
+    <Input className="small" value={item.lessonType} {editing} />
+    <Input className="small alignRight" value={item.lectureHall} {editing} />
+  </div>
+
+  <div class="rowItemHeader">
+    <Input
+      className={`large ${current && 'current'}`}
+      value={item.subject}
+      {editing} />
+  </div>
+
+  <div class="rowItemHeader">
+    <div class="rowItemFooter" style="width: 70%">
+      <Input className="small" value={item.lecturerOne} {editing} />
+      <Input className="small" value={item.lecturerTwo} {editing} />
+    </div>
+    <button on:click={toggle}>
+      {#if editing}
+        <Save24 class="icon" />
+      {:else}
+        <Edit24 class="icon" />
+      {/if}
+    </button>
+  </div>
+</div>
diff --git a/src/components/TimeTable/index.svelte b/src/components/TimeTable/index.svelte
index d13f8a58..dbc7369b 100644
--- a/src/components/TimeTable/index.svelte
+++ b/src/components/TimeTable/index.svelte
@@ -1,74 +1,18 @@
 <script>
-  import { stores } from "@sapper/app";
+  import Star24 from "carbon-icons-svelte/lib/Star24";
+  import StarFilled24 from "carbon-icons-svelte/lib/StarFilled24";
+  import Link24 from "carbon-icons-svelte/lib/Link24";
   import Row from "./Row.svelte";
   import data from "./data";
 
-  const { page } = stores();
-  let tab = "";
-  $: tab = $page.query.tab || "mine";
+  let starred = false;
 </script>
 
-<div class="root">
-  <div class="header flex justify-between mb-2">
-    <h4 class="title">Расписание</h4>
-    <div class="flex justify-evenly items-center">
-      <a
-        class="mr-5 text-sm {tab === 'mine' && 'active'}"
-        href="/timetable?tab=mine"
-      >
-        Мои
-      </a>
-      <a
-        class="mr-5 text-sm {tab === 'saved' && 'active'}"
-        href="/timetable?tab=saved"
-      >
-        Сохранение
-      </a>
-    </div>
-  </div>
-  <h4>АИ-153</h4>
-  <div class="container">
-    <div class="col">
-      <div class="colItem">Пн</div>
-      <div class="colItem">Вт</div>
-      <div class="colItem">Ср</div>
-      <div class="colItem">Чт</div>
-      <div class="colItem">Пя</div>
-    </div>
-    <div class="table">
-      <Row items={data.slice(0, 4)} />
-      <Row items={data.slice(4, 8)} />
-      <Row current items={data.slice(8, 12)} />
-      <Row items={data.slice(12, 16)} />
-      <Row items={data.slice(16, 20)} />
-    </div>
-  </div>
-</div>
-
 <style>
-  .root {
-    margin: 0 auto;
-    border-left: 1px solid #eaecef;
-    border-right: 1px solid #eaecef;
-  }
-  .root .header {
-    border-bottom: 1px solid #eaecef;
-    padding: 15px;
+  .sub-header {
+    padding: 10px 20px;
   }
 
-  .active {
-    position: relative;
-    display: inline-block;
-  }
-
-  .active::after {
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 3px;
-    background-color: #3182ce;
-    display: block;
-  }
   .table {
     border: 1px solid;
     border-bottom: none;
@@ -80,6 +24,12 @@
     min-width: fit-content;
     overflow: auto;
     font-size: 12px;
+    border: 2px solid #8094e9;
+    padding: 10px 5px;
+    border-radius: 10px;
+  }
+  .container:hover {
+    border: 2px solid #384da9;
   }
   .col {
     display: flex;
@@ -97,4 +47,45 @@
     /* margin: 0 auto; */
     justify-content: center;
   }
+
+  :global(svg.clickables):hover {
+    cursor: pointer;
+  }
 </style>
+
+<div class="sub-header flex justify-between mb-2">
+  <h4 class="title">АИ-153</h4>
+  <div class="flex justify-evenly items-center">
+    {#if starred}
+      <StarFilled24
+        class="clickables mr-5 text-sm"
+        on:click={() => (starred = !starred)}
+        focusable="true"
+        tabindex={0} />
+    {:else}
+      <Star24
+        class="clickables mr-5 text-sm"
+        on:click={() => (starred = !starred)}
+        focusable="true"
+        tabindex="{1}/" />
+    {/if}
+
+    <Link24 class="clickables mr-5 text-sm" />
+  </div>
+</div>
+<div class="container">
+  <div class="col">
+    <div class="colItem">Пн</div>
+    <div class="colItem">Вт</div>
+    <div class="colItem">Ср</div>
+    <div class="colItem">Чт</div>
+    <div class="colItem">Пя</div>
+  </div>
+  <div class="table">
+    <Row items={data.slice(0, 4)} />
+    <Row items={data.slice(4, 8)} />
+    <Row current items={data.slice(8, 12)} />
+    <Row items={data.slice(12, 16)} />
+    <Row items={data.slice(16, 20)} />
+  </div>
+</div>
diff --git a/src/routes/timetable.svelte b/src/routes/timetable.svelte
index adfa1b70..92726b8d 100644
--- a/src/routes/timetable.svelte
+++ b/src/routes/timetable.svelte
@@ -1,9 +1,60 @@
 <script>
   import TimeTable from "../components/TimeTable/index.svelte";
+  import { stores } from "@sapper/app";
+
+  const { page } = stores();
+  let tab = "";
+
+  $: tab = $page.query.tab || "mine";
 </script>
 
+<style>
+  .root {
+    margin: 0 auto;
+    border-left: 1px solid #eaecef;
+    border-right: 1px solid #eaecef;
+  }
+  .root .header {
+    border-bottom: 1px solid #eaecef;
+    padding: 15px;
+  }
+
+  .active {
+    position: relative;
+    display: inline-block;
+  }
+
+  .active::after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 3px;
+    background-color: #3182ce;
+    display: block;
+  }
+</style>
+
 <svelte:head>
   <title>Расписание</title>
 </svelte:head>
 
-<TimeTable />
+<div class="root">
+  <div class="header flex justify-between mb-2">
+    <h4 class="title">Расписание</h4>
+    <div class="flex justify-evenly items-center">
+      <a
+        class="mr-5 text-sm {tab === 'mine' && 'active'}"
+        href="/timetable?tab=mine">
+        Мои
+      </a>
+      <a
+        class="mr-5 text-sm {tab === 'saved' && 'active'}"
+        href="/timetable?tab=saved">
+        Сохранение
+      </a>
+    </div>
+  </div>
+  <TimeTable />
+  <TimeTable />
+  <TimeTable />
+</div>

From 8f5e8832887b64d5b4f13a2f713a1ac95682bd27 Mon Sep 17 00:00:00 2001
From: rotimi_best <best@classroomio.com>
Date: Tue, 4 May 2021 16:36:05 +0300
Subject: [PATCH 2/2] Add profile page

---
 src/routes/_layout.svelte | 24 ++++++++++-----------
 src/routes/profile.svelte | 44 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 150df213..dd45e198 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -8,18 +8,6 @@
   export let segment;
 </script>
 
-<Tailwindcss />
-
-<!-- <Nav {segment} /> -->
-
-<main class="flex max-w-screen-xl">
-  <LeftNav {segment} />
-  <slot />
-  <SideBar />
-</main>
-
-<Footer />
-
 <style>
   main {
     background-color: white;
@@ -33,3 +21,15 @@
     text-decoration: underline;
   }
 </style>
+
+<Tailwindcss />
+
+<!-- <Nav {segment} /> -->
+
+<main class="flex max-w-screen-xl">
+  <LeftNav {segment} />
+  <slot />
+  <SideBar />
+</main>
+
+<Footer />
diff --git a/src/routes/profile.svelte b/src/routes/profile.svelte
index 9d3f5493..c31f33a2 100644
--- a/src/routes/profile.svelte
+++ b/src/routes/profile.svelte
@@ -1,8 +1,46 @@
+<script>
+  let photos = [];
+</script>
+
+<style>
+  .root {
+    max-width: 600px;
+    margin: 20px auto;
+    border-left: 1px solid #eaecef;
+    border-right: 1px solid #eaecef;
+    text-align: center;
+    padding: 5px;
+  }
+
+  figure {
+    margin-bottom: 10px;
+  }
+  img {
+    width: 100px;
+    height: 100px;
+    margin: 0 auto;
+    border-radius: 50%;
+  }
+</style>
 
 <svelte:head>
-	<title>Profile</title>
+  <title>Profile</title>
 </svelte:head>
 
-<div class="">
-  <h2>Profile page here</h2>
+<div class="root">
+  <figure>
+    <img
+      src="https://pbs.twimg.com/media/EzHwj4wVgAEVbUY?format=jpg&name=4096x4096"
+      alt="Elon musk" />
+    <figcaption>Elon musk</figcaption>
+  </figure>
+  <p>
+    NASA has selected Starship to land the first astronauts on the lunar surface
+    since the Apollo program! We are humbled to help @NASAArtemis usher in a new
+    era of human space exploration → http://go.nasa.gov/3tur510
+  </p>
+  <button
+    class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-1 px-3 rounded">
+    Connect
+  </button>
 </div>