WebPlay/client
1
1
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

main #19

Merged
artem merged 39 commits from main into dev 2023-09-22 14:13:12 +02:00
Conversation 0 Commits 39 Files Changed 36 +84 -37
7 changed files with 84 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 813b1c09fc - Show all commits

4
public/config.json
View File

@ -1,5 +1,5 @@
{
"backend_dev": "http://localhost:31204",
"backend_de": "https://webplay.rocks",
"backend_de": "http://localhost:31204",
"backend_dev": "https://webplay.rocks",
"backend": "https://webplay.rocks"
}

8
public/static/app.css
View File

@ -89,7 +89,9 @@ td.fillCell>* {
#artistViewer #background,
#albumViewer #background,
#boxViewer #background {
#boxViewer #background,
#albumContent #background,
#boxContent #background {
background-size: cover;
background-position: center;
top: -16px;
@ -591,6 +593,10 @@ td.fillCell>* {
animation: glow 1s infinite alternate;
}
.z-1 {
z-index: -1;
}
.z1 {
z-index: 1;
}

12
public/static/style.css
View File

@ -136,6 +136,10 @@ h6.slim {
font-weight: normal;
}
.relative {
position: relative;
}
input {
border-width: 1px;
border-style: solid;
@ -511,6 +515,14 @@ label.yellow50 {
border-color: var(--yellow);
}
button.faded {
opacity: 0.25;
}
button.faded:hover {
opacity: 1;
}
button.medium {
padding: 8px;
}

43
src/components/AlbumContent.vue
View File

@ -1,21 +1,24 @@
<template>
<div id="content" class="flex-column">
<div id="albumContent" class="flex-column">
<div class="flex-column pa-horizontal border-bottom hideOnMobile">
<h1>{{ album.title }}</h1>
<h2>{{ album.artist_name }}</h2>
</div>
<div id="tracks" class="flex-row">
<div class="flex-column">
<img id="cover" class="shadow ma24" :src="cover" />
<div id="album" class="flex-row">
<div id="header" class="flex-column relative">
<div id="background" :style="coverBackground" />
<img id="cover" class="shadow ma24 z1" :src="cover" />
<p class="center ma-off hideOnMobile">
<b>{{ album.tracks.length }}</b> Tracks
</p>
</div>
<ul id="trackList" class="tracks">
<li v-for="track in album.tracks" :key="track._id">
<TrackItem :track="track" :showCover="false" />
</li>
</ul>
<div id="tracks" class="flex-column grow">
<ul id="trackList" class="tracks">
<li v-for="track in album.tracks" :key="track._id">
<TrackItem :track="track" :showCover="false" />
</li>
</ul>
</div>
</div>
</div>
</template>
@ -43,6 +46,9 @@ export default {
}
return this.album.covers.cover256;
},
coverBackground() {
return "background-image: url('" + this.cover + "'); z-index: -1";
},
},
components: {
TrackItem,
@ -56,16 +62,27 @@ export default {
width: 256px;
}
#content,
#tracks {
#albumContent {
overflow: hidden;
}
#album {
overflow: auto;
}
#header {
overflow: hidden;
}
#tracks {
background-color: var(--white);
overflow-y: auto;
}
@media (max-width: 480px) {
#tracks {
#album {
flex-direction: column;
max-height: 100%;
}
#trackList {
#tracks {
border-top: 1px solid var(--light-border);
}
}

42
src/components/BoxContent.vue
View File

@ -1,20 +1,23 @@
<template>
<div id="content" class="flex-column">
<div id="boxContent" class="flex-column">
<div class="flex-column pa-horizontal border-bottom hideOnMobile">
<h1>{{ box.title }}</h1>
</div>
<div id="videos" class="flex-row">
<div class="flex-column">
<div id="box" class="flex-row">
<div id="header" class="flex-column relative">
<div id="background" :style="coverBackground" />
<img id="cover" class="shadow ma24" :src="cover" />
<p class="center ma-off hideOnMobile">
<b>{{ box.videos.length }}</b> Videos
</p>
</div>
<ul id="videoList" class="videos">
<li v-for="video in box.videos" :key="video._id">
<VideoItem :video="video" />
</li>
</ul>
<div id="videos" class="flex-column grow">
<ul id="videoList" class="videos">
<li v-for="video in box.videos" :key="video._id">
<VideoItem :video="video" />
</li>
</ul>
</div>
</div>
</div>
</template>
@ -42,6 +45,9 @@ export default {
}
return this.box.covers.cover256;
},
coverBackground() {
return "background-image: url('" + this.cover + "'); z-index: -1";
},
},
components: {
VideoItem,
@ -55,20 +61,32 @@ export default {
width: 256px;
}
#content,
#videos {
#boxContent {
overflow: hidden;
}
#box {
overflow: auto;
}
#header {
overflow: hidden;
}
#videos {
background-color: var(--white);
overflow-y: auto;
}
.video {
max-width: 256px;
}
@media (max-width: 480px) {
#videos {
#box {
flex-direction: column;
max-height: 100%;
}
#videoList {
#videos {
border-top: 1px solid var(--light-border);
}
.video {

4
src/components/dialogs/SharedItems.vue
View File

@ -21,8 +21,8 @@
<p class="grow ma-off">
{{ share.title }}
</p>
<button class="flat danger" @click="shareDisable(share)">
<awesome-icon icon="trash" />
<button class="flat danger faded" @click="shareDisable(share)" title="Disable Sharing">
<awesome-icon icon="trash-alt" />
</button>
</div>
</li>

8
src/components/dialogs/Users.vue
View File

@ -87,7 +87,7 @@
<button
@click="deleteUser(user)"
title="Remove Useraccount"
class="flat danger"
class="flat danger faded"
v-if="user._id != me._id"
>
<awesome-icon icon="trash-alt" />
@ -198,12 +198,6 @@ export default {
#usersBody .me {
font-weight: bold;
}
#usersBody table button {
opacity: 0.25;
}
#usersBody table button:hover {
opacity: 1;
}
#usersBody .user-role {
display: flex;
align-items: center;