Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
src/App.vue
View file @ 6f0ef1ca
<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>
src/components/Header.vue
View file @ 6f0ef1ca
<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;
......
src/components/Home.vue
View file @ 6f0ef1ca
<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>
......
src/components/ShowManager.vue
View file @ 6f0ef1ca
<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">
......
src/main.js
View file @ 6f0ef1ca
......@@ -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
......
src/styles.css
View file @ 6f0ef1ca
......@@ -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;
}
*/
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