footer with name, search append for mobile

src/App.vue

@@ -24,6 +24,7 @@ onMounted(() => { window.addEventListener("resize", (e) => { state.value.is_smal
 
 function setRoomCode(room) { state.value.room = room }
 function setName(name) { state.value.name = name }
+function updateName(evt) { state.value.name = evt.target.textContent }
 function setServer(server) { state.value.server = server }
 function setSearchTerm(searchTerm) { state.value.search.searchTerm = searchTerm }
 
@@ -76,40 +77,31 @@ function joinRoom() {
     <DesktopLayout v-show="!state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" />
     <WelcomeReveal v-if="!state.joined" :room="state.room" :server="state.server" @connect="connect" @update:room="setRoomCode" @update:name="setName" @update:server="setServer" />
   </div>
+<footer>
+Name: <span class="userName" @focusout="updateName" contenteditable>{{ state.name }}</span>
+</footer>
 </div>
 </template>
 
 <style scoped>
-.page {
-    height: 100vh;
-    position: relative;
-}
-#main-content {
-    height: 100vh;
-    max-height: 100vh;
-    max-width: 100vw;
-}
-</style>
-<style>
-.row {
-    margin:0 !important;
-    max-width: 100% !important;
+footer {
+position: fixed;
+bottom: 0;
+height: 50px;
+line-height: 50px;
+width: 100%;
+padding-left: 10px;
+background-color: #008000;
+font-weight: bold;
+color: #ffffff;
+	   font-size: 1.5rem;
+	   margin: auto;
 }
 
-body {
-    background: url(../syng.png) fixed;
-    background-color: #8a8a8a;
-    background-size: auto 50%;
-    background-repeat: no-repeat;
-    background-position: center;
-    height:100vh;
-}
-.vsplit {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-}
-#large-current, #current, .button, button:focus {
+footer > .userName {
+border: none;
+  border-bottom: 1px dashed #00F000;
   background-color: #008000;
+
 }
 </style>

src/assets/main.css

@@ -14,7 +14,7 @@ body {
 }
 
 .page {
-    height: 100vh;
+    height: 100%;
     position: relative;
 }
 
@@ -32,7 +32,7 @@ body {
 
 .splitter {
     display: flex;
-    height: 100vh;
+    height: 100%;
 }
 
 .comp-column {
@@ -54,7 +54,7 @@ body {
 
 
 #main-content {
-    height: 100vh;
+    height: calc(100vh - 50px);
     max-height: 100vh;
     max-width: 100vw;
 }
@@ -71,7 +71,7 @@ body {
 
 .vsplit {
     display: flex;
-    height: 100%;
+    height: calc(100% - 60px);
     flex-direction: column;
 }
 
@@ -80,6 +80,10 @@ body {
     overflow-y: auto;
 }
 
+#recent {
+    flex-direction: column-reverse;
+}
+
 .performer, .album {
     font-size: smaller;
     font-style: italic;
@@ -158,7 +162,7 @@ body {
 }
 
 body {
-    background: url(../syng.png) fixed;
+    background: url(syng.png) fixed;
     background-color: #8a8a8a;
     background-size: auto 50%;
     background-repeat: no-repeat;

src/components/RecentDesktop.vue

@@ -6,6 +6,6 @@ const props = defineProps(['recent'])
 <template>
   <div class="comp-column" id="right-side">
     <div class="header">Recent</div>
-    <RecentInner :state="recent" />
+    <RecentInner :recent="recent" />
   </div>
 </template>

src/components/RecentInner.vue

@@ -6,7 +6,7 @@ const props = defineProps(['recent'])
 <template>
   <div class="vsplit">
       <div id="recent-list-wrapper" class="results">
-          <ul id="last10" class="vertical menu">
+          <ul id="recent" class="vertical menu">
             <Entry v-for="entry in recent" :entry="entry" />
           </ul>
       </div>

src/components/SearchTab.vue

@@ -10,7 +10,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append'])
 <div class="tabs-panel is-active" id="simplesearch">
     <div class="vsplit">
       <SearchBar :searchTerm="search.searchTerm" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)" />
-      <SearchResults :searchResults="search.searchResults" />
+      <SearchResults :searchResults="search.searchResults" @append="(entry) => $emit('append', entry)" />
     </div>
 </div>
 </template>