From 8063e1542187e5786c49f9de1c66524b702d4d9c Mon Sep 17 00:00:00 2001 From: Lars Westermann Date: Thu, 4 Apr 2019 22:41:30 +0200 Subject: [PATCH] Fix responsive layout --- src/jsMain/resources/style/style.scss | 82 +++++++++++++++++-- src/jvmMain/kotlin/de/kif/backend/Main.kt | 1 - .../kotlin/de/kif/backend/route/Setup.kt | 3 +- .../de/kif/backend/view/MainTemplate.kt | 3 + .../de/kif/backend/view/MenuTemplate.kt | 56 +++++++------ 5 files changed, 106 insertions(+), 39 deletions(-) diff --git a/src/jsMain/resources/style/style.scss b/src/jsMain/resources/style/style.scss index d52fc64..1483aa4 100644 --- a/src/jsMain/resources/style/style.scss +++ b/src/jsMain/resources/style/style.scss @@ -48,6 +48,7 @@ a { &:hover { text-decoration: none; } + &:active { color: $primary-color; } @@ -64,12 +65,6 @@ a { box-sizing: border-box; } -@media (min-width: 576px) { - .container { - width: 540px; - } -} - @media (min-width: 768px) { .container { width: 720px; @@ -106,6 +101,7 @@ a { font-size: 1.1rem; position: relative; text-transform: uppercase; + white-space: nowrap; &::after { content: ''; @@ -145,6 +141,63 @@ a { .menu-right { float: right; + + .menu-icon { + display: block; + cursor: default; + + padding: 0 1rem; + color: $text-primary-color; + height: 100%; + font-size: 2rem; + position: relative; + } + + .menu-content { + display: none; + position: absolute; + background-color: $background-secondary-color; + z-index: 1; + left: 1rem; + right: 1rem; + + a { + display: block; + line-height: 3rem; + &:after { + bottom: 0.2rem; + } + } + } + + &:hover { + .menu-content { + display: block; + } + } +} + +@media (min-width: 992px) { + .menu-right { + .menu-icon { + display: none; + } + + .menu-content { + display: block; + position: static; + background-color: transparent; + z-index: unset; + + a { + display: inline-block; + line-height: unset; + &:after { + bottom: 1.8em + } + } + } + } } .main { @@ -155,12 +208,16 @@ a { float: left; padding-bottom: 0.5rem !important; + input { + padding-right: 4rem; + } + .btn-search { position: absolute; top: 0; height: calc(2.5rem + 2px); line-height: 2.5rem; - right: -3rem; + right: -3px; border-bottom-left-radius: 0; border-top-left-radius: 0; @@ -347,6 +404,7 @@ a { color: $primary-text-color; border-color: $primary-color; } + .btn-danger { background-color: $error-color; color: $error-text-color; @@ -359,5 +417,11 @@ button::-moz-focus-inner, input::-moz-focus-inner { form { margin-bottom: 2rem; - width: 20rem; -} \ No newline at end of file + width: 100%; +} + +@media (min-width: 768px) { + form { + width: 24rem; + } +} diff --git a/src/jvmMain/kotlin/de/kif/backend/Main.kt b/src/jvmMain/kotlin/de/kif/backend/Main.kt index 3935099..1d5a852 100644 --- a/src/jvmMain/kotlin/de/kif/backend/Main.kt +++ b/src/jvmMain/kotlin/de/kif/backend/Main.kt @@ -3,7 +3,6 @@ package de.kif.backend import io.ktor.application.Application import io.ktor.server.engine.embeddedServer import io.ktor.server.netty.Netty -import io.ktor.util.InternalAPI object Main { @Suppress("UnusedMainParameter") diff --git a/src/jvmMain/kotlin/de/kif/backend/route/Setup.kt b/src/jvmMain/kotlin/de/kif/backend/route/Setup.kt index 0e35a25..73029c7 100644 --- a/src/jvmMain/kotlin/de/kif/backend/route/Setup.kt +++ b/src/jvmMain/kotlin/de/kif/backend/route/Setup.kt @@ -1,13 +1,12 @@ package de.kif.backend.route import de.kif.backend.LocationLogin +import de.kif.backend.database.DbUser import de.kif.backend.model.Permission import de.kif.backend.model.User -import de.kif.backend.database.DbUser import de.kif.backend.view.MainTemplate import io.ktor.application.call import io.ktor.html.respondHtmlTemplate -import io.ktor.locations.get import io.ktor.request.receiveParameters import io.ktor.response.respondRedirect import io.ktor.routing.Route diff --git a/src/jvmMain/kotlin/de/kif/backend/view/MainTemplate.kt b/src/jvmMain/kotlin/de/kif/backend/view/MainTemplate.kt index 2848c86..abff722 100644 --- a/src/jvmMain/kotlin/de/kif/backend/view/MainTemplate.kt +++ b/src/jvmMain/kotlin/de/kif/backend/view/MainTemplate.kt @@ -12,6 +12,9 @@ class MainTemplate : Template { override fun HTML.apply() { head { + meta(charset = "utf-8") + meta(name="viewport",content = "width=device-width, initial-scale=1.0") + title("KIF Portal") link(href = "/static/external/material-icons.css", type = LinkType.textCss, rel = LinkRel.stylesheet) diff --git a/src/jvmMain/kotlin/de/kif/backend/view/MenuTemplate.kt b/src/jvmMain/kotlin/de/kif/backend/view/MenuTemplate.kt index bb24a9e..89e91a0 100644 --- a/src/jvmMain/kotlin/de/kif/backend/view/MenuTemplate.kt +++ b/src/jvmMain/kotlin/de/kif/backend/view/MenuTemplate.kt @@ -3,10 +3,7 @@ package de.kif.backend.view import de.kif.backend.model.Permission import de.kif.backend.model.User import io.ktor.html.Template -import kotlinx.html.FlowContent -import kotlinx.html.a -import kotlinx.html.div -import kotlinx.html.nav +import kotlinx.html.* class MenuTemplate() : Template { @@ -33,34 +30,39 @@ class MenuTemplate() : Template { } if (!setup) { div("menu-right") { + span("menu-icon") { + i("material-icons") { +"menu" } + } val user = user - if (user == null) { - a("/account", classes = if (active == Tab.ACCOUNT) "active" else null) { - +"Login" - } - } else { - if (user.checkPermission(Permission.WORK_GROUP)) { - a("/workgroup", classes = if (active == Tab.WORK_GROUP) "active" else null) { - +"Work groups" + div("menu-content") { + if (user == null) { + a("/account", classes = if (active == Tab.ACCOUNT) "active" else null) { + +"Login" } - } - if (user.checkPermission(Permission.ROOM)) { - a("/room", classes = if (active == Tab.ROOM) "active" else null) { - +"Rooms" + } else { + if (user.checkPermission(Permission.WORK_GROUP)) { + a("/workgroup", classes = if (active == Tab.WORK_GROUP) "active" else null) { + +"Work groups" + } } - } - if (user.checkPermission(Permission.PERSON)) { - a("/person", classes = if (active == Tab.PERSON) "active" else null) { - +"Persons" + if (user.checkPermission(Permission.ROOM)) { + a("/room", classes = if (active == Tab.ROOM) "active" else null) { + +"Rooms" + } } - } - if (user.checkPermission(Permission.PERSON)) { - a("/user", classes = if (active == Tab.USER) "active" else null) { - +"Users" + if (user.checkPermission(Permission.PERSON)) { + a("/person", classes = if (active == Tab.PERSON) "active" else null) { + +"Persons" + } + } + if (user.checkPermission(Permission.PERSON)) { + a("/user", classes = if (active == Tab.USER) "active" else null) { + +"Users" + } + } + a("/account", classes = if (active == Tab.ACCOUNT) "active" else null) { + +user.username } - } - a("/account", classes = if (active == Tab.ACCOUNT) "active" else null) { - +user.username } } }