Commit 95311ebc authored by onny's avatar onny

fix and style sidebar

parent f69bbfb5
Pipeline #205 failed with stages
in 12 minutes and 48 seconds
......@@ -34,6 +34,9 @@
</EmptyContent>
</template>
</AppContent>
<Sidebar
:show-sidebar="showSidebar"
:sidebar-station="sidebarStation" />
</Content>
</template>
......@@ -47,6 +50,7 @@ import axios from '@nextcloud/axios'
import Navigation from './Navigation'
import Table from './Table'
import Sidebar from './Sidebar'
import { Howl, Howler } from 'howler'
......@@ -60,6 +64,7 @@ export default {
AppContent,
Table,
EmptyContent,
Sidebar,
},
data: () => ({
tableData: [],
......@@ -73,12 +78,6 @@ export default {
player() {
return this.$store.state.player
},
stationTags() {
if (this.sidebarStation.tags) {
return this.sidebarStation.tags.replaceAll(',', ', ')
}
return ''
},
},
watch: {
$route: 'onRoute',
......
<template>
<AppSidebar v-show="showSidebar"
<AppSidebar
v-show="showSidebar"
:title="sidebarStation.name"
:subtitle="stationTags"
:background="sidebarStation.favicon"
class="has-preview"
@close="showSidebar=false">
<input type="text" :value="sidebarStation.url_resolved" disabled="disabled">
<Actions>
<ActionButton icon="icon-clippy" @click="copyLink( { url: shareUrl(share) })">
{{ t('radio', 'Copy link to clipboard') }}
</ActionButton>
</Actions>
<div class="configBox">
<span class="icon icon-link" />
<span class="title">
Stream URL
</span>
<div class="content">
<input type="text" :value="sidebarStation.url_resolved" disabled="disabled">
<Actions>
<ActionButton icon="icon-clippy" @click="copyLink( { url: shareUrl(share) })">
{{ t('radio', 'Copy link to clipboard') }}
</ActionButton>
</Actions>
</div>
</div>
<div class="configBox">
<span class="icon icon-external" />
<span class="title">
Homepage
</span>
<div class="content">
<span>
<a
:href="sidebarStation.homepage"
target="new">
{{ sidebarStation.homepage }}
</a>
</span>
</div>
</div>
<div class="configBox">
<span class="icon icon-details" />
<span class="title">
Country & Language
</span>
<div class="content">
<span>
{{ sidebarStation.country }}, {{ sidebarStation.language }}
</span>
</div>
</div>
<div class="configBox">
<span class="icon icon-details" />
<span class="title">
Codec & Bitrate
</span>
<div class="content">
<span>
{{ sidebarStation.codec }}, {{ sidebarStation.bitrate }}
</span>
</div>
</div>
</AppSidebar>
</template>
......@@ -24,5 +72,65 @@ export default {
Actions,
ActionButton,
},
props: {
showSidebar: {
type: Boolean,
default() { return false },
},
sidebarStation: {
type: Array,
default() { return [] },
},
},
computed: {
stationTags() {
if (this.sidebarStation.tags) {
return this.sidebarStation.tags.replaceAll(',', ', ')
}
return ''
},
},
}
</script>
<style lang="scss" scoped>
.app-sidebar {
&.has-preview::v-deep {
.app-sidebar-header__figure {
background-size: cover;
height: 200px;
}
}
}
.configBox {
padding: 0 15px;
margin-bottom: 20px;
}
.configBox .title {
font-size: 1.2em;
display: block;
margin-bottom: 15px;
}
.configBox .icon {
float: left;
margin: 4px 7px 0px 0px;
}
.configBox .content {
display: flex;
margin-left: 25px;
}
.configBox .content input {
flex-grow: 1;
}
.configBox .content button {
margin-top: -3px;
}
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment