diff --git a/components/events/Event.js b/components/events/Event.js index 37203f3..4b236fa 100644 --- a/components/events/Event.js +++ b/components/events/Event.js @@ -22,7 +22,7 @@ let Event = create({ let event = this.props.event let state = "" let reply = "" - let element = "unsupported event" + let element = "unsupported event: " + event.type let parsedBody if (event.local) { diff --git a/public/scss/style.scss b/public/scss/style.scss index ec141ca..8b26e1a 100644 --- a/public/scss/style.scss +++ b/public/scss/style.scss @@ -39,6 +39,9 @@ html, body { color: white; font-family: "Open Sans"; font-size: 110%; + height: 100vh; + width: 100vw; + position: absolute; } .list { @@ -57,8 +60,9 @@ html, body { } } -.chat, .info, .input { +.chat, .info, .input, .sidebar .filter { background: $bg1; + border-color: $bg1; } .input, .info { @@ -75,13 +79,6 @@ body { display: flex; } -#root { - height: 100vh; - width: 100vw; - display: flex; - justify-content: center; -} - .loginwrapper { margin-top: -15rem; display: flex; @@ -162,11 +159,22 @@ body { } } -.main { - flex: 1 1 auto; +#root { + height: 100%; + width: 100%; + position: relative; + display: grid; + box-sizing: border-box; + grid-template-columns: 15% 85%; + justify-content: center; } .sidebar, .main { + position: relative; + box-sizing: border-box; + height: calc(100% - 2*$spacing); + width: calc(100% - 2*$spacing); + overflow-y: auto; margin: $spacing; display: flex; flex-direction: column; @@ -195,6 +203,10 @@ body { } } +.main { + flex: 1 1 auto; +} + .list { div { cursor: pointer; @@ -258,8 +270,8 @@ body { .chat { padding: 0 $spacing; - position: relative; box-sizing: border-box; + word-wrap: anywhere; .events { display: flex; @@ -274,8 +286,9 @@ body { grid-template-areas: "avatar content"; margin-bottom: $spacing/2; - .name { + .user { font-weight: bold; + padding-left: $spacing; } #avatar { @@ -295,7 +308,7 @@ body { .col { grid-area: content; - padding-left: $spacing * 1.2; + padding-left: $spacing/2; h1, h2, h3, h4, h5, h6 { margin: 0; @@ -306,6 +319,8 @@ body { } .event { + padding-left: $spacing; + .reply { border-left: $borderwidth solid $blue; padding-left: 1/2 * $spacing; @@ -327,6 +342,10 @@ body { } } + code { + font-size: 1rem + } + &:hover { border-radius: 0.1rem; background-color: hsla(0, 100%, 100%, 0.05); @@ -362,10 +381,6 @@ body { } } -.sidebar .filter, .info, .input { - border-color: $bg1; -} - .noselect { -moz-user-select: -moz-none; -khtml-user-select: none;