Adds back button to primary menu and inserts Tainacan logo again on menu header.
This commit is contained in:
parent
421cd1ad73
commit
459b9a6748
|
@ -13,8 +13,6 @@
|
|||
name: "AdminPage",
|
||||
data(){
|
||||
return {
|
||||
logoHeader: '../wp-content/plugins/tainacan/admin/images/tainacan_logo_header.png',
|
||||
wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
@ -1,6 +1,13 @@
|
|||
<template>
|
||||
<nav id="primary-menu" :class="isCompressed ? 'is-compressed' : ''" role="navigation" aria-label="main navigation" class="column is-sidebar-menu">
|
||||
<aside class="menu">
|
||||
<div class="menu-header">
|
||||
<ul class="menu-list"><li><router-link tag="a" to="/">
|
||||
<b-icon size="is-medium" icon="chevron-left"></b-icon>
|
||||
<img class="tainacan-logo" :src="logoHeader"/>
|
||||
</router-link></li></ul>
|
||||
</div>
|
||||
|
||||
<ul class="menu-list">
|
||||
<li><router-link tag="a" to="/collections" :class="activeRoute == 'CollectionsPage' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="folder-multiple"></b-icon> <span class="menu-text">{{ $i18n.get('collections')}}</span>
|
||||
|
@ -33,6 +40,8 @@ export default {
|
|||
name: 'PrimaryMenu',
|
||||
data(){
|
||||
return {
|
||||
logoHeader: '../wp-content/plugins/tainacan/admin/images/tainacan_logo_header.png',
|
||||
wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
|
||||
isCompressed: false,
|
||||
activeRoute: '/collections'
|
||||
}
|
||||
|
@ -61,6 +70,26 @@ export default {
|
|||
transition: max-width 0.2s linear;
|
||||
max-width: 222px;
|
||||
|
||||
.menu-header {
|
||||
background-color: $primary-darker;
|
||||
height: 62px;
|
||||
a { padding: 1em 2.5em }
|
||||
.icon {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s linear, visibility 0.2s linear;
|
||||
-webkit-transition: opacity 0.2s linear, visibility 0.2s linear;
|
||||
}
|
||||
.tainacan-logo {
|
||||
max-height: 28px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.15s linear, visibility 0.15s linear;
|
||||
-webkit-transition: opacity 0.15s linear, visibility 0.15s linear;
|
||||
}
|
||||
}
|
||||
|
||||
li{
|
||||
a {
|
||||
color: white;
|
||||
|
@ -91,6 +120,18 @@ export default {
|
|||
|
||||
&.is-compressed {
|
||||
max-width: 42px;
|
||||
|
||||
.menu-header {
|
||||
a { padding: 1.2em 0.3em }
|
||||
.icon {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.tainacan-logo {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
a{ padding: 1em 0.8em; }
|
||||
.menu-text {
|
||||
visibility: hidden;
|
||||
|
@ -103,6 +144,21 @@ export default {
|
|||
@media screen and (max-width: 769px) {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
|
||||
&.is-compressed {
|
||||
|
||||
.menu-header {
|
||||
.icon {
|
||||
visibility: hidden !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.tainacan-logo {
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a{ padding: 1em 0.8em !important;}
|
||||
.menu-text {
|
||||
display: none !important;
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 5.3 KiB |
|
@ -22,7 +22,7 @@ import FieldsList from '../components/fields-list.vue'
|
|||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: CollectionsPage, meta: {title: 'Admin Page'} },
|
||||
{ path: '/', redirect:'/collections' },
|
||||
|
||||
{ path: '/collections', name: 'CollectionsPage', component: CollectionsPage, meta: {title: 'Collections Page'} },
|
||||
{ path: '/collections/new', name: 'CollectionEditionPage', component: CollectionEditionPage, meta: {title: 'Create Collection'} },
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1 class="is-size-3">Collection creation <b-tag v-if="collection != null && collection != undefined" :type="'is-' + getStatusColor(collection.status)" v-text="collection.status"></b-tag></h1>
|
||||
<h1 class="is-size-3">{{ pageTitle }} <b-tag v-if="collection != null && collection != undefined" :type="'is-' + getStatusColor(collection.status)" v-text="collection.status"></b-tag></h1>
|
||||
<form label-width="120px">
|
||||
<b-field label="Título">
|
||||
<b-input
|
||||
|
@ -64,6 +64,7 @@ export default {
|
|||
name: 'CollectionEditionPage',
|
||||
data(){
|
||||
return {
|
||||
pageTitle: '',
|
||||
collectionId: Number,
|
||||
collection: null,
|
||||
isLoading: false,
|
||||
|
@ -159,9 +160,11 @@ export default {
|
|||
created(){
|
||||
|
||||
if (this.$route.fullPath.split("/").pop() == "new") {
|
||||
this.pageTitle = this.$i18n.get('page_title_new_collection');
|
||||
this.createNewCollection();
|
||||
} else if (this.$route.fullPath.split("/").pop() == "edit") {
|
||||
|
||||
this.pageTitle = this.$i18n.get('page_title_edit_collection');
|
||||
this.isLoading = true;
|
||||
|
||||
// Obtains current Collection ID from URL
|
||||
|
|
|
@ -8,7 +8,9 @@ $secondary: #1F2F56;
|
|||
$secondary-invert: findColorInvert($primary);
|
||||
|
||||
$primary-light:#A5CDD7;
|
||||
$primary-lighter: lighten($primary-light, 4);
|
||||
$primary-dark: #55A0AF;
|
||||
$primary-darker: darken($primary-dark, 4);
|
||||
|
||||
// Setup $colors to use as bulma classes
|
||||
$colors: (
|
||||
|
|
|
@ -19,6 +19,10 @@ return [
|
|||
// Actions
|
||||
'edit' => __('Edit', 'tainacan'),
|
||||
'new' => __('New', 'tainacan'),
|
||||
|
||||
// Page Titles
|
||||
'page_title_new_collection' => __('New Collection', 'tainacan'),
|
||||
'page_title_edit_collection' => __('Edit Collection', 'tainacan'),
|
||||
]
|
||||
|
||||
?>
|
Loading…
Reference in New Issue