diff --git a/webroot/index.html b/webroot/index.html index 1e9e71266..9fba01f7b 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -3,7 +3,7 @@ - Owncast Demo Server + {{title}} @@ -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 -*/ + + */
@@ -38,10 +35,14 @@ GW TODO:

- - + + - {{title}} + {{title}}

@@ -98,10 +99,13 @@ GW TODO: v-bind:platforms="socialHandles" v-bind:summary="summary" v-bind:tags="tags" - v-bind:extraContent="extraUserContent" >{{streamerName}} + +
{{extraUserContent}}
+ - + +
@@ -114,10 +118,11 @@ GW TODO: v-bind:platforms="socialHandles" v-bind:summary="summary" v-bind:tags="tags" - v-bind:extraContent="extraUserContent" >{{streamerName}} - +
{{extraUserContent}}
+ +
@@ -175,7 +180,7 @@ GW TODO: - + diff --git a/webroot/js/app.js b/webroot/js/app.js index 275901393..331267697 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -12,6 +12,7 @@ async function setupApp() { extraUserContent: "", isOnline: false, layout: "desktop", + // from config logo: null, socialHandles: [], @@ -20,7 +21,6 @@ async function setupApp() { tags: [], title: "", appVersion: "", - }, watch: { messages: { @@ -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); } } diff --git a/webroot/js/footer.js b/webroot/js/components.js similarity index 79% rename from webroot/js/footer.js rename to webroot/js/components.js index 760ef62f3..3aab4d231 100644 --- a/webroot/js/footer.js +++ b/webroot/js/components.js @@ -35,11 +35,17 @@ Vue.component('stream-tags', { }); Vue.component('user-details', { - props: ['logo', 'platforms', 'summary', 'tags', 'extraContent'], + props: ['logo', 'platforms', 'summary', 'tags'], template: `
-
- +
+

@@ -51,9 +57,6 @@ Vue.component('user-details', {

- -
-
`, }); diff --git a/webroot/js/config.js b/webroot/js/config.js index 1602ea62e..12e217a5c 100644 --- a/webroot/js/config.js +++ b/webroot/js/config.js @@ -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); diff --git a/webroot/js/message.js b/webroot/js/message.js index 3b0768018..2fd19a5cf 100644 --- a/webroot/js/message.js +++ b/webroot/js/message.js @@ -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; diff --git a/webroot/js/social.js b/webroot/js/social.js index 791bea3e5..261b6a30f 100644 --- a/webroot/js/social.js +++ b/webroot/js/social.js @@ -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', { 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" /> `, @@ -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', { :href="link" > - Find @{{username}} on {{platform}} + Find me on {{platform}} `, diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index 74fc01769..a319ca6a6 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -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 { 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 { 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 { 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) {