mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
add icon component & add global import of some components
This commit is contained in:
Axolotle
parent
269dcf1852
commit
aa19c56933
7 changed files with 117 additions and 38 deletions
|
|
@ -5,10 +5,14 @@
|
|||
<b-navbar-brand to="/" exact exact-active-class="active"><img alt="Yunohost logo" src="./assets/logo.png"></b-navbar-brand>
|
||||
<b-navbar-nav class="ml-auto">
|
||||
<li class="nav-item">
|
||||
<b-button href="/yunohost/sso" variant="primary" block size="sm">{{ $t('user_interface_link') }}</b-button>
|
||||
<b-button href="/yunohost/sso" variant="primary" block size="sm">
|
||||
{{ $t('user_interface_link') }} <icon iname="user" class="sm"/>
|
||||
</b-button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<b-button to="/logout" variant="outline-dark" block size="sm">{{ $t('logout') }}</b-button>
|
||||
<b-button to="/logout" variant="outline-dark" block size="sm">
|
||||
{{ $t('logout') }} <icon iname="sign-out" class="sm"/>
|
||||
</b-button>
|
||||
</li>
|
||||
</b-navbar-nav>
|
||||
</b-navbar>
|
||||
|
|
@ -21,9 +25,15 @@
|
|||
<footer>
|
||||
<nav>
|
||||
<b-nav>
|
||||
<b-nav-item href="https://yunohost.org/docs" target="_blank" link-classes='text-secondary'>Documentation</b-nav-item>
|
||||
<b-nav-item href="https://yunohost.org/help" target="_blank" link-classes='text-secondary'>Need help?</b-nav-item>
|
||||
<b-nav-item href="https://donate.yunohost.org/" target="_blank" link-classes='text-secondary'>Donate</b-nav-item>
|
||||
<b-nav-item href="https://yunohost.org/docs" target="_blank" link-classes='text-secondary'>
|
||||
<icon iname="book" class="sm"/> Documentation
|
||||
</b-nav-item>
|
||||
<b-nav-item href="https://yunohost.org/help" target="_blank" link-classes='text-secondary'>
|
||||
<icon iname="life-ring" class="sm"/> Need help?
|
||||
</b-nav-item>
|
||||
<b-nav-item href="https://donate.yunohost.org/" target="_blank" link-classes='text-secondary'>
|
||||
<icon iname="heart" class="sm"/> Donate
|
||||
</b-nav-item>
|
||||
<b-nav-text class="ml-auto" id="yunohost-version">version</b-nav-text>
|
||||
</b-nav>
|
||||
</nav>
|
||||
|
|
@ -52,10 +62,14 @@ header {
|
|||
li {
|
||||
margin: .2rem 0;
|
||||
}
|
||||
icon {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid #eee;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<b-list-group-item v-bind:href="uri">
|
||||
<span v-bind:class="'fa fa-fw fa-' + icon" aria-hidden="true"></span>
|
||||
<b-list-group-item v-bind:to="uri">
|
||||
<icon v-bind:iname="icon" class="fa-fw"/>
|
||||
<h2><slot></slot></h2>
|
||||
<span class="fa fa-fw fa-chevron-right ml-auto"></span>
|
||||
<icon iname="chevron-right" class="fa-fw fs-sm ml-auto"/>
|
||||
</b-list-group-item>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,27 +15,16 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list-group-item {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.list-group-item-action {
|
||||
color: #333;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
span.fa {
|
||||
font-size: 1.5rem;
|
||||
width: 3rem;
|
||||
line-height: 3rem;
|
||||
<style lang="scss" scoped>
|
||||
.list-group-item {
|
||||
padding: 0.75rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.fa-chevron-right {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
28
app/src/components/globals/Icon.vue
Normal file
28
app/src/components/globals/Icon.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<span v-bind:class="'icon fa fa-' + iname" aria-hidden="true"></span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'icon',
|
||||
props: {
|
||||
iname: String,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon {
|
||||
font-size: 1.5rem;
|
||||
width: 3rem;
|
||||
|
||||
&.sm {
|
||||
width: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.fs-sm {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
app/src/components/globals/index.js
Normal file
1
app/src/components/globals/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export {default as Icon} from './Icon'
|
||||
|
|
@ -4,11 +4,19 @@ import './plugins/bootstrap-vue'
|
|||
import i18n from './plugins/i18n'
|
||||
import router from './plugins/router'
|
||||
|
||||
import * as globalsComponents from './components/globals'
|
||||
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
// Register global components
|
||||
for (let component of Object.values(globalsComponents)) {
|
||||
Vue.component(component.name, component)
|
||||
}
|
||||
|
||||
|
||||
new Vue({
|
||||
i18n,
|
||||
router,
|
||||
render: h => h(App)
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
|
|
|
|||
|
|
@ -1,7 +1,35 @@
|
|||
// Bootstrap and BootstrapVue variable may be overrides here. Full list available here:
|
||||
// Bootstrap: `app/node_modules/bootstrap/scss/_variables.scss`
|
||||
// BootstrapVue: `app/node_modules/bootstrap-vue/src/_variables.scss`
|
||||
/*
|
||||
|
||||
╭─────────────────────────────╮
|
||||
│ ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮ │
|
||||
│ │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯ │
|
||||
│ └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵ │
|
||||
╰─────────────────────────────╯
|
||||
|
||||
Bootstrap and BootstrapVue overrides.
|
||||
Bootstrap default: `app/node_modules/bootstrap/scss/_variables.scss`
|
||||
BootstrapVue default: `app/node_modules/bootstrap-vue/src/_variables.scss`
|
||||
|
||||
*/
|
||||
|
||||
// TODO: add a feature so the user can set some css variables to change the global aspects ?
|
||||
// For exemple, turning rounding of elements off, the bases colors, etc.
|
||||
// $enable-rounded: false;
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
╭──────────────────────────────────────╮
|
||||
│ ┌─╴╭─╮┌─╮╷ ╭ ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │
|
||||
│ ├─╴│ │├┬╯├┴╮╶─╴├─┤│││├─╴╰─╮│ ││││├─╴ │
|
||||
│ ╵ ╰─╯╵ ╰╵ ╵ ╵ ╵╰╯╯╰─╴╶─╯╰─╯╵╵╵╰─╴ │
|
||||
╰──────────────────────────────────────╯
|
||||
|
||||
Fork-awesome variable overrides.
|
||||
default: `app/node_modules/fork-awesome/scss/_variables.scss`
|
||||
|
||||
*/
|
||||
|
||||
// fork-awesome font location
|
||||
$fa-font-path: '~fork-awesome/fonts';
|
||||
$fa-font-size-base: 1rem;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,34 @@
|
|||
// This is the default scss file, more specific styling is defined directly into components.
|
||||
// It it imported in `scr/App.vue` style tag.
|
||||
|
||||
// Bootstrap variable overrides and custom variables
|
||||
// Dependencies variables overrides and custom variables
|
||||
// Variables overrides are defined before actual SCSS imports
|
||||
@import 'variables';
|
||||
|
||||
// Includes Bootstrap and BootstrapVue SCSS files
|
||||
|
||||
// Dependencies SCSS imports
|
||||
// `~` allow to import a node_modules folder (resolved by Webpack)
|
||||
@import '~bootstrap/scss/bootstrap.scss';
|
||||
@import '~bootstrap-vue/src/index.scss';
|
||||
|
||||
@import '~fork-awesome/scss/fork-awesome.scss';
|
||||
|
||||
// Style overrides happens after bootstrap imports
|
||||
|
||||
// Style overrides happens after dependencies imports
|
||||
|
||||
// Bootstrap overrides
|
||||
body {
|
||||
margin: auto;
|
||||
max-width: 90%;
|
||||
font-family: "Source Sans Pro", "Helvetica Neue", "Fira Sans", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.list-group-item-action {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
// Fork-awesome overrides
|
||||
.fa-fw {
|
||||
width: 1.25em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue