Skip to content

GitLab

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

Update header and footer design

parent 83ec9684
Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 8ba13dab
...@@ -1132,6 +1132,32 @@ ...@@ -1132,6 +1132,32 @@
"defer-to-connect": "^1.0.1" "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": { "@types/anymatch": {
"version": "1.3.1", "version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
...@@ -4742,8 +4768,7 @@ ...@@ -4742,8 +4768,7 @@
"cssesc": { "cssesc": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
"dev": true
}, },
"cssnano": { "cssnano": {
"version": "4.1.10", "version": "4.1.10",
...@@ -7177,6 +7202,11 @@ ...@@ -7177,6 +7202,11 @@
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
"dev": true "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": { "highlight.js": {
"version": "9.18.3", "version": "9.18.3",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.3.tgz", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.3.tgz",
...@@ -7554,8 +7584,7 @@ ...@@ -7554,8 +7584,7 @@
"indexes-of": { "indexes-of": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=", "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
"dev": true
}, },
"indexof": { "indexof": {
"version": "0.0.1", "version": "0.0.1",
...@@ -8326,8 +8355,7 @@ ...@@ -8326,8 +8355,7 @@
"lodash": { "lodash": {
"version": "4.17.20", "version": "4.17.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
"dev": true
}, },
"lodash.defaultsdeep": { "lodash.defaultsdeep": {
"version": "4.6.1", "version": "4.6.1",
...@@ -8641,6 +8669,11 @@ ...@@ -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": { "minimalistic-assert": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
...@@ -10400,7 +10433,6 @@ ...@@ -10400,7 +10433,6 @@
"version": "6.0.2", "version": "6.0.2",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
"integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==", "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
"dev": true,
"requires": { "requires": {
"cssesc": "^3.0.0", "cssesc": "^3.0.0",
"indexes-of": "^1.0.1", "indexes-of": "^1.0.1",
...@@ -12856,6 +12888,11 @@ ...@@ -12856,6 +12888,11 @@
"punycode": "^2.1.1" "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": { "truncate-utf8-bytes": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz", "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
...@@ -13009,8 +13046,7 @@ ...@@ -13009,8 +13046,7 @@
"uniq": { "uniq": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
"dev": true
}, },
"uniqs": { "uniqs": {
"version": "2.0.0", "version": "2.0.0",
......
package.json
View file @ 8ba13dab
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@tailwindcss/ui": "^0.6.2",
"axios": "^0.18.1", "axios": "^0.18.1",
"bootstrap-vue": "^2.16.0", "bootstrap-vue": "^2.16.0",
"dompurify": "^2.0.12", "dompurify": "^2.0.12",
......
src/App.vue
View file @ 8ba13dab
<template> <template>
<div id="app" :key="localeKey"> <div id="app" class="tw-flex tw-flex-col tw-min-h-screen" :key="localeKey">
<app-header <app-header
:modules="modules" :modules="modules"
:user="user" :user="user"
/> />
<router-view />
<div class="tw-flex-1 tw-flex tw-my-8">
<router-view/>
</div>
<app-footer /> <app-footer />
</div> </div>
</template> </template>
...@@ -66,13 +70,11 @@ export default { ...@@ -66,13 +70,11 @@ export default {
</script> </script>
<style> <style>
html, body, #app { html, body {
height: 100%; min-height: 100vh;
} }
#app { #app {
color: #2e3436; color: #2e3436;
display: flex;
flex-direction: column;
} }
/* /*
#app .content-width { #app .content-width {
......
src/Pages/Home.vue
View file @ 8ba13dab
<template> <template>
<b-container> <b-container class="tw-self-center">
<div v-if="$parent.user.logged_in === true"> <div v-if="$parent.user.logged_in === true">
<div align="center"> <div align="center">
<h1>{{ $t('home.welcome') }}</h1> <h1>{{ $t('home.welcome') }}</h1>
<p>Here are some infos for you on how to use this interface...</p> <p>Here are some infos for you on how to use this interface...</p>
<br> <br>
</div> </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"> <router-link to="shows">
<img src="/assets/applications-multimedia.png"> <img src="/assets/applications-multimedia.png">
<p>Schedule your shows</p> <p>Schedule your shows</p>
</router-link> </router-link>
</b-col> <router-link to="files">
<b-col sm="3"> <img src="/assets/audio-x-generic.png">
<router-link to="files"> <p>Manage files and playlists</p>
<img src="/assets/audio-x-generic.png"> </router-link>
<p>Manage files and playlists</p> <router-link to="settings">
</router-link> <img src="/assets/applications-system.png">
</b-col> <p>Settings</p>
<b-col sm="3"> </router-link>
<router-link to="settings"> <router-link to="help">
<img src="/assets/applications-system.png"> <img src="/assets/help-browser.png">
<p>Settings</p> <p>Help pages</p>
</router-link> </router-link>
</b-col> </div>
<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 <div
v-else v-else
......
src/components/Footer.vue
View file @ 8ba13dab
<template> <template>
<footer class="tw-p-2"> <footer class="tw-p-2 tw-bg-gray-800">
<b-container> <b-container>
<b-row> <b-row>
<b-col> <b-col>
AURA/<b>dashboard v{{ version }}</b> | aura/<b>dashboard v{{ version }}</b> |
<router-link to="/credits"> <router-link to="/credits">
Credits Credits
</router-link> </router-link>
...@@ -29,7 +29,6 @@ export default { ...@@ -29,7 +29,6 @@ export default {
<style scoped> <style scoped>
footer { footer {
background-color: #343a40;
border-top: 1px solid #2e3436; border-top: 1px solid #2e3436;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
width: 100%; width: 100%;
...@@ -37,6 +36,6 @@ footer { ...@@ -37,6 +36,6 @@ footer {
} }
a { a {
color: #c09; color: #cc149e;
} }
</style> </style>
src/components/Header.vue
View file @ 8ba13dab
<template> <template>
<header> <header class="tw-bg-gray-800">
<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>
<div> <div>
<b-container> <b-container>
<b-navbar <b-navbar
toggleable="lg" toggleable="lg"
type="dark" 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-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> <span class="d-sm-none menu-context-info">Hit menu button for more:</span>
...@@ -34,8 +13,16 @@ ...@@ -34,8 +13,16 @@
<b-collapse <b-collapse
id="nav_collapse" id="nav_collapse"
is-nav is-nav
class="tw-flex tw-items-center tw-justify-between"
> >
<b-navbar-nav> <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-nav-item>
<b-nav-item <b-nav-item
v-for="mod in modules" v-for="mod in modules"
:key="mod.slug" :key="mod.slug"
...@@ -45,7 +32,8 @@ ...@@ -45,7 +32,8 @@
{{ mod.title }} {{ mod.title }}
</b-nav-item> </b-nav-item>
</b-navbar-nav> </b-navbar-nav>
<b-navbar-nav class="ml-auto">
<b-navbar-nav class="tw-flex tw-items-center">
<b-nav-item-dropdown <b-nav-item-dropdown
:text="$activeLocale().toUpperCase()" :text="$activeLocale().toUpperCase()"
right right
...@@ -116,33 +104,11 @@ export default { ...@@ -116,33 +104,11 @@ export default {
</script> </script>
<style scoped> <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 { .header-title a {
text-decoration: none; text-decoration: none;
color: #c09; color: #c09;
text-shadow: #fff 0 0 2px; text-shadow: #fff 0 0 2px;
} }
.header-logo {
width: 75px;
height: 75px;
margin-top: 10px;
}
.help-image { .help-image {
width: 24px; width: 24px;
height: 24px; height: 24px;
......
src/i18n/de.js
View file @ 8ba13dab
...@@ -22,7 +22,7 @@ export default { ...@@ -22,7 +22,7 @@ export default {
}, },
'footer': { '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 // Specific components
......
src/i18n/en.js
View file @ 8ba13dab
...@@ -22,7 +22,7 @@ export default { ...@@ -22,7 +22,7 @@ export default {
}, },
'footer': { '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 // Specific components
......
tailwind.config.js
View file @ 8ba13dab
...@@ -20,8 +20,21 @@ module.exports = { ...@@ -20,8 +20,21 @@ module.exports = {
move: 'move', move: 'move',
'not-allowed': 'not-allowed', 'not-allowed': 'not-allowed',
help: 'help' 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: {}, 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