header adjustments for small screens; adjust to new config structure;

5 years ago · 6803f7e7e8
7 changed files with 118 additions and 99 deletions
--- a/webroot/index.html
+++ b/webroot/index.html
@ -3,7 +3,7 @@
				@@ -3,7 +3,7 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

-  <title>Owncast Demo Server</title>
+  <title>{{title}}</title>

  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
@ -21,16 +21,13 @@
				@@ -21,16 +21,13 @@
 GW TODO:
 - off line/ video done mode.
 - remove listeners on unload?
- config customizations

- 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">
  <div id="app-container"  v-cloak class="flex no-chat">
@ -38,10 +35,14 @@ GW TODO:
				@@ -38,10 +35,14 @@ GW TODO:
    <div id="top-content">  
      <header class="flex border-b border-gray-900 border-solid shadow-md">
        <h1 v-cloak class="flex text-gray-400">
-          <span id="logo-container" class="rounded-full bg-white mx-2 px-1 py-1">
-            <img class="logo" v-bind:src="logo">
+          <span
+            id="logo-container"
+            class="rounded-full bg-white px-1 py-1"
+            v-bind:style="{ backgroundImage: 'url(' + logo + ')' }"
+          >
+            <img class="logo visually-hidden" v-bind:src="logo">
          </span>
-          <span>{{title}}</span>
+          <span class="instance-title">{{title}}</span>
        </h1>

        <div id="user-options-container" class="flex">
@ -98,10 +99,13 @@ GW TODO:
				@@ -98,10 +99,13 @@ GW TODO:
          v-bind:platforms="socialHandles"
          v-bind:summary="summary"
          v-bind:tags="tags"
-          v-bind:extraContent="extraUserContent"
        >{{streamerName}}</user-details>
+
+        <div v-html="extraUserContent">{{extraUserContent}}</div>
+
      </section>
-      <owncast-footer v-if="layout === 'desktop'" v-bind:appVersion="appVersion"></owncast-footer>
+
+      <owncast-footer v-if="layout === 'desktop'" v-bind:app-version="appVersion"></owncast-footer>

    </div>

@ -114,10 +118,11 @@ GW TODO:
				@@ -114,10 +118,11 @@ GW TODO:
          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 v-html="extraUserContent">{{extraUserContent}}</div>
+
+        <owncast-footer v-bind:app-version="appVersion"></owncast-footer>       
        
      </div>

@ -175,7 +180,7 @@ GW TODO:
				@@ -175,7 +180,7 @@ GW TODO:
  <script src="js/utils.js"></script>
  <script src="js/message.js"></script>
  <script src="js/social.js"></script>
-  <script src="js/footer.js"></script>
+  <script src="js/components.js"></script>
  <script src="js/app.js"></script>
  <script src="js/player/airplay.js"></script>
  <script src="js/player/player.js"></script>
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@ -12,6 +12,7 @@ async function setupApp() {
				@@ -12,6 +12,7 @@ async function setupApp() {
      extraUserContent: "",
      isOnline: false,
      layout: "desktop",
+
      // from config
      logo: null,
      socialHandles: [],
@ -20,7 +21,6 @@ async function setupApp() {
				@@ -20,7 +21,6 @@ async function setupApp() {
      tags: [],
      title: "",
      appVersion: "",
-
    },
    watch: {
      messages: {
@ -41,24 +41,24 @@ async function setupApp() {
				@@ -41,24 +41,24 @@ async function setupApp() {
  appMessaging.init();

  const config = await new Config().init();
-  app.logo = config.logo;
+  app.logo = config.logo.small;
  app.socialHandles = config.socialHandles;
  app.streamerName = config.name;
  app.summary = config.summary && addNewlines(config.summary);
  app.tags =  config.tags;
  app.title = config.title;
+  app.appVersion = config.appVersion;

-  // const configFileLocation = "../js/config.json";

  try {
-    const pageContentFile = "../static/content.md"
+    const pageContentFile = config.extraUserInfoFileName;
    const response = await fetch(pageContentFile);
    const descriptionMarkdown = await response.text()
    const descriptionHTML = new showdown.Converter().makeHtml(descriptionMarkdown);
    app.extraUserContent = descriptionHTML;
    return this;
  } catch (error) {
-    console.log(error);
+    console.log("Error",error);
  }
 }

--- a/webroot/js/components.js
+++ b/webroot/js/components.js
@ -35,11 +35,17 @@ Vue.component('stream-tags', {
				@@ -35,11 +35,17 @@ Vue.component('stream-tags', {
 });

 Vue.component('user-details', {
-  props:  ['logo', 'platforms', 'summary', 'tags', 'extraContent'],
+  props:  ['logo', 'platforms', 'summary', 'tags'],
  template: `
    <div class="user-content">
-      <div class="user-image rounded-full bg-white">
-        <img class="logo" alt="Logo" v-bind:src="logo">            
+      <div
+        class="user-image rounded-full bg-white"
+        v-bind:style="{ backgroundImage: 'url(' + logo + ')' }"
+      >
+        <img
+          class="logo visually-hidden" 
+          alt="Logo" 
+          v-bind:src="logo">            
      </div>
      <div class="user-content-header border-b border-gray-500 border-solid">
        <h2 class="font-semibold">
@ -51,9 +57,6 @@ Vue.component('user-details', {
				@@ -51,9 +57,6 @@ Vue.component('user-details', {
        <div class="stream-summary" v-html="summary"></div>
        <stream-tags v-bind:tags="tags"></stream-tags>
      </div>
-
-      <div v-html="extraContent"></div>
-
    </div>
  `,
 });
--- a/webroot/js/config.js
+++ b/webroot/js/config.js
@ -1,7 +1,7 @@
				@@ -1,7 +1,7 @@
 // add more to the promises later.
 class Config {
  async init() {
-    const configFileLocation = "/config";
+    const configFileLocation = "https://goth.land/config";
    
    try {
      const response = await fetch(configFileLocation);
--- a/webroot/js/message.js
+++ b/webroot/js/message.js
@ -138,10 +138,17 @@ class Messaging {
				@@ -138,10 +138,17 @@ class Messaging {
 	handleShowChangeNameForm() {
 		this.textUserInfoDisplay.style.display = "none";
 		this.tagUserInfoChanger.style.display = "flex";
+		if (document.body.clientWidth < 640) {
+			this.tagChatToggle.style.display = "none";
+		}
 	}
 	handleHideChangeNameForm() {
 		this.textUserInfoDisplay.style.display = "flex";
 		this.tagUserInfoChanger.style.display = "none";
+		if (document.body.clientWidth < 640) {
+			this.tagChatToggle.style.display = "inline-block";
+
+		}
 	}
 	handleUpdateUsername() {
 		var newValue = this.inputChangeUserName.value;
--- a/webroot/js/social.js
+++ b/webroot/js/social.js
@ -1,88 +1,71 @@
				@@ -1,88 +1,71 @@
-const SOCIAL_PLATFORMS_URLS = {
+const SOCIAL_PLATFORMS = {
  default: {
    name: "default",
-    urlPrefix: "",
    imgPos: [0,0], // [row,col]
  },

  facebook: {
    name: "Facebook",
-    urlPrefix: "http://www.facebook.com/",
    imgPos: [0,1],
  },
  twitter: {
    name: "Twitter",
-    urlPrefix: "http://www.twitter.com/",
    imgPos: [0,2],
  },
  instagram: {
    name: "Instagram",
-    urlPrefix: "http://www.instagram.com/",
    imgPos: [0,3],
  },
  snapchat: {
    name: "Snapchat",
-    urlPrefix: "http://www.snapchat.com/",
    imgPos: [0,4],
  },
  tiktok: {
    name: "TikTok",
-    urlPrefix: "http://www.tiktok.com/",
    imgPos: [0,5],
  },
  soundcloud: {
    name: "Soundcloud",
-    urlPrefix: "http://www.soundcloud.com/",
    imgPos: [0,6],
  },
  bandcamp: {
    name: "Bandcamp",
-    urlPrefix: "http://www.basecamp.com/",
    imgPos: [0,7],
  },
  patreon: {
    name: "Patreon",
-    urlPrefix: "http://www.patreon.com/",
    imgPos: [0,1],
  },
  youtube: {
    name: "YouTube",
-    urlPrefix: "http://www.youtube.com/",
    imgPos: [0,9 ],
  },
  spotify: {
    name: "Spotify",
-    urlPrefix: "http://www.spotify.com/",
    imgPos: [0,10],
  },
  twitch: {
    name: "Twitch",
-    urlPrefix: "http://www.twitch.com/",
    imgPos: [0,11],
  },
  paypal: {
    name: "Paypal",
-    urlPrefix: "http://www.paypal.com/",
    imgPos: [0,12],
  },
  github: {
    name: "Github",
-    urlPrefix: "http://www.github.com/",
    imgPos: [0,13],
  },
  linkedin: {
    name: "LinkedIn",
-    urlPrefix: "http://www.linkedin.com/",
    imgPos: [0,14],
  },
  discord: {
    name: "Discord",
-    urlPrefix: "http://www.discord.com/",
    imgPos: [0,15],
  },
  mastadon: {
    name: "Mastadon",
-    urlPrefix: "http://www.mastadon.com/",
    imgPos: [0,16],
  },
 };
@ -98,7 +81,7 @@ Vue.component('social-list', {
				@@ -98,7 +81,7 @@ Vue.component('social-list', {
        v-if="item.platform && item.handle"
        v-bind:key="index"
        v-bind:platform="item.platform"
-        v-bind:username="item.handle"
+        v-bind:url="item.url"
      />
    </ul>
  `,
@ -106,25 +89,27 @@ Vue.component('social-list', {
				@@ -106,25 +89,27 @@ Vue.component('social-list', {
 });

 Vue.component('user-social-icon', {
-  props: ['platform', 'username'],
+  props: ['platform', 'url'],
  data: function() {
-    const platformInfo = SOCIAL_PLATFORMS_URLS[this.platform.toLowerCase()] || SOCIAL_PLATFORMS_URLS["default"];
+    const platformInfo = SOCIAL_PLATFORMS[this.platform.toLowerCase()];
+    const inList = !!platformInfo;
    const imgRow = platformInfo.imgPos && platformInfo.imgPos[0] || 0;
    const imgCol = platformInfo.imgPos && platformInfo.imgPos[1] || 0;
-    const useDefault = platformInfo.name === "default";
+    c
    return {
-      name: platformInfo.name,
-      link: platformInfo.name !== "default" ? `${platformInfo.urlPrefix}/${this.username}` : '#',
+      name: inList ? platformInfo.name : this.platform,
+      link: url,
+
      style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`,
      itemClass: {
        "user-social-item": true,
        "flex": true,
-        "rounded": useDefault,
-        "use-default": useDefault,        
+        "rounded": inList,
+        "use-default": inList,        
      },
      labelClass: {
        "platform-label": true,
-        "visually-hidden": !useDefault,
+        "visually-hidden": !inList,
        "text-indigo-800": true,
      },
    };
@ -137,7 +122,7 @@ Vue.component('user-social-icon', {
				@@ -137,7 +122,7 @@ Vue.component('user-social-icon', {
        :href="link"
      >
        <span class="platform-icon rounded-lg" :style="style" />
-        <span v-bind:class="labelClass">Find @{{username}} on {{platform}}</span>
+        <span v-bind:class="labelClass">Find me on {{platform}}</span>
      </a>
    </li>
  `,
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@ -60,17 +60,26 @@ header h1 {
				@@ -60,17 +60,26 @@ header h1 {
  text-transform: uppercase;
  padding: .5em;
  white-space: nowrap;
-  /* width: 20em; */
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
+  overflow: hidden;
 }
-img.logo {
-  height: 1.2em;
-  width: 1.2em;
+#logo-container{
+  height: 1.75em;
+  width: 1.75em;
+  min-height: 1.75em;
+  min-width: 1.75em;
+  margin-right: .5em;
  display: inline-block;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 1.35em;
+}
+header .instance-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-
 #chat-toggle {
  cursor: pointer;
  text-align: center;
@ -132,13 +141,16 @@ footer span {
				@@ -132,13 +141,16 @@ footer span {
  width: var(--user-image-width);
  height: var(--user-image-width);
  max-height: var(--user-image-width);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: calc(var(--user-image-width) - 1em);
 }

-.user-image img {
+/* .user-image img {
  display: inline-block;
  width: 100%;
  height: 100%;
-}
+} */
 .stream-summary {
  margin: 1em 0;
 }
@ -414,44 +426,6 @@ h2 {
				@@ -414,44 +426,6 @@ h2 {
  display: none;
 }

-/* ************************************************8 */
-
-@media screen and (max-width: 860px) {
-  :root {
-    --right-col-width: 20em;
-    --user-image-width: 6em;
-  }
-  
-  #chat-container {
-    width: var(--right-col-width);
-  }
-
-}
-
-@media screen and (max-width: 640px ) {
-  .desktop {
-    --video-container-height: 50vh;
-  }
-  .desktop #chat-container {
-    height: auto;
-    position: relative;
-    right: unset;
-    top: unset;
-    width: 100%;
-    z-index: 1;
-  }
-  .desktop.chat #video-container,
-  .desktop.chat #stream-info,
-  .desktop.chat #user-content {
-    width: 100%;
-  }
-  .desktop #footer,
-  .desktop.chat #user-content {
-    display: none;
-  }
-
-}
-
 /* ************************************************8 */
 /* ************************************************8 */

@ -524,11 +498,56 @@ h2 {
				@@ -524,11 +498,56 @@ h2 {
  display: none;
 }

+/* ************************************************8 */
+
+@media screen and (max-width: 860px) {
+  :root {
+    --right-col-width: 20em;
+    --user-image-width: 6em;
+  }
+  
+  #chat-container {
+    width: var(--right-col-width);
+  }
+
+}

@media screen and (max-width: 640px ) {
  :root {
    --video-container-height: 36vh;
  }
+
+  .desktop {
+    --video-container-height: 50vh;
+  }
+  .desktop #chat-container {
+    height: auto;
+    position: relative;
+    right: unset;
+    top: unset;
+    width: 100%;
+    z-index: 1;
+  }
+  .desktop.chat #video-container,
+  .desktop.chat #stream-info,
+  .desktop.chat #user-content {
+    width: 100%;
+  }
+  .desktop #footer,
+  .desktop.chat #user-content {
+    display: none;
+  }
+
+
+  #logo-container {
+    display: none;
+  }
+  header h1 {
+    max-width: 58%;
+  }
+  #user-options-container {
+    max-width: 41%;
+  }
 }

@media screen and (orientation: landscape) and (min-width: 1024px) {