Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ginger Wong 2020-06-30 02:36:10 -07:00
parent 5a3aed9587
commit 6803f7e7e8
7 changed files with 118 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
webroot/index.html
View File

@ -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 @@
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:
<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:
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:
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:
<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>

10
webroot/js/app.js
View File

@ -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);
}
}

15
webroot/js/footer.js → webroot/js/components.js
View File

@ -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', {
<div class="stream-summary" v-html="summary"></div>
<stream-tags v-bind:tags="tags"></stream-tags>
</div>
<div v-html="extraContent"></div>
</div>
`,
});

2
webroot/js/config.js
View File

@ -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);

7
webroot/js/message.js
View File

@ -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;

41
webroot/js/social.js
View File

@ -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"
/>
</ul>
`,
@ -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"
>
<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>
`,

109
webroot/styles/layout.css
View File

@ -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) {