Add proper close button to TaskPanel

Related to #8
This commit is contained in:
Vojtěch Káně 2020-09-29 13:15:19 +02:00
parent dbf86e1617
commit f509f0a12f

View file

@ -64,14 +64,24 @@ import TaskDisplay from "./TaskDisplay.svelte";
.panel.full { .panel.full {
min-height: 100%; min-height: 100%;
} }
.closeButton { display: none } .closeButton {
display: none;
position: absolute;
right: 0;
top: 0;
color: white;
background-color: red;
border: 0;
cursor: pointer;
}
.closeButton::before {
content: "X";
}
.panel.full .closeButton { display: inherit } .panel.full .closeButton { display: inherit }
</style> </style>
<div class="panel {heightClass}" <div class="panel {heightClass}"
on:click={() => selectedTask && select(selectedTask)}> on:click={() => selectedTask && select(selectedTask)}>
<TaskDisplay taskId={selectedTask?.id} /> <TaskDisplay taskId={selectedTask?.id} />
<button type=button class="closeButton" on:click|stopPropagation={close}> <button type=button class="closeButton" on:click|stopPropagation={close}></button>
Zavřít
</button>
</div> </div>