From 9ab3c8c83d120cb2882e04c8a29d257eb0231d25 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sat, 2 Jan 2021 13:17:30 +0100
Subject: [PATCH] Displays logged-in username and moved logout btn.

---
 frontend/ui/Chat.vue | 43 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/frontend/ui/Chat.vue b/frontend/ui/Chat.vue
index 7769ea5..55a36e8 100644
--- a/frontend/ui/Chat.vue
+++ b/frontend/ui/Chat.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="chat-container">
+    <span class="logged-in-username" v-if="username">Logget inn som: <span class="username">{{ username }}</span> <button @click="removeUsername">Logg ut</button></span>
+
     <div class="history" ref="history" v-if="chatHistory.length > 0">
       <div class="opaque-skirt"></div>
       <div v-if="hasMorePages" class="fetch-older-history">
@@ -17,11 +19,12 @@
         <span class="message">{{ history.message }}</span>
       </div>
     </div>
-    <div v-if="username" class="input">
+
+    <div v-if="username" class="user-actions">
       <input @keyup.enter="sendMessage" type="text" v-model="message" placeholder="Melding.." />
       <button @click="sendMessage">Send</button>
-      <button @click="removeUsername">Logg ut</button>
     </div>
+
     <div v-else class="username-dialog">
       <input
         type="text"
@@ -207,13 +210,34 @@ export default {
 
 .chat-container {
   position: relative;
+  transform: translate3d(0,0,0);
 }
 
 input {
-  width: 80%;
+  width: 100%;
+  height: 3.25rem;
 }
 
-.input {
+.logged-in-username {
+  position: absolute;
+  top: 0.75rem;
+  left: 1rem;
+  color: $matte-text-color;
+  width: calc(100% - 2rem);
+
+  button {
+    width: unset;
+    padding: 5px 10px;
+    position: absolute;
+    right: 0rem;
+  }
+
+  .username {
+    border-bottom: 2px solid $link-color;
+  }
+}
+
+.user-actions {
   display: flex;
 }
 
@@ -223,6 +247,7 @@ input {
   overflow-y: scroll;
   position: relative;
   max-height: 550px;
+  margin-top: 2rem;
 
   &-message {
     display: flex;
@@ -247,9 +272,9 @@ input {
   }
 
   & .opaque-skirt {
-    width: 100%;
-    position: absolute;
-    height: 1rem;
+    width: calc(100% - 2rem);
+    position: fixed;
+    height: 2rem;
     z-index: 1;
     background: linear-gradient(
       to bottom,
@@ -314,5 +339,9 @@ button {
   transition: transform 0.5s ease;
   -webkit-font-smoothing: antialiased;
   touch-action: manipulation;
+
+  @include mobile {
+    padding: 10px 10px;
+  }
 }
 </style>