Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chatbox styling/accessibility improvements

Browse Source
This commit is contained in:
James Lyne 2021-05-28 15:55:17 +01:00
parent aee164f8c0
commit 9e65a5859c
3 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -16,8 +16,8 @@
<template> <template>
<Map></Map> <Map></Map>
<Sidebar></Sidebar>
<ChatBox v-if="chatBoxEnabled" v-show="chatBoxEnabled && chatVisible"></ChatBox> <ChatBox v-if="chatBoxEnabled" v-show="chatBoxEnabled && chatVisible"></ChatBox>
<Sidebar></Sidebar>
<notifications position="bottom center" :speed="250" :max="3" :ignoreDuplicates="true" classes="notification" /> <notifications position="bottom center" :speed="250" :max="3" :ignoreDuplicates="true" classes="notification" />
</template> </template>

6
src/components/ChatBox.vue
View File

@ -16,12 +16,12 @@
<template> <template>
<section class="chat"> <section class="chat">
<ul class="chat__messages"> <ul class="chat__messages" role="log" aria-live="polite" aria-relevant="additions">
<ChatMessage v-for="message in chatMessages" :key="message.timestamp" :message="message"></ChatMessage> <ChatMessage v-for="message in chatMessages" :key="message.timestamp" :message="message"></ChatMessage>
<li v-if="!chatMessages.length" class="message message--skeleton">{{ messageNoMessages }}</li> <li v-if="!chatMessages.length" class="message message--skeleton" role="none">{{ messageNoMessages }}</li>
</ul> </ul>
<form v-if="sendingEnabled" class="chat__form" @submit.prevent="sendMessage"> <form v-if="sendingEnabled" class="chat__form" @submit.prevent="sendMessage">
<div v-if="sendingError" class="chat__error">{{ sendingError }}</div> <div role="alert" v-if="sendingError" class="chat__error">{{ sendingError }}</div>
<input ref="chatInput" v-model="enteredMessage" class="chat__input" type="text" :maxlength="maxMessageLength" <input ref="chatInput" v-model="enteredMessage" class="chat__input" type="text" :maxlength="maxMessageLength"
:placeholder="messagePlaceholder" :disabled="sendingMessage"> :placeholder="messagePlaceholder" :disabled="sendingMessage">
<button class="chat__send" :disabled="!enteredMessage || sendingMessage">{{ messageSend }}</button> <button class="chat__send" :disabled="!enteredMessage || sendingMessage">{{ messageSend }}</button>

1
src/scss/leaflet/_controls.scss
View File

@ -242,6 +242,7 @@
.leaflet-control-chat { .leaflet-control-chat {
margin-top: auto; margin-top: auto;
order: 1000; order: 1000;
margin-bottom: 0;
} }
.leaflet-control-zoom { .leaflet-control-zoom {