butter/keanu-weblite
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch '133-header-hides-and-gets-stuck'

Browse source
This commit is contained in:
n8fr8 2021-12-02 09:54:50 -05:00
commit 98538551e7
2 changed files with 27 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/assets/css/chat.scss
View file

@ -1,3 +1,4 @@
@import '~vuetify/src/styles/settings/_variables.scss';
@import "@/assets/css/main.scss"; @import "@/assets/css/main.scss";
$admin-bg: black; $admin-bg: black;
@ -66,6 +67,11 @@ $admin-fg: white;
margin-top: $chat-standard-padding-xs; margin-top: $chat-standard-padding-xs;
margin-bottom: $chat-standard-padding-xs; margin-bottom: $chat-standard-padding-xs;
} }
@media #{map-get($display-breakpoints, 'sm-and-down')} {
position: fixed;
z-index: 10;
}
} }
.room-list-notification-count { .room-list-notification-count {
@ -125,6 +131,12 @@ $admin-fg: white;
&::-webkit-scrollbar-thumb:hover { &::-webkit-scrollbar-thumb:hover {
background: #4d4d4d; background: #4d4d4d;
} }
@media #{map-get($display-breakpoints, 'sm-and-down')} {
margin-top: 72px;
margin-bottom: 70px;
z-index: 9;
}
} }
.input-area { .input-area {
@ -153,6 +165,10 @@ $admin-fg: white;
background-color: white; background-color: white;
border: 1px solid #d4d4d4; border: 1px solid #d4d4d4;
border-radius: 32px; border-radius: 32px;
@media #{map-get($display-breakpoints, 'sm-and-down')} {
margin-bottom: 2px;
}
} }
.input-area-button { .input-area-button {
margin: 0; margin: 0;
@ -177,6 +193,13 @@ $admin-fg: white;
min-height: 20px; min-height: 20px;
} }
} }
@media #{map-get($display-breakpoints, 'sm-and-down')} {
position: fixed;
bottom: 0px;
width: 100%;
z-index: 10;
}
} }
.scroll-to-end { .scroll-to-end {
@ -693,6 +716,7 @@ $admin-fg: white;
.chat-header { .chat-header {
background-color: transparent; background-color: transparent;
border: none; border: none;
position: relative;
} }
.room-avatar { .room-avatar {
@ -815,6 +839,7 @@ $admin-fg: white;
.chat-header { .chat-header {
background-color: transparent; background-color: transparent;
border: none; border: none;
position: relative;
} }
.v-card { .v-card {
background-color: white; background-color: white;

4
src/components/Chat.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="chat-root fill-height d-flex flex-column" ma-0 pa-0> <div class="chat-root fill-height d-flex flex-column">
<ChatHeader <ChatHeader
class="chat-header flex-grow-0 flex-shrink-0" class="chat-header flex-grow-0 flex-shrink-0"
v-on:header-click="onHeaderClick" v-on:header-click="onHeaderClick"
@ -7,7 +7,7 @@
<div <div
class="chat-content flex-grow-1 flex-shrink-1" class="chat-content flex-grow-1 flex-shrink-1"
ref="chatContainer" ref="chatContainer"
style="overflow-x: hidden; overflow-y: auto" style="overflow: hidden auto;"
v-on:scroll="onScroll" v-on:scroll="onScroll"
@click="closeContextMenusIfOpen" @click="closeContextMenusIfOpen"
> >