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

Fix responsive layout

Browse source
This commit is contained in:
Lars Westermann 2019-04-04 22:41:30 +02:00
parent c9ce59d04f
commit 8063e15421
Signed by: lars.westermann
GPG key ID: 9D417FA5BB9D5E1D
5 changed files with 106 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
width: 100%;
}
@media (min-width: 768px) {
form {
width: 24rem;
}
}

1
src/jvmMain/kotlin/de/kif/backend/Main.kt
View file

@ -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")

3
src/jvmMain/kotlin/de/kif/backend/route/Setup.kt
View file

@ -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

3
src/jvmMain/kotlin/de/kif/backend/view/MainTemplate.kt
View file

@ -12,6 +12,9 @@ class MainTemplate : Template<HTML> {
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)

56
src/jvmMain/kotlin/de/kif/backend/view/MenuTemplate.kt
View file

@ -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<FlowContent> {
@ -33,34 +30,39 @@ class MenuTemplate() : Template<FlowContent> {
}
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
}
}
}