inicios del FrontEnd
This commit is contained in:
7
APP/layouts/README.md
Normal file
7
APP/layouts/README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
# LAYOUTS
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
This directory contains your Application Layouts.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
|
||||
167
APP/layouts/default.vue
Normal file
167
APP/layouts/default.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="wrapper" :class="{ 'nav-open': $sidebar.showSidebar }">
|
||||
<!-- <notifications></notifications> -->
|
||||
|
||||
<side-bar
|
||||
:background-color="sidebarBackground"
|
||||
short-title="MD"
|
||||
title="Finanzas"
|
||||
>
|
||||
<template slot-scope="props" slot="links">
|
||||
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Compras',
|
||||
icon: 'tim-icons icon-chart-pie-36',
|
||||
path: '/compras'
|
||||
}"
|
||||
>
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Ingresos',
|
||||
icon: 'tim-icons icon-chart-pie-36',
|
||||
path: '/ingresos'
|
||||
}"
|
||||
>
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Presupuesto',
|
||||
icon: 'tim-icons icon-chart-pie-36',
|
||||
path: '/presupuesto'
|
||||
}"
|
||||
>
|
||||
</sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Resumen',
|
||||
icon: 'tim-icons icon-chart-pie-36',
|
||||
path: '/resumen'
|
||||
}"
|
||||
>
|
||||
</sidebar-item>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
</side-bar>
|
||||
<!--Share plugin (for demo purposes). You can remove it if don't plan on using it-->
|
||||
<sidebar-share :background-color.sync="sidebarBackground"> </sidebar-share>
|
||||
<div class="main-panel" :data="sidebarBackground">
|
||||
<dashboard-navbar></dashboard-navbar>
|
||||
<router-view name="header"></router-view>
|
||||
|
||||
<div
|
||||
:class="{ content: !isFullScreenRoute }"
|
||||
@click="toggleSidebar"
|
||||
>
|
||||
<zoom-center-transition :duration="200" mode="out-in">
|
||||
<!-- your content here -->
|
||||
<nuxt></nuxt>
|
||||
</zoom-center-transition>
|
||||
</div>
|
||||
<content-footer v-if="!isFullScreenRoute"></content-footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/* eslint-disable no-new */
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import 'perfect-scrollbar/css/perfect-scrollbar.css';
|
||||
import SidebarShare from '@/components/Layout/SidebarSharePlugin';
|
||||
function hasElement(className) {
|
||||
return document.getElementsByClassName(className).length > 0;
|
||||
}
|
||||
|
||||
function initScrollbar(className) {
|
||||
if (hasElement(className)) {
|
||||
new PerfectScrollbar(`.${className}`);
|
||||
} else {
|
||||
// try to init it later in case this component is loaded async
|
||||
setTimeout(() => {
|
||||
initScrollbar(className);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
import DashboardNavbar from '@/components/Layout/DashboardNavbar.vue';
|
||||
import ContentFooter from '@/components/Layout/ContentFooter.vue';
|
||||
import DashboardContent from '@/components/Layout/Content.vue';
|
||||
import { SlideYDownTransition, ZoomCenterTransition } from 'vue2-transitions';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DashboardNavbar,
|
||||
ContentFooter,
|
||||
DashboardContent,
|
||||
SlideYDownTransition,
|
||||
ZoomCenterTransition,
|
||||
SidebarShare
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sidebarBackground: 'blue' //vue|blue|orange|green|red|primary
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isFullScreenRoute() {
|
||||
return this.$route.path === '/maps/full-screen'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleSidebar() {
|
||||
if (this.$sidebar.showSidebar) {
|
||||
this.$sidebar.displaySidebar(false);
|
||||
}
|
||||
},
|
||||
initScrollbar() {
|
||||
let docClasses = document.body.classList;
|
||||
let isWindows = navigator.platform.startsWith('Win');
|
||||
if (isWindows) {
|
||||
// if we are on windows OS we activate the perfectScrollbar function
|
||||
initScrollbar('sidebar');
|
||||
initScrollbar('main-panel');
|
||||
initScrollbar('sidebar-wrapper');
|
||||
|
||||
docClasses.add('perfect-scrollbar-on');
|
||||
} else {
|
||||
docClasses.add('perfect-scrollbar-off');
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initScrollbar();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
$scaleSize: 0.95;
|
||||
@keyframes zoomIn95 {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.main-panel .zoomIn {
|
||||
animation-name: zoomIn95;
|
||||
}
|
||||
|
||||
@keyframes zoomOut95 {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
|
||||
}
|
||||
}
|
||||
|
||||
.main-panel .zoomOut {
|
||||
animation-name: zoomOut95;
|
||||
}
|
||||
</style>
|
||||
135
APP/layouts/starter.vue
Normal file
135
APP/layouts/starter.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="wrapper" :class="{ 'nav-open': $sidebar.showSidebar }">
|
||||
<notifications></notifications>
|
||||
<side-bar
|
||||
:background-color="sidebarBackground"
|
||||
short-title="CT"
|
||||
title="Creative Tim"
|
||||
>
|
||||
<template slot-scope="props" slot="links">
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: $t('sidebar.dashboard'),
|
||||
icon: 'tim-icons icon-chart-pie-36',
|
||||
path: '/starter-page'
|
||||
}"
|
||||
>
|
||||
</sidebar-item>
|
||||
</template>
|
||||
</side-bar>
|
||||
<div class="main-panel" :data="sidebarBackground">
|
||||
<dashboard-navbar></dashboard-navbar>
|
||||
<router-view name="header"></router-view>
|
||||
|
||||
<div
|
||||
:class="{ content: !isFullScreenRoute }"
|
||||
@click="toggleSidebar"
|
||||
>
|
||||
<zoom-center-transition :duration="200" mode="out-in">
|
||||
<!-- your content here -->
|
||||
<router-view></router-view>
|
||||
</zoom-center-transition>
|
||||
</div>
|
||||
<content-footer v-if="!isFullScreenRoute"></content-footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/* eslint-disable no-new */
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import 'perfect-scrollbar/css/perfect-scrollbar.css';
|
||||
|
||||
function hasElement(className) {
|
||||
return document.getElementsByClassName(className).length > 0;
|
||||
}
|
||||
|
||||
function initScrollbar(className) {
|
||||
if (hasElement(className)) {
|
||||
new PerfectScrollbar(`.${className}`);
|
||||
} else {
|
||||
// try to init it later in case this component is loaded async
|
||||
setTimeout(() => {
|
||||
initScrollbar(className);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
import DashboardNavbar from '@/components/Layout/starter/SampleNavbar.vue';
|
||||
import ContentFooter from '@/components/Layout/starter/SampleFooter.vue';
|
||||
import DashboardContent from '@/components/Layout/Content.vue';
|
||||
import { SlideYDownTransition, ZoomCenterTransition } from 'vue2-transitions';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DashboardNavbar,
|
||||
ContentFooter,
|
||||
DashboardContent,
|
||||
SlideYDownTransition,
|
||||
ZoomCenterTransition
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sidebarBackground: 'vue' //vue|blue|orange|green|red|primary
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isFullScreenRoute() {
|
||||
return this.$route.path === '/maps/full-screen'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleSidebar() {
|
||||
if (this.$sidebar.showSidebar) {
|
||||
this.$sidebar.displaySidebar(false);
|
||||
}
|
||||
},
|
||||
initScrollbar() {
|
||||
let docClasses = document.body.classList;
|
||||
let isWindows = navigator.platform.startsWith('Win');
|
||||
if (isWindows) {
|
||||
// if we are on windows OS we activate the perfectScrollbar function
|
||||
initScrollbar('sidebar');
|
||||
initScrollbar('main-panel');
|
||||
initScrollbar('sidebar-wrapper');
|
||||
|
||||
docClasses.add('perfect-scrollbar-on');
|
||||
} else {
|
||||
docClasses.add('perfect-scrollbar-off');
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initScrollbar();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
$scaleSize: 0.95;
|
||||
@keyframes zoomIn95 {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.main-panel .zoomIn {
|
||||
animation-name: zoomIn95;
|
||||
}
|
||||
|
||||
@keyframes zoomOut95 {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
|
||||
}
|
||||
}
|
||||
|
||||
.main-panel .zoomOut {
|
||||
animation-name: zoomOut95;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user