Fix responsive layout
This commit is contained in:
Lars Westermann
parent
c9ce59d04f
commit
8063e15421
GPG key ID:
9D417FA5BB9D5E1D
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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,7 +30,11 @@ class MenuTemplate() : Template<FlowContent> {
|
|||
}
|
||||
if (!setup) {
|
||||
div("menu-right") {
|
||||
span("menu-icon") {
|
||||
i("material-icons") { +"menu" }
|
||||
}
|
||||
val user = user
|
||||
div("menu-content") {
|
||||
if (user == null) {
|
||||
a("/account", classes = if (active == Tab.ACCOUNT) "active" else null) {
|
||||
+"Login"
|
||||
|
|
@ -68,6 +69,7 @@ class MenuTemplate() : Template<FlowContent> {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
enum class Tab {
|
||||
DASHBOARD, CALENDAR, ACCOUNT, WORK_GROUP, ROOM, PERSON, USER
|
||||
|
|
|
|||
Loading…
Reference in a new issue