Commit 6f0ef1ca authored by Andrea Ida Malkah Klaura's avatar Andrea Ida Malkah Klaura
Browse files

added bootstrap and changed divs to bootstrap grid

parent 93ea7dcb
<template>
<div id="app">
<app-header v-bind:modules="modules" v-bind:activeModule="activeModule" v-bind:user="user"></app-header>
<div class="content-width">
<div class="container">
<router-view/>
</div>
<app-footer></app-footer>
......@@ -9,6 +9,8 @@
</template>
<script>
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import header from './components/Header.vue'
import footer from './components/Footer.vue'
......@@ -39,16 +41,16 @@ export default {
}
</script>
<style src="../node_modules/bootstrap/less/bootstrap.less" lang="less"></style>
<style src="./styles.css" lang="css"></style>
<style>
#app {
text-align: center;
color: #2e3436;
}
/*
#app .content-width {
margin: auto;
width: 920px;
max-width: 920px;
}
*/
</style>
<template>
<header>
<div class="content-width header-branding section group">
<div class="col span_3_of_4">
<span class="header-title"><router-link to="home">AUTOradio dashboard</router-link></span>
</div>
<div class="col span_1_of_4">
<a href="http://o94.at" target="new"><img class="header-logo" src="../assets/logo.jpg" /></a>
</div>
</div>
<div class="content-width section group">
<div class="col span_1_of_4">
<router-link to="help"><img src="../assets/help-browser-32x32.png" alt="Help symbol" title="Go to help pages" v-on:click="activeModule.route = 'help'"></router-link>
</div>
<div class="col span_2_of_4">
<nav>
Go to:
<select v-model="activeModule.route" v-on:change="activateModule">
<option v-for="mod in modules" v-bind:value="mod.slug">{{ mod.title }}</option>
</select>
</nav>
<div class="container">
<div class="row header-branding">
<div class="col-9">
<span class="header-title"><router-link to="home">AUTOradio dashboard</router-link></span>
</div>
<div class="col-3 header-right">
<a href="http://o94.at" target="new"><img class="header-logo" src="../assets/logo.jpg" /></a>
</div>
</div>
<div class="col span_1_of_4">
<div v-if="user.logged_in">
Logged in as: {{ user.name }}
<router-link v-bind:to="{ name: 'login', params: { action: 'logout'} }"><img src="../assets/16x16/media-eject.png" alt="log-out symbol" title="Log out" v-on:click="user.logged_in = !user.logged_in"></router-link>
<div class="row">
<div class="col-3">
<router-link to="help"><img src="../assets/help-browser-32x32.png" alt="Help symbol" title="Go to help pages" v-on:click="activeModule.route = 'help'"></router-link>
</div>
<div v-if="! user.logged_in">
You are not logged in. <router-link to="login"><img src="../assets/16x16/system-users.png" alt="log-in symbol" title="Log in" v-on:click="user.logged_in = !user.logged_in"></router-link>
<div class="col-6">
<nav>
Go to:
<select v-model="activeModule.route" v-on:change="activateModule">
<option v-for="mod in modules" v-bind:value="mod.slug">{{ mod.title }}</option>
</select>
</nav>
</div>
<div class="col-3 header-right">
<div v-if="user.logged_in">
Logged in as: {{ user.name }}
<router-link v-bind:to="{ name: 'login', params: { action: 'logout'} }"><img src="../assets/16x16/media-eject.png" alt="log-out symbol" title="Log out" v-on:click="user.logged_in = !user.logged_in"></router-link>
</div>
<div v-if="! user.logged_in">
You are not logged in. <router-link to="login"><img src="../assets/16x16/system-users.png" alt="log-in symbol" title="Log in" v-on:click="user.logged_in = !user.logged_in"></router-link>
</div>
</div>
</div>
</div>
......@@ -69,8 +71,10 @@ nav {
height: 75px;
line-height: 75px;
}
.header-right {
text-align: right;
}
.header-title {
font-family: 'Montserrat', sans-serif;
font-size: 3em;
font-weight: bold;
vertical-align: middle;
......
<template>
<div>
<h1>Welcome to the Dashboard!</h1>
<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">
<div align="center">
<br />
<h1>Welcome to the Dashboard!</h1>
<p>Here are some infos for you on how to use this interface...</p>
<br />
</div>
<div class="row">
<div class="col-3" align="center">
<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">
<div class="col-3" align="center">
<router-link to="files">
<img src="../assets/audio-x-generic.png">
<p>Manage files and playlists</p>
</router-link>
</div>
<div class="col span_1_of_4">
<div class="col-3" align="center">
<router-link to="settings">
<img src="../assets/applications-system.png">
<p>Settings</p>
</router-link>
</div>
<div class="col span_1_of_4">
<div class="col-3" align="center">
<router-link to="help">
<img src="../assets/help-browser.png">
<p>Help pages</p>
......
<template>
<div>
<h1>Sendereihen &amp; Sendungen</h1>
<div class="section group">
<div class="col span_4_of_4">
<div class="row">
<div class="col">
Aktuelle Sendereihe:
<select v-model="currentShow" v-on:change="switchShow">
<option v-for="(show, index) in this.shows" v-bind:value="index">{{ show.name }}</option>
......@@ -11,36 +11,34 @@
</div>
</div>
<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 v-if="episodesLoaded">
<div class="section group">
<div class="col span_2_of_4">
<div 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>
<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 v-if="episodesLoaded">
<div class="row">
<div class="col-6">
<div 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 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 class="col-6">
<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 v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
</div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
<div class="recentepisodes">
<p>Die letzten <select v-model="numRecent">
......
......@@ -4,8 +4,10 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
import BootstrapVue from 'bootstrap-vue'
Vue.use(VueResource)
Vue.use(BootstrapVue)
Vue.config.productionTip = false
......
......@@ -4,58 +4,13 @@
*/
/**
* Responsive Grid System
* This part relies on code by Graham Miller and uses a Creative Commons Attribution 3.0 License: http://www.responsivegridsystem.com
*/
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF FOUR */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}
/**
* Typography
*/
/*
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@font-face {
......@@ -79,7 +34,6 @@
font-weight: bold;
}
body,
button,
input,
......@@ -89,3 +43,4 @@ textarea {
font-size: 12pt;
line-height: 1.3;
}
*/
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