More mobile friendly
This commit is contained in:
parent
317ddc6ead
commit
94b7b817fd
2 changed files with 17 additions and 16 deletions
|
@ -22,23 +22,9 @@ import type { detach } from "svelte/internal";
|
|||
<style>
|
||||
main {
|
||||
text-align: center;
|
||||
max-width: 240px;
|
||||
margin: 0 auto;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ff3e00;
|
||||
text-transform: uppercase;
|
||||
font-size: 4em;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
main {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
|
|
|
@ -28,18 +28,33 @@ import TaskDisplay from "./TaskDisplay.svelte";
|
|||
selectedTask = task
|
||||
heightClass = "full"
|
||||
}
|
||||
|
||||
function close() {
|
||||
heightClass = "collapsed"
|
||||
window.setTimeout(() => window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
}), 100)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
width: calc(min(100%, 100vw - 16px));
|
||||
background-color: #222;
|
||||
overflow: hidden;
|
||||
padding: 0 100px 0 100px;
|
||||
box-sizing: border-box;
|
||||
z-index: 120;
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
.panel {
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel.collapsed:not(:hover) {
|
||||
display: none;
|
||||
}
|
||||
|
@ -56,7 +71,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
|
|||
<div class="panel {heightClass}"
|
||||
on:click={() => selectedTask && select(selectedTask)}>
|
||||
<TaskDisplay taskId={selectedTask?.id} />
|
||||
<button type=button class="closeButton" on:click|stopPropagation={() => heightClass = "collapsed"}>
|
||||
<button type=button class="closeButton" on:click|stopPropagation={close}>
|
||||
Zavřít
|
||||
</button>
|
||||
</div>
|
||||
|
|
Reference in a new issue