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 { &:hover {
text-decoration: none; text-decoration: none;
} }
&:active { &:active {
color: $primary-color; color: $primary-color;
} }
@ -64,12 +65,6 @@ a {
box-sizing: border-box; box-sizing: border-box;
} }
@media (min-width: 576px) {
.container {
width: 540px;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
.container { .container {
width: 720px; width: 720px;
@ -106,6 +101,7 @@ a {
font-size: 1.1rem; font-size: 1.1rem;
position: relative; position: relative;
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap;
&::after { &::after {
content: ''; content: '';
@ -145,6 +141,63 @@ a {
.menu-right { .menu-right {
float: 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 { .main {
@ -155,12 +208,16 @@ a {
float: left; float: left;
padding-bottom: 0.5rem !important; padding-bottom: 0.5rem !important;
input {
padding-right: 4rem;
}
.btn-search { .btn-search {
position: absolute; position: absolute;
top: 0; top: 0;
height: calc(2.5rem + 2px); height: calc(2.5rem + 2px);
line-height: 2.5rem; line-height: 2.5rem;
right: -3rem; right: -3px;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
@ -347,6 +404,7 @@ a {
color: $primary-text-color; color: $primary-text-color;
border-color: $primary-color; border-color: $primary-color;
} }
.btn-danger { .btn-danger {
background-color: $error-color; background-color: $error-color;
color: $error-text-color; color: $error-text-color;
@ -359,5 +417,11 @@ button::-moz-focus-inner, input::-moz-focus-inner {
form { form {
margin-bottom: 2rem; 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.application.Application
import io.ktor.server.engine.embeddedServer import io.ktor.server.engine.embeddedServer
import io.ktor.server.netty.Netty import io.ktor.server.netty.Netty
import io.ktor.util.InternalAPI
object Main { object Main {
@Suppress("UnusedMainParameter") @Suppress("UnusedMainParameter")

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

@ -1,13 +1,12 @@
package de.kif.backend.route package de.kif.backend.route
import de.kif.backend.LocationLogin import de.kif.backend.LocationLogin
import de.kif.backend.database.DbUser
import de.kif.backend.model.Permission import de.kif.backend.model.Permission
import de.kif.backend.model.User import de.kif.backend.model.User
import de.kif.backend.database.DbUser
import de.kif.backend.view.MainTemplate import de.kif.backend.view.MainTemplate
import io.ktor.application.call import io.ktor.application.call
import io.ktor.html.respondHtmlTemplate import io.ktor.html.respondHtmlTemplate
import io.ktor.locations.get
import io.ktor.request.receiveParameters import io.ktor.request.receiveParameters
import io.ktor.response.respondRedirect import io.ktor.response.respondRedirect
import io.ktor.routing.Route 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() { override fun HTML.apply() {
head { head {
meta(charset = "utf-8")
meta(name="viewport",content = "width=device-width, initial-scale=1.0")
title("KIF Portal") title("KIF Portal")
link(href = "/static/external/material-icons.css", type = LinkType.textCss, rel = LinkRel.stylesheet) 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.Permission
import de.kif.backend.model.User import de.kif.backend.model.User
import io.ktor.html.Template import io.ktor.html.Template
import kotlinx.html.FlowContent import kotlinx.html.*
import kotlinx.html.a
import kotlinx.html.div
import kotlinx.html.nav
class MenuTemplate() : Template<FlowContent> { class MenuTemplate() : Template<FlowContent> {
@ -33,34 +30,39 @@ class MenuTemplate() : Template<FlowContent> {
} }
if (!setup) { if (!setup) {
div("menu-right") { div("menu-right") {
span("menu-icon") {
i("material-icons") { +"menu" }
}
val user = user val user = user
if (user == null) { div("menu-content") {
a("/account", classes = if (active == Tab.ACCOUNT) "active" else null) { if (user == null) {
+"Login" 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"
} }
} } else {
if (user.checkPermission(Permission.ROOM)) { if (user.checkPermission(Permission.WORK_GROUP)) {
a("/room", classes = if (active == Tab.ROOM) "active" else null) { a("/workgroup", classes = if (active == Tab.WORK_GROUP) "active" else null) {
+"Rooms" +"Work groups"
}
} }
} if (user.checkPermission(Permission.ROOM)) {
if (user.checkPermission(Permission.PERSON)) { a("/room", classes = if (active == Tab.ROOM) "active" else null) {
a("/person", classes = if (active == Tab.PERSON) "active" else null) { +"Rooms"
+"Persons" }
} }
} if (user.checkPermission(Permission.PERSON)) {
if (user.checkPermission(Permission.PERSON)) { a("/person", classes = if (active == Tab.PERSON) "active" else null) {
a("/user", classes = if (active == Tab.USER) "active" else null) { +"Persons"
+"Users" }
}
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
} }
} }
} }