Adds sass-resource-loader to use imports of variables.scss in separate components without loading multimple times the file. Initial implementation of primary side menu bar with contraction.
This commit is contained in:
mateuswetah
parent
b3a6a9222a
commit
33476da3f0
|
|
@ -7386,6 +7386,31 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"sass-resources-loader": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/sass-resources-loader/-/sass-resources-loader-1.3.2.tgz",
|
||||
"integrity": "sha512-7U55FKFMD7I//l/Ijm3GrqjOBw66D6NbGrwiD/uZ/S85fOB/4a3kibsaRWYkbO9t1aQPZz1V/69C5k2B1nS1bw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"async": "2.6.0",
|
||||
"chalk": "1.1.3",
|
||||
"glob": "7.1.2",
|
||||
"loader-utils": "1.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"loader-utils": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
|
||||
"integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"big.js": "3.2.0",
|
||||
"emojis-list": "2.1.0",
|
||||
"json5": "0.5.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sax": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
"element-theme-chalk": "^2.1.0",
|
||||
"file-loader": "^0.9.0",
|
||||
"postcss-loader": "^2.1.0",
|
||||
"sass-resources-loader": "^1.3.2",
|
||||
"style-loader": "^0.19.1",
|
||||
"vue-custom-element": "^1.0.13",
|
||||
"vue-loader": "^13.7.1",
|
||||
|
|
|
|||
|
|
@ -1,26 +1,14 @@
|
|||
<template>
|
||||
<div id="tainacan-admin-app" class="columns is-fullheight">
|
||||
<nav id="primary-menu" role="navigation" aria-label="main navigation" class="column is-2 is-sidebar-menu">
|
||||
<aside class="menu">
|
||||
<h1 class="menu-level-title">{{ $i18n.get('repository') }}</h1>
|
||||
<ul class="menu-list">
|
||||
<li><router-link tag="a" to="/collections">{{ $i18n.get('collections')}}</router-link></li>
|
||||
<li><router-link tag="a" to="/items">{{ $i18n.get('items')}}</router-link></li>
|
||||
<li><router-link tag="a" to="/fields">{{ $i18n.get('fields')}}</router-link></li>
|
||||
<li><router-link tag="a" to="/filters">{{ $i18n.get('filters')}}</router-link></li>
|
||||
<li><router-link tag="a" to="/categories">{{ $i18n.get('categories')}}</router-link></li>
|
||||
<li><router-link tag="a" to="/events">{{ $i18n.get('events')}}</router-link></li>
|
||||
<li><a class="navbar-item" :href="wordpressAdmin">Wordpress</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</nav>
|
||||
<div class="container column is-main-content">
|
||||
<primary-menu></primary-menu>
|
||||
<div class="column is-main-content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PrimaryMenu from './components/primary-menu.vue';
|
||||
export default {
|
||||
name: "AdminPage",
|
||||
data(){
|
||||
|
|
@ -28,6 +16,9 @@
|
|||
logoHeader: '../wp-content/plugins/tainacan/admin/images/tainacan_logo_header.png',
|
||||
wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
|
||||
}
|
||||
},
|
||||
components: {
|
||||
PrimaryMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -42,18 +33,12 @@
|
|||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#primary-menu {
|
||||
background-color: $primary;
|
||||
|
||||
li{
|
||||
a {color: white !important;}
|
||||
a:hover {color: $primary !important;}
|
||||
}
|
||||
}
|
||||
|
||||
.is-main-content {
|
||||
padding-bottom: 0px;
|
||||
padding-top: 0px;
|
||||
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#secondary-menu {
|
||||
|
|
@ -65,7 +50,5 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
@page-change="onPageChange">
|
||||
<template slot-scope="props">
|
||||
|
||||
<b-table-column field="featured_image" width="55" sortable="{{ false }}">
|
||||
<b-table-column field="featured_image" width="55">
|
||||
<template v-if="props.row.featured_image" slot-scope="scope">
|
||||
<img class="table-thumb" :src="`${props.row.featured_image}`"/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<nav id="primary-menu" :class="isCompressed ? 'is-compressed' : ''" role="navigation" aria-label="main navigation" class="column is-sidebar-menu">
|
||||
<aside class="menu">
|
||||
<ul class="menu-list">
|
||||
<li><router-link tag="a" to="/collections" :class="activeRoute == '/collections' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="folder-multiple"></b-icon> <span class="menu-text">{{ $i18n.get('collections')}}</span>
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" to="/items" :class="activeRoute == '/items' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="note-multiple"></b-icon> <span class="menu-text">{{ $i18n.get('items')}}</span>
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" to="/fields" :class="activeRoute == '/fields' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="format-list-checks"></b-icon> <span class="menu-text">{{ $i18n.get('fields')}}</span>
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" to="/filters" :class="activeRoute == '/filters' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="filter"></b-icon> <span class="menu-text">{{ $i18n.get('filters')}}</span>
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" to="/categories" :class="activeRoute == '/categories' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="shape"></b-icon> <span class="menu-text">{{ $i18n.get('categories')}}</span>
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" to="/events" :class="activeRoute == '/events' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="calendar"></b-icon> <span class="menu-text">{{ $i18n.get('events')}}</span>
|
||||
</router-link></li>
|
||||
<li><a class="navbar-item" :href="wordpressAdmin">
|
||||
<b-icon size="is-small" icon="wordpress"></b-icon> <span class="menu-text">Wordpress</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PrimaryMenu',
|
||||
data(){
|
||||
return {
|
||||
isCompressed: false,
|
||||
activeRoute: '/collections'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
this.isCompressed = (to.params.id != undefined);
|
||||
this.activeRoute = to.path;
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.isCompressed = (this.$route.params.id != undefined);
|
||||
this.activeRoute = this.$route.path;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../scss/_variables.scss";
|
||||
|
||||
#primary-menu {
|
||||
background-color: $primary;
|
||||
-webkit-transition: width 0.8s; /* Safari */
|
||||
transition: all 0.1s;
|
||||
width: 180px !important;
|
||||
max-width: 180px !important;
|
||||
|
||||
li{
|
||||
a {color: white}
|
||||
a:hover {color: $primary}
|
||||
a.is-active {
|
||||
background-color: white;
|
||||
color: $secondary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-compressed {
|
||||
width: 64px !important;
|
||||
max-width: 64px !important;
|
||||
.menu-text {
|
||||
display: none;
|
||||
}
|
||||
box-shadow: -1px 0px 5px #111 inset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="columns is-fullheight">
|
||||
<div class="container columns is-fullheight">
|
||||
<nav id="secondary-menu" role="navigation" aria-label="secondary navigation" class="column is-2 is-sidebar-menu">
|
||||
<aside class="menu">
|
||||
<ul class="menu-list">
|
||||
|
|
|
|||
|
|
@ -33,7 +33,15 @@ module.exports = {
|
|||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loader: 'sass-resources-loader',
|
||||
options: {
|
||||
resources: path.resolve(__dirname, './src/admin/scss/_variables.scss')
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue