clean up footer things

5 years ago · 6c7af9ffae
5 changed files with 45 additions and 16 deletions
--- a/webroot/index.html
+++ b/webroot/index.html
@ -25,8 +25,11 @@ GW TODO:
				@@ -25,8 +25,11 @@ GW TODO:

 - expand user name change text box on focus.chat
 - accessilbity
+- expect urls out of social list, not usernames

-
+- convert all the https://robohash.org/username123 areas to {{}}, put into util
+  - generate ?set=x(1-1)&size=10x10
+- don't force logo to be square. use as bg image :contain
 */
 </script>
 <body class="bg-gray-300 text-gray-800">
@ -101,10 +104,12 @@ GW TODO:
				@@ -101,10 +104,12 @@ GW TODO:
            <stream-tags v-bind:tags="tags"></stream-tags>
          </div>
          <!-- USER CONTENT... -->
-          <div class="extra-user-content" v-html="extraUserContent"></div>
+          <section class="extra-user-content" v-html="extraUserContent"></section>
        </div>
      </section>
-      <owncast-footer></owncast-footer>
+      <div id="footer">
+        <owncast-footer v-bind:appVersion="appVersion"></owncast-footer>
+      </div>

    </div>

@ -112,12 +117,12 @@ GW TODO:
				@@ -112,12 +117,12 @@ GW TODO:
    <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 v-html="extraUserContent"></div>
+        <div class="extra-user-content" v-html="extraUserContent"></div>

-        <owncast-footer></owncast-footer>
-       
+        <div class="#footer-touch">
+          <owncast-footer v-bind:appVersion="appVersion"></owncast-footer>       
+        </div>
      </div>

      <div id="chat-container" class="bg-gray-800">        
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@ -18,6 +18,7 @@ async function setupApp() {
				@@ -18,6 +18,7 @@ async function setupApp() {
      summary: "",
      tags: [],
      title: "",
+      appVersion: "",

    },
    watch: {
@ -66,9 +67,9 @@ function setupWebsocket() {
				@@ -66,9 +67,9 @@ function setupWebsocket() {

  // Uncomment to point to somewhere other than goth.land
  const protocol = location.protocol == "https:" ? "wss" : "ws"
-  var ws = new WebSocket(protocol + "://" + location.host + "/entry")
+  // var ws = new WebSocket(protocol + "://" + location.host + "/entry")

-  // var ws = new WebSocket("wss://goth.land/entry")
+  var ws = new WebSocket("wss://goth.land/entry")

  ws.onmessage = (e) => {
    const model = JSON.parse(e.data)
--- a/webroot/js/footer.js
+++ b/webroot/js/footer.js
@ -1,9 +1,17 @@
				@@ -1,9 +1,17 @@
 Vue.component('owncast-footer', {
+  props: {
+    appVersion: {
+      type: String,
+      default: "0.1",
+    },
+  },
+  
  template: `
-    <footer class="flex border-t border-gray-500 border-solid">
+    <footer class="flex">
      <span>
        <a href="https://github.com/gabek/owncast" target="_blank">About Owncast</a>
-      </span>          
+      </span>
+      <span>Version {{appVersion}}</span>
    </footer>
  `,
 });
--- a/webroot/js/player/player.js
+++ b/webroot/js/player/player.js
@ -1,5 +1,5 @@
				@@ -1,5 +1,5 @@
-const streamURL = '/hls/stream.m3u8';
-// const streamURL = 'https://goth.land/hls/stream.m3u8'; // Uncomment me to point to remote video
+// const streamURL = '/hls/stream.m3u8';
+const streamURL = 'https://goth.land/hls/stream.m3u8'; // Uncomment me to point to remote video

 // style hackings
 window.VIDEOJS_NO_DYNAMIC_STYLE = true;
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@ -82,10 +82,15 @@ img.logo {
				@@ -82,10 +82,15 @@ img.logo {

 footer {
  flex-direction: row;
-  justify-content: center;
+  justify-content: flex-start;
  font-size: .75em;
-  padding: 2em 0;
+  padding: 2em;
 }
+footer span {
+  display: inline-block;
+  margin: 0 1em;
+}
+

 /* ************************************************8 */

@ -210,6 +215,9 @@ h2 {
				@@ -210,6 +215,9 @@ h2 {
  list-style: unset;
 }

+#footer-touch {
+  display: none;
+}

 /* ************************************************8 */

@ -319,6 +327,10 @@ h2 {
				@@ -319,6 +327,10 @@ h2 {
 .no-chat #chat-container-wrap {
  display: none;
 }
+.no-chat footer {
+  justify-content: center;
+}
+
 .chat #chat-container-wrap {
  display: block;
 }
@ -437,7 +449,8 @@ h2 {
				@@ -437,7 +449,8 @@ h2 {
  .desktop.chat #user-content {
    width: 100%;
  }
-  .desktop.chat #user-content{
+  .desktop #footer,
+  .desktop.chat #user-content {
    display: none;
  }

@ -459,9 +472,11 @@ h2 {
				@@ -459,9 +472,11 @@ h2 {



+.touch-screen #footer,
 .touch-screen #user-content {
  display: none;
 }
+.touch-screen #footer-touch,
 .touch-screen #user-content-touch {
  display: block;
 }