Skip to content

GitLab

Commit 7481359b authored by Andrea Ida Malkah Klaura's avatar Andrea Ida Malkah Klaura
Browse files

header, showmanager, icons

parent 193a55d2
Hide whitespace changes
Inline Side-by-side
src/App.vue
View file @ 7481359b
......@@ -23,8 +23,7 @@ export default {
'modules': [
{ slug: '', title: 'Home' },
{ slug: 'shows', title: 'Sendungen verwalten' },
{ slug: 'files', title: 'Dateien und Playlists' },
{ slug: 'vue-intro', title: 'Vue.js Intro Page' }
{ slug: 'files', title: 'Dateien und Playlists' }
],
'activeModule': {
route: '/'
......
src/components/Header.vue
View file @ 7481359b
......@@ -50,7 +50,13 @@ export default {
<style>
header {
background-color: #ad7fa8;
background: #ad7fa8; /* for browsers that don't support gradients */
/* background: linear-gradient(#ad7fa8, #888a85); /* light magenta to light alu */
/* background: linear-gradient(#ad7fa8, #555753); /* light magenta to medium alu */
/* background: linear-gradient(#ad7fa8, #5c3566); /* light magenta to dark magenta */
/* background: linear-gradient(#ad7fa8, #75507b); /* light magenta to medium magenta */
/* background: linear-gradient(#5c3566, #555753); /* dark magenta to light alu */
background: linear-gradient(#5c3566, #ad7fa8); /* dark magenta to light magenta */
border-bottom: 1px solid #5c3566;
}
nav {
......
src/components/Home.vue
View file @ 7481359b
......@@ -4,13 +4,13 @@
<p>Here are some infos for you on how to use this interface...</p>
<div class="section group">
<div class="col span_1_of_4">
<router-link to="sendungen">
<router-link to="shows">
<img src="../assets/applications-multimedia.png">
<p>Schedule your shows</p>
</router-link>
</div>
<div class="col span_1_of_4">
<router-link to="filemanager">
<router-link to="files">
<img src="../assets/audio-x-generic.png">
<p>Manage files and playlists</p>
</router-link>
......
src/components/ShowManager.vue
View file @ 7481359b
......@@ -11,38 +11,58 @@
</div>
</div>
<p align="left">Die nächsten <select v-model="numUpcoming">
<option>8</option>
<option>16</option>
<option value="all">alle</option>
</select> Sendungen:</p>
<div class="section group">
<div class="col span_2_of_4">
<div v-for="episode in this.episodesFutureShowFirstHalf">
{{ prettyDate(episode.start) }}
<div class="nextepisodes">
<p align="left">Die nächsten <select v-model="numUpcoming">
<option>8</option>
<option>16</option>
<option value="all">alle</option>
</select> Sendungen:</p>
<div class="section group">
<div class="col span_2_of_4">
<div align="left" v-for="episode in this.episodesFutureShowFirstHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
</div>
</div>
</div>
<div class="col span_2_of_4">
<div v-for="episode in this.episodesFutureShowSecondHalf">
{{ episode.start }}
<div align="left" class="col span_2_of_4">
<div v-for="episode in this.episodesFutureShowSecondHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
</div>
</div>
</div>
</div>
<p align="left">Die letzten <select v-model="numRecent">
<option>8</option>
<option>16</option>
<option>alle</option>
</select> Sendungen:</p>
<div class="section group">
<div class="col span_2_of_4">
<div v-for="episode in this.episodesPastShowFirstHalf">
{{ episode.start }}
<div class="recentepisodes">
<p align="left">Die letzten <select v-model="numRecent">
<option>8</option>
<option>16</option>
<option value="all">alle</option>
</select> Sendungen:</p>
<div class="section group">
<div class="col span_2_of_4">
<div align="left" v-for="episode in this.episodesPastShowFirstHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="setPlaylist" />
</div>
</div>
</div>
<div class="col span_2_of_4">
<div v-for="episode in this.episodesPastShowSecondHalf">
{{ episode.start }}
<div class="col span_2_of_4">
<div align="left" v-for="episode in this.episodesPastShowSecondHalf">
<img v-if="episode.source === ''" src="../assets/16x16/go-top.png" alt="choose a playlist for this episode" v-on:click="setPlaylist" />
<img v-else src="../assets/16x16/media-playback-start.png" alt="play" v-on:click="playPlaylist" />
{{ prettyDate(episode.start) }} ({{ prettyDuration(episode.start, episode.end) }})
<span :title="episode.title">{{ prettyTitle(episode.title) }}</span>
<img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="editEpisode" />
</div>
</div>
</div>
</div>
......@@ -123,10 +143,27 @@ export default {
},
prettyDate: function (date) {
var d = new Date(date)
return leadingZero(d.getDate()) + '. ' + leadingZero(d.getMonth()) + '. ' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth()) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
},
prettyDuration: function (start, end) {
var duration = (new Date(end).getTime() - new Date(start).getTime()) / 1000
var hours = Math.floor(duration / 60 / 60)
var minutes = (duration / 60) % 60
return leadingZero(hours) + ':' + leadingZero(minutes)
},
prettyTitle: function (title) {
if (title === '') return '...'
else if (title.length > 25) return title.slice(0, 25) + '...'
else return title
},
editEpisode: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
},
setPlaylist: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
},
playPlaylist: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
}
},
created () {
......@@ -149,6 +186,8 @@ export default {
}
</script>
<style>
<style scoped>
div.recentepisodes {
margin-top: 2em;
}
</style>
src/router/index.js
View file @ 7481359b
import Vue from 'vue'
import Router from 'vue-router'
import VueIntroPage from '@/components/VueIntroPage'
import Home from '@/components/Home'
import LogIn from '@/components/LogIn'
import ShowManager from '@/components/ShowManager'
......@@ -13,7 +12,6 @@ export default new Router({
{ path: '/', name: 'home', component: Home },
{ path: '/shows', name: 'shows', component: ShowManager },
{ path: '/files', name: 'files', component: FileManager },
{ path: '/login', name: 'login', component: LogIn },
{ path: '/vue-intro', name: 'VueIntroPage', component: VueIntroPage }
{ path: '/login', name: 'login', component: LogIn }
]
})
Supports Markdown
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