kif/portal
10
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Improve calendar header design

Browse source
This commit is contained in:
Lars Westermann 2019-05-31 16:39:43 +02:00
parent 5c058f7fdc
commit df8f04099a
Signed by: lars.westermann
GPG key ID: 9D417FA5BB9D5E1D
12 changed files with 136 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/jsMain/kotlin/de/kif/frontend/views/calendar/Calendar.kt
View file

@ -80,9 +80,7 @@ class Calendar(calendar: HTMLElement) : View(calendar) {
val cont = document.getElementsByClassName("header-right")[0] as HTMLElement
val view = View.wrap(createHtmlView<HTMLAnchorElement>())
cont.appendChild(view.html)
view.html.textContent = "Check"
val view = View.wrap(document.getElementById("calendar-check-constraints") as HTMLElement)
view.onClick {
launch {
val errors = ScheduleRepository.checkConstraints()

3
src/jsMain/kotlin/de/kif/frontend/views/calendar/CalendarEdit.kt
View file

@ -14,13 +14,14 @@ import de.westermann.kwebview.extra.listFactory
import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.HTMLElement
import org.w3c.dom.HTMLInputElement
import kotlin.browser.document
class CalendarEdit(
private val calendar: Calendar, view: HTMLElement
) : View(view) {
private val toggleEditButton =
Button.wrap(view.querySelector(".calendar-edit-top button") as HTMLButtonElement)
Button.wrap(document.getElementById("calendar-edit-button") as HTMLButtonElement)
val search =
InputView.wrap(view.querySelector(".calendar-edit-search input") as HTMLInputElement)

6
src/jsMain/kotlin/de/kif/frontend/views/overview/PostView.kt
View file

@ -1,17 +1,15 @@
package de.kif.frontend.views.overview
import de.kif.common.formatDate
import de.kif.common.formatDateTime
import de.kif.frontend.launch
import de.kif.frontend.repository.PostRepository
import de.westermann.kobserve.event.emit
import de.westermann.kwebview.View
import de.westermann.kwebview.components.Link
import de.westermann.kwebview.createHtmlView
import org.w3c.dom.HTMLAnchorElement
import org.w3c.dom.HTMLElement
import org.w3c.dom.get
import org.w3c.dom.set
import kotlin.browser.document
class PostView(
view: HTMLElement
@ -47,7 +45,7 @@ class PostView(
}
contentView.innerHTML = PostRepository.htmlByUrl(p.url)
footerView.innerText = formatDate(p.createdAt)
footerView.innerText = formatDateTime(p.createdAt)
emit(PostChangeEvent(postId))
}

49
src/jsMain/resources/style/style.scss
View file

@ -303,8 +303,10 @@ a {
position: absolute;
z-index: 1;
background: $background-primary-color;
width: 100%;
border: solid 1px $table-border-color;
width: 10rem;
border: solid 1px $input-border-color;
border-radius: $border-radius;
padding: 0.5rem 0;
span {
padding: 0 0.5rem;
@ -507,6 +509,33 @@ form {
}
}
.header {
height: 2.2rem;
line-height: 2.2rem;
}
.header-left {
float: left;
& > * {
display: block;
float: left;
}
i {
font-size: 1.5rem;
padding: 0 0.5rem;
}
}
.header-right {
float: right;
&::after {
clear: both;
}
}
.calendar {
width: 100%;
position: relative;
@ -528,8 +557,7 @@ form {
display: block;
position: absolute;
right: 0;
top: -3rem;
padding-top: 3rem;
top: 0;
.calendar-edit-main {
position: sticky;
@ -538,19 +566,20 @@ form {
transition: margin-left $transitionTime, opacity $transitionTime, visibility $transitionTime;
top: 1rem;
visibility: hidden;
height: 100vh;
}
}
.calendar-edit-top {
position: absolute;
right: 0;
top: 0;
}
.calendar-edit-search {
padding: 0.5rem;
}
.calendar-edit-list {
height: calc(100% - 4.5rem);
overflow-x: hidden;
overflow-y: scroll;
}
.calendar-work-group {
position: relative;
display: block;