From 1a44a4bd2f91e78c21cc1b63aedf96748b360cfa Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Sun, 21 Jun 2020 01:31:08 -0700 Subject: [PATCH] user content general layout --- webroot/index.html | 26 ++++++++++------ webroot/js/app.js | 18 ++++++++--- webroot/js/config.json | 5 ++- webroot/js/footer.js | 18 +++++++++++ webroot/js/social.js | 22 +++++++------ webroot/styles/layout.css | 65 +++++++++++++++++++++++++++++++++------ 6 files changed, 121 insertions(+), 33 deletions(-) diff --git a/webroot/index.html b/webroot/index.html index c397adaed..c80dd491c 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -36,7 +36,7 @@ GW TODO:

- + {{title}}

@@ -90,14 +90,22 @@ GW TODO:
- - - - -
- - +
+ +
+
+
+

About {{streamerName}}

+ +
+ +
+ +
+
+ + @@ -106,7 +114,7 @@ GW TODO: -
+
diff --git a/webroot/js/app.js b/webroot/js/app.js index 11ca6dccf..e7f334f88 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -9,10 +9,16 @@ async function setupApp() { sessionMaxViewerCount: 0, overallMaxViewerCount: 0, messages: [], - description: "", - title: "", + extraUserContent: "", isOnline: false, + // from config + logo: null, socialHandles: [], + streamerName: "", + summary: "", + tags: [], + title: "", + }, watch: { messages: { @@ -33,8 +39,12 @@ async function setupApp() { appMessaging.init(); const config = await new Config().init(); - app.title = config.title; + app.logo = config.logo; app.socialHandles = config.socialHandles; + app.streamerName = config.name; + app.summary = config.summary && addNewlines(config.summary); + app.tags = config.tags; + app.title = config.title; // const configFileLocation = "../js/config.json"; @@ -43,7 +53,7 @@ async function setupApp() { const response = await fetch(pageContentFile); const descriptionMarkdown = await response.text() const descriptionHTML = new showdown.Converter().makeHtml(descriptionMarkdown); - app.description = descriptionHTML; + app.extraUserContent = descriptionHTML; return this; } catch (error) { console.log(error); diff --git a/webroot/js/config.json b/webroot/js/config.json index fefa12656..a83b98954 100644 --- a/webroot/js/config.json +++ b/webroot/js/config.json @@ -1,7 +1,10 @@ { + "name": "gabek", "title": "Owncast Demo Server", "logo": "/img/logo128.png", - "description": "This is a demo server for Owncast. You can read more about it at owncast.online. You can edit this description in your web config file.

Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.", + + "summary": "This is brief summary of whom you are or what your stream is. demo server for Owncast. You can read more about it at owncast.online. You can edit this description in your web config file.\n\nBlathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.", + "tags": [ "music", "software", diff --git a/webroot/js/footer.js b/webroot/js/footer.js index fc7d8460e..330bd34d4 100644 --- a/webroot/js/footer.js +++ b/webroot/js/footer.js @@ -7,3 +7,21 @@ Vue.component('owncast-footer', { `, }); + + +Vue.component('stream-tags', { + props: ['tags'], + template: ` + + `, +}); \ No newline at end of file diff --git a/webroot/js/social.js b/webroot/js/social.js index ad8494c84..3b23feb5d 100644 --- a/webroot/js/social.js +++ b/webroot/js/social.js @@ -91,7 +91,7 @@ Vue.component('social-list', { props: ['platforms'], template: ` - + `, }); @@ -130,13 +130,15 @@ Vue.component('user-social-icon', { }; }, template: ` - - - Find @{{username}} on {{platform}} - +
  • + + + Find @{{username}} on {{platform}} + +
    • `, }); diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index d38890598..1fc652320 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -4,20 +4,13 @@ --right-col-width: 24em; --video-container-height: 50vh; --header-bg-color: rgba(20,0,40,1); + --user-image-width: 10em; } body { font-size: 14px; } -/* Tailwind sets list styles to none. I don't know why. */ -ol { - list-style: decimal; -} - -ul { - list-style: unset; -} a:hover { text-decoration: underline; @@ -121,13 +114,58 @@ footer { .user-content { - padding: 2em; + padding: 3em; } +#user-content { + display: flex; + flex-direction: row; +} +.user-content .user-image { + padding: 1em; + margin-right: 2em; + min-width: var(--user-image-width); + width: var(--user-image-width); + height: var(--user-image-width); + max-height: var(--user-image-width); +} + +.user-image img { + display: inline-block; + width: 100%; + height: 100%; +} +.stream-summary { + margin: 1em 0; +} +.extra-user-content { + margin: 1em 0; +} + +h2 { + font-size: 3em; +} +.user-content-header { + margin-bottom: 2em; +} + +.tag-list { + flex-direction: row; + margin: 1em 0; +} +.tag-list li { + font-size: .75em; + text-transform: uppercase; + margin-right: .75em; + padding: .5em; +} + + .social-list { flex-direction: row; align-items: center; justify-content: flex-start; + flex-wrap: wrap; } .social-list .follow-label { font-weight: bold; @@ -164,6 +202,14 @@ footer { max-width: 10em; } +.extra-user-content ol { + list-style: decimal; +} + +.extra-user-content ul { + list-style: unset; +} + /* ************************************************8 */ @@ -365,6 +411,7 @@ footer { @media screen and (max-width: 860px) { :root { --right-col-width: 20em; + --user-image-width: 6em; } #chat-container {