From 31e2c5001a5c69bc149e965cad097b63ec12d309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Fri, 20 Mar 2020 12:17:25 +0100
Subject: [PATCH] Scrolling some and have a fixed header

---
 src/ui/Attendees.vue | 33 ++++++++++++++++++++++-----------
 src/ui/Chat.vue      | 15 +++++----------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/ui/Attendees.vue b/src/ui/Attendees.vue
index f95a24b..059f4b1 100644
--- a/src/ui/Attendees.vue
+++ b/src/ui/Attendees.vue
@@ -1,17 +1,13 @@
 <template>
   <div class="attendees" v-if="attendees.length > 0">
     <h2>Deltakere ({{ attendees.length }})</h2>
-    <div class="attendee" v-for="(attendee, index) in attendees" :key="index">
-      <span class="attendee-name">{{ attendee.name }}</span>
-      <div class="red-ballot ballot-element small">{{ attendee.red }}</div>
-      <div class="blue-ballot ballot-element small">
-        {{ attendee.blue }}
-      </div>
-      <div class="green-ballot ballot-element small">
-        {{ attendee.green }}
-      </div>
-      <div class="yellow-ballot ballot-element small">
-        {{ attendee.yellow }}
+    <div class="attendees-container" ref="attendees">
+      <div class="attendee" v-for="(attendee, index) in attendees" :key="index">
+        <span class="attendee-name">{{ attendee.name }}</span>
+        <div class="red-ballot ballot-element small">{{ attendee.red }}</div>
+        <div class="blue-ballot ballot-element small">{{ attendee.blue }}</div>
+        <div class="green-ballot ballot-element small">{{ attendee.green }}</div>
+        <div class="yellow-ballot ballot-element small">{{ attendee.yellow }}</div>
       </div>
     </div>
   </div>
@@ -23,6 +19,16 @@ export default {
     attendees: {
       type: Array
     }
+  },
+  watch: {
+    attendees: {
+      deep: true,
+      handler() {
+        setTimeout(() => {
+          this.$refs.attendees.scrollTop = this.$refs.attendees.scrollHeight;
+        }, 50);
+      }
+    }
   }
 };
 </script>
@@ -53,6 +59,11 @@ export default {
   align-items: center;
   width: 65%;
   height: 100%;
+}
+
+.attendees-container {
+  width: 100%;
+  height: 100%;
   overflow-y: scroll;
 }
 
diff --git a/src/ui/Chat.vue b/src/ui/Chat.vue
index e0da226..d104290 100644
--- a/src/ui/Chat.vue
+++ b/src/ui/Chat.vue
@@ -14,14 +14,9 @@
         </div>
       </div>
       <div class="input">
-        <input
-          @keyup.enter="sendMessage"
-          type="text"
-          v-model="message"
-          placeholder="Melding.."
-        />
-        <button @click="sendMessage">Send</button
-        ><button @click="removeUsername">Logg ut</button>
+        <input @keyup.enter="sendMessage" type="text" v-model="message" placeholder="Melding.." />
+        <button @click="sendMessage">Send</button>
+        <button @click="removeUsername">Logg ut</button>
       </div>
     </div>
     <div v-if="!usernameSet" class="username-dialog">
@@ -88,7 +83,7 @@ export default {
       if (date.getDate() == new Date().getDate()) {
         return timeString;
       }
-      return `${date.toLocaleDateString()} ${timeString}`
+      return `${date.toLocaleDateString()} ${timeString}`;
     },
     sendMessage: function() {
       this.$emit("message", this.message);
@@ -147,7 +142,7 @@ input {
 
 .chat-container,
 .chat-inner-container {
-  height: 100%;
+  height: 95%;
 }
 
 .history {