Skip to content

GitLab

Commit 8ba13dab authored by Richard Blechinger's avatar Richard Blechinger
Browse files

Update header and footer design

parent 83ec9684
Show whitespace changes
Inline Side-by-side
package-lock.json
View file @ 8ba13dab
......@@ -1132,6 +1132,32 @@
"defer-to-connect": "^1.0.1"
}
},
"@tailwindcss/custom-forms": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
"integrity": "sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==",
"requires": {
"lodash": "^4.17.11",
"mini-svg-data-uri": "^1.0.3",
"traverse": "^0.6.6"
}
},
"@tailwindcss/typography": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.2.0.tgz",
"integrity": "sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg=="
},
"@tailwindcss/ui": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/@tailwindcss/ui/-/ui-0.6.2.tgz",
"integrity": "sha512-i0sWpAgnF4VitNqaf4JVDuiaQ3MmREwn7gmNYR6lvX29avYLLNOHf0DgzhVEfwfB+CJ6WjZvPoJuDYExZgWlwQ==",
"requires": {
"@tailwindcss/custom-forms": "^0.2.1",
"@tailwindcss/typography": "^0.2.0",
"hex-rgb": "^4.1.0",
"postcss-selector-parser": "^6.0.2"
}
},
"@types/anymatch": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
......@@ -4742,8 +4768,7 @@
"cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
},
"cssnano": {
"version": "4.1.10",
......@@ -7177,6 +7202,11 @@
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
"dev": true
},
"hex-rgb": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.2.0.tgz",
"integrity": "sha512-I7DkKeQ2kR2uyqgbxPgNgClH/rfs1ioKZhZW8VTIAirsxCR5EyhYeywgZbhMScgUbKCkgo6bb6JwA0CLTn9beA=="
},
"highlight.js": {
"version": "9.18.3",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.3.tgz",
......@@ -7554,8 +7584,7 @@
"indexes-of": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
"dev": true
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
},
"indexof": {
"version": "0.0.1",
......@@ -8326,8 +8355,7 @@
"lodash": {
"version": "4.17.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
"dev": true
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
},
"lodash.defaultsdeep": {
"version": "4.6.1",
......@@ -8641,6 +8669,11 @@
}
}
},
"mini-svg-data-uri": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
"integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
},
"minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
......@@ -10400,7 +10433,6 @@
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
"integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
"dev": true,
"requires": {
"cssesc": "^3.0.0",
"indexes-of": "^1.0.1",
......@@ -12856,6 +12888,11 @@
"punycode": "^2.1.1"
}
},
"traverse": {
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
"integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
},
"truncate-utf8-bytes": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
......@@ -13009,8 +13046,7 @@
"uniq": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
"dev": true
"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
},
"uniqs": {
"version": "2.0.0",
......
package.json
View file @ 8ba13dab
......@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@tailwindcss/ui": "^0.6.2",
"axios": "^0.18.1",
"bootstrap-vue": "^2.16.0",
"dompurify": "^2.0.12",
......
src/App.vue
View file @ 8ba13dab
<template>
<div id="app" :key="localeKey">
<div id="app" class="tw-flex tw-flex-col tw-min-h-screen" :key="localeKey">
<app-header
:modules="modules"
:user="user"
/>
<router-view />
<div class="tw-flex-1 tw-flex tw-my-8">
<router-view/>
</div>
<app-footer />
</div>
</template>
......@@ -66,13 +70,11 @@ export default {
</script>
<style>
html, body, #app {
height: 100%;
html, body {
min-height: 100vh;
}
#app {
color: #2e3436;
display: flex;
flex-direction: column;
}
/*
#app .content-width {
......
src/Pages/Home.vue
View file @ 8ba13dab
<template>
<b-container>
<b-container class="tw-self-center">
<div v-if="$parent.user.logged_in === true">
<div align="center">
<h1>{{ $t('home.welcome') }}</h1>
<p>Here are some infos for you on how to use this interface...</p>
<br>
</div>
<b-row align="center">
<b-col sm="3">
<div class="tw-mx-auto tw-max-w-4xl tw-grid sm:tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-8 tw-text-center">
<router-link to="shows">
<img src="/assets/applications-multimedia.png">
<p>Schedule your shows</p>
</router-link>
</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>
</b-col>
<b-col sm="3">
<router-link to="settings">
<img src="/assets/applications-system.png">
<p>Settings</p>
</router-link>
</b-col>
<b-col sm="3">
<router-link to="help">
<img src="/assets/help-browser.png">
<p>Help pages</p>
</router-link>
</b-col>
</b-row>
</div>
</div>
<div
v-else
......
src/components/Footer.vue
View file @ 8ba13dab
<template>
<footer class="tw-p-2">
<footer class="tw-p-2 tw-bg-gray-800">
<b-container>
<b-row>
<b-col>
AURA/<b>dashboard v{{ version }}</b> |
aura/<b>dashboard v{{ version }}</b> |
<router-link to="/credits">
Credits
</router-link>
......@@ -29,7 +29,6 @@ export default {
<style scoped>
footer {
background-color: #343a40;
border-top: 1px solid #2e3436;
color: rgba(255, 255, 255, 0.5);
width: 100%;
......@@ -37,6 +36,6 @@ footer {
}
a {
color: #c09;
color: #cc149e;
}
</style>
src/components/Header.vue
View file @ 8ba13dab
<template>
<header>
<div>
<b-container>
<b-row class="header-branding">
<b-col md="10">
<span class="header-title"><router-link to="home"><span class="d-none d-sm-inline">AURA/</span><b>dashboard</b></router-link></span>
</b-col>
<b-col
md="2"
class="d-none d-sm-none d-md-block"
align="right"
>
<router-link to="home">
<img
class="header-logo"
src="/assets/aura-dashboard-200-nobackground.png"
>
</router-link>
</b-col>
</b-row>
</b-container>
</div>
<header class="tw-bg-gray-800">
<div>
<b-container>
<b-navbar
toggleable="lg"
type="dark"
variant="dark"
class="tw-text-white tw-flex"
>
<span class="d-none d-sm-inline d-lg-none menu-context-info">For more options tap the menu button on the right:</span>
<span class="d-sm-none menu-context-info">Hit menu button for more:</span>
......@@ -34,8 +13,16 @@
<b-collapse
id="nav_collapse"
is-nav
class="tw-flex tw-items-center tw-justify-between"
>
<b-navbar-nav class="tw-flex tw-items-center">
<b-nav-item to="/home">
<img
class="header-logo tw-h-12"
src="/assets/aura-dashboard-200-nobackground.png"
>
<b-navbar-nav>
</b-nav-item>
<b-nav-item
v-for="mod in modules"
:key="mod.slug"
......@@ -45,7 +32,8 @@
{{ mod.title }}
</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
<b-navbar-nav class="tw-flex tw-items-center">
<b-nav-item-dropdown
:text="$activeLocale().toUpperCase()"
right
......@@ -116,33 +104,11 @@ export default {
</script>
<style scoped>
header > div:first-child {
background: #343a40; /* for browsers that don't support gradients */
background: linear-gradient(#000, #343a40); /* dashboard black to bootstrap dark navbar */
padding-bottom: 1em;
}
header > div:nth-child(2) {
background-color: #343a40;
margin-bottom: 2em;
}
.header-branding {
height: 75px;
line-height: 75px;
}
.header-title {
font-size: 3em;
vertical-align: middle;
}
.header-title a {
text-decoration: none;
color: #c09;
text-shadow: #fff 0 0 2px;
}
.header-logo {
width: 75px;
height: 75px;
margin-top: 10px;
}
.help-image {
width: 24px;
height: 24px;
......
src/i18n/de.js
View file @ 8ba13dab
......@@ -22,7 +22,7 @@ export default {
},
'footer': {
'tagline': 'Alles was Du für ein freies Radio brauchst .. fast .. wir arbeiten dran!'
'tagline': 'Alles was Du für ein freies Radio brauchst'
},
// Specific components
......
src/i18n/en.js
View file @ 8ba13dab
......@@ -22,7 +22,7 @@ export default {
},
'footer': {
'tagline': 'All the UI you need to run a community radio ... almost ... working on it!'
'tagline': 'All the UI you need to run a community radio'
},
// Specific components
......
tailwind.config.js
View file @ 8ba13dab
......@@ -20,8 +20,21 @@ module.exports = {
move: 'move',
'not-allowed': 'not-allowed',
help: 'help'
},
colors: {
gray: {
'50': '#f9fafb',
'100': '#f4f5f7',
'200': '#e5e7eb',
'300': '#d2d6dc',
'400': '#9fa6b2',
'500': '#6b7280',
'600': '#4b5563',
'700': '#374151',
'800': '#252f3f',
'900': '#161e2e',
},
}
},
variants: {},
plugins: [],
}
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