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

fix: popover icon and overlay in mobile device

Browse source
This commit is contained in:
10G Meow 2023-05-18 12:46:31 +03:00
parent fce65d1a3b
commit 81808b3b74
2 changed files with 13 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -101,22 +101,17 @@ body {
} }
.notification-alert { .notification-alert {
display: inline-block; .icon-circle {
background-color: $alert-bg-color; color: $alert-bg-color;
width: 8px; }
height: 8px;
border-radius: 4px;
margin-bottom: 2px;
position: relative;
overflow: visible;
&.popup-open::after { &.popup-open::after {
top: 20px; top: 35px;
color: #246bfd; color: #246bfd;
} }
.missed-items-popup { .missed-items-popup {
position: absolute; position: absolute;
bottom: -17px; bottom: -17px;
left: -20px; left: -175px;
transform: translateY(100%); transform: translateY(100%);
background: #246bfd; background: #246bfd;
border-radius: 8px; border-radius: 8px;
@ -125,8 +120,10 @@ body {
padding: 22px 18px 23px 18px; padding: 22px 18px 23px 18px;
z-index: 300; z-index: 300;
user-select: none; user-select: none;
width: 300px;
justify-content: space-between;
.text { .text {
white-space: nowrap; white-space: break-spaces;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
@ -791,6 +788,7 @@ body {
.room-name-inline { .room-name-inline {
text-align: start; text-align: start;
min-width: 75px;
} }
.room-name.no-upper { .room-name.no-upper {

1
src/components/ChatHeader.vue
View file

@ -19,6 +19,7 @@
</div> </div>
<v-icon class="icon-dropdown" size="11">$vuetify.icons.ic_dropdown</v-icon> <v-icon class="icon-dropdown" size="11">$vuetify.icons.ic_dropdown</v-icon>
<div :class="{ 'notification-alert': true, 'popup-open': showMissedItemsInfo }" v-if="notifications"> <div :class="{ 'notification-alert': true, 'popup-open': showMissedItemsInfo }" v-if="notifications">
<v-icon class="icon-circle" size="11">circle</v-icon>
<!-- MISSED ITEMS POPUP --> <!-- MISSED ITEMS POPUP -->
<!-- <div class="missed-items-popup-background" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()"></div> --> <!-- <div class="missed-items-popup-background" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()"></div> -->
<div class="missed-items-popup" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()"> <div class="missed-items-popup" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()">