componentize user info

webroot/index.html

@@ -84,45 +84,41 @@ GW TODO:
         </div>
 
 
-        <div id="stream-info" v-cloak class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
+        <section id="stream-info" aria-label="Stream status" v-cloak class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
           <span>{{ streamStatus }}</span>
           <span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
           <span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
           <span>{{ overallMaxViewerCount }} overall.</span>        
-        </div>
+        </section>
      </main>
 
-      <section id="user-content" class="user-content">
-        <div class="user-image rounded-full bg-white">
-          <img class="logo" v-bind:src="logo">            
-        </div>
-        <div class="">
-          <div class="user-content-header border-b border-gray-500 border-solid">
-            <h2 class="font-semibold">About <span class="streamer-name text-indigo-600">{{streamerName}}</span></h2>
-            <social-list v-bind:platforms="socialHandles"></social-list>
-            <div class="stream-summary" v-html="summary"></div>
-            <stream-tags v-bind:tags="tags"></stream-tags>
-          </div>
-          <!-- USER CONTENT... -->
-          <section class="extra-user-content" v-html="extraUserContent"></section>
-        </div>
+      <section id="user-content" v-if="layout === 'desktop'" aria-label="User information">
+        <user-details
+          v-bind:logo="logo"
+          v-bind:platforms="socialHandles"
+          v-bind:summary="summary"
+          v-bind:tags="tags"
+          v-bind:extraContent="extraUserContent"
+        >{{streamerName}}</user-details>
       </section>
-      <div id="footer">
-        <owncast-footer v-bind:appVersion="appVersion"></owncast-footer>
-      </div>
+      <owncast-footer v-if="layout === 'desktop'" v-bind:appVersion="appVersion"></owncast-footer>
 
     </div>
 
 
     <section id="chat-container-wrap" class="flex">
-      <div id="user-content-touch" class="user-content">
-        <social-list v-bind:platforms="socialHandles"></social-list>
-        <!-- USER CONTENT... -->
-        <div class="extra-user-content" v-html="extraUserContent"></div>
 
-        <div class="#footer-touch">
-          <owncast-footer v-bind:appVersion="appVersion"></owncast-footer>       
-        </div>
+      <div v-if="layout !== 'desktop'" id="user-content-touch">
+        <user-details
+          v-bind:logo="logo"
+          v-bind:platforms="socialHandles"
+          v-bind:summary="summary"
+          v-bind:tags="tags"
+          v-bind:extraContent="extraUserContent"
+        >{{streamerName}}</user-details>
+
+        <owncast-footer v-bind:appVersion="appVersion"></owncast-footer>       
+        
       </div>
 
       <div id="chat-container" class="bg-gray-800">        

webroot/js/app.js

@@ -11,6 +11,7 @@ async function setupApp() {
       messages: [],
       extraUserContent: "",
       isOnline: false,
+      layout: "desktop",
       // from config
       logo: null,
       socialHandles: [],

webroot/js/footer.js

@@ -2,7 +2,7 @@ Vue.component('owncast-footer', {
   props: {
     appVersion: {
       type: String,
-      default: "0.1",
+      default: '0.1',
     },
   },
   
@@ -32,4 +32,28 @@ Vue.component('stream-tags', {
       </li>
     </ul>
   `,
-});
+});
+
+Vue.component('user-details', {
+  props:  ['logo', 'platforms', 'summary', 'tags', 'extraContent'],
+  template: `
+    <div class="user-content">
+      <div class="user-image rounded-full bg-white">
+        <img class="logo" alt="Logo" v-bind:src="logo">            
+      </div>
+      <div class="user-content-header border-b border-gray-500 border-solid">
+        <h2 class="font-semibold">
+          About <span class="streamer-name text-indigo-600">
+            <slot></slot>
+          </span>
+        </h2>
+        <social-list v-bind:platforms="platforms"></social-list>
+        <div class="stream-summary" v-html="summary"></div>
+        <stream-tags v-bind:tags="tags"></stream-tags>
+      </div>
+
+      <div v-html="extraContent"></div>
+
+    </div>
+  `,
+});

webroot/js/message.js

@@ -78,10 +78,13 @@ class Messaging {
 		if (hasTouchScreen()) {
 			this.scrollableMessagesContainer = document.body;
 			this.tagAppContainer.classList.add("touch-screen");
+			window.app.layout = "touch";
 			window.onorientationchange = this.handleOrientationChange.bind(this);
 			this.handleOrientationChange();
 		} else {
 			this.tagAppContainer.classList.add("desktop");
+			window.app.layout = "desktop";
+
 		}
 	}
 

webroot/styles/layout.css

@@ -85,6 +85,7 @@ footer {
   justify-content: flex-start;
   font-size: .75em;
   padding: 2em;
+  opacity: .5;
 }
 footer span {
   display: inline-block;
@@ -109,20 +110,18 @@ footer span {
 .user-content {
   padding: 2em;
 }
-#user-content {
+/* #user-content {
   display: block;
 }
 #user-content-touch {
   display: none;
-}
+} */
 /* ************************************************8 */
 
 
 .user-content {
   padding: 3em;
-}
 
-#user-content {
   display: flex;
   flex-direction: row;
 }
@@ -215,9 +214,6 @@ h2 {
   list-style: unset;
 }
 
-#footer-touch {
-  display: none;
-}
 
 /* ************************************************8 */
 
@@ -471,16 +467,15 @@ h2 {
 }
 
 
-
-.touch-screen #footer,
-.touch-screen #user-content {
-  display: none;
-}
-.touch-screen #footer-touch,
-.touch-screen #user-content-touch {
-  display: block;
+.touch-screen .user-content {
+  flex-direction: column;
+  align-content: center;
+} 
+.touch-screen .user-image {
+  margin: auto;
 }
 
+
 .touch-screen #stream-info {
   height: 2.5em;
   overflow: hidden;