Improve timetable visibility
This commit is contained in:
rotimi_best
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user