mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-24 13:50:06 +03:00
Code Issues Projects Releases Packages Wiki Activity

componentize user info

Browse source
This commit is contained in:
Ginger Wong 2020-06-28 17:15:53 -07:00
parent 6c7af9ffae
commit b228d3a4e5
5 changed files with 62 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
webroot/index.html
View file

@ -84,45 +84,41 @@ GW TODO:
</div>
<div id="stream-info" v-cloak class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
<section id="stream-info" aria-label="Stream status" v-cloak class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
<span>{{ streamStatus }}</span>
<span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
<span>{{ overallMaxViewerCount }} overall.</span>
</div>
</section>
</main>
<section id="user-content" class="user-content">
<div class="user-image rounded-full bg-white">
<img class="logo" v-bind:src="logo">
</div>
<div class="">
<div class="user-content-header border-b border-gray-500 border-solid">
<h2 class="font-semibold">About <span class="streamer-name text-indigo-600">{{streamerName}}</span></h2>
<social-list v-bind:platforms="socialHandles"></social-list>
<div class="stream-summary" v-html="summary"></div>
<stream-tags v-bind:tags="tags"></stream-tags>
</div>
<!-- USER CONTENT... -->
<section class="extra-user-content" v-html="extraUserContent"></section>
</div>
<section id="user-content" v-if="layout === 'desktop'" aria-label="User information">
<user-details
v-bind:logo="logo"
v-bind:platforms="socialHandles"
v-bind:summary="summary"
v-bind:tags="tags"
v-bind:extraContent="extraUserContent"
>{{streamerName}}</user-details>
</section>
<div id="footer">
<owncast-footer v-bind:appVersion="appVersion"></owncast-footer>
</div>
<owncast-footer v-if="layout === 'desktop'" v-bind:appVersion="appVersion"></owncast-footer>
</div>
<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 class="extra-user-content" v-html="extraUserContent"></div>
<div class="#footer-touch">
<owncast-footer v-bind:appVersion="appVersion"></owncast-footer>
</div>
<div v-if="layout !== 'desktop'" id="user-content-touch">
<user-details
v-bind:logo="logo"
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>
<div id="chat-container" class="bg-gray-800">

1
webroot/js/app.js
View file

@ -11,6 +11,7 @@ async function setupApp() {
messages: [],
extraUserContent: "",
isOnline: false,
layout: "desktop",
// from config
logo: null,
socialHandles: [],

28
webroot/js/footer.js
View file

@ -2,7 +2,7 @@ Vue.component('owncast-footer', {
props: {
appVersion: {
type: String,
default: "0.1",
default: '0.1',
},
},
@ -32,4 +32,28 @@ Vue.component('stream-tags', {
</li>
</ul>
`,
});
});
Vue.component('user-details', {
props: ['logo', 'platforms', 'summary', 'tags', 'extraContent'],
template: `
<div class="user-content">
<div class="user-image rounded-full bg-white">
<img class="logo" alt="Logo" v-bind:src="logo">
</div>
<div class="user-content-header border-b border-gray-500 border-solid">
<h2 class="font-semibold">
About <span class="streamer-name text-indigo-600">
<slot></slot>
</span>
</h2>
<social-list v-bind:platforms="platforms"></social-list>
<div class="stream-summary" v-html="summary"></div>
<stream-tags v-bind:tags="tags"></stream-tags>
</div>
<div v-html="extraContent"></div>
</div>
`,
});

3
webroot/js/message.js
View file

@ -78,10 +78,13 @@ class Messaging {
if (hasTouchScreen()) {
this.scrollableMessagesContainer = document.body;
this.tagAppContainer.classList.add("touch-screen");
window.app.layout = "touch";
window.onorientationchange = this.handleOrientationChange.bind(this);
this.handleOrientationChange();
} else {
this.tagAppContainer.classList.add("desktop");
window.app.layout = "desktop";
}
}

25
webroot/styles/layout.css
View file

@ -85,6 +85,7 @@ footer {
justify-content: flex-start;
font-size: .75em;
padding: 2em;
opacity: .5;
}
footer span {
display: inline-block;
@ -109,20 +110,18 @@ footer span {
.user-content {
padding: 2em;
}
#user-content {
/* #user-content {
display: block;
}
#user-content-touch {
display: none;
}
} */
/* ************************************************8 */
.user-content {
padding: 3em;
}
#user-content {
display: flex;
flex-direction: row;
}
@ -215,9 +214,6 @@ h2 {
list-style: unset;
}
#footer-touch {
display: none;
}
/* ************************************************8 */
@ -471,15 +467,14 @@ h2 {
}
.touch-screen .user-content {
flex-direction: column;
align-content: center;
}
.touch-screen .user-image {
margin: auto;
}
.touch-screen #footer,
.touch-screen #user-content {
display: none;
}
.touch-screen #footer-touch,
.touch-screen #user-content-touch {
display: block;
}
.touch-screen #stream-info {
height: 2.5em;