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

start migrating to bootstrap-vue components

parent 6f0ef1ca
<template>
<div id="app">
<app-header v-bind:modules="modules" v-bind:activeModule="activeModule" v-bind:user="user"></app-header>
<div class="container">
<router-view/>
</div>
<router-view/>
<app-footer></app-footer>
</div>
</template>
......
<template>
<footer>
<div class="content-width section group">
<div class="col span_3_of_4 footer-left">
AUTOradio dashboard v0.0.1
</div>
<div class="col span_1_of_4 footer-right">
... bla ... bla ... hear the music?
</div>
</div>
<b-container>
<b-row>
<b-col sm="9">
AUTOradio dashboard v0.0.1
</b-col>
<b-col sm="3" align="right">
... bla ... bla ... hear the music?
</b-col>
</b-row>
</b-container>
</footer>
</template>
......@@ -26,10 +28,4 @@ footer {
margin:0px auto;
width: 100%
}
footer .footer-left {
text-align: left;
}
footer .footer-right {
text-align: right;
}
</style>
<template>
<header>
<div class="container">
<div class="row header-branding">
<div class="col-9">
<b-container>
<b-row class="header-branding">
<b-col md="10">
<span class="header-title"><router-link to="home">AUTOradio dashboard</router-link></span>
</div>
<div class="col-3 header-right">
</b-col>
<b-col md="2" class="d-none d-sm-none d-md-block">
<a href="http://o94.at" target="new"><img class="header-logo" src="../assets/logo.jpg" /></a>
</div>
</div>
<div class="row">
<div class="col-3">
</b-col>
</b-row>
<b-row>
<b-col md="1">
<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-6">
</b-col>
<b-col md="9">
<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">
</b-col>
<b-col md="2">
<div v-if="user.logged_in">
Logged in as: {{ user.name }}
{{ 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>
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>
</b-col>
</b-row>
</b-container>
</header>
</template>
......@@ -53,7 +53,7 @@ export default {
}
</script>
<style>
<style scoped>
header {
background: #ad7fa8; /* for browsers that don't support gradients */
/* background: linear-gradient(#ad7fa8, #888a85); /* light magenta to light alu */
......@@ -63,17 +63,16 @@ header {
/* 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;
padding-bottom: 1em;
margin-bottom: 2em;
}
nav {
text-align: left;
div.container {
text-align: center;
}
.header-branding {
height: 75px;
line-height: 75px;
}
.header-right {
text-align: right;
}
.header-title {
font-size: 3em;
font-weight: bold;
......
<template>
<div>
<b-container>
<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">
<b-row align="center">
<b-col sm="3">
<router-link to="shows">
<img src="../assets/applications-multimedia.png">
<p>Schedule your shows</p>
</router-link>
</div>
<div class="col-3" align="center">
</b-col>
<b-col sm="3">
<router-link to="files">
<img src="../assets/audio-x-generic.png">
<p>Manage files and playlists</p>
</router-link>
</div>
<div class="col-3" align="center">
</b-col>
<b-col sm="3">
<router-link to="settings">
<img src="../assets/applications-system.png">
<p>Settings</p>
</router-link>
</div>
<div class="col-3" align="center">
</b-col>
<b-col sm="3">
<router-link to="help">
<img src="../assets/help-browser.png">
<p>Help pages</p>
</router-link>
</div>
</div>
<!--
All icons used are taken from the Tango Project, which put them into public domain:
http://tango.freedesktop.org
-->
</div>
</b-col>
</b-row>
</b-container>
<!--
All icons used are taken from the Tango Project, which put them into public domain:
http://tango.freedesktop.org
-->
</template>
<script>
......
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