Improve timetable visibility

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>

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 starred = false;
-  let tab = "";
-  $: tab = $page.query.tab || "mine";
 </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 {
+  .sub-header {
-    margin: 0 auto;
+    padding: 10px 20px;
-    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;
-  }
   .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>

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>