mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-13 00:11:07 +03:30
init project
This commit is contained in:
saeid
Vendored
+33
@@ -0,0 +1,33 @@
|
||||
|
||||
/**
|
||||
* First we will load all of this project's JavaScript dependencies which
|
||||
* includes Vue and other libraries. It is a great starting point when
|
||||
* building robust, powerful web applications using Vue and Laravel.
|
||||
*/
|
||||
|
||||
require('./bootstrap');
|
||||
|
||||
window.Vue = require('vue');
|
||||
|
||||
/**
|
||||
* The following block of code may be used to automatically register your
|
||||
* Vue components. It will recursively scan this directory for the Vue
|
||||
* components and automatically register them with their "basename".
|
||||
*
|
||||
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
|
||||
*/
|
||||
|
||||
// const files = require.context('./', true, /\.vue$/i);
|
||||
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
|
||||
|
||||
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
|
||||
|
||||
/**
|
||||
* Next, we will create a fresh Vue application instance and attach it to
|
||||
* the page. Then, you may begin adding components to this application
|
||||
* or customize the JavaScript scaffolding to fit your unique needs.
|
||||
*/
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app'
|
||||
});
|
||||
Vendored
+56
@@ -0,0 +1,56 @@
|
||||
|
||||
window._ = require('lodash');
|
||||
|
||||
/**
|
||||
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
|
||||
* for JavaScript based Bootstrap features such as modals and tabs. This
|
||||
* code may be modified to fit the specific needs of your application.
|
||||
*/
|
||||
|
||||
try {
|
||||
window.Popper = require('popper.js').default;
|
||||
window.$ = window.jQuery = require('jquery');
|
||||
|
||||
require('bootstrap');
|
||||
} catch (e) {}
|
||||
|
||||
/**
|
||||
* We'll load the axios HTTP library which allows us to easily issue requests
|
||||
* to our Laravel back-end. This library automatically handles sending the
|
||||
* CSRF token as a header based on the value of the "XSRF" token cookie.
|
||||
*/
|
||||
|
||||
window.axios = require('axios');
|
||||
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
|
||||
/**
|
||||
* Next we will register the CSRF Token as a common header with Axios so that
|
||||
* all outgoing HTTP requests automatically have it attached. This is just
|
||||
* a simple convenience so we don't have to attach every token manually.
|
||||
*/
|
||||
|
||||
let token = document.head.querySelector('meta[name="csrf-token"]');
|
||||
|
||||
if (token) {
|
||||
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
|
||||
} else {
|
||||
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
|
||||
}
|
||||
|
||||
/**
|
||||
* Echo exposes an expressive API for subscribing to channels and listening
|
||||
* for events that are broadcast by Laravel. Echo and event broadcasting
|
||||
* allows your team to easily build robust real-time web applications.
|
||||
*/
|
||||
|
||||
// import Echo from 'laravel-echo'
|
||||
|
||||
// window.Pusher = require('pusher-js');
|
||||
|
||||
// window.Echo = new Echo({
|
||||
// broadcaster: 'pusher',
|
||||
// key: process.env.MIX_PUSHER_APP_KEY,
|
||||
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
|
||||
// encrypted: true
|
||||
// });
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">Example Component</div>
|
||||
|
||||
<div class="card-body">
|
||||
I'm an example component.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
console.log('Component mounted.')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<!-- <core-filter /> -->
|
||||
|
||||
<core-toolbar />
|
||||
|
||||
<core-drawer />
|
||||
|
||||
<core-view />
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/styles/index.scss';
|
||||
@import '@/styles/css/Assets/Main.scss';
|
||||
@import '@/styles/css/Assets/WM-ModernTheme.scss';
|
||||
// @import '@/fontello/fontello-embedded.scss';
|
||||
|
||||
/* Remove in 1.2 */
|
||||
.v-datatable thead th.column.sortable i {
|
||||
vertical-align: unset;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<v-navigation-drawer
|
||||
id="app-drawer"
|
||||
v-model="inputValue"
|
||||
app
|
||||
dark
|
||||
floating
|
||||
persistent
|
||||
mobile-break-point="991"
|
||||
width="260"
|
||||
>
|
||||
<v-img
|
||||
:src="image"
|
||||
height="100%"
|
||||
>
|
||||
<v-layout
|
||||
class="fill-height"
|
||||
tag="v-list"
|
||||
column
|
||||
>
|
||||
<v-list-tile avatar>
|
||||
<v-list-tile-avatar
|
||||
color="white"
|
||||
>
|
||||
<!-- <v-img
|
||||
:src="logo"
|
||||
height="34"
|
||||
contain
|
||||
/> -->
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-title class="title">
|
||||
CSSD-DOC
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-divider/>
|
||||
<v-list-tile
|
||||
v-if="responsive"
|
||||
>
|
||||
<v-text-field
|
||||
class="purple-input search-input"
|
||||
label="Search..."
|
||||
color="purple"
|
||||
/>
|
||||
</v-list-tile>
|
||||
<v-list-tile
|
||||
v-for="(link, i) in links"
|
||||
:key="i"
|
||||
:to="link.to"
|
||||
:active-class="color"
|
||||
avatar
|
||||
class="v-list-item"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ link.icon }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title
|
||||
v-text="link.text"
|
||||
/>
|
||||
</v-list-tile>
|
||||
<!-- <v-list-tile
|
||||
disabled
|
||||
active-class="primary"
|
||||
class="v-list-item v-list__tile--buy"
|
||||
to="/upgrade"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<v-icon>mdi-package-up</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title class="font-weight-light">
|
||||
Upgrade To PRO
|
||||
</v-list-tile-title>
|
||||
</v-list-tile> -->
|
||||
</v-layout>
|
||||
</v-img>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
logo: './img/vuetifylogo.png',
|
||||
links: [
|
||||
{
|
||||
to: '/dashboard',
|
||||
icon: 'mdi-view-dashboard',
|
||||
text: 'Dashboard'
|
||||
},
|
||||
{
|
||||
to: '/my-info',
|
||||
icon: 'mdi-account',
|
||||
text: 'My Info'
|
||||
},
|
||||
{
|
||||
to: '/all-resualttest',
|
||||
icon: 'description',
|
||||
text: 'All Test Result'
|
||||
},
|
||||
{
|
||||
to: '/manage-users',
|
||||
icon: 'far fa-address-book',
|
||||
text: 'Manage Users'
|
||||
},
|
||||
{
|
||||
to: '/test-creator',
|
||||
icon: 'fas fa-vial',
|
||||
text: 'Add a Test Type'
|
||||
},
|
||||
{
|
||||
to: '/submit-test-result',
|
||||
icon: 'done',
|
||||
text: 'Submit Test Result'
|
||||
},
|
||||
{
|
||||
to: '/login',
|
||||
icon: 'input',
|
||||
text: 'Login'
|
||||
},
|
||||
{
|
||||
to: '/register',
|
||||
icon: 'fas fa-plus',
|
||||
text: 'Register'
|
||||
},
|
||||
],
|
||||
responsive: false
|
||||
}),
|
||||
computed: {
|
||||
...mapState('app', ['image', 'color']),
|
||||
inputValue: {
|
||||
get () {
|
||||
return this.$store.state.app.drawer
|
||||
},
|
||||
set (val) {
|
||||
this.setDrawer(val)
|
||||
}
|
||||
},
|
||||
items () {
|
||||
return this.$t('Layout.View.items')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.onResponsiveInverted()
|
||||
window.addEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('app', ['setDrawer', 'toggleDrawer']),
|
||||
onResponsiveInverted () {
|
||||
if (window.innerWidth < 991) {
|
||||
this.responsive = true
|
||||
} else {
|
||||
this.responsive = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app-drawer {
|
||||
.v-list__tile {
|
||||
border-radius: 4px;
|
||||
|
||||
&--buy {
|
||||
margin-top: auto;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.v-image__image--contain {
|
||||
top: 9px;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
margin-bottom: 30px !important;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<v-menu
|
||||
:close-on-content-click="false"
|
||||
bottom
|
||||
left
|
||||
min-width="300"
|
||||
max-width="300"
|
||||
nudge-left="12"
|
||||
offset-x
|
||||
transition="slide-y-transition"
|
||||
>
|
||||
<v-btn
|
||||
slot="activator"
|
||||
class="elevation-0"
|
||||
color="grey"
|
||||
dark
|
||||
fab
|
||||
fixed
|
||||
style="top: 96px;"
|
||||
top
|
||||
>
|
||||
<v-icon>mdi-settings</v-icon>
|
||||
</v-btn>
|
||||
<v-card>
|
||||
<v-container grid-list-xl>
|
||||
<v-layout wrap>
|
||||
<v-flex xs12>
|
||||
<div class="text-xs-center body-2 text-uppercase sidebar-filter">Sidebar Filters</div>
|
||||
|
||||
<v-layout justify-center>
|
||||
<v-avatar
|
||||
v-for="c in colors"
|
||||
:key="c"
|
||||
:class="[c === color ? 'color-active color-' + c: 'color-' + c]"
|
||||
size="23"
|
||||
|
||||
@click="setColor(c)"
|
||||
/>
|
||||
</v-layout>
|
||||
<v-divider class="mt-3"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
>
|
||||
<div class="text-xs-center body-2 text-uppercase sidebar-filter">Images</div>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
v-for="img in images"
|
||||
:key="img"
|
||||
xs3
|
||||
>
|
||||
<v-img
|
||||
:class="[image === img ? 'image-active' : '']"
|
||||
:src="img"
|
||||
height="120"
|
||||
@click.native="setImage(img)"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-btn
|
||||
href="https://www.creative-tim.com/product/vuetify-material-dashboard"
|
||||
target="_blank"
|
||||
color="success"
|
||||
block
|
||||
>
|
||||
Free Download
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-btn
|
||||
href="https://demos.creative-tim.com/vuetify-material-dashboard/documentation"
|
||||
target="_blank"
|
||||
class="white--text"
|
||||
color="primary"
|
||||
block
|
||||
>
|
||||
Documentation
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<div class="text-xs-center body-2 text-uppercase">
|
||||
<div class=" sidebar-filter">
|
||||
Thank You for Sharing!
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<v-btn
|
||||
color="indigo"
|
||||
class="mr-2 v-btn-facebook"
|
||||
fab
|
||||
icon
|
||||
small
|
||||
round
|
||||
>
|
||||
<v-icon>mdi-facebook</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="cyan"
|
||||
class="v-btn-twitter"
|
||||
fab
|
||||
icon
|
||||
small
|
||||
round
|
||||
>
|
||||
<v-icon>mdi-twitter</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
colors: [
|
||||
'primary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'danger'
|
||||
],
|
||||
images: [
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-1.23832d31.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-2.32103624.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-3.3a54f533.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-4.3b7e38ed.jpg'
|
||||
]
|
||||
}),
|
||||
|
||||
computed: {
|
||||
...mapState('app', ['image', 'color']),
|
||||
color () {
|
||||
return this.$store.state.app.color
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations('app', ['setImage']),
|
||||
setColor (color) {
|
||||
this.$store.state.app.color = color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-avatar,
|
||||
.v-responsive {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<v-footer
|
||||
id="core-footer"
|
||||
absolute
|
||||
height="82"
|
||||
>
|
||||
<div class="footer-items">
|
||||
<span
|
||||
v-for="link in links"
|
||||
:key="link.name"
|
||||
>
|
||||
<a
|
||||
:href="link.Link"
|
||||
class="tertiary--text footer-links">{{ link.name }}</a>
|
||||
</span>
|
||||
</div>
|
||||
<v-spacer/>
|
||||
<!-- <span class="font-weight-light copyright">
|
||||
©
|
||||
{{ (new Date()).getFullYear() }}
|
||||
<a
|
||||
href="https://www.creative-tim.com/"
|
||||
target="_blank">Creative Tim</a>, made with
|
||||
<v-icon
|
||||
color="tertiary"
|
||||
size="17">mdi-heart</v-icon>
|
||||
for a better web
|
||||
</span> -->
|
||||
</v-footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
links: [
|
||||
{ name: 'Home', Link: '/dashboard' },
|
||||
// { name: 'Creative Tim', Link: 'https://www.creative-tim.com' },
|
||||
{ name: 'About Us', Link: 'https://creative-tim.com/presentation' },
|
||||
// { name: 'Blog', Link: 'https://blog.creative-tim.com' }
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-footer {
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<v-toolbar
|
||||
id="core-toolbar"
|
||||
|
||||
flat
|
||||
prominent
|
||||
style="background: #eee;"
|
||||
>
|
||||
<div class="v-toolbar-title">
|
||||
<v-toolbar-title
|
||||
class="tertiary--text font-weight-light"
|
||||
>
|
||||
<v-btn
|
||||
v-if="responsive"
|
||||
class="default v-btn--simple"
|
||||
dark
|
||||
icon
|
||||
@click.stop="onClickBtn"
|
||||
>
|
||||
<v-icon>mdi-view-list</v-icon>
|
||||
</v-btn>
|
||||
{{ title }}
|
||||
</v-toolbar-title>
|
||||
</div>
|
||||
|
||||
<v-spacer />
|
||||
<v-toolbar-items>
|
||||
<v-flex
|
||||
align-center
|
||||
layout
|
||||
py-2
|
||||
>
|
||||
<v-text-field
|
||||
v-if="responsiveInput"
|
||||
class="mr-4 mt-2 purple-input"
|
||||
label="Search..."
|
||||
hide-details
|
||||
color="purple"
|
||||
/>
|
||||
<router-link
|
||||
v-ripple
|
||||
class="toolbar-items"
|
||||
to="/"
|
||||
>
|
||||
<v-icon color="tertiary">mdi-view-dashboard</v-icon>
|
||||
</router-link>
|
||||
<v-menu
|
||||
bottom
|
||||
left
|
||||
content-class="dropdown-menu"
|
||||
offset-y
|
||||
transition="slide-y-transition">
|
||||
<router-link
|
||||
v-ripple
|
||||
slot="activator"
|
||||
class="toolbar-items"
|
||||
to="/notifications"
|
||||
>
|
||||
<v-badge
|
||||
color="error"
|
||||
overlap
|
||||
>
|
||||
<template slot="badge">
|
||||
{{ notifications.length }}
|
||||
</template>
|
||||
<v-icon color="tertiary">mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
</router-link>
|
||||
<v-card>
|
||||
<v-list dense>
|
||||
<v-list-tile
|
||||
v-for="notification in notifications"
|
||||
:key="notification"
|
||||
@click="onClick"
|
||||
>
|
||||
<v-list-tile-title
|
||||
v-text="notification"
|
||||
/>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
<router-link
|
||||
v-ripple
|
||||
class="toolbar-items"
|
||||
to="/user-profile"
|
||||
>
|
||||
<v-icon color="tertiary">mdi-account</v-icon>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-toolbar-items>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
notifications: [
|
||||
'Mike, John responded to your email',
|
||||
'You have 5 new tasks',
|
||||
'You\'re now a friend with Andrew',
|
||||
'Another Notification',
|
||||
'Another One'
|
||||
],
|
||||
title: null,
|
||||
responsive: false,
|
||||
responsiveInput: false
|
||||
}),
|
||||
|
||||
watch: {
|
||||
'$route' (val) {
|
||||
this.title = val.name
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.onResponsiveInverted()
|
||||
window.addEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations('app', ['setDrawer', 'toggleDrawer']),
|
||||
onClickBtn () {
|
||||
this.setDrawer(!this.$store.state.app.drawer)
|
||||
},
|
||||
onClick () {
|
||||
//
|
||||
},
|
||||
onResponsiveInverted () {
|
||||
if (window.innerWidth < 991) {
|
||||
this.responsive = true
|
||||
this.responsiveInput = false
|
||||
} else {
|
||||
this.responsive = false
|
||||
this.responsiveInput = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-toolbar a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<v-content>
|
||||
<div id="core-view">
|
||||
<v-fade-transition mode="out-in">
|
||||
<router-view />
|
||||
</v-fade-transition>
|
||||
</div>
|
||||
<core-footer v-if="$route.name !== 'Maps'" />
|
||||
</v-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
metaInfo () {
|
||||
return {
|
||||
title: 'Vuetify Material Dashboard by CreativeTim'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-view {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div
|
||||
:style="styles"
|
||||
:class="classes"
|
||||
class="v-offset"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
fullWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
offset: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes () {
|
||||
return {
|
||||
'v-offset--full-width': this.fullWidth
|
||||
}
|
||||
},
|
||||
styles () {
|
||||
return {
|
||||
top: `-${this.offset}px`,
|
||||
marginBottom: `-${this.offset}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-offset {
|
||||
margin: 0 auto;
|
||||
max-width: calc(100% - 32px);
|
||||
position: relative;
|
||||
}
|
||||
.v-offset--full-width {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
Vendored
+16
@@ -0,0 +1,16 @@
|
||||
import Vue from 'vue'
|
||||
import upperFirst from 'lodash/upperFirst'
|
||||
import camelCase from 'lodash/camelCase'
|
||||
|
||||
const requireComponent = require.context(
|
||||
'@/components', true, /\.vue$/
|
||||
)
|
||||
|
||||
requireComponent.keys().forEach(fileName => {
|
||||
const componentConfig = requireComponent(fileName)
|
||||
|
||||
const componentName = upperFirst(
|
||||
camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
|
||||
)
|
||||
Vue.component(componentName, componentConfig.default || componentConfig)
|
||||
})
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<v-card
|
||||
v-bind="$attrs"
|
||||
:style="styles"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<helper-offset
|
||||
v-if="hasOffset"
|
||||
:inline="inline"
|
||||
:full-width="fullWidth"
|
||||
:offset="offset"
|
||||
>
|
||||
<v-card
|
||||
v-if="!$slots.offset"
|
||||
:color="color"
|
||||
:class="`elevation-${elevation}`"
|
||||
class="v-card--material__header"
|
||||
dark
|
||||
>
|
||||
<slot
|
||||
v-if="!title && !text"
|
||||
name="header"
|
||||
/>
|
||||
<span v-else>
|
||||
<h4
|
||||
class="title font-weight-light mb-2"
|
||||
v-text="title"
|
||||
/>
|
||||
<p
|
||||
class="category font-weight-thin"
|
||||
v-text="text"
|
||||
/>
|
||||
</span>
|
||||
</v-card>
|
||||
<slot
|
||||
v-else
|
||||
name="offset"
|
||||
/>
|
||||
</helper-offset>
|
||||
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
|
||||
<v-divider
|
||||
v-if="$slots.actions"
|
||||
class="mx-3"
|
||||
/>
|
||||
|
||||
<v-card-actions v-if="$slots.actions">
|
||||
<slot name="actions" />
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'secondary'
|
||||
},
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 10
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fullWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
offset: {
|
||||
type: [Number, String],
|
||||
default: 24
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasOffset () {
|
||||
return this.$slots.header ||
|
||||
this.$slots.offset ||
|
||||
this.title ||
|
||||
this.text
|
||||
},
|
||||
styles () {
|
||||
if (!this.hasOffset) return null
|
||||
|
||||
return {
|
||||
marginBottom: `${this.offset}px`,
|
||||
marginTop: `${this.offset * 2}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card--material {
|
||||
&__header {
|
||||
&.v-card {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<v-card :class="color">
|
||||
<v-container>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs7>
|
||||
<v-card-text primary-text :class="aligntext">
|
||||
<div>
|
||||
<div class="headline ">{{title}}</div>
|
||||
<div class="subheading WM-LightGray-color">{{text}}</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-flex>
|
||||
<v-flex xs5 :class="alignimg" :style="{'background':'url('+ icon +') no-repeat center center', 'background-size':'contain','height':'150px'}">
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
bordercolor: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
color : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
column : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
aligntext : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
alignimg : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<material-card
|
||||
v-bind="$attrs"
|
||||
class="v-card--material-chart"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<chartist
|
||||
slot="header"
|
||||
:data="data"
|
||||
:event-handlers="eventHandlers"
|
||||
:options="options"
|
||||
:ratio="ratio"
|
||||
:responsive-options="responsiveOptions"
|
||||
:type="type"
|
||||
/>
|
||||
|
||||
<slot />
|
||||
|
||||
<slot
|
||||
slot="actions"
|
||||
name="actions"
|
||||
/>
|
||||
</material-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
eventHandlers: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
ratio: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
responsiveOptions: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: v => ['Bar', 'Line', 'Pie'].includes(v)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card--material-chart {
|
||||
.v-card--material__header {
|
||||
.ct-label {
|
||||
color: inherit;
|
||||
opacity: .7;
|
||||
font-size: 0.975rem;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.ct-grid{
|
||||
stroke: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.ct-series-a .ct-point,
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-bar,
|
||||
.ct-series-a .ct-slice-donut {
|
||||
stroke: rgba(255,255,255,.8);
|
||||
}
|
||||
.ct-series-a .ct-slice-pie,
|
||||
.ct-series-a .ct-area {
|
||||
fill: rgba(255,255,255,.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<v-alert
|
||||
v-bind="$attrs"
|
||||
:class="[`elevation-${elevation}`]"
|
||||
:value="value"
|
||||
class="v-alert--notification"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot />
|
||||
</v-alert>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 6
|
||||
},
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-alert--notification {
|
||||
border-radius: 4px !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<material-card
|
||||
v-bind="$attrs"
|
||||
class="v-card--material-stats"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<v-card
|
||||
slot="offset"
|
||||
:class="`elevation-${elevation}`"
|
||||
:color="color"
|
||||
class="pa-4"
|
||||
dark
|
||||
>
|
||||
<v-icon
|
||||
size="40"
|
||||
>
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
</v-card>
|
||||
<div class="text-xs-right">
|
||||
<p
|
||||
class="category grey--text font-weight-light"
|
||||
v-text="title"
|
||||
/>
|
||||
<h3
|
||||
class="title display-1 font-weight-light">
|
||||
{{ value }} <small>{{ smallValue }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<template slot="actions">
|
||||
<v-icon
|
||||
:color="subIconColor"
|
||||
size="20"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ subIcon }}
|
||||
</v-icon>
|
||||
<span
|
||||
:class="subTextColor"
|
||||
class="caption font-weight-light"
|
||||
v-text="subText"
|
||||
/>
|
||||
</template>
|
||||
</material-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from './Card'
|
||||
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
...Card.props,
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
subIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
subIconColor: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
subTextColor: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
subText: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
smallValue: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card--material-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
|
||||
.v-offset {
|
||||
display: inline-block;
|
||||
flex: 0 1;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0 !important;
|
||||
max-width: auto;
|
||||
padding: 0 16px 0;
|
||||
}
|
||||
|
||||
.v-card {
|
||||
border-radius: 4px;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.v-card__text {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.v-card__actions {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+330
File diff suppressed because one or more lines are too long
+330
File diff suppressed because one or more lines are too long
Vendored
+22
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Vue i18n
|
||||
*
|
||||
* @library
|
||||
*
|
||||
* http://kazupon.github.io/vue-i18n/en/
|
||||
*/
|
||||
|
||||
// Lib imports
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import messages from '@/lang'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en',
|
||||
fallbackLocale: 'en',
|
||||
messages
|
||||
})
|
||||
|
||||
export default i18n
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"needHelp": "Need Help?"
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"facebook": "Facebook",
|
||||
"footer": "Footer",
|
||||
"github": "Github",
|
||||
"twitter": "Twitter"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "Title"
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "Vuetify Alpha",
|
||||
"footer": "2018 Vuetify LLC",
|
||||
"drawerItems": ["Inspire"],
|
||||
"needHelp": "Need help?"
|
||||
}
|
||||
Vendored
+27
@@ -0,0 +1,27 @@
|
||||
// http://kazupon.github.io/vue-i18n/en/messages.html
|
||||
|
||||
const requireLang = require.context(
|
||||
'@/lang',
|
||||
true,
|
||||
/\.json$/
|
||||
)
|
||||
|
||||
const messages = {}
|
||||
|
||||
for (const file of requireLang.keys()) {
|
||||
if (file === './index.js') continue
|
||||
|
||||
const path = file.replace(/(\.\/|\.json$)/g, '').split('/')
|
||||
|
||||
path.reduce((o, s, i) => {
|
||||
if (o[s]) return o[s]
|
||||
|
||||
o[s] = i + 1 === path.length
|
||||
? requireLang(file)
|
||||
: {}
|
||||
|
||||
return o[s]
|
||||
}, messages)
|
||||
}
|
||||
|
||||
export default messages
|
||||
Vendored
+42
@@ -0,0 +1,42 @@
|
||||
import 'font-awesome/css/font-awesome.min.css'
|
||||
import Vue from 'vue'
|
||||
// Components
|
||||
import './components'
|
||||
|
||||
// Plugins
|
||||
import './plugins'
|
||||
|
||||
// Material FontIcon
|
||||
import 'material-design-icons-iconfont/dist/material-design-icons.css'
|
||||
// Fortawesome
|
||||
import '@fortawesome/fontawesome-free/css/all.css'
|
||||
// Sync router with store
|
||||
import { sync } from 'vuex-router-sync'
|
||||
// Application imports
|
||||
import App from './App.vue'
|
||||
import i18n from '@/i18n'
|
||||
import router from '@/router'
|
||||
import store from '@/store'
|
||||
|
||||
import { ApiService, TokenService } from '@/services'
|
||||
// Sync store with router
|
||||
sync(store, router)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
// Set the base URL of the API
|
||||
ApiService.init(process.env.MIX_APP_ROOT_API)
|
||||
|
||||
// If token exists set header
|
||||
if (TokenService.getToken()) {
|
||||
ApiService.setHeader()
|
||||
}
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
i18n,
|
||||
router,
|
||||
store,
|
||||
render: h => h(App),
|
||||
iconfont: 'fa4'
|
||||
}).$mount('#app');
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
// Lib imports
|
||||
import axios from 'axios'
|
||||
|
||||
Vue.prototype.$http = axios
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import Vue from 'vue'
|
||||
import 'chartist/dist/chartist.min.css'
|
||||
|
||||
Vue.use(require('vue-chartist'))
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
import './axios'
|
||||
import './chartist'
|
||||
import './vuetify'
|
||||
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
export default {
|
||||
primary: '#4caf50',
|
||||
secondary: '#4caf50',
|
||||
tertiary: '#495057',
|
||||
accent: '#82B1FF',
|
||||
error: '#f55a4e',
|
||||
info: '#00d3ee',
|
||||
success: '#5cb860',
|
||||
warning: '#ffa21a'
|
||||
}
|
||||
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
import Vue from 'vue'
|
||||
import Vuetify from 'vuetify'
|
||||
import theme from './theme'
|
||||
import 'vuetify/dist/vuetify.min.css'
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
|
||||
Vue.use(Vuetify, {
|
||||
iconfont: 'mdi',
|
||||
theme
|
||||
})
|
||||
Vendored
+87
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
* Vue Router
|
||||
*
|
||||
* @library
|
||||
*
|
||||
* https://router.vuejs.org/en/
|
||||
*/
|
||||
|
||||
// Lib imports
|
||||
import Vue from 'vue'
|
||||
import VueAnalytics from 'vue-analytics'
|
||||
import Router from 'vue-router'
|
||||
import Meta from 'vue-meta'
|
||||
import { TokenService } from '@/services'
|
||||
|
||||
// Routes
|
||||
import paths from './paths'
|
||||
|
||||
function route (options) {
|
||||
let path = options.path;
|
||||
let view = options.view;
|
||||
let name = options.name;
|
||||
let meta = (path.meta) ? path.meta : '';
|
||||
return {
|
||||
name: name || view,
|
||||
path,
|
||||
meta,
|
||||
component: (resovle) => import(
|
||||
`@/views/${view}.vue`
|
||||
).then(resovle)
|
||||
}
|
||||
}
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
// Create a new router
|
||||
const router = new Router({
|
||||
mode: 'history',
|
||||
routes: paths.map(path => route(path)).concat([
|
||||
{ path: '*', redirect: '/dashboard' }
|
||||
]),
|
||||
scrollBehavior (to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition
|
||||
}
|
||||
if (to.hash) {
|
||||
return { selector: to.hash }
|
||||
}
|
||||
return { x: 0, y: 0 }
|
||||
}
|
||||
})
|
||||
|
||||
Vue.use(Meta)
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
const isPublic = to.matched.some(record => record.meta.public);
|
||||
const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
|
||||
const loggedIn = !!TokenService.getToken();
|
||||
// if (!isPublic && !loggedIn) {
|
||||
// return next({
|
||||
// path:'/login',
|
||||
// query: {redirect: to.fullPath} // Store the full path to redirect the user to after login
|
||||
// });
|
||||
// }
|
||||
|
||||
// Do not allow user to visit login page or register page if they are logged in
|
||||
// if (loggedIn && onlyWhenLoggedOut) {
|
||||
// return next('/')
|
||||
// }
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
// Bootstrap Analytics
|
||||
// Set in .env
|
||||
// https://github.com/MatteoGabriele/vue-analytics
|
||||
if (process.env.GOOGLE_ANALYTICS) {
|
||||
Vue.use(VueAnalytics, {
|
||||
id: process.env.GOOGLE_ANALYTICS,
|
||||
router,
|
||||
autoTracking: {
|
||||
page: process.env.NODE_ENV !== 'development'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default router
|
||||
Vendored
+67
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* Define all of your application routes here
|
||||
* for more information on routes, see the
|
||||
* official documentation https://router.vuejs.org/en/
|
||||
*/
|
||||
export default [
|
||||
{
|
||||
path: '/dashboard',
|
||||
// Relative to /src/views
|
||||
view: 'Dashboard'
|
||||
},
|
||||
{
|
||||
path: '/my-info',
|
||||
name: 'My Info',
|
||||
view: 'MyInfo'
|
||||
},
|
||||
{
|
||||
path: '/all-resualttest',
|
||||
name: 'All Resualt Test',
|
||||
view: 'AllResualtTest'
|
||||
},
|
||||
{
|
||||
path: '/manage-users',
|
||||
name: 'Manage Users',
|
||||
view: 'ManageUsers'
|
||||
},
|
||||
{
|
||||
path: '/test-creator',
|
||||
name: 'Add New Test',
|
||||
view: 'TestCreator'
|
||||
},
|
||||
{
|
||||
path: '/manage-medical-center',
|
||||
name: 'Manage Medical Center',
|
||||
view: 'ManageMedicalCenter'
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
view: 'Login',
|
||||
meta: {
|
||||
public: true, // Allow access to even if not logged in
|
||||
onlyWhenLoggedOut: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'Register',
|
||||
view: 'Register'
|
||||
},
|
||||
{
|
||||
path: '/submit-test-result',
|
||||
name: 'Submit Test Result',
|
||||
view: 'SubmitTestResult'
|
||||
},
|
||||
{
|
||||
path: '/test-creator',
|
||||
name: 'Test Creator',
|
||||
view: 'TestCreator'
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
name: 'Test',
|
||||
view: 'Test'
|
||||
}
|
||||
|
||||
]
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
import axios from 'axios'
|
||||
import { TokenService } from './storage.service'
|
||||
import store from '@/store'
|
||||
|
||||
const ApiService = {
|
||||
|
||||
init(baseURL) {
|
||||
axios.defaults.baseURL = baseURL;
|
||||
},
|
||||
|
||||
setHeader() {
|
||||
axios.defaults.headers.common["Authorization"] = `Bearer ${TokenService.getToken()}`
|
||||
},
|
||||
|
||||
removeHeader() {
|
||||
axios.defaults.headers.common = {}
|
||||
},
|
||||
|
||||
get(resource) {
|
||||
return axios.get(resource)
|
||||
},
|
||||
|
||||
post(resource, data) {
|
||||
return axios.post(resource, data)
|
||||
},
|
||||
|
||||
put(resource, data) {
|
||||
return axios.put(resource, data)
|
||||
},
|
||||
|
||||
delete(resource) {
|
||||
return axios.delete(resource)
|
||||
},
|
||||
|
||||
/**
|
||||
* Perform a custom Axios request.
|
||||
*
|
||||
* data is an object containing the following properties:
|
||||
* - method
|
||||
* - url
|
||||
* - data ... request payload
|
||||
* - auth (optional)
|
||||
* - username
|
||||
* - password
|
||||
**/
|
||||
customRequest(data) {
|
||||
return axios(data)
|
||||
},
|
||||
|
||||
_401interceptor: null,
|
||||
|
||||
mount401Interceptor() {
|
||||
this._401interceptor = axios.interceptors.response.use(
|
||||
(response) => {
|
||||
return response
|
||||
},
|
||||
async (error) => {
|
||||
if (error.request.status == 401) {
|
||||
if (error.config.url.includes('/o/token/')) {
|
||||
// Refresh token has failed. Logout the user
|
||||
store.dispatch('auth/logout')
|
||||
throw error
|
||||
} else {
|
||||
// Refresh the access token
|
||||
try{
|
||||
await store.dispatch('auth/refreshToken')
|
||||
// Retry the original request
|
||||
return this.customRequest({
|
||||
method: error.config.method,
|
||||
url: error.config.url,
|
||||
data: error.config.data
|
||||
})
|
||||
} catch (e) {
|
||||
// Refresh has failed - reject the original request
|
||||
throw error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If error was not 401 just reject as is
|
||||
throw error
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
unmount401Interceptor() {
|
||||
// Eject the interceptor
|
||||
axios.interceptors.response.eject(this._401interceptor)
|
||||
}
|
||||
}
|
||||
|
||||
export default ApiService
|
||||
export { ApiService}
|
||||
@@ -0,0 +1,37 @@
|
||||
const TOKEN_KEY = 'access_token'
|
||||
const REFRESH_TOKEN_KEY = 'refresh_token'
|
||||
|
||||
/**
|
||||
* Manage the how Access Tokens are being stored and retreived from storage.
|
||||
*
|
||||
* Current implementation stores to localStorage. Local Storage should always be
|
||||
* accessed through this instace.
|
||||
**/
|
||||
const TokenService = {
|
||||
getToken() {
|
||||
return localStorage.getItem(TOKEN_KEY)
|
||||
},
|
||||
|
||||
saveToken(accessToken) {
|
||||
localStorage.setItem(TOKEN_KEY, accessToken)
|
||||
},
|
||||
|
||||
removeToken() {
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
},
|
||||
|
||||
getRefreshToken() {
|
||||
return localStorage.getItem(REFRESH_TOKEN_KEY)
|
||||
},
|
||||
|
||||
saveRefreshToken(refreshToken) {
|
||||
localStorage.setItem(REFRESH_TOKEN_KEY, refreshToken)
|
||||
},
|
||||
|
||||
removeRefreshToken() {
|
||||
localStorage.removeItem(REFRESH_TOKEN_KEY)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { TokenService }
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
import ApiService from './api.service'
|
||||
import { TokenService } from './storage.service'
|
||||
|
||||
|
||||
class AuthenticationError extends Error {
|
||||
constructor(errorCode, message) {
|
||||
super(message)
|
||||
this.name = this.constructor.name
|
||||
this.message = message
|
||||
this.errorCode = errorCode
|
||||
}
|
||||
}
|
||||
|
||||
const UserService = {
|
||||
/**
|
||||
* Login the user and store the access token to TokenService.
|
||||
*
|
||||
* @returns access_token
|
||||
* @throws AuthenticationError
|
||||
**/
|
||||
login: async function(cell_number, password) {
|
||||
const requestData = {
|
||||
method: 'post',
|
||||
url: "login",
|
||||
data: {
|
||||
cell_number,
|
||||
password,
|
||||
grant_type: 'password',
|
||||
},
|
||||
auth: {
|
||||
username: process.env.VUE_APP_CLIENT_ID,
|
||||
password: process.env.VUE_APP_CLIENT_SECRET
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await ApiService.customRequest(requestData);
|
||||
TokenService.saveToken(response.data.token);
|
||||
TokenService.saveRefreshToken(response.data.token);
|
||||
ApiService.setHeader();
|
||||
|
||||
// NOTE: We haven't covered this yet in our ApiService
|
||||
// but don't worry about this just yet - I'll come back to it later
|
||||
ApiService.mount401Interceptor();
|
||||
|
||||
return response.data.access_token;
|
||||
} catch (error) {
|
||||
throw new AuthenticationError(error.response.status, error.response.data.detail);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Refresh the access token.
|
||||
**/
|
||||
refreshToken: async function() {
|
||||
const refreshToken = TokenService.getRefreshToken()
|
||||
|
||||
const requestData = {
|
||||
method: 'post',
|
||||
url: "login",
|
||||
data: {
|
||||
grant_type: 'refresh_token',
|
||||
refresh_token: refreshToken
|
||||
},
|
||||
auth: {
|
||||
username: process.env.VUE_APP_CLIENT_ID,
|
||||
password: process.env.VUE_APP_CLIENT_SECRET
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await ApiService.customRequest(requestData)
|
||||
|
||||
TokenService.saveToken(response.data.token)
|
||||
TokenService.saveRefreshToken(response.data.token)
|
||||
// Update the header in ApiService
|
||||
ApiService.setHeader()
|
||||
|
||||
return response.data.access_token
|
||||
} catch (error) {
|
||||
throw new AuthenticationError(error.response.status, error.response.data.detail)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Logout the current user by removing the token from storage.
|
||||
*
|
||||
* Will also remove `Authorization Bearer <token>` header from future requests.
|
||||
**/
|
||||
logout() {
|
||||
// Remove the token and remove Authorization header from Api Service as well
|
||||
TokenService.removeToken()
|
||||
TokenService.removeRefreshToken()
|
||||
ApiService.removeHeader()
|
||||
|
||||
// NOTE: Again, we'll cover the 401 Interceptor a bit later.
|
||||
ApiService.unmount401Interceptor()
|
||||
}
|
||||
}
|
||||
|
||||
export default UserService
|
||||
|
||||
export { UserService, AuthenticationError }
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
export * from './auth/api.service';
|
||||
export * from './auth/storage.service';
|
||||
export * from './auth/user.service';
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
// https://vuex.vuejs.org/en/actions.html
|
||||
|
||||
export default {
|
||||
//
|
||||
}
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
// https://vuex.vuejs.org/en/getters.html
|
||||
|
||||
export default {
|
||||
//
|
||||
}
|
||||
Vendored
+31
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Vuex
|
||||
*
|
||||
* @library
|
||||
*
|
||||
* https://vuex.vuejs.org/en/
|
||||
*/
|
||||
|
||||
// Lib imports
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
// Store functionality
|
||||
import actions from './actions'
|
||||
import getters from './getters'
|
||||
import modules from './modules'
|
||||
import mutations from './mutations'
|
||||
import state from './state'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
// Create a new store
|
||||
const store = new Vuex.Store({
|
||||
actions,
|
||||
getters,
|
||||
modules,
|
||||
mutations,
|
||||
state
|
||||
})
|
||||
|
||||
export default store
|
||||
@@ -0,0 +1,8 @@
|
||||
import { set, toggle } from '@/utils/vuex'
|
||||
|
||||
export default {
|
||||
setDrawer: set('drawer'),
|
||||
setImage: set('image'),
|
||||
setColor: set('color'),
|
||||
toggleDrawer: toggle('drawer')
|
||||
}
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
export default {
|
||||
drawer: null,
|
||||
color: 'WM-CyanBlueGradient-BG',
|
||||
// image: 'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-2.32103624.jpg'
|
||||
}
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
import { UserService, AuthenticationError } from '@/services/auth/user.service'
|
||||
import router from '@/router'
|
||||
|
||||
export default {
|
||||
async login({ commit }, {cell_number, password}) {
|
||||
commit('loginRequest');
|
||||
|
||||
try {
|
||||
const token = await UserService.login(cell_number, password);
|
||||
commit('loginSuccess', token)
|
||||
|
||||
// Redirect the user to the page he first tried to visit or to the home view
|
||||
router.push(router.history.current.query.redirect || '/');
|
||||
|
||||
return true
|
||||
} catch (e) {
|
||||
if (e instanceof AuthenticationError) {
|
||||
commit('loginError', {errorCode: e.errorCode, errorMessage: e.message})
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
logout({ commit }) {
|
||||
UserService.logout()
|
||||
commit('logoutSuccess')
|
||||
router.push('/login')
|
||||
},
|
||||
|
||||
refreshToken({ commit, state }) {
|
||||
// If this is the first time the refreshToken has been called, make a request
|
||||
// otherwise return the same promise to the caller
|
||||
if(!state.refreshTokenPromise) {
|
||||
const p = UserService.refreshToken()
|
||||
commit('refreshTokenPromise', p)
|
||||
|
||||
// Wait for the UserService.refreshToken() to resolve. On success set the token and clear promise
|
||||
// Clear the promise on error as well.
|
||||
p.then(
|
||||
response => {
|
||||
commit('refreshTokenPromise', null)
|
||||
commit('loginSuccess', response)
|
||||
},
|
||||
error => {
|
||||
commit('refreshTokenPromise', null)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
return state.refreshTokenPromise
|
||||
}
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
export default {
|
||||
loggedIn: (state) => {
|
||||
return state.accessToken ? true : false
|
||||
},
|
||||
|
||||
authenticationErrorCode: (state) => {
|
||||
return state.authenticationErrorCode
|
||||
},
|
||||
|
||||
authenticationError: (state) => {
|
||||
return state.authenticationError
|
||||
},
|
||||
|
||||
authenticating: (state) => {
|
||||
return state.authenticating
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
export default {
|
||||
loginRequest(state) {
|
||||
state.authenticating = true;
|
||||
state.authenticationError = ''
|
||||
state.authenticationErrorCode = 0
|
||||
},
|
||||
|
||||
loginSuccess(state, accessToken) {
|
||||
state.accessToken = accessToken
|
||||
state.authenticating = false;
|
||||
},
|
||||
|
||||
loginError(state, {errorCode, errorMessage}) {
|
||||
state.authenticating = false
|
||||
state.authenticationErrorCode = errorCode
|
||||
state.authenticationError = errorMessage
|
||||
},
|
||||
|
||||
logoutSuccess(state) {
|
||||
state.accessToken = ''
|
||||
},
|
||||
|
||||
|
||||
refreshTokenPromise(state, promise) {
|
||||
state.refreshTokenPromise = promise
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { TokenService } from '@/services/auth/storage.service'
|
||||
|
||||
export default {
|
||||
authenticating: false,
|
||||
accessToken: TokenService.getToken(),
|
||||
authenticationErrorCode: 0,
|
||||
authenticationError: '',
|
||||
refreshTokenPromise: null // Holds the promise of the refresh token
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
// https://vuex.vuejs.org/en/modules.html
|
||||
|
||||
const requireModule = require.context('.', true, /\.js$/)
|
||||
const modules = {}
|
||||
|
||||
requireModule.keys().forEach(fileName => {
|
||||
if (fileName === './index.js') return
|
||||
|
||||
// Replace ./ and .js
|
||||
const path = fileName.replace(/(\.\/|\.js)/g, '')
|
||||
const [moduleName, imported] = path.split('/')
|
||||
if (!modules[moduleName]) {
|
||||
modules[moduleName] = {
|
||||
namespaced: true
|
||||
}
|
||||
}
|
||||
|
||||
modules[moduleName][imported] = requireModule(fileName).default
|
||||
})
|
||||
|
||||
export default modules
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
// https://vuex.vuejs.org/en/mutations.html
|
||||
|
||||
export default {
|
||||
//
|
||||
}
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
// https://vuex.vuejs.org/en/state.html
|
||||
|
||||
export default {
|
||||
//
|
||||
}
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
.theme--light.v-card.WM-TransparentCard {
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.headline {
|
||||
letter-spacing : 7px !important;
|
||||
}
|
||||
.WM-Border-L-3x {
|
||||
border-left: 3px solid;
|
||||
}
|
||||
.WM-OrangeGradient-BG {
|
||||
background: linear-gradient(-245.99599235188236deg, rgba(252, 184, 162,1) -0.3020833333333286%,rgba(255, 236, 210,1) 93.03125%);
|
||||
}
|
||||
.WM-BlueGradient-BG {
|
||||
background: linear-gradient(-246.25375448810587deg, rgba(213, 245, 253,1) 0.4518229166666856%,rgba(233, 255, 247,1) 92.79557291666667%)
|
||||
}
|
||||
.WM-CoffeeGradient-BG {
|
||||
background : linear-gradient(-246.25375448810587deg, rgba(226, 210, 196,1) 0.2955729166666856%,rgba(250, 247, 245,1) 92.63932291666667%);
|
||||
}
|
||||
.WM-MuskGradient-BG {
|
||||
background : linear-gradient(113.58893008880955deg, rgba(167, 204, 225,1) 4.927083333333334%,rgba(236, 246, 237,1) 97.84374999999999%);
|
||||
}
|
||||
.WM-CyanBlueGradient-BG {
|
||||
background:linear-gradient(90deg, rgba(29,200,230,1) 20.5625%,rgba(29,200,229,1) 20.5625%,rgba(29,230,184,1) 80.5625%);
|
||||
}
|
||||
.WM-GreyGradient-BG {
|
||||
background :linear-gradient(-248.2097473199551deg, rgba(220, 220, 220,1) 0.71484375%,rgba(246, 245, 245,1) 92.95442708333334%)
|
||||
}
|
||||
.WM-GreenGradient-BG {
|
||||
background : linear-gradient(112.72013189013455deg, rgba(98, 185, 183,1) 4.927083333333334%,rgba(236, 246, 237,1) 97.84374999999999%)
|
||||
}
|
||||
.WM-YellowPinkGradient-BG {
|
||||
background : linear-gradient(111.36820033167237deg, rgba(249, 231, 148,1) 4.927083333333334%,rgba(246, 190, 212,1) 97.84374999999999%)
|
||||
}
|
||||
.WM-PinkGradient-BG {
|
||||
background: linear-gradient(to right, #ee9ca7, #ffdde1);
|
||||
}
|
||||
.WM-LightGray-color {
|
||||
color: rgba(33,33,33,.7)
|
||||
}
|
||||
// .WM-Color-LightGrey {
|
||||
// background-color : #F5F5F5;
|
||||
// }
|
||||
.WM-Outline-Btn {
|
||||
padding: 8px;
|
||||
background:transparent !important;
|
||||
}
|
||||
.container.grid-list-xl :not(:only-child) .layout:last-child {
|
||||
margin : 0 !important;
|
||||
}
|
||||
.v-navigation-drawer .v-list .v-list-item .v-list__tile.v-list__tile--active {
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.v-btn.WM-NoShadow:not(.v-btn--depressed):not(.v-btn--flat) {
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@media screen and(max-width : 1536px) {
|
||||
.WM-WidthScreen-SM {
|
||||
flex-basis:35% !important;
|
||||
max-width: 35% !important;
|
||||
}
|
||||
}
|
||||
@media screen and(max-width : 1024px) {
|
||||
.WM-WidthScreen-XS {
|
||||
flex-basis:60% !important;
|
||||
max-width: 60% !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,878 @@
|
||||
/* --------------------------------------------------------
|
||||
General :: Begin
|
||||
-------------------------------------------------------- */
|
||||
|
||||
.En-Raleway {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
}
|
||||
.WM-SubText {
|
||||
display: inline-block;
|
||||
padding: 10px 25px 10px 25px;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
margin: 3px 0px 10px 0px;
|
||||
}
|
||||
.WM-SubText.SmallPad {
|
||||
padding: 5px 15px 5px 15px;
|
||||
}
|
||||
.WM-SubText.XS {
|
||||
padding: 3px 15px 1px 15px;
|
||||
}
|
||||
|
||||
.WM-LetterSpacing-5 {
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
.WM-LetterSpacing-10 {
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
.WM-LetterSpacing-15 {
|
||||
letter-spacing: 15px;
|
||||
}
|
||||
.wow {
|
||||
visibility: hidden;
|
||||
}
|
||||
.RotateX {
|
||||
transform: rotate(180deg);
|
||||
webkit-transform: rotate(180deg);
|
||||
}
|
||||
.Material-Shoadow-SM {
|
||||
box-shadow: 0 8px 10px rgba(0,0,0,0.30), 0 4px 3px rgba(0,0,0,0.22);
|
||||
}
|
||||
.InlineBlock {
|
||||
display: inline-block;
|
||||
}
|
||||
.CubeTransition {
|
||||
transition-property: all;
|
||||
transition-duration: .5s;
|
||||
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
||||
}
|
||||
.WhiteTheme .WM-SubText {
|
||||
background-color: #fff !important;
|
||||
color: #000;
|
||||
}
|
||||
.WhiteTheme .Notification {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.WM-Height-90 {
|
||||
height: 90px;
|
||||
}
|
||||
.WM-Height-110 {
|
||||
height: 110px;
|
||||
}
|
||||
.WM-Height-130 {
|
||||
height: 130px;
|
||||
}
|
||||
.WM-Width-220 {
|
||||
width: 220px;
|
||||
}
|
||||
.WM-Width-Full {
|
||||
width: 100%;
|
||||
}
|
||||
.WM-Height-Full {
|
||||
height: 100%;
|
||||
}
|
||||
.WM-Absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.WM-Relative {
|
||||
position: relative;
|
||||
}
|
||||
.WM-Block {
|
||||
display: block;
|
||||
}
|
||||
.WM-InlineBlock {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[class^='WM-Hover'], [class*='WM-Hover'] {
|
||||
transition: 0.2s;
|
||||
}
|
||||
/* --------------------------------------------------------
|
||||
Align & Floats :: Begin
|
||||
-------------------------------------------------------- */
|
||||
.WM-Align-C {
|
||||
text-align: center;
|
||||
}
|
||||
.WM-Align-R {
|
||||
text-align: right;
|
||||
}
|
||||
.WM-Align-L {
|
||||
text-align: left;
|
||||
}
|
||||
.WM-Float-R {
|
||||
float: right;
|
||||
}
|
||||
.WM-Float-L {
|
||||
float: left;
|
||||
}
|
||||
/* --------------------------------------------------------
|
||||
Direction :: Begin
|
||||
-------------------------------------------------------- */
|
||||
.WM-RTL {
|
||||
direction: rtl;
|
||||
}
|
||||
/* --------------------------------------------------------
|
||||
Fonts :: Begin
|
||||
-------------------------------------------------------- */
|
||||
.WM-Font-12 {
|
||||
font-size: 12px;
|
||||
}
|
||||
.WM-Font-14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.WM-Font-16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.WM-Font-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.WM-Font-20 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.WM-Font-22 {
|
||||
font-size: 22px;
|
||||
}
|
||||
.WM-Font-24 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.WM-Font-30 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.WM-Font-36 {
|
||||
font-size: 36px;
|
||||
}
|
||||
.WM-Font-48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
.WM-Font-52 {
|
||||
font-size: 52px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------------
|
||||
Inputs :: Begin
|
||||
-------------------------------------------------------- */
|
||||
|
||||
.WM-Input {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.WM-TextArea {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.WM-TextArea:focus, .WM-Input:focus {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.WM-Input:focus::-webkit-input-placeholder {
|
||||
color:transparent;
|
||||
}
|
||||
|
||||
.WM-Input:focus::-webkit-input-placeholder { color:transparent; }
|
||||
.WM-Input:focus:-moz-placeholder { color:transparent; }
|
||||
.WM-Input:focus::-moz-placeholder { color:transparent; }
|
||||
.WM-Input:focus:-ms-input-placeholder { color:transparent; }
|
||||
|
||||
.WM-TextArea:focus::-webkit-input-placeholder { color:transparent; }
|
||||
.WM-TextArea:focus:-moz-placeholder { color:transparent; }
|
||||
.WM-TextArea:focus::-moz-placeholder { color:transparent; }
|
||||
.WM-TextArea:focus:-ms-input-placeholder { color:transparent; }
|
||||
|
||||
.WM-Input::-webkit-input-placeholder {
|
||||
color: #555555;
|
||||
}
|
||||
.WM-Input:-moz-placeholder {
|
||||
color: #555555;
|
||||
}
|
||||
.WM-Input::-moz-placeholder {
|
||||
color: #555555;
|
||||
}
|
||||
.WM-Input:-ms-input-placeholder {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.WM-TextArea::-webkit-input-placeholder {
|
||||
color: #555555;
|
||||
}
|
||||
.WM-TextArea:-moz-placeholder {
|
||||
color: #555555;
|
||||
}
|
||||
.WM-TextArea::-moz-placeholder {
|
||||
color: #555555;
|
||||
}
|
||||
.WM-TextArea:-ms-input-placeholder {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.WM-InputWrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-bottom: 2px solid #d9d9d9;
|
||||
padding-bottom: 0px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.WM-InputLabel {
|
||||
font-size: 15px;
|
||||
color: #999999;
|
||||
line-height: 1.5;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.WM-Input100 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
font-size: 18px;
|
||||
color: #555555;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.WM-Input100-Focus {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.WM-Input100-Focus::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
-webkit-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
background: #ff4b5a;
|
||||
}
|
||||
.WM-Input.WM-Red + .WM-Input100-Focus::before {
|
||||
background: #ee3552;
|
||||
}
|
||||
.WM-Input.WM-Orange + .WM-Input100-Focus::before {
|
||||
background: #FF6B57;
|
||||
}
|
||||
.WM-Input.WM-Purple + .WM-Input100-Focus::before {
|
||||
background: #ac3773;
|
||||
}
|
||||
.WM-Input.WM-Cyan + .WM-Input100-Focus::before {
|
||||
background: #32c5d2;
|
||||
}
|
||||
.WM-Input.WM-Green + .WM-Input100-Focus::before {
|
||||
background: #0d7e00;
|
||||
}
|
||||
.WM-Input.WM-Blue + .WM-Input100-Focus::before {
|
||||
background: #3498DB;
|
||||
}
|
||||
.WM-Input.WM-Black + .WM-Input100-Focus::before {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.WM-Input.WM-Input100 {
|
||||
height: 40px;
|
||||
}
|
||||
.WM-InputWrapper input:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.WM-TextArea.WM-Input100 {
|
||||
min-height: 110px;
|
||||
padding-top: 9px;
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
|
||||
|
||||
.WM-Input100:focus + .WM-Input100-Focus::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.WM-Select {
|
||||
background-color: transparent !important;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------
|
||||
Margins :: Begin
|
||||
-------------------------------------------------------- */
|
||||
.WM-Margin-T-5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.WM-Margin-T-15 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.WM-Margin-T-20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.WM-Margin-T-45 {
|
||||
margin-top: 45px;
|
||||
}
|
||||
.WM-Margin-T-55 {
|
||||
margin-top: 55px;
|
||||
}
|
||||
.WM-Margin-T-100 {
|
||||
margin-top: 100px;
|
||||
}
|
||||
.WM-Margin-L-10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.WM-Margin-L-0 {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.WM-Margin-R-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.WM-Margin-R-40 {
|
||||
margin-right: 40px;
|
||||
}
|
||||
.WM-Margin-BT-20 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.WM-Margin-BT-5 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.WM-Margin-B-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.WM-Margin-B-30 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.WM-Margin-RL-15 {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------
|
||||
Paddings :: Begin
|
||||
-------------------------------------------------------- */
|
||||
.WM-Padding-10 {
|
||||
padding: 10px;
|
||||
}
|
||||
.WM-Padding-5 {
|
||||
padding: 5px;
|
||||
}
|
||||
.WM-Padding-T-10 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------
|
||||
Borders :: Begin
|
||||
-------------------------------------------------------- */
|
||||
.WM-Border {
|
||||
border: 1px solid;
|
||||
}
|
||||
.WM-Border-2x {
|
||||
border: 2px solid;
|
||||
}
|
||||
.WM-Border-R {
|
||||
border-right: 1px solid;
|
||||
}
|
||||
.WM-Border-L {
|
||||
border-left: 1px solid;
|
||||
}
|
||||
.WM-Border-T {
|
||||
border-top: 1px solid;
|
||||
}
|
||||
.WM-Border-B {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------------
|
||||
Buttons :: Begin
|
||||
-------------------------------------------------------- */
|
||||
|
||||
.WM-Btn {
|
||||
outline: none !important;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
min-width: 160px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
/* line-height: 1.2; */
|
||||
line-height: 0;
|
||||
-webkit-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
|
||||
}
|
||||
|
||||
.WM-Btn-Red {
|
||||
background-color: #ee3552;
|
||||
box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
|
||||
}
|
||||
|
||||
.WM-Btn-Orange {
|
||||
background-color: #FF6B57;
|
||||
box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.WM-Btn-Cyan {
|
||||
background-color: #32c5d2;
|
||||
box-shadow: 0 10px 30px 0px rgba(250, 197, 210, 0.5);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5);
|
||||
}
|
||||
|
||||
.WM-Btn-Yellow {
|
||||
background-color: #ffd63a;
|
||||
color: #000;
|
||||
box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5);
|
||||
}
|
||||
|
||||
.WM-Btn-Purple {
|
||||
background-color: #ac3773;
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.WM-Btn-Black {
|
||||
background-color: #000;
|
||||
box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.WM-Btn-White {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.WM-Btn-Green {
|
||||
background-color: #0d7e00;
|
||||
box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5);
|
||||
}
|
||||
|
||||
.WM-Btn-Blue {
|
||||
background-color: #3498DB;
|
||||
box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
|
||||
}
|
||||
.WM-Btn-Gray {
|
||||
background-color: #797979;
|
||||
box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.WM-Btn i {
|
||||
margin-left: 5px;
|
||||
-webkit-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.WM-Btn:hover {
|
||||
background-color: #333333;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
|
||||
}
|
||||
.WM-Btn-RedHover:hover {
|
||||
background-color: #ee3552;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
|
||||
-moz-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
|
||||
-o-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
|
||||
-ms-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
|
||||
}
|
||||
|
||||
.WM-Btn-SM {
|
||||
min-width: 50px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.WM-Btn-SM i {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.WM-Btn-XS {
|
||||
min-width: 40px;
|
||||
padding: 0 10px;
|
||||
line-height: 1 !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
.WM-Btn-XS i {
|
||||
margin-left: 0px;
|
||||
}
|
||||
/* .WM-Btn:hover i {
|
||||
-webkit-transform: translateX(10px);
|
||||
-moz-transform: translateX(10px);
|
||||
-ms-transform: translateX(10px);
|
||||
-o-transform: translateX(10px);
|
||||
transform: translateX(10px);
|
||||
} */
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------------
|
||||
Headers :: Begin
|
||||
-------------------------------------------------------- */
|
||||
|
||||
.WM-SH-Container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
}
|
||||
.WM-SH-TextFa {
|
||||
margin-bottom: 15px;
|
||||
font-size: 25px;
|
||||
color: #000;
|
||||
}
|
||||
.WM-SH-Line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.WM-SH-TextEn-Container {
|
||||
top: -12px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
z-index: 14;
|
||||
overflow: visible;
|
||||
padding: 0 0px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.WM-SH-TextEn {
|
||||
background-color: #000;
|
||||
padding: 5px 20px 5px 20px;
|
||||
color: #fff;
|
||||
z-index: 9;
|
||||
overflow: visible;
|
||||
font-size: 14px;
|
||||
margin: 0px 0px 0px 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.WM-SH-Description {
|
||||
margin-top: -7px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------------
|
||||
Links :: Begin
|
||||
-------------------------------------------------------- */
|
||||
.WM-Link {
|
||||
display: inline-block;
|
||||
color: #000;
|
||||
direction: rtl;
|
||||
text-decoration: none;
|
||||
}
|
||||
.WM-Link::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #000;
|
||||
transition: width .3s;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.WM-Link:hover::after, .WM-Link.WM-Selected::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.WM-Link-Red:hover, .WM-Link-Red.WM-Selected {
|
||||
color: #ee3552 !important;
|
||||
}
|
||||
.WM-Link-Red::after {
|
||||
background: #ee3552;
|
||||
}
|
||||
|
||||
.WM-Link-Green:hover, .WM-Link-Green.WM-Selected {
|
||||
color: #32c5d2 !important;
|
||||
}
|
||||
.WM-Link-Green::after {
|
||||
background: #32c5d2;
|
||||
}
|
||||
|
||||
.WM-Link-Dark:hover, .WM-Link-Dark.WM-Selected {
|
||||
color: #000 !important;
|
||||
}
|
||||
.WM-Link-Dark::after {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.WM-Link-Purple:hover, .WM-Link-Purple.WM-Selected {
|
||||
color: #ac3773 !important;
|
||||
}
|
||||
.WM-Link-Purple::after {
|
||||
background: #ac3773;
|
||||
}
|
||||
|
||||
.WM-Link-Orange:hover, .WM-Link-Orange.WM-Selected {
|
||||
color: #FF6B57 !important;
|
||||
}
|
||||
.WM-Link-Orange::after {
|
||||
background: #FF6B57;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --------------------------------------------------------
|
||||
Colors :: Begin
|
||||
-------------------------------------------------------- */
|
||||
/* ---------------------------AutoMatic Generate--------------------------- */
|
||||
.WM-BG-Red, .WM-Link-Red::after, .WM-Input.WM-Red + .WM-Input100-Focus::before {
|
||||
background-color: #ee3552;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-Red, .WM-Link-Red:hover, .WM-Link-Red.WM-Selected, .WM-Link-Red.WM-Active {
|
||||
color: #ee3552;
|
||||
}
|
||||
|
||||
.WM-Border-Red, .WM-Hover-Red:hover {
|
||||
border-color: #ee3552 !important;
|
||||
}
|
||||
|
||||
.WM-BG-Orange, .WM-Link-Orange::after, .WM-Input.WM-Orange + .WM-Input100-Focus::before {
|
||||
background-color: #FF6B57;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-Orange, .WM-Link-Orange:hover, .WM-Link-Orange.WM-Selected, .WM-Link-Orange.WM-Active {
|
||||
color: #FF6B57;
|
||||
}
|
||||
|
||||
.WM-Border-Orange, .WM-Hover-Orange:hover {
|
||||
border-color: #FF6B57 !important;
|
||||
}
|
||||
|
||||
.WM-BG-Yellow, .WM-Link-Yellow::after, .WM-Input.WM-Yellow + .WM-Input100-Focus::before {
|
||||
background-color: #ffd63a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-Yellow, .WM-Link-Yellow:hover, .WM-Link-Yellow.WM-Selected, .WM-Link-Yellow.WM-Active {
|
||||
color: #ffd63a;
|
||||
}
|
||||
|
||||
.WM-Border-Yellow, .WM-Hover-Yellow:hover {
|
||||
border-color: #ffd63a;
|
||||
}
|
||||
|
||||
.WM-BG-Gold, .WM-Link-Gold::after, .WM-Input.WM-Gold + .WM-Input100-Focus::before {
|
||||
background-color: #ddcfbb;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-Gold, .WM-Link-Gold:hover, .WM-Link-Gold.WM-Selected, .WM-Link-Gold.WM-Active {
|
||||
color: #ddcfbb;
|
||||
}
|
||||
|
||||
.WM-Border-Gold, .WM-Hover-Gold:hover {
|
||||
border-color: #ddcfbb;
|
||||
}
|
||||
|
||||
.WM-BG-Purple, .WM-Link-Purple::after, .WM-Input.WM-Purple + .WM-Input100-Focus::before {
|
||||
background-color: #ac3773;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-Purple, .WM-Link-Purple:hover, .WM-Link-Purple.WM-Selected, .WM-Link-Purple.WM-Active {
|
||||
color: #ac3773;
|
||||
}
|
||||
|
||||
.WM-Border-Purple, .WM-Hover-Purple:hover {
|
||||
border-color: #ac3773 !important;
|
||||
}
|
||||
|
||||
.WM-BG-Blue, .WM-Link-Blue::after, .WM-Input.WM-Blue + .WM-Input100-Focus::before {
|
||||
background-color: #3498DB;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-Blue, .WM-Link-Blue:hover, .WM-Link-Blue.WM-Selected, .WM-Link-Blue.WM-Active {
|
||||
color: #3498DB;
|
||||
}
|
||||
|
||||
.WM-Border-Blue, .WM-Hover-Blue:hover {
|
||||
border-color: #3498DB !important;
|
||||
}
|
||||
|
||||
.WM-BG-Green, .WM-Link-Green::after, .WM-Input.WM-Green + .WM-Input100-Focus::before {
|
||||
background-color: #0d7e00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-Green, .WM-Link-Green:hover, .WM-Link-Green.WM-Selected, .WM-Link-Green.WM-Active {
|
||||
color: #0d7e00;
|
||||
}
|
||||
|
||||
.WM-Border-Green, .WM-Hover-Green:hover {
|
||||
border-color: #0d7e00;
|
||||
}
|
||||
|
||||
.WM-BG-Cyan, .WM-Link-Cyan::after, .WM-Input.WM-Cyan + .WM-Input100-Focus::before {
|
||||
background-color: #32c5d2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-Cyan, .WM-Link-Cyan:hover, .WM-Link-Cyan.WM-Selected, .WM-Link-Cyan.WM-Active {
|
||||
color: #32c5d2;
|
||||
}
|
||||
|
||||
.WM-Border-Cyan, .WM-Hover-Cyan:hover {
|
||||
border-color: #32c5d2;
|
||||
}
|
||||
|
||||
.WM-BG-LightGray, .WM-Link-LightGray::after, .WM-Input.WM-LightGray + .WM-Input100-Focus::before {
|
||||
background-color: #e6e6e6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-LightGray, .WM-Link-LightGray:hover, .WM-Link-LightGray.WM-Selected, .WM-Link-LightGray.WM-Active {
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.WM-Border-LightGray, .WM-Hover-LightGray:hover {
|
||||
border-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.WM-BG-Gray, .WM-Link-Gray::after, .WM-Input.WM-Gray + .WM-Input100-Focus::before {
|
||||
background-color: #797979;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-Gray, .WM-Link-Gray:hover, .WM-Link-Gray.WM-Selected, .WM-Link-Gray.WM-Active {
|
||||
color: #797979;
|
||||
}
|
||||
|
||||
.WM-Border-Gray, .WM-Hover-Gray:hover {
|
||||
border-color: #797979 !important;
|
||||
}
|
||||
|
||||
.WM-BG-Dark, .WM-Link-Dark::after, .WM-Input.WM-Dark + .WM-Input100-Focus::before {
|
||||
background-color: #2f353b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-Dark, .WM-Link-Dark:hover, .WM-Link-Dark.WM-Selected, .WM-Link-Dark.WM-Active {
|
||||
color: #2f353b;
|
||||
}
|
||||
|
||||
.WM-Border-Dark, .WM-Hover-Dark:hover {
|
||||
border-color: #2f353b;
|
||||
}
|
||||
|
||||
.WM-BG-Black, .WM-Link-Black::after, .WM-Input.WM-Black + .WM-Input100-Focus::before {
|
||||
background-color: #2f353b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-Black, .WM-Link-Black:hover, .WM-Link-Black.WM-Selected, .WM-Link-Black.WM-Active {
|
||||
color: #2f353b;
|
||||
}
|
||||
|
||||
.WM-Border-Black, .WM-Hover-Black:hover {
|
||||
border-color: #2f353b !important;
|
||||
}
|
||||
|
||||
.WM-BG-White, .WM-Link-White::after, .WM-Input.WM-White + .WM-Input100-Focus::before {
|
||||
background-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Color-White, .WM-Link-White:hover, .WM-Link-White.WM-Selected, .WM-Link-White.WM-Active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.WM-Border-White, .WM-Hover-White:hover {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* ---------------------------AutoMatic Generate--------------------------- */
|
||||
|
||||
.WM-BG-LightGray, .WM-BG-Gold {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------------
|
||||
Hover :: Grayscale
|
||||
-------------------------------------------------------- */
|
||||
.WM-CategoryItem {
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
}
|
||||
.WM-Hover-Grayscale {
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 1s ease !important;
|
||||
-moz-transition: all 1s ease !important;
|
||||
-o-transition: all 1s ease !important;
|
||||
-ms-transition: all 1s ease !important;
|
||||
transition: all 1s ease !important;
|
||||
}
|
||||
.WM-Hover-Grayscale:hover {
|
||||
-webkit-filter: grayscale(100%) !important;
|
||||
}
|
||||
Vendored
+17
@@ -0,0 +1,17 @@
|
||||
@import "material-dashboard/mixins";
|
||||
@import "material-dashboard/variables";
|
||||
@import "material-dashboard/typography";
|
||||
@import "material-dashboard/sidebar";
|
||||
@import "material-dashboard/toolbar";
|
||||
@import "material-dashboard/misc";
|
||||
@import "material-dashboard/inputs";
|
||||
@import "material-dashboard/footer";
|
||||
@import "material-dashboard/cards";
|
||||
@import "material-dashboard/tables";
|
||||
@import "material-dashboard/tabs";
|
||||
@import "material-dashboard/checkboxes";
|
||||
@import "material-dashboard/tooltips";
|
||||
@import "material-dashboard/buttons";
|
||||
@import "material-dashboard/alerts";
|
||||
@import "material-dashboard/fixed-plugin";
|
||||
@import "material-dashboard/dropdown";
|
||||
@@ -0,0 +1,48 @@
|
||||
.v-alert {
|
||||
.v-alert__dismissible .v-icon {
|
||||
color: rgba($white, .5);
|
||||
font-size: $font-size-default + 2;
|
||||
}
|
||||
|
||||
.v-alert__icon.v-icon {
|
||||
font-size: $font-size-alert-icon;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.v-snack {
|
||||
.v-icon:not(:first-child) {
|
||||
color: rgba($white, .5);
|
||||
margin-left: $margin-general + 1;
|
||||
}
|
||||
|
||||
.v-icon:first-child {
|
||||
font-size: $font-size-alert-icon;
|
||||
}
|
||||
|
||||
.v-snack__content {
|
||||
padding: $padding-general $padding-general + 5;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.v-snack__wrapper {
|
||||
border-radius: $border-radius-base + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.v-snack .v-snack__wrapper,
|
||||
.v-alert {
|
||||
@include alert-shadow('info', lighten($brand-info, 5%));
|
||||
@include alert-shadow('success', $brand-success);
|
||||
@include alert-shadow('error', $brand-danger);
|
||||
@include alert-shadow('warning', $brand-warning);
|
||||
@include alert-shadow('purple', $brand-primary);
|
||||
}
|
||||
|
||||
.v-snack {
|
||||
@include notifications-color('info', lighten($brand-info, 5%));
|
||||
@include notifications-color('success', $brand-success);
|
||||
@include notifications-color('error', $brand-danger);
|
||||
@include notifications-color('warning', $brand-warning);
|
||||
@include notifications-color('purple', $brand-primary);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
.v-btn {
|
||||
margin: $margin-small 1px;
|
||||
padding: $padding-small + 2 $padding-general + 15;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-base !important;
|
||||
height: auto;
|
||||
line-height: $line-height-base;
|
||||
color: $white !important;
|
||||
cursor: pointer;
|
||||
border-radius: $border-radius-base;
|
||||
|
||||
&.v-btn--round,
|
||||
&.v-btn--round:after {
|
||||
border-radius: $btn-round-padding;
|
||||
}
|
||||
|
||||
&.v-btn-facebook {
|
||||
@include social-buttons-color($social-facebook);
|
||||
}
|
||||
&.v-btn-twitter {
|
||||
@include social-buttons-color($social-twitter);
|
||||
}
|
||||
|
||||
.v-icon--left {
|
||||
margin-right: $btn-margin-icon;
|
||||
}
|
||||
.v-icon--right {
|
||||
margin-left: $btn-margin-icon;
|
||||
}
|
||||
|
||||
&.v-btn--large {
|
||||
font-size: $font-size-general;
|
||||
padding: $btn-y-large-padding $btn-x-large-padding !important;
|
||||
line-height: $btn-large-line-height;
|
||||
}
|
||||
|
||||
&.v-btn--small {
|
||||
padding: $btn-y-small-padding $btn-x-small-padding !important;
|
||||
font-size: $font-size-small - 1;
|
||||
}
|
||||
|
||||
&.v-btn--icon {
|
||||
width: $btn-icon-dim;
|
||||
height: $btn-icon-dim;
|
||||
line-height: $btn-icon-dim;
|
||||
padding: 0;
|
||||
|
||||
&.v-btn--round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
@include button-color($brand-success);
|
||||
}
|
||||
|
||||
&.default {
|
||||
@include button-color($gray-light);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@include button-color($brand-primary);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@include button-color($brand-warning);
|
||||
}
|
||||
|
||||
&.info {
|
||||
@include button-color($brand-info);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
@include button-color($brand-danger);
|
||||
}
|
||||
|
||||
.v-icon {
|
||||
font-size: $btn-font-size-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.v-btn--fixed {
|
||||
border-radius: $border-radius-base + 3;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
background-color: rgba($black, .3) !important;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
width: $btn-fixed-width;
|
||||
|
||||
.v-icon {
|
||||
font-size: $btn-fixed-icon-size;
|
||||
padding: $padding-small;
|
||||
}
|
||||
}
|
||||
|
||||
.v-btn--active:before,
|
||||
.v-btn:focus:before,
|
||||
.v-btn:hover:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
.v-card {
|
||||
box-shadow: $card-shadow;
|
||||
border-radius: $border-radius-base;
|
||||
|
||||
.category {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
line-height: $line-height-base !important;
|
||||
letter-spacing: 0 !important;
|
||||
font-size: $font-size-h4 !important;
|
||||
margin-bottom: $card-title-margin !important;
|
||||
}
|
||||
|
||||
.v-divider {
|
||||
border-top: $divider-border;
|
||||
margin-left: $card-content-x-padding !important;
|
||||
margin-right: $card-content-x-padding !important;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.v-offset {
|
||||
top: $card-offset !important;
|
||||
margin-bottom: $card-offset !important;
|
||||
|
||||
.category {
|
||||
color: rgba($white, .62);
|
||||
}
|
||||
|
||||
.v-card--material__header.v-card{
|
||||
padding: $padding-general;
|
||||
}
|
||||
}
|
||||
|
||||
.v-card__actions {
|
||||
margin: 0 $card-actions-y-margin 0;
|
||||
padding: $padding-small 0 $padding-small;
|
||||
line-height: $line-height-higher;
|
||||
}
|
||||
}
|
||||
|
||||
.v-card--material-chart.v-card {
|
||||
&:not(.v-card--material__header) {
|
||||
margin: $card-margin 0 !important;
|
||||
}
|
||||
|
||||
.v-card--material__header{
|
||||
border-radius: $border-radius-base + 3;
|
||||
min-height: $card-chart-min-height;
|
||||
padding: 0 !important;
|
||||
|
||||
.ct-label {
|
||||
font-size: $font-size-chart-label;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.category {
|
||||
margin: 0 !important;
|
||||
line-height: $line-height-higher;
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
.v-card__text {
|
||||
padding: $padding-general $card-content-x-padding;
|
||||
line-height: $line-height-higher;
|
||||
}
|
||||
}
|
||||
|
||||
.v-card--material-stats.v-card:not(.v-card--material__header),
|
||||
.v-card--material-chart.v-card:not(.v-card--material__header) {
|
||||
margin: $card-margin 0 !important;
|
||||
}
|
||||
|
||||
@include card-header-color('info', $brand-info, $cyan-400, $cyan-600);
|
||||
@include card-header-color('red', $brand-danger, $red-400, $red-600);
|
||||
@include card-header-color('green', $brand-success, $green-400, $green-600);
|
||||
@include card-header-color('orange', $brand-warning, $orange-400, $orange-600);
|
||||
@include card-header-color('purple', $brand-primary, $purple-400, $purple-600);
|
||||
|
||||
.v-card--material-stats.v-card {
|
||||
.v-offset {
|
||||
position: absolute;
|
||||
|
||||
.v-card {
|
||||
max-width: $card-stats-offset;
|
||||
max-height: $card-stats-offset;
|
||||
line-height: $card-stats-offset;
|
||||
padding: $padding-general !important;
|
||||
|
||||
i {
|
||||
font-size: $font-size-big !important;
|
||||
line-height: $line-height-high;
|
||||
width: $card-stats-icons-dim;
|
||||
height: $card-stats-icons-dim;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-card__text {
|
||||
text-align: right;
|
||||
padding-top: $padding-small;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 !important;
|
||||
line-height: $line-height-base !important;
|
||||
letter-spacing: 0 !important;
|
||||
font-size: $font-size-h3 !important;
|
||||
|
||||
small {
|
||||
color: $gray-light;
|
||||
font-size: $font-size-small-tag;
|
||||
line-height: 1;
|
||||
font-weight: $font-weight-base;
|
||||
}
|
||||
}
|
||||
|
||||
.v-card__actions {
|
||||
i {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
font-size: $font-size-default + 2 !important;
|
||||
}
|
||||
|
||||
.caption {
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-card-profile {
|
||||
display: inline-block;
|
||||
|
||||
.v-offset {
|
||||
top: unset !important;
|
||||
margin-bottom: unset !important;
|
||||
margin-top: $card-profile-avatar-pos;
|
||||
}
|
||||
|
||||
.v-card__text .v-card__text {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.v-card__text {
|
||||
padding: $padding-general;
|
||||
}
|
||||
|
||||
img {
|
||||
@include shadow-big();
|
||||
}
|
||||
}
|
||||
|
||||
.v-card--flat {
|
||||
background-color: transparent !important;
|
||||
box-shadow: none;
|
||||
|
||||
.v-table {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.mdi-checkbox-blank-outline:before {
|
||||
-webkit-text-stroke: 1px $white;
|
||||
}
|
||||
@@ -0,0 +1,327 @@
|
||||
$red-50: #ffebee !default;
|
||||
$red-100: #ffcdd2 !default;
|
||||
$red-200: #ef9a9a !default;
|
||||
$red-300: #e57373 !default;
|
||||
$red-400: #ef5350 !default;
|
||||
$red-500: #f44336 !default;
|
||||
$red-600: #e53935 !default;
|
||||
$red-700: #d32f2f !default;
|
||||
$red-800: #c62828 !default;
|
||||
$red-900: #b71c1c !default;
|
||||
$red-A100: #ff8a80 !default;
|
||||
$red-A200: #ff5252 !default;
|
||||
$red-A400: #ff1744 !default;
|
||||
$red-A700: #d50000 !default;
|
||||
$red: $red-500 !default;
|
||||
|
||||
|
||||
$pink-50: #fce4ec !default;
|
||||
$pink-100: #f8bbd0 !default;
|
||||
$pink-200: #f48fb1 !default;
|
||||
$pink-300: #f06292 !default;
|
||||
$pink-400: #ec407a !default;
|
||||
$pink-500: #e91e63 !default;
|
||||
$pink-600: #d81b60 !default;
|
||||
$pink-700: #c2185b !default;
|
||||
$pink-800: #ad1457 !default;
|
||||
$pink-900: #880e4f !default;
|
||||
$pink-A100: #ff80ab !default;
|
||||
$pink-A200: #ff4081 !default;
|
||||
$pink-A400: #f50057 !default;
|
||||
$pink-A700: #c51162 !default;
|
||||
$pink: $pink-500 !default;
|
||||
|
||||
|
||||
$purple-50: #f3e5f5 !default;
|
||||
$purple-100: #e1bee7 !default;
|
||||
$purple-200: #ce93d8 !default;
|
||||
$purple-300: #ba68c8 !default;
|
||||
$purple-400: #ab47bc !default;
|
||||
$purple-500: #9c27b0 !default;
|
||||
$purple-600: #8e24aa !default;
|
||||
$purple-700: #7b1fa2 !default;
|
||||
$purple-800: #6a1b9a !default;
|
||||
$purple-900: #4a148c !default;
|
||||
$purple-A100: #ea80fc !default;
|
||||
$purple-A200: #e040fb !default;
|
||||
$purple-A400: #d500f9 !default;
|
||||
$purple-A700: #aa00ff !default;
|
||||
$purple: $purple-500 !default;
|
||||
|
||||
|
||||
$deep-purple-50: #ede7f6 !default;
|
||||
$deep-purple-100: #d1c4e9 !default;
|
||||
$deep-purple-200: #b39ddb !default;
|
||||
$deep-purple-300: #9575cd !default;
|
||||
$deep-purple-400: #7e57c2 !default;
|
||||
$deep-purple-500: #673ab7 !default;
|
||||
$deep-purple-600: #5e35b1 !default;
|
||||
$deep-purple-700: #512da8 !default;
|
||||
$deep-purple-800: #4527a0 !default;
|
||||
$deep-purple-900: #311b92 !default;
|
||||
$deep-purple-A100: #b388ff !default;
|
||||
$deep-purple-A200: #7c4dff !default;
|
||||
$deep-purple-A400: #651fff !default;
|
||||
$deep-purple-A700: #6200ea !default;
|
||||
$deep-purple: $deep-purple-500 !default;
|
||||
|
||||
|
||||
$indigo-50: #e8eaf6 !default;
|
||||
$indigo-100: #c5cae9 !default;
|
||||
$indigo-200: #9fa8da !default;
|
||||
$indigo-300: #7986cb !default;
|
||||
$indigo-400: #5c6bc0 !default;
|
||||
$indigo-500: #3f51b5 !default;
|
||||
$indigo-600: #3949ab !default;
|
||||
$indigo-700: #303f9f !default;
|
||||
$indigo-800: #283593 !default;
|
||||
$indigo-900: #1a237e !default;
|
||||
$indigo-A100: #8c9eff !default;
|
||||
$indigo-A200: #536dfe !default;
|
||||
$indigo-A400: #3d5afe !default;
|
||||
$indigo-A700: #304ffe !default;
|
||||
$indigo: $indigo-500 !default;
|
||||
|
||||
|
||||
$blue-50: #e3f2fd !default;
|
||||
$blue-100: #bbdefb !default;
|
||||
$blue-200: #90caf9 !default;
|
||||
$blue-300: #64b5f6 !default;
|
||||
$blue-400: #42a5f5 !default;
|
||||
$blue-500: #2196f3 !default;
|
||||
$blue-600: #1e88e5 !default;
|
||||
$blue-700: #1976d2 !default;
|
||||
$blue-800: #1565c0 !default;
|
||||
$blue-900: #0d47a1 !default;
|
||||
$blue-A100: #82b1ff !default;
|
||||
$blue-A200: #448aff !default;
|
||||
$blue-A400: #2979ff !default;
|
||||
$blue-A700: #2962ff !default;
|
||||
$blue: $blue-500 !default;
|
||||
|
||||
|
||||
$light-blue-50: #e1f5fe !default;
|
||||
$light-blue-100: #b3e5fc !default;
|
||||
$light-blue-200: #81d4fa !default;
|
||||
$light-blue-300: #4fc3f7 !default;
|
||||
$light-blue-400: #29b6f6 !default;
|
||||
$light-blue-500: #03a9f4 !default;
|
||||
$light-blue-600: #039be5 !default;
|
||||
$light-blue-700: #0288d1 !default;
|
||||
$light-blue-800: #0277bd !default;
|
||||
$light-blue-900: #01579b !default;
|
||||
$light-blue-A100: #80d8ff !default;
|
||||
$light-blue-A200: #40c4ff !default;
|
||||
$light-blue-A400: #00b0ff !default;
|
||||
$light-blue-A700: #0091ea !default;
|
||||
$light-blue: $light-blue-500 !default;
|
||||
|
||||
|
||||
$cyan-50: #e0f7fa !default;
|
||||
$cyan-100: #b2ebf2 !default;
|
||||
$cyan-200: #80deea !default;
|
||||
$cyan-300: #4dd0e1 !default;
|
||||
$cyan-400: #26c6da !default;
|
||||
$cyan-500: #00bcd4 !default;
|
||||
$cyan-600: #00acc1 !default;
|
||||
$cyan-700: #0097a7 !default;
|
||||
$cyan-800: #00838f !default;
|
||||
$cyan-900: #006064 !default;
|
||||
$cyan-A100: #84ffff !default;
|
||||
$cyan-A200: #18ffff !default;
|
||||
$cyan-A400: #00e5ff !default;
|
||||
$cyan-A700: #00b8d4 !default;
|
||||
$cyan: $cyan-500 !default;
|
||||
|
||||
|
||||
$teal-50: #e0f2f1 !default;
|
||||
$teal-100: #b2dfdb !default;
|
||||
$teal-200: #80cbc4 !default;
|
||||
$teal-300: #4db6ac !default;
|
||||
$teal-400: #26a69a !default;
|
||||
$teal-500: #009688 !default;
|
||||
$teal-600: #00897b !default;
|
||||
$teal-700: #00796b !default;
|
||||
$teal-800: #00695c !default;
|
||||
$teal-900: #004d40 !default;
|
||||
$teal-A100: #a7ffeb !default;
|
||||
$teal-A200: #64ffda !default;
|
||||
$teal-A400: #1de9b6 !default;
|
||||
$teal-A700: #00bfa5 !default;
|
||||
$teal: $teal-500 !default;
|
||||
|
||||
|
||||
$green-50: #e8f5e9 !default;
|
||||
$green-100: #c8e6c9 !default;
|
||||
$green-200: #a5d6a7 !default;
|
||||
$green-300: #81c784 !default;
|
||||
$green-400: #66bb6a !default;
|
||||
$green-500: #4caf50 !default;
|
||||
$green-600: #43a047 !default;
|
||||
$green-700: #388e3c !default;
|
||||
$green-800: #2e7d32 !default;
|
||||
$green-900: #1b5e20 !default;
|
||||
$green-A100: #b9f6ca !default;
|
||||
$green-A200: #69f0ae !default;
|
||||
$green-A400: #00e676 !default;
|
||||
$green-A700: #00c853 !default;
|
||||
$green: $green-500 !default;
|
||||
|
||||
|
||||
$light-green-50: #f1f8e9 !default;
|
||||
$light-green-100: #dcedc8 !default;
|
||||
$light-green-200: #c5e1a5 !default;
|
||||
$light-green-300: #aed581 !default;
|
||||
$light-green-400: #9ccc65 !default;
|
||||
$light-green-500: #8bc34a !default;
|
||||
$light-green-600: #7cb342 !default;
|
||||
$light-green-700: #689f38 !default;
|
||||
$light-green-800: #558b2f !default;
|
||||
$light-green-900: #33691e !default;
|
||||
$light-green-A100: #ccff90 !default;
|
||||
$light-green-A200: #b2ff59 !default;
|
||||
$light-green-A400: #76ff03 !default;
|
||||
$light-green-A700: #64dd17 !default;
|
||||
$light-green: $light-green-500 !default;
|
||||
|
||||
|
||||
$lime-50: #f9fbe7 !default;
|
||||
$lime-100: #f0f4c3 !default;
|
||||
$lime-200: #e6ee9c !default;
|
||||
$lime-300: #dce775 !default;
|
||||
$lime-400: #d4e157 !default;
|
||||
$lime-500: #cddc39 !default;
|
||||
$lime-600: #c0ca33 !default;
|
||||
$lime-700: #afb42b !default;
|
||||
$lime-800: #9e9d24 !default;
|
||||
$lime-900: #827717 !default;
|
||||
$lime-A100: #f4ff81 !default;
|
||||
$lime-A200: #eeff41 !default;
|
||||
$lime-A400: #c6ff00 !default;
|
||||
$lime-A700: #aeea00 !default;
|
||||
$lime: $lime-500 !default;
|
||||
|
||||
|
||||
$yellow-50: #fffde7 !default;
|
||||
$yellow-100: #fff9c4 !default;
|
||||
$yellow-200: #fff59d !default;
|
||||
$yellow-300: #fff176 !default;
|
||||
$yellow-400: #ffee58 !default;
|
||||
$yellow-500: #fec60a !default;
|
||||
$yellow-600: #fdd835 !default;
|
||||
$yellow-700: #fbc02d !default;
|
||||
$yellow-800: #f9a825 !default;
|
||||
$yellow-900: #f57f17 !default;
|
||||
$yellow-A100: #ffff8d !default;
|
||||
$yellow-A200: #ffff00 !default;
|
||||
$yellow-A400: #ffea00 !default;
|
||||
$yellow-A700: #ffd600 !default;
|
||||
$yellow: $yellow-700 !default;
|
||||
|
||||
|
||||
$amber-50: #fff8e1 !default;
|
||||
$amber-100: #ffecb3 !default;
|
||||
$amber-200: #ffe082 !default;
|
||||
$amber-300: #ffd54f !default;
|
||||
$amber-400: #ffca28 !default;
|
||||
$amber-500: #ffc107 !default;
|
||||
$amber-600: #ffb300 !default;
|
||||
$amber-700: #ffa000 !default;
|
||||
$amber-800: #ff8f00 !default;
|
||||
$amber-900: #ff6f00 !default;
|
||||
$amber-A100: #ffe57f !default;
|
||||
$amber-A200: #ffd740 !default;
|
||||
$amber-A400: #ffc400 !default;
|
||||
$amber-A700: #ffab00 !default;
|
||||
$amber: $amber-500 !default;
|
||||
|
||||
|
||||
$orange-50: #fff3e0 !default;
|
||||
$orange-100: #ffe0b2 !default;
|
||||
$orange-200: #ffcc80 !default;
|
||||
$orange-300: #ffb74d !default;
|
||||
$orange-400: #ffa726 !default;
|
||||
$orange-500: #ff9800 !default;
|
||||
$orange-600: #fb8c00 !default;
|
||||
$orange-700: #f57c00 !default;
|
||||
$orange-800: #ef6c00 !default;
|
||||
$orange-900: #e65100 !default;
|
||||
$orange-A100: #ffd180 !default;
|
||||
$orange-A200: #ffab40 !default;
|
||||
$orange-A400: #ff9100 !default;
|
||||
$orange-A700: #ff6d00 !default;
|
||||
$orange: $orange-500 !default;
|
||||
|
||||
|
||||
$deep-orange-50: #fbe9e7 !default;
|
||||
$deep-orange-100: #ffccbc !default;
|
||||
$deep-orange-200: #ffab91 !default;
|
||||
$deep-orange-300: #ff8a65 !default;
|
||||
$deep-orange-400: #ff7043 !default;
|
||||
$deep-orange-500: #ff5722 !default;
|
||||
$deep-orange-600: #f4511e !default;
|
||||
$deep-orange-700: #e64a19 !default;
|
||||
$deep-orange-800: #d84315 !default;
|
||||
$deep-orange-900: #bf360c !default;
|
||||
$deep-orange-A100: #ff9e80 !default;
|
||||
$deep-orange-A200: #ff6e40 !default;
|
||||
$deep-orange-A400: #ff3d00 !default;
|
||||
$deep-orange-A700: #dd2c00 !default;
|
||||
$deep-orange: $deep-orange-500 !default;
|
||||
|
||||
|
||||
$brown-50: #efebe9 !default;
|
||||
$brown-100: #d7ccc8 !default;
|
||||
$brown-200: #bcaaa4 !default;
|
||||
$brown-300: #a1887f !default;
|
||||
$brown-400: #8d6e63 !default;
|
||||
$brown-500: #795548 !default;
|
||||
$brown-600: #6d4c41 !default;
|
||||
$brown-700: #5d4037 !default;
|
||||
$brown-800: #4e342e !default;
|
||||
$brown-900: #3e2723 !default;
|
||||
$brown-A100: #d7ccc8 !default;
|
||||
$brown-A200: #bcaaa4 !default;
|
||||
$brown-A400: #8d6e63 !default;
|
||||
$brown-A700: #5d4037 !default;
|
||||
$brown: $brown-500 !default;
|
||||
|
||||
|
||||
$grey-50: #fafafa !default;
|
||||
$grey-100: #f5f5f5 !default;
|
||||
$grey-200: #eeeeee !default;
|
||||
$grey-300: #e0e0e0 !default;
|
||||
$grey-400: #bdbdbd !default;
|
||||
$grey-500: #9e9e9e; $rgb-grey-500: "158, 158, 158" !default;
|
||||
$grey-600: #757575 !default;
|
||||
$grey-700: #616161 !default;
|
||||
$grey-800: #424242 !default;
|
||||
$grey-900: #212121 !default;
|
||||
$grey-A100: #f5f5f5 !default;
|
||||
$grey-A200: #eeeeee !default;
|
||||
$grey-A400: #bdbdbd !default;
|
||||
$grey-A700: #616161 !default;
|
||||
$grey: $grey-500 !default;
|
||||
|
||||
|
||||
$blue-grey-50: #eceff1 !default;
|
||||
$blue-grey-100: #cfd8dc !default;
|
||||
$blue-grey-200: #b0bec5 !default;
|
||||
$blue-grey-300: #90a4ae !default;
|
||||
$blue-grey-400: #78909c !default;
|
||||
$blue-grey-500: #607d8b !default;
|
||||
$blue-grey-600: #546e7a !default;
|
||||
$blue-grey-700: #455a64 !default;
|
||||
$blue-grey-800: #37474f !default;
|
||||
$blue-grey-900: #263238 !default;
|
||||
$blue-grey-A100: #cfd8dc !default;
|
||||
$blue-grey-A200: #b0bec5 !default;
|
||||
$blue-grey-A400: #78909c !default;
|
||||
$blue-grey-A700: #455a64 !default;
|
||||
$blue-grey: $blue-grey-500 !default;
|
||||
|
||||
|
||||
$black: #000000; $rgb-black: "0,0,0" !default;
|
||||
$white: #ffffff; $rgb-white: "255,255,255" !default;
|
||||
|
||||
$Gradient-BlueCyan : linear-gradient(90deg, rgba(29,200,230,1) 20.5625%,rgba(29,200,229,1) 20.5625%,rgba(29,230,184,1) 80.5625%) !default;
|
||||
@@ -0,0 +1,31 @@
|
||||
.dropdown-menu {
|
||||
border-radius: $border-radius-base;
|
||||
|
||||
.v-list__tile {
|
||||
border-radius: $border-radius-base - 1;
|
||||
color: #333 !important;
|
||||
display: flex;
|
||||
font-size: $font-size-dropdown;
|
||||
font-weight: $font-weight-base;
|
||||
margin: 0 $margin-small - 5;
|
||||
padding: $padding-small 1.5rem;
|
||||
text-transform: none;
|
||||
@include transition-except-props(.15s linear, color, background-color, box-shadow 0ms);
|
||||
white-space: nowrap;
|
||||
|
||||
.v-list__tile__title {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include dropdown-menu-color($brand-primary);
|
||||
|
||||
&,
|
||||
.v-list__tile__title {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
.v-menu__content {
|
||||
border-radius: $border-radius-dropdown;
|
||||
box-shadow: $box-shadow-general;
|
||||
|
||||
.sidebar-filter {
|
||||
height: 30px;
|
||||
line-height: 25px;
|
||||
font-size: $font-size-small !important;
|
||||
font-weight: $font-weight-bolder + 100;
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.v-responsive {
|
||||
max-height: 100px;
|
||||
border-radius: $border-radius-dropdown;
|
||||
max-width: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container.grid-list-xl .layout .flex {
|
||||
padding: $padding-small - 5;
|
||||
}
|
||||
|
||||
.v-avatar,
|
||||
.v-responsive {
|
||||
border: 3px solid $white;
|
||||
transition: all .34s;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&.image-active,
|
||||
&.color-active {
|
||||
border-color: $brand-info;
|
||||
}
|
||||
}
|
||||
|
||||
.v-avatar {
|
||||
@include fixed-plugin-colors('primary', $brand-primary);
|
||||
@include fixed-plugin-colors('info', $brand-info);
|
||||
@include fixed-plugin-colors('danger', $brand-danger);
|
||||
@include fixed-plugin-colors('warning', $brand-warning);
|
||||
@include fixed-plugin-colors('success', $brand-success);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
.theme--light.v-footer {
|
||||
border-top: $footer-border-top;
|
||||
background: transparent;
|
||||
padding: $padding-general $padding-x-footer;
|
||||
}
|
||||
|
||||
.v-footer {
|
||||
.footer-links {
|
||||
font-weight: $font-weight-bolder;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: $font-size-small;
|
||||
padding: $padding-general;
|
||||
line-height: $line-height-footer-items;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $brand-primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: $black-color;
|
||||
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 991px) {
|
||||
.v-footer {
|
||||
height: auto !important;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-items,
|
||||
.copyright {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 550px) {
|
||||
.footer-items,
|
||||
.copyright {
|
||||
width: unset;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: $margin-small;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
.theme--light.v-text-field .v-input__slot:before {
|
||||
border-color: $input-color !important;
|
||||
}
|
||||
|
||||
.input--is-focused .v-input__control .v-input__slot:after{
|
||||
border-color: red !important;
|
||||
}
|
||||
|
||||
.v-text-field__slot {
|
||||
input {
|
||||
@include material-placeholder{
|
||||
color: $input-color;
|
||||
};
|
||||
}
|
||||
.v-label {
|
||||
color: $label-color !important;
|
||||
font-size: $font-size-default;
|
||||
font-weight: $font-weight-base;
|
||||
}
|
||||
}
|
||||
|
||||
.theme--light.v-input:not(.v-input--is-disabled) input,
|
||||
.theme--light.v-input:not(.v-input--is-disabled) textarea {
|
||||
color: $black-color;
|
||||
font-size: $font-size-default;
|
||||
}
|
||||
|
||||
@include inputs-color($brand-primary, 'purple');
|
||||
@include inputs-color($brand-warning, 'orange');
|
||||
@include inputs-color($brand-info, 'info');
|
||||
@include inputs-color($brand-danger, 'danger');
|
||||
@include inputs-color($brand-success, 'success');
|
||||
@include inputs-color($brand-success, 'primary');
|
||||
@@ -0,0 +1,54 @@
|
||||
.theme--light.application {
|
||||
background: $body-color;
|
||||
}
|
||||
|
||||
a {
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: $font-size-general + 2!important;
|
||||
}
|
||||
|
||||
.category {
|
||||
font-size: $font-size-general;
|
||||
}
|
||||
|
||||
.theme--light.v-icon {
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
display: block;
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 40px;
|
||||
margin-inline-end: 40px;
|
||||
|
||||
p {
|
||||
font-style: italic;
|
||||
color: $blockquote-color;
|
||||
font-weight: $font-weight-bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bolder;
|
||||
}
|
||||
|
||||
.v-list--three-line .v-list__tile {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@include drawer-active-colors('primary', $brand-primary);
|
||||
@include drawer-active-colors('success', $brand-success);
|
||||
@include drawer-active-colors('danger', $brand-danger);
|
||||
@include drawer-active-colors('info', $brand-info);
|
||||
@include drawer-active-colors('warning', $brand-warning);
|
||||
@@ -0,0 +1,162 @@
|
||||
@mixin shadow-big(){
|
||||
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity * 3),
|
||||
0 4px 25px 0px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-2dp-color($color){
|
||||
box-shadow: 0 2px 2px 0 rgba($color, $mdb-shadow-key-penumbra-opacity),
|
||||
0 3px 1px -2px rgba($color, $mdb-shadow-key-umbra-opacity),
|
||||
0 1px 5px 0 rgba($color, $mdb-shadow-ambient-shadow-opacity) !important;
|
||||
}
|
||||
|
||||
@mixin button-shadow-color($color){
|
||||
box-shadow: 0 14px 26px -12px rgba($color, $mdb-shadow-key-penumbra-opacity * 3),
|
||||
0 4px 23px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 8px 10px -5px rgba($color, $mdb-shadow-key-umbra-opacity) !important;
|
||||
}
|
||||
|
||||
@mixin shadow-8dp(){
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
||||
0 3px 14px 2px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 5px 5px -3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-big-color($color){
|
||||
box-shadow: 0 12px 20px -10px rgba($color, $mdb-shadow-key-penumbra-opacity * 2),
|
||||
0 4px 20px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 7px 8px -5px rgba($color, $mdb-shadow-key-umbra-opacity) !important;
|
||||
}
|
||||
|
||||
@mixin material-placeholder() {
|
||||
&::-moz-placeholder {@content; } // Firefox
|
||||
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder {@content; } // Safari and Chrome
|
||||
}
|
||||
|
||||
@mixin inputs-color($color, $color-name) {
|
||||
.v-text-field.#{$color-name}-input > .v-input__control > .v-input__slot:after {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin drawer-active-colors($color-name, $color) {
|
||||
.v-navigation-drawer .v-list .v-list-item .v-list__tile.v-list__tile--active.#{$color-name} {
|
||||
background-color: $color !important;
|
||||
@include shadow-big-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin toolbar-colors($color-name, $color) {
|
||||
&.#{$color-name} {
|
||||
background-color: $color !important;
|
||||
@include shadow-big-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fixed-plugin-colors($color-name, $color) {
|
||||
&.color-#{$color-name}{
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin notifications-color($color-name, $color) {
|
||||
.v-snack__wrapper.#{$color-name} {
|
||||
background-color: $color !important;
|
||||
border-color: $color !important
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-header-color($color, $shadow-color, $color-400, $color-600) {
|
||||
.v-card.#{$color} {
|
||||
background: linear-gradient(60deg, $color-400, $color-600) !important;
|
||||
@include shadow-big-color($shadow-color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin alert-shadow($color-name, $shadow-color) {
|
||||
&.#{$color-name} {
|
||||
@include shadow-big-color($shadow-color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition-except-props($property...){
|
||||
transition: all $property;
|
||||
}
|
||||
|
||||
@mixin dropdown-menu-color($color) {
|
||||
background-color: $color !important;
|
||||
@include button-shadow-color($color);
|
||||
}
|
||||
|
||||
@mixin button-color($color) {
|
||||
background-color: $color !important;
|
||||
@include shadow-2dp-color($color);
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover{
|
||||
// remove this line if you want black shadows
|
||||
@include button-shadow-color($color);
|
||||
background-color: darken($color, 3%) !important;
|
||||
}
|
||||
|
||||
&.v-btn--simple{
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&.active:focus,
|
||||
&.active:hover{
|
||||
background-color: transparent !important;
|
||||
color: $color !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
i{
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin social-buttons-color ($color){
|
||||
background-color: $color !important;
|
||||
color: $white;
|
||||
@include shadow-2dp-color($color);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&.active:focus,
|
||||
&.active:hover{
|
||||
background-color: $color !important;
|
||||
color: $white;
|
||||
@include button-shadow-color($color);
|
||||
}
|
||||
|
||||
&.v-btn--simple{
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&.active:focus,
|
||||
&.active:hover{
|
||||
color: $color !important;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
i{
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
.v-navigation-drawer {
|
||||
@include shadow-big();
|
||||
|
||||
.v-list {
|
||||
background: $sidebar-bg;
|
||||
padding: 0;
|
||||
|
||||
.v-list-item {
|
||||
&:not(:nth-child(3)){
|
||||
margin: $margin-small $margin-general 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
margin: 0 $margin-general;
|
||||
}
|
||||
|
||||
& > .v-list__tile {
|
||||
padding: $padding-small $padding-general;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: $list-item-hover;
|
||||
}
|
||||
|
||||
.v-list__tile__title {
|
||||
font-size: $font-size-general !important;
|
||||
font-weight: $font-weight-lighter;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.v-list__tile__action {
|
||||
margin-right: $margin-general;
|
||||
min-width: unset;
|
||||
|
||||
i {
|
||||
width: $icon-width;
|
||||
}
|
||||
}
|
||||
|
||||
.v-list__tile:not(.v-list__tile--active) .v-list__tile__action i {
|
||||
opacity: $list-item-icon-opacity;
|
||||
}
|
||||
|
||||
.v-list__tile.v-list__tile--active {
|
||||
// @include shadow-big-color($brand-success);
|
||||
}
|
||||
}
|
||||
|
||||
.v-list__tile--avatar {
|
||||
height: unset;
|
||||
padding: $padding-logo 0;
|
||||
}
|
||||
|
||||
.v-list__tile__avatar {
|
||||
margin-left: $margin-list-left;
|
||||
margin-right: $margin-list-right;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.v-list__tile__title {
|
||||
line-height: $line-height;
|
||||
padding: $padding-avatar-title 0;
|
||||
height: unset;
|
||||
font-size: $font-size-avatar-title !important;
|
||||
font-weight: $font-weight-base;
|
||||
letter-spacing: unset !important;
|
||||
}
|
||||
|
||||
.v-divider {
|
||||
border-color: $black-opacity-3;
|
||||
margin: $divider-margins auto $divider-margins + 25;
|
||||
width: $divider-width;
|
||||
|
||||
}
|
||||
|
||||
.v-image__image--contain {
|
||||
top: $top-dim;
|
||||
}
|
||||
|
||||
.v-avatar {
|
||||
@include shadow-big;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
.theme--light.v-table tbody tr:not(:last-child),
|
||||
.theme--light.v-table thead tr:first-child {
|
||||
border-bottom: 1px solid $table-border-color!important;
|
||||
}
|
||||
|
||||
table.v-table thead tr {
|
||||
height: $table-head-height;
|
||||
background: $Gradient-BlueCyan !important;
|
||||
}
|
||||
|
||||
.theme--light.v-table tbody tr:hover:not(.v-datatable__expand-row) {
|
||||
background: $table-hover-color !important;
|
||||
}
|
||||
|
||||
table.v-table tbody td {
|
||||
font-size: $font-size-general;
|
||||
font-weight: $font-weight-lighter;
|
||||
}
|
||||
|
||||
table.v-table tbody td:first-child, table.v-table tbody td:not(:first-child),
|
||||
table.v-table tbody th:first-child, table.v-table tbody th:not(:first-child),
|
||||
table.v-table thead td:first-child, table.v-table thead td:not(:first-child),
|
||||
table.v-table thead th:first-child, table.v-table thead th:not(:first-child) {
|
||||
padding: $padding-small + 2 $tabs-text-box-padding;
|
||||
}
|
||||
|
||||
.v-datatable__progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table thead tr th span{
|
||||
font-size: 1.0625rem !important;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
.card-tabs {
|
||||
.v-divider {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.flex {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.v-tabs__item {
|
||||
border-radius: $border-radius-base;
|
||||
}
|
||||
|
||||
.v-tabs__slider-wrapper .white{
|
||||
background-color: $tabs-active-line !important;
|
||||
border-color: $tabs-active-line !important
|
||||
}
|
||||
|
||||
.v-tabs__slider {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.v-list__tile__title {
|
||||
font-size: $font-size-default;
|
||||
font-weight: $font-weight-lighter;
|
||||
padding: 0 $tabs-text-box-padding;
|
||||
overflow: visible;
|
||||
white-space: inherit;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.v-list .v-input, .v-list .v-input__slot {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
.v-toolbar {
|
||||
min-height: $toolbar-min-height;
|
||||
border-radius: $border-radius-base;
|
||||
margin-bottom: $margin-general;
|
||||
|
||||
&:not(.v-toolbar--fixed) .v-toolbar__content {
|
||||
margin-left: $toolbar-margin-left;
|
||||
}
|
||||
|
||||
@include toolbar-colors('bg-danger', $brand-danger);
|
||||
@include toolbar-colors('bg-warning', $brand-warning);
|
||||
@include toolbar-colors('bg-primary', $brand-primary);
|
||||
@include toolbar-colors('bg-info', $brand-info);
|
||||
@include toolbar-colors('bg-success', $brand-success);
|
||||
@include toolbar-colors('bg-default', $gray-light);
|
||||
|
||||
&[class*="bg-"] {
|
||||
.v-toolbar__title,
|
||||
.v-btn__content,
|
||||
.v-ripple__container {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-toolbar__content {
|
||||
min-height: $toolbar-min-height;
|
||||
padding-bottom: $padding-small;
|
||||
padding-top: $padding-small;
|
||||
|
||||
.v-toolbar__title {
|
||||
font-size: $font-size-toolbar-title;
|
||||
letter-spacing: unset;
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.v-toolbar__items {
|
||||
& > div {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.toolbar-items{
|
||||
align-items: center;
|
||||
border-radius: $border-radius-base;
|
||||
display: flex;
|
||||
min-height: $list-item-height;
|
||||
padding: $padding-small $padding-general;
|
||||
|
||||
.v-badge__badge {
|
||||
border: $badge-border !important;
|
||||
font-size: $font-size-mini;
|
||||
height: $badge-dimension;
|
||||
line-height: normal;
|
||||
right: -7px;
|
||||
top: -12px;
|
||||
width: $badge-dimension;
|
||||
font-weight: $font-weight-base;
|
||||
}
|
||||
|
||||
.v-icon {
|
||||
font-size: $font-size-toolbar-items;
|
||||
}
|
||||
}
|
||||
|
||||
.v-input {
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 990px) {
|
||||
.v-toolbar:not(.v-toolbar--fixed) .v-toolbar__content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
.v-tooltip__content {
|
||||
background: $white;
|
||||
padding: $padding-small $padding-general;
|
||||
min-width: $tooltip-min-width;
|
||||
max-width: $tooltip-max-width;
|
||||
color: $gray !important;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-base;
|
||||
@include shadow-8dp();
|
||||
text-align: center;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
bottom: -$tooltip-border;
|
||||
height: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: $tooltip-border;
|
||||
vertical-align: $tooltip-arrow-align;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&.top:after {
|
||||
border-top: $tooltip-border solid $white;
|
||||
border-right: $tooltip-border solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: $tooltip-border solid transparent;
|
||||
}
|
||||
|
||||
&.bottom:after{
|
||||
top: -$tooltip-border;
|
||||
border-top: 0;
|
||||
border-right: $tooltip-border solid transparent;
|
||||
border-bottom: $tooltip-border solid $white;
|
||||
border-left: $tooltip-border solid transparent;
|
||||
}
|
||||
&.left:after{
|
||||
margin-right: 0;
|
||||
right: -$tooltip-border;
|
||||
top: $tooltip-top-border-pos;
|
||||
border-top: $tooltip-border solid transparent;
|
||||
border-bottom: $tooltip-border solid transparent;
|
||||
border-left: $tooltip-border solid $white;
|
||||
}
|
||||
&.right:after{
|
||||
margin-left: 0;
|
||||
left: -$tooltip-border;
|
||||
top: $tooltip-top-border-pos;
|
||||
border-top: $tooltip-border solid transparent;
|
||||
border-bottom: $tooltip-border solid transparent;
|
||||
border-right: $tooltip-border solid $white;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
||||
font-family: $font-family-sans-serif !important;
|
||||
font-weight: $font-weight-lighter !important;
|
||||
line-height: $line-height-base !important;
|
||||
}
|
||||
|
||||
h1,h2,h3,.h1,.h2,.h3{
|
||||
margin-top: $margin-general + 5;
|
||||
margin-bottom: $margin-small;
|
||||
}
|
||||
|
||||
h4,h5,h6,.h4,.h5,.h6{
|
||||
margin-top: $margin-small;
|
||||
margin-bottom: $margin-small;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
font-size: $font-size-h1 !important;
|
||||
line-height: 1.15em !important;
|
||||
}
|
||||
h2, .h2{
|
||||
font-size: $font-size-h2 !important;
|
||||
line-height: $line-height-base !important;
|
||||
}
|
||||
h3, .h3{
|
||||
font-size: $font-size-h3 !important;
|
||||
line-height: 1.4em !important;
|
||||
}
|
||||
h4, .h4{
|
||||
font-size: $font-size-h4 !important;
|
||||
line-height: $line-height-base !important;
|
||||
}
|
||||
h5, .h5 {
|
||||
font-size: $font-size-h5 !important;
|
||||
line-height: 1.55em !important;
|
||||
margin-bottom: $margin-general;
|
||||
}
|
||||
h6, .h6{
|
||||
font-size: $font-size-h6 !important;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-bolder;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: $font-paragraph !important;
|
||||
margin: 0 0 $margin-small;
|
||||
}
|
||||
|
||||
h2.title{
|
||||
margin-bottom: $margin-general * 2;
|
||||
}
|
||||
|
||||
.description,
|
||||
.card-description,
|
||||
.footer-big p{
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: $brand-warning !important;
|
||||
}
|
||||
.text-primary {
|
||||
color: $brand-primary !important;
|
||||
}
|
||||
.text-danger {
|
||||
color: $brand-danger !important;
|
||||
}
|
||||
.text-success {
|
||||
color: $brand-success !important;
|
||||
}
|
||||
.text-info {
|
||||
color: $brand-info !important;
|
||||
}
|
||||
.text-gray{
|
||||
color: $gray-light !important;
|
||||
}
|
||||
.text-pink {
|
||||
color: $pink-500 !important;
|
||||
}
|
||||
.text-white {
|
||||
color: $white !important;
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
// Importing All Material Design Colors
|
||||
@import "./colors";
|
||||
|
||||
// Brand Colors
|
||||
$brand-primary: $purple !default;
|
||||
$brand-success: $green !default;
|
||||
$brand-danger: $red !default;
|
||||
$brand-warning: $orange !default;
|
||||
$brand-info: $cyan !default;
|
||||
|
||||
// Paddings
|
||||
$padding-logo: 15px !default;
|
||||
$padding-avatar-title: 5px !default;
|
||||
$padding-x-footer: 24px !default;
|
||||
|
||||
// Line Height
|
||||
$line-height: 30px !default;
|
||||
$line-height-base: 1.5em !default;
|
||||
$line-height-footer-items: 1.8 !default;
|
||||
$line-height-higher: 22px !default;
|
||||
$line-height-high: 56px !default;
|
||||
|
||||
// Sidebar List Items Icons
|
||||
$icon-width: $line-height;
|
||||
|
||||
// Sidebar List Items
|
||||
$padding-small: 10px !default;
|
||||
$padding-general: 15px !default;
|
||||
$margin-general: $padding-general;
|
||||
$margin-small: $padding-small;
|
||||
$font-size-general: 14px !default;
|
||||
$list-item-hover: rgba(200, 200, 200, .2) !default;
|
||||
$list-item-icon-opacity: .8 !default;
|
||||
$list-item-height: 48px !default;
|
||||
$badge-border: 1px solid $white !default;
|
||||
$badge-dimension: 20px !default;
|
||||
|
||||
// Border Radius
|
||||
$border-radius-base: 3px !default;
|
||||
|
||||
// Sidebar Avatar Margins
|
||||
$margin-list-right: 11px !default;
|
||||
$margin-list-left: 25px !default;
|
||||
|
||||
// Sidebar Divider
|
||||
$divider-width: calc(100% - 30px) !default;
|
||||
$divider-margins: -1px !default;
|
||||
$divider-border: 1px solid #eee;
|
||||
|
||||
// Sidebar Background
|
||||
$sidebar-bg: rgba(27, 27, 27, .74) !default;
|
||||
|
||||
// Font size
|
||||
$font-size-mini: 9px !default;
|
||||
$font-size-small: 12px !default;
|
||||
$font-size-default: 14px !default;
|
||||
$font-size-avatar-title: 18px !default;
|
||||
$font-size-alert-icon: 30px !default;
|
||||
$font-size-big: 36px !default;
|
||||
$font-size-small-tag: 65% !default;
|
||||
$font-size-toolbar-title: $font-size-avatar-title;
|
||||
$font-size-toolbar-items: 20px !default;
|
||||
$font-size-h1: 3.3125rem;
|
||||
$font-size-h2: 2.25rem !default;
|
||||
$font-size-h3: 1.5625rem;
|
||||
$font-size-h4: 1.125rem !default;
|
||||
$font-size-h5: 1.0625rem !default;
|
||||
$font-size-h6: 0.75rem !default;
|
||||
$font-paragraph: $font-size-default !default;
|
||||
$font-size-chart-label: .730rem !default;
|
||||
|
||||
// Font Weight
|
||||
$font-weight-lighter: 300 !default;
|
||||
$font-weight-base: 400 !default;
|
||||
$font-weight-bolder: 500 !default;
|
||||
|
||||
// Opacity Colors
|
||||
$black-opacity-3: rgba(180, 180, 180, .3) !default;
|
||||
|
||||
// Image from Avatar
|
||||
$top-dim: 1px !default;
|
||||
|
||||
// Shadows
|
||||
$mdb-shadow-key-umbra-opacity: .2 !default;
|
||||
$mdb-shadow-key-penumbra-opacity: .14 !default;
|
||||
$mdb-shadow-ambient-shadow-opacity: .12 !default;
|
||||
|
||||
// Toolbar Height
|
||||
$toolbar-min-height: 70px !default;
|
||||
|
||||
// Toolbar Margin
|
||||
$toolbar-margin-left: 260px !default;
|
||||
|
||||
// Body Background Color
|
||||
$body-color: #eee !default;
|
||||
|
||||
// Black Color
|
||||
$black-color: #495057 !default;
|
||||
$blockquote-color: rgba(0, 0, 0, .87) !default;
|
||||
|
||||
// Gray Color
|
||||
$gray-light: #999 !default;
|
||||
$gray: lighten(#000, 33.5%) !default;
|
||||
|
||||
// Inputs Color
|
||||
$input-color: #d2d2d2 !default;
|
||||
$label-color: #aaa !default;
|
||||
|
||||
// Footer Border
|
||||
$footer-border-color: #e7e7e7 !default;
|
||||
$footer-border-top: 1px solid $footer-border-color !default;
|
||||
|
||||
// Cards
|
||||
$card-shadow: 0 1px 4px 0 rgba(0,0,0,0.14) !default;
|
||||
$card-margin: 25px !default;
|
||||
$card-content-x-padding: 20px !default;
|
||||
$card-actions-y-margin: $card-content-x-padding;
|
||||
$card-title-margin: 5px !default;
|
||||
$card-offset: -20px !default;
|
||||
$card-chart-min-height: 160px !default;
|
||||
$card-stats-offset: 85px !default;
|
||||
$card-stats-icons-dim: 56px !default;
|
||||
$card-profile-avatar-pos: -50px !default;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
|
||||
$font-family-serif: 'Roboto Slab', 'Times New Roman', serif !default;
|
||||
|
||||
// Tooltips
|
||||
$tooltip-min-width: 130px !default;
|
||||
$tooltip-max-width: 200px !default;
|
||||
$tooltip-border: 5px !default;
|
||||
$tooltip-top-border-pos: 16px !default;
|
||||
$tooltip-arrow-align: .255em !default;
|
||||
|
||||
// Buttons
|
||||
$btn-icon-dim: 41px !default;
|
||||
$btn-y-large-padding: 1.125rem !default;
|
||||
$btn-x-large-padding: 2.25rem !default;
|
||||
$btn-large-line-height: 1.333333 !default;
|
||||
$btn-y-small-padding: .40625rem !default;
|
||||
$btn-x-small-padding: 1.25rem !default;
|
||||
$btn-round-padding: 30px !default;
|
||||
$btn-font-size-icon: 1.25rem !default;
|
||||
$btn-margin-icon: 7px !default;
|
||||
$btn-fixed-icon-size: 1.8rem !default;
|
||||
$btn-fixed-width: 64px !default;
|
||||
|
||||
// Tabs
|
||||
$tabs-active-line: rgba(255, 255, 255, .3) !default;
|
||||
$tabs-text-box-padding: 8px !default;
|
||||
|
||||
// Table
|
||||
$table-hover-color: #f5f5f5 !default;
|
||||
$table-border-color: rgba(0,0,0,.06) !default;
|
||||
$table-head-height: 32px !default;
|
||||
|
||||
// Social Buttons
|
||||
$social-facebook: #3b5998 !default;
|
||||
$social-twitter: #55acee !default;
|
||||
|
||||
// Dropdown
|
||||
$font-size-dropdown: .8125rem !default;
|
||||
$border-radius-dropdown: 10px !default;
|
||||
|
||||
// Box-shadow
|
||||
$box-shadow-general: 0 2px 5px 0 rgba($black, .26);
|
||||
|
||||
// letter-spacing
|
||||
$WM-LetterSpacing-5: 5px;
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
export const set = property => (state, payload) => (state[property] = payload)
|
||||
|
||||
export const toggle = property => state => (state[property] = !state[property])
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<material-card class=""
|
||||
color="black"
|
||||
title="Add a New Test"
|
||||
>
|
||||
<v-layout wrap class="ma-2">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Test Name"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Unique ID"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout wrap class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative">
|
||||
<v-layout wrap class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Relative WM-Color-LightGrey">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Input Name"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-select
|
||||
class="pa-2"
|
||||
v-model="select"
|
||||
:hint="`${select.state}, ${select.abbr}`"
|
||||
:items="items"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
return-object
|
||||
single-line
|
||||
color="black"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-select
|
||||
class="pa-2"
|
||||
v-model="select"
|
||||
:hint="`${select.state}, ${select.abbr}`"
|
||||
:items="items"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Size"
|
||||
return-object
|
||||
single-line
|
||||
color="black"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md5 sm5>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Value"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout v-for="(Div, Key) in ArrayDiv" wrap :key="Key" class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Relative WM-Color-LightGrey Form">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Input Name"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-select
|
||||
class="pa-2"
|
||||
v-model="select"
|
||||
:hint="`${select.state}, ${select.abbr}`"
|
||||
:items="items"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
return-object
|
||||
single-line
|
||||
color="black"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-select
|
||||
class="pa-2"
|
||||
v-model="select"
|
||||
:hint="`${select.state}, ${select.abbr}`"
|
||||
:items="items"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Size"
|
||||
return-object
|
||||
single-line
|
||||
color="black"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md5 sm5>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Value"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
top
|
||||
color="pink"
|
||||
@click="Remove()"
|
||||
id="RemoveFormBuilder"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
REMOVE</v-btn>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="cyan"
|
||||
@click="Duplicator"
|
||||
id="FormBuilder"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
ADD</v-btn>
|
||||
</v-layout>
|
||||
<div id="WM-FormBuilder"></div>
|
||||
<v-flex class="text-xs-center" xs12 md12 sm12 >
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
ArrayDiv : [],
|
||||
select: { state: 'Florida', abbr: 'FL' },
|
||||
items: [
|
||||
{ state: 'Florida', abbr: 'FL' },
|
||||
{ state: 'Georgia', abbr: 'GA' },
|
||||
{ state: 'Nebraska', abbr: 'NE' },
|
||||
{ state: 'California', abbr: 'CA' },
|
||||
{ state: 'New York', abbr: 'NY' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods : {
|
||||
Duplicator () {
|
||||
var Forms = document.getElementsByClassName('Form');
|
||||
var ArrayForm = [];
|
||||
|
||||
for(var i=0; i<Forms.length; i++) {
|
||||
ArrayForm.push(Forms[i]);
|
||||
}
|
||||
this.ArrayDiv.push(ArrayForm);
|
||||
},
|
||||
Remove () {
|
||||
var ID = document.getElementById('RemoveFormBuilder');
|
||||
var Element = ID.parentNode;
|
||||
Element.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.WM-Border {
|
||||
border: 1px solid;
|
||||
}
|
||||
.WM-Border-Black {
|
||||
border-color: #2f353b !important;
|
||||
}
|
||||
.WM-Border-Gray {
|
||||
border-color: #aaa !important;
|
||||
}
|
||||
.WM-Color-LightGrey {
|
||||
background-color : #F5F5F5;
|
||||
}
|
||||
.WM-Relative {
|
||||
position: relative;
|
||||
}
|
||||
.v-btn--top.v-btn--absolute.v-btn--small {
|
||||
top: -25px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<v-container fluid>
|
||||
<material-card class=""
|
||||
color="black"
|
||||
title="All Test Resualt"
|
||||
text=""
|
||||
>
|
||||
<v-layout align-center wrap class="my-3">
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Name"
|
||||
color="black"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Date"
|
||||
color="black"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Hospital"
|
||||
color="black"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex class="" xs12 md2 sm2>
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
|
||||
<span class="white--text">Filter</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider></v-divider>
|
||||
<v-layout align-center wrap class="my-3">
|
||||
<v-flex xs1>
|
||||
<v-card-title>
|
||||
<div>
|
||||
<div>
|
||||
222
|
||||
</div>
|
||||
<div>
|
||||
Test
|
||||
</div>
|
||||
<div class="">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
</v-card-title>
|
||||
</v-flex>
|
||||
<v-flex xs6>
|
||||
<v-card-text>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
</p>
|
||||
</v-card-text>
|
||||
</v-flex>
|
||||
<v-flex xs4>
|
||||
<v-card-text>
|
||||
<v-btn color="black" class="mr-2">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-folder</v-icon>
|
||||
<span>Archive</span>
|
||||
</v-btn>
|
||||
<v-btn color="cyan" class="mr-2">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
|
||||
<span>Edit</span>
|
||||
</v-btn>
|
||||
<v-btn color="orange darken-1">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
|
||||
<span>Generate Barcode</span>
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider></v-divider>
|
||||
<v-layout row wrap align-center justify-center class="mt-3">
|
||||
<router-link to="/dashboard">
|
||||
<v-btn
|
||||
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<material-card class=""
|
||||
color="black"
|
||||
title="Material Dashboard Heading"
|
||||
text=""
|
||||
>
|
||||
<v-layout row wrap>
|
||||
<v-flex v-for="(Card, Key ) in Cards" :class="[Card.column , 'pa-2']" :key="Key">
|
||||
<router-link :to="Card.route">
|
||||
<material-cards
|
||||
:title="Card.title"
|
||||
:icon="Card.icon"
|
||||
:color="Card.color"
|
||||
:text="Card.text"
|
||||
:aligntext="Card.aligntext"
|
||||
:alignimg="Card.alignimg"
|
||||
/>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
Cards :[
|
||||
{title:'My Info', text:'You can easily edit your registration information',icon:'/img/Static/Dashboard/darkmug.png',color:'WM-OrangeGradient-BG',route:'/my-info',aligntext:'text-md-left',alignimg:'text-md-right', column:'xs12 md6 sm6'},
|
||||
{title:'All Test Result', text:'You can see all user tests and own tests',icon:'/img/Static/Dashboard/pad.png',color:'WM-GreenGradient-BG',route:'/all-resualttest',aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md6 sm6'},
|
||||
{title:'Manage Users', text:'You can edit the medical center information',icon:'/img/Static/Dashboard/ipad.png',color:'WM-YellowPinkGradient-BG',route:'/manage-users',aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12'},
|
||||
{title:'Manage Medical Center', text:'Managing users very fast by ...',icon:'/img/Static/Dashboard/Macbook.png',color:'WM-MuskGradient-BG',route:'/manage-medical-center',aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md7 sm7'},
|
||||
{title:'Add a Test Type', text:'You can simply add your own test type',icon:'/img/Static/Dashboard/Book-and-Pen.png',color:'WM-GreyGradient-BG',route:'/test-creator',aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md5 sm5'},
|
||||
{title:'Test to Verify', text:'You can simply add your own test type in this section of website',icon:'/img/Static/Dashboard/notepad-colorful.png',color:'WM-PinkGradient-BG',route:'/submit-test-result',aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12'},
|
||||
{title:'Add a Test Result', text:'You can edit the medical center information',icon:'/img/Static/Dashboard/ipad.png',color:'WM-YellowPinkGradient-BG',route:'/manage-medical-center',aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12'},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<material-card color="green">
|
||||
<div
|
||||
slot="header"
|
||||
>
|
||||
<div class="title font-weight-light mb-2">Material Design Icons</div>
|
||||
<div class="category font-weight-thin">
|
||||
See all available
|
||||
<a
|
||||
class="white--text"
|
||||
href="https://materialdesignicons.com/"
|
||||
target="_blank"
|
||||
>
|
||||
Icons
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-layout
|
||||
align-center
|
||||
justify-center
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
v-for="icon in icons"
|
||||
:key="icon"
|
||||
ma-2
|
||||
>
|
||||
<v-tooltip
|
||||
top
|
||||
content-class="top">
|
||||
<v-icon slot="activator">
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
<span>{{ icon }}</span>
|
||||
</v-tooltip>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
|
||||
<div class="mx-auto">
|
||||
<v-btn
|
||||
large
|
||||
class="mx-0 font-weight-light"
|
||||
color="success"
|
||||
href="https://materialdesignicons.com/"
|
||||
target="_blank"
|
||||
round
|
||||
>
|
||||
<v-icon left>mdi-material-design</v-icon>
|
||||
<span>See all icons</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
icons: [
|
||||
'mdi-access-point',
|
||||
'mdi-access-point-network',
|
||||
'mdi-account',
|
||||
'mdi-account-alert',
|
||||
'mdi-account-box',
|
||||
'mdi-account-box-multiple',
|
||||
'mdi-account-box-outline',
|
||||
'mdi-account-card-details',
|
||||
'mdi-account-check',
|
||||
'mdi-account-circle',
|
||||
'mdi-account-convert',
|
||||
'mdi-account-edit',
|
||||
'mdi-account-group',
|
||||
'mdi-account-heart',
|
||||
'mdi-account-key',
|
||||
'mdi-account-location',
|
||||
'mdi-account-minus',
|
||||
'mdi-account-multiple',
|
||||
'mdi-account-multiple-check',
|
||||
'mdi-account-multiple-minus',
|
||||
'mdi-account-multiple-outline',
|
||||
'mdi-account-multiple-plus',
|
||||
'mdi-account-multiple-plus-outline',
|
||||
'mdi-account-network',
|
||||
'mdi-account-off',
|
||||
'mdi-account-outline',
|
||||
'mdi-account-plus',
|
||||
'mdi-account-plus-outline',
|
||||
'mdi-account-remove',
|
||||
'mdi-account-search',
|
||||
'mdi-account-search-outline',
|
||||
'mdi-account-settings',
|
||||
'mdi-account-settings-variant',
|
||||
'mdi-account-star',
|
||||
'mdi-account-switch',
|
||||
'mdi-accusoft',
|
||||
'mdi-adjust',
|
||||
'mdi-adobe',
|
||||
'mdi-air-conditioner',
|
||||
'mdi-airballoon',
|
||||
'mdi-airplane',
|
||||
'mdi-airplane-landing',
|
||||
'mdi-airplane-off',
|
||||
'mdi-airplane-takeoff',
|
||||
'mdi-airplay',
|
||||
'mdi-airport',
|
||||
'mdi-alarm',
|
||||
'mdi-alarm-bell',
|
||||
'mdi-alarm-check',
|
||||
'mdi-alarm-light',
|
||||
'mdi-alarm-multiple',
|
||||
'mdi-alarm-off',
|
||||
'mdi-alarm-plus',
|
||||
'mdi-alarm-snooze',
|
||||
'mdi-album',
|
||||
'mdi-alert',
|
||||
'mdi-alert-box',
|
||||
'mdi-alert-circle',
|
||||
'mdi-alert-circle-outline',
|
||||
'mdi-alert-decagram',
|
||||
'mdi-alert-octagon',
|
||||
'mdi-alert-octagram',
|
||||
'mdi-alert-outline',
|
||||
'mdi-alien',
|
||||
'mdi-all-inclusive',
|
||||
'mdi-alpha',
|
||||
'mdi-alphabetical',
|
||||
'mdi-altimeter',
|
||||
'mdi-amazon',
|
||||
'mdi-amazon-alexa',
|
||||
'mdi-amazon-drive',
|
||||
'mdi-ambulance',
|
||||
'mdi-amplifier',
|
||||
'mdi-anchor',
|
||||
'mdi-android',
|
||||
'mdi-android-debug-bridge',
|
||||
'mdi-android-head',
|
||||
'mdi-android-studio',
|
||||
'mdi-angle-acute',
|
||||
'mdi-angle-obtuse',
|
||||
'mdi-angle-right',
|
||||
'mdi-angular',
|
||||
'mdi-angularjs',
|
||||
'mdi-animation',
|
||||
'mdi-animation-play',
|
||||
'mdi-anvil',
|
||||
'mdi-apple',
|
||||
'mdi-apple-finder',
|
||||
'mdi-apple-icloud',
|
||||
'mdi-apple-ios',
|
||||
'mdi-apple-keyboard-caps',
|
||||
'mdi-apple-keyboard-command',
|
||||
'mdi-apple-keyboard-control',
|
||||
'mdi-apple-keyboard-option',
|
||||
'mdi-apple-keyboard-shift',
|
||||
'mdi-apple-safari',
|
||||
'mdi-application',
|
||||
'mdi-approval',
|
||||
'mdi-apps',
|
||||
'mdi-arch',
|
||||
'mdi-archive',
|
||||
'mdi-arrange-bring-forward',
|
||||
'mdi-arrange-bring-to-front',
|
||||
'mdi-arrange-send-backward',
|
||||
'mdi-arrange-send-to-back',
|
||||
'mdi-arrow-all',
|
||||
'mdi-arrow-bottom-left',
|
||||
'mdi-arrow-bottom-left-bold-outline',
|
||||
'mdi-arrow-bottom-left-thick',
|
||||
'mdi-arrow-bottom-right',
|
||||
'mdi-arrow-bottom-right-bold-outline',
|
||||
'mdi-arrow-bottom-right-thick',
|
||||
'mdi-arrow-collapse',
|
||||
'mdi-arrow-collapse-all',
|
||||
'mdi-arrow-collapse-down',
|
||||
'mdi-arrow-collapse-horizontal',
|
||||
'mdi-arrow-collapse-left',
|
||||
'mdi-arrow-collapse-right',
|
||||
'mdi-arrow-collapse-up',
|
||||
'mdi-arrow-collapse-vertical',
|
||||
'mdi-arrow-decision',
|
||||
'mdi-arrow-decision-auto',
|
||||
'mdi-arrow-decision-auto-outline',
|
||||
'mdi-arrow-decision-outline',
|
||||
'mdi-arrow-down',
|
||||
'mdi-arrow-down-bold',
|
||||
'mdi-arrow-down-bold-box',
|
||||
'mdi-arrow-down-bold-box-outline',
|
||||
'mdi-arrow-down-bold-circle',
|
||||
'mdi-arrow-down-bold-circle-outline',
|
||||
'mdi-arrow-down-bold-hexagon-outline',
|
||||
'mdi-arrow-down-bold-outline',
|
||||
'mdi-arrow-down-box',
|
||||
'mdi-arrow-down-drop-circle',
|
||||
'mdi-arrow-down-drop-circle-outline',
|
||||
'mdi-arrow-down-thick',
|
||||
'mdi-arrow-expand',
|
||||
'mdi-arrow-expand-all',
|
||||
'mdi-arrow-expand-down',
|
||||
'mdi-arrow-expand-horizontal',
|
||||
'mdi-arrow-expand-left',
|
||||
'mdi-arrow-expand-right',
|
||||
'mdi-arrow-expand-up',
|
||||
'mdi-arrow-expand-vertical',
|
||||
'mdi-arrow-left',
|
||||
'mdi-arrow-left-bold',
|
||||
'mdi-arrow-left-bold-box',
|
||||
'mdi-arrow-left-bold-box-outline',
|
||||
'mdi-arrow-left-bold-circle',
|
||||
'mdi-arrow-left-bold-circle-outline',
|
||||
'mdi-arrow-left-bold-hexagon-outline',
|
||||
'mdi-arrow-left-bold-outline',
|
||||
'mdi-arrow-left-box',
|
||||
'mdi-arrow-left-drop-circle',
|
||||
'mdi-arrow-left-drop-circle-outline',
|
||||
'mdi-arrow-left-right-bold-outline',
|
||||
'mdi-arrow-left-thick',
|
||||
'mdi-arrow-right',
|
||||
'mdi-arrow-right-bold',
|
||||
'mdi-arrow-right-bold-box',
|
||||
'mdi-arrow-right-bold-box-outline',
|
||||
'mdi-arrow-right-bold-circle',
|
||||
'mdi-arrow-right-bold-circle-outline',
|
||||
'mdi-arrow-right-bold-hexagon-outline',
|
||||
'mdi-arrow-right-bold-outline',
|
||||
'mdi-arrow-right-box',
|
||||
'mdi-arrow-right-drop-circle',
|
||||
'mdi-arrow-right-drop-circle-outline',
|
||||
'mdi-arrow-right-thick',
|
||||
'mdi-arrow-split-horizontal',
|
||||
'mdi-arrow-split-vertical',
|
||||
'mdi-arrow-top-left',
|
||||
'mdi-arrow-top-left-bold-outline',
|
||||
'mdi-arrow-top-left-thick',
|
||||
'mdi-arrow-top-right',
|
||||
'mdi-arrow-top-right-bold-outline',
|
||||
'mdi-arrow-top-right-thick',
|
||||
'mdi-arrow-up',
|
||||
'mdi-arrow-up-bold',
|
||||
'mdi-arrow-up-bold-box',
|
||||
'mdi-arrow-up-bold-box-outline',
|
||||
'mdi-arrow-up-bold-circle',
|
||||
'mdi-arrow-up-bold-circle-outline',
|
||||
'mdi-arrow-up-bold-hexagon-outline',
|
||||
'mdi-arrow-up-bold-outline',
|
||||
'mdi-arrow-up-box',
|
||||
'mdi-arrow-up-down-bold-outline',
|
||||
'mdi-arrow-up-drop-circle',
|
||||
'mdi-arrow-up-drop-circle-outline',
|
||||
'mdi-arrow-up-thick',
|
||||
'mdi-artist',
|
||||
'mdi-assistant',
|
||||
'mdi-asterisk',
|
||||
'mdi-at',
|
||||
'mdi-atlassian',
|
||||
'mdi-atom',
|
||||
'mdi-attachment',
|
||||
'mdi-audio-video',
|
||||
'mdi-audiobook',
|
||||
'mdi-augmented-reality',
|
||||
'mdi-auto-fix',
|
||||
'mdi-auto-upload',
|
||||
'mdi-autorenew',
|
||||
'mdi-av-timer',
|
||||
'mdi-axe',
|
||||
'mdi-azure',
|
||||
'mdi-baby',
|
||||
'mdi-baby-buggy',
|
||||
'mdi-backburger',
|
||||
'mdi-backspace',
|
||||
'mdi-backup-restore',
|
||||
'mdi-badminton'
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<v-form >
|
||||
<v-container grid-list-xs>
|
||||
<v-layout row wrap class="justify-center">
|
||||
<v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
|
||||
<material-card
|
||||
color="black"
|
||||
title="Login Page">
|
||||
<v-layout row wrap class="px-3">
|
||||
<v-flex xs12 md12 sm12>
|
||||
<v-text-field
|
||||
v-model="cell_number"
|
||||
name="cellnumber"
|
||||
label="Cell Number"
|
||||
id="id1"
|
||||
color="black"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap class="px-3">
|
||||
<v-flex xs12 md12 sm12>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
name="password"
|
||||
label="Password"
|
||||
id="id2"
|
||||
color="black"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap class="px-3">
|
||||
<v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="handleSubmit">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
|
||||
<span class="white--text">Login</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 sm6 class="text-md-right text-sm-center text-xs-center">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="black--text">Register</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap class="text-md-left text-sm-center text-xs-center">
|
||||
<v-flex xs12 md6 sm6 class="px-4 py-3">
|
||||
<router-link to="/submittestresualt">
|
||||
<span class="black--text" style="border-bottom:1px solid #000;">Forgot Password ?</span>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cell_number: "",
|
||||
password: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('auth', [
|
||||
'authenticating',
|
||||
'authenticationError',
|
||||
'authenticationErrorCode'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
...mapActions('auth', [
|
||||
'login'
|
||||
]),
|
||||
handleSubmit() {
|
||||
// Perform a simple validation that cell_number and password have been typed in
|
||||
if (this.cell_number != '' && this.password != '') {
|
||||
|
||||
this.login({cell_number: this.cell_number, password: this.password});
|
||||
this.password = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<material-card class=""
|
||||
color="black"
|
||||
title="Medical Centers List"
|
||||
text=""
|
||||
>
|
||||
<v-layout wrap class="px-5 mb-3">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
label="Name"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<!-- <v-spacer></v-spacer> -->
|
||||
<v-flex xs12 md2 sm2 class="text-xs-right">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
|
||||
<span class="white--text">Filter</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="px-4 my-3">
|
||||
<v-divider></v-divider>
|
||||
</v-layout>
|
||||
<v-layout align-center justify-center wrap class="px-5 mt-3">
|
||||
<v-flex
|
||||
md12
|
||||
>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
hide-actions
|
||||
>
|
||||
<template
|
||||
slot="headerCell"
|
||||
slot-scope="{ header }"
|
||||
>
|
||||
<span
|
||||
class="subheading font-weight-light text-white text--darken-3"
|
||||
v-text="header.text"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
slot="items"
|
||||
slot-scope="{ item }"
|
||||
>
|
||||
<td class="headline font-weight-light">{{ item.name }}</td>
|
||||
<td class="title font-weight-light">{{ item.date }}</td>
|
||||
<td class="title font-weight-light">{{ item.operator }}</td>
|
||||
<td class="text-xs-right">
|
||||
<v-btn color="cyan" class="mr-2 WM-ActionButton">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
|
||||
<span>Edit</span>
|
||||
</v-btn>
|
||||
<v-btn color="orange darken-1" class="mr-2 WM-ActionButton">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
|
||||
<span>Operator</span>
|
||||
</v-btn>
|
||||
<v-btn color="pink" class=" WM-ActionButton">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
<span>Remove</span>
|
||||
</v-btn>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider></v-divider>
|
||||
<v-layout row wrap align-center justify-center class="mt-3">
|
||||
<router-link to="/dashboard">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
headers: [
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Hospital Name',
|
||||
value: 'name'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Date',
|
||||
value: 'date'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Operator',
|
||||
value: 'operator'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Action',
|
||||
value: 'action',
|
||||
align: 'right'
|
||||
}
|
||||
],
|
||||
items: [
|
||||
{
|
||||
name: 'Shahid Beheshti',
|
||||
date: '12/05/1397',
|
||||
operator: '3 Operator',
|
||||
action: ''
|
||||
},
|
||||
{
|
||||
name: 'Emam Reza',
|
||||
date: '12/05/1397',
|
||||
operator: '5 Operator',
|
||||
action: ''
|
||||
},
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.WM-ActionButton {
|
||||
padding : 8px 22px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<v-container grid-list-xs>
|
||||
<material-card
|
||||
color="black"
|
||||
title="Member List">
|
||||
<v-layout align-center justify-center wrap class="px-5 mb-3">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
color="black"
|
||||
name="name"
|
||||
label="Name"
|
||||
id="id1"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
color="black"
|
||||
name="date"
|
||||
label="Date"
|
||||
id="id2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
color="black"
|
||||
name="hospital"
|
||||
label="Hospital"
|
||||
id="id3"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
|
||||
<span class="white--text">Filter</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="px-4 my-3">
|
||||
<v-divider></v-divider>
|
||||
</v-layout>
|
||||
<v-layout align-center justify-center wrap class="px-5 my-2">
|
||||
<v-flex xs12 md12 sm12>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
hide-actions
|
||||
>
|
||||
<template
|
||||
slot="headerCell"
|
||||
slot-scope="{ header }">
|
||||
<span
|
||||
class="subheading font-weight-light text-white text--darken-3"
|
||||
v-text="header.text"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
slot="items"
|
||||
slot-scope="{ item }">
|
||||
<td class="headline font-weight-light">{{item.name}}</td>
|
||||
<td class="title font-weight-light">{{item.date}}</td>
|
||||
<td class="title font-weight-light">{{item.operator}}</td>
|
||||
<td class="text-xs-right">
|
||||
<v-btn color="purple" class="mr-2 WM-ActionButton">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-envelope</v-icon>
|
||||
<span>SMS</span>
|
||||
</v-btn>
|
||||
<v-btn color="cyan" class="mr-2 WM-ActionButton">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
|
||||
<span>Edit</span>
|
||||
</v-btn>
|
||||
<v-btn color="orange darken-1" class="mr-2 WM-ActionButton">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-user</v-icon>
|
||||
<span>Operator</span>
|
||||
</v-btn>
|
||||
<v-btn color="pink" class=" WM-ActionButton">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-times</v-icon>
|
||||
<span>Remove</span>
|
||||
</v-btn>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="px-4 my-3">
|
||||
<v-divider></v-divider>
|
||||
</v-layout>
|
||||
<v-layout row wrap align-center justify-center class="mt-3">
|
||||
<router-link to="/dashboard">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
headers : [
|
||||
{
|
||||
sortable : true,
|
||||
text: 'Operator',
|
||||
value: 'operator'
|
||||
},
|
||||
{
|
||||
sortable : true,
|
||||
text: 'Date',
|
||||
value: 'date'
|
||||
},
|
||||
{
|
||||
sortable : true,
|
||||
text: 'Hospital',
|
||||
value: 'hospital'
|
||||
},
|
||||
{
|
||||
sortable : true,
|
||||
text: 'Action',
|
||||
value: 'action',
|
||||
align: 'right'
|
||||
},
|
||||
],
|
||||
items: [
|
||||
{
|
||||
name: 'Fatemeh Shokouhi',
|
||||
date: '12/05/1397',
|
||||
operator: 'Shahid Beheshti',
|
||||
action: ''
|
||||
},
|
||||
{
|
||||
name: 'Fatemeh Fayyazi',
|
||||
date: '12/05/1397',
|
||||
operator: 'Emam Reza',
|
||||
action: ''
|
||||
},
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mapouter">
|
||||
<div class="gmap_canvas">
|
||||
<iframe
|
||||
id="gmap_canvas"
|
||||
width="100%"
|
||||
height="100%"
|
||||
src="https://maps.google.com/maps?q=google&t=&z=13&ie=UTF8&iwloc=&output=embed"
|
||||
frameborder="0"
|
||||
scrolling="no"
|
||||
marginheight="0"
|
||||
marginwidth="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.mapouter {
|
||||
text-align:right;
|
||||
height:100%;
|
||||
width:100%;
|
||||
position: absolute;
|
||||
}
|
||||
.gmap_canvas {
|
||||
overflow:hidden;
|
||||
background:none!important;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<v-form>
|
||||
<v-container grid-list-xs fluid>
|
||||
<material-card
|
||||
color="black"
|
||||
title="My Info">
|
||||
<v-layout align-center justify-center wrap class="px-5 my-3">
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="username"
|
||||
label="User Name"
|
||||
color="black"
|
||||
v-model="username"
|
||||
id="id1"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-select
|
||||
:items="items"
|
||||
label="Gender"
|
||||
name="gender"
|
||||
v-model="gender"
|
||||
single-line
|
||||
id="id3"
|
||||
class="pa-2"
|
||||
color="black">
|
||||
</v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="cellnumber"
|
||||
label="Cell Number"
|
||||
v-model="cellnumber"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
id="id2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout align-center justify-center wrap class="px-5 mb-3">
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="emailaddress"
|
||||
label="Email Address"
|
||||
v-model="emailaddress"
|
||||
id="id4"
|
||||
class="px-2"
|
||||
color="black"
|
||||
style="padding-top:75px"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm8 md8>
|
||||
<v-textarea
|
||||
color="black"
|
||||
v-model="address"
|
||||
class="pa-2"
|
||||
name="address">
|
||||
<template v-slot:label>
|
||||
<div>
|
||||
Address
|
||||
</div>
|
||||
</template>
|
||||
</v-textarea>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap justify-center align-center>
|
||||
<v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
|
||||
<span class="white--text">SAVE</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
|
||||
<router-link to="/">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
|
||||
<v-icon class="black--text">keyboard_arrow_left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username:'',
|
||||
gender:'',
|
||||
cellnumber:'',
|
||||
emailaddress:'',
|
||||
address:'',
|
||||
|
||||
items: [
|
||||
'Item 1',
|
||||
'Item 2',
|
||||
'Item 3',
|
||||
'Item 4'
|
||||
],
|
||||
}
|
||||
// const Info = Object.freeze({
|
||||
// username:'',
|
||||
// cellnumber:'',
|
||||
// emailaddress:'',
|
||||
// address:''
|
||||
// gender:0
|
||||
// })
|
||||
// return {
|
||||
// InfoForm : Object.assign({} ,Info),
|
||||
// Info
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<v-container
|
||||
fluid
|
||||
grid-list-xl
|
||||
fill-height>
|
||||
<v-layout
|
||||
justify-center
|
||||
align-center
|
||||
>
|
||||
<v-flex xs12>
|
||||
<material-card
|
||||
color="green">
|
||||
<div
|
||||
slot="header"
|
||||
>
|
||||
<div class="title font-weight-light mb-2">Notifications</div>
|
||||
<div class="category">
|
||||
Handcrafted by us with
|
||||
<v-icon
|
||||
size="17"
|
||||
>
|
||||
mdi-heart
|
||||
</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-card-text>
|
||||
<v-layout
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
md6
|
||||
sm12>
|
||||
<h2 class="title font-weight-light mb-3">Notifications Style</h2>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
>
|
||||
This is a plain notification
|
||||
</material-notification>
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
>
|
||||
This is a notification with close button.
|
||||
</material-notification>
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
icon="mdi-bell-plus"
|
||||
>
|
||||
|
||||
This is a notification with close button and icon.
|
||||
</material-notification>
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
icon="mdi-bell-plus"
|
||||
>
|
||||
|
||||
This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.
|
||||
</material-notification>
|
||||
</v-flex>
|
||||
|
||||
<v-flex
|
||||
md6
|
||||
sm12>
|
||||
<h2 class="title font-weight-light">Notifcation States</h2>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
>
|
||||
<strong>INFO</strong> - This is a regular notification made with `color="info"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="success"
|
||||
dismissible
|
||||
>
|
||||
<strong>SUCCESS</strong> - This is a regular notification made with `color="success"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="warning"
|
||||
dismissible
|
||||
>
|
||||
<strong>WARNING</strong> - This is a regular notification made with `color="warning"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="error"
|
||||
dismissible
|
||||
>
|
||||
<strong>DANGER</strong> - This is a regular notification made with `color="error"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="purple"
|
||||
dismissible
|
||||
>
|
||||
<strong>PRIMARY</strong> - This is a regular notification made with `color="purple"`
|
||||
</material-notification>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<div class="text-xs-center">
|
||||
<h2 class="title font-weight-light mb-2">Notification Places</h2>
|
||||
<span class=" subheading font-weight-light grey--text">Click to view notifications</span>
|
||||
</div>
|
||||
|
||||
<v-container grid-list-lg>
|
||||
<v-layout
|
||||
justify-center
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('top', 'left')"
|
||||
>
|
||||
Top Left
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('top')"
|
||||
>
|
||||
Top Center
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout
|
||||
justify-center
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('top', 'right')"
|
||||
>
|
||||
Top Right
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('bottom', 'left')"
|
||||
>
|
||||
Bottom Left
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout
|
||||
justify-center
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('bottom')"
|
||||
>
|
||||
Bottom Center
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('bottom', 'right')"
|
||||
>
|
||||
Bottom Right
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
|
||||
<v-snackbar
|
||||
:color="color"
|
||||
:bottom="bottom"
|
||||
:top="top"
|
||||
:left="left"
|
||||
:right="right"
|
||||
v-model="snackbar"
|
||||
dark
|
||||
>
|
||||
<v-icon
|
||||
color="white"
|
||||
class="mr-3"
|
||||
>
|
||||
mdi-bell-plus
|
||||
</v-icon>
|
||||
<div>Welcome to <b>Vue Material Dashboard</b> - a beautiful freebie for every web developer.</div>
|
||||
<v-icon
|
||||
size="16"
|
||||
@click="snackbar = false"
|
||||
>
|
||||
mdi-close-circle
|
||||
</v-icon>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
color: null,
|
||||
colors: [
|
||||
'purple',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'error'
|
||||
],
|
||||
top: true,
|
||||
bottom: false,
|
||||
left: false,
|
||||
right: false,
|
||||
snackbar: false
|
||||
}),
|
||||
|
||||
methods: {
|
||||
snack (...args) {
|
||||
this.top = false
|
||||
this.bottom = false
|
||||
this.left = false
|
||||
this.right = false
|
||||
|
||||
for (const loc of args) {
|
||||
this[loc] = true
|
||||
}
|
||||
|
||||
this.color = this.colors[Math.floor(Math.random() * this.colors.length)]
|
||||
|
||||
this.snackbar = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<v-form v-model="valid">
|
||||
<v-container grid-list-xs>
|
||||
<v-layout row wrap class="justify-center">
|
||||
<v-flex xs12 md3 sm6 class="WM-WidthScreen-SM WM-WidthScreen-XS">
|
||||
<material-card color="black" title="Register Page">
|
||||
<v-layout column>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
name="cellnumber"
|
||||
label="Cell Number"
|
||||
v-model="form.cellnumber"
|
||||
id="id1"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
name="password"
|
||||
label="Password"
|
||||
v-model="form.password"
|
||||
:type="show1 ? 'text' : 'password'"
|
||||
:append-icon="show1 ? 'visibility' : 'visibility_off'"
|
||||
@click:append="show1 = !show1"
|
||||
id="id2"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-text-field
|
||||
name="name"
|
||||
label="Name"
|
||||
v-model="form.name"
|
||||
id="id3"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-select
|
||||
class="pa-2"
|
||||
v-model="form.select"
|
||||
:items="items"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
return-object
|
||||
single-line
|
||||
color="black"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Register</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 sm6 class="text-md-right text-sm-center text-xs-center">
|
||||
<router-link to="/login">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
|
||||
<span class="black--text">Login</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
data () {
|
||||
const defaultForm = Object.freeze({
|
||||
cellnumber: '',
|
||||
password: '',
|
||||
name: '',
|
||||
select: '',
|
||||
})
|
||||
return {
|
||||
form: Object.assign({}, defaultForm),
|
||||
valid : false,
|
||||
show1 : false,
|
||||
select: { state: 'Florida', abbr: 'FL' },
|
||||
items: [
|
||||
{ state: 'Florida', abbr: 'FL' },
|
||||
{ state: 'Georgia', abbr: 'GA' },
|
||||
{ state: 'Nebraska', abbr: 'NE' },
|
||||
{ state: 'California', abbr: 'CA' },
|
||||
{ state: 'New York', abbr: 'NY' }
|
||||
],
|
||||
defaultForm
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<v-form>
|
||||
<v-container grid-list-xs>
|
||||
<material-card
|
||||
color="black"
|
||||
title="Submit Test Result">
|
||||
<v-layout align-center justify-center wrap class="px-5 my-3">
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-select
|
||||
:items="items"
|
||||
label="Choose Test Type"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm3 md3>
|
||||
<v-text-field
|
||||
name="testcode"
|
||||
label="Or Enter Test Code"
|
||||
id="id"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-center">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" style="padding:10px 60px;">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
|
||||
<span class="black--text">GO</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap class="px-5 my-3">
|
||||
<v-divider></v-divider>
|
||||
</v-layout>
|
||||
<v-layout align-center justify-center wrap class="px-5 my-3">
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="cssd"
|
||||
label="ID CSSD"
|
||||
color="black"
|
||||
id="id"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="autoclave"
|
||||
label="ID AutoClave"
|
||||
color="black"
|
||||
id="id"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-select
|
||||
:items="items"
|
||||
label="Resualt"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap class="px-5 my-3">
|
||||
<v-divider></v-divider>
|
||||
</v-layout>
|
||||
<v-layout align-center justify-center wrap class="px-5 mt-2">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
|
||||
<span class="white--text">SAVE</span>
|
||||
</v-btn>
|
||||
<router-link to="/dashboard">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
data: () => ({
|
||||
items: [
|
||||
'Item 1',
|
||||
'Item 2',
|
||||
'Item 3',
|
||||
'Item 4'
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<v-form>
|
||||
<v-container grid-list-xs>
|
||||
<v-layout row wrap>
|
||||
<material-card color="black" title="User Info">
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
name="name"
|
||||
label="label"
|
||||
id="id"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</material-card>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
data: () => ({
|
||||
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
Nutrition
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="search"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-card-title>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
:search="search"
|
||||
>
|
||||
<template v-slot:items="props">
|
||||
<td>{{ props.item.name }}</td>
|
||||
<td class="text-xs-right">{{ props.item.calories }}</td>
|
||||
<td class="text-xs-right">{{ props.item.fat }}</td>
|
||||
<td class="text-xs-right">{{ props.item.carbs }}</td>
|
||||
<td class="text-xs-right">{{ props.item.protein }}</td>
|
||||
<td class="text-xs-right">{{ props.item.iron }}</td>
|
||||
</template>
|
||||
<v-alert v-slot:no-results :value="true" color="error" icon="warning">
|
||||
Your search for "{{ search }}" found no results.
|
||||
</v-alert>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
search: '',
|
||||
headers: [
|
||||
{
|
||||
text: 'Dessert (100g serving)',
|
||||
align: 'left',
|
||||
sortable: false,
|
||||
value: 'name'
|
||||
},
|
||||
{ text: 'Calories', value: 'calories' },
|
||||
{ text: 'Fat (g)', value: 'fat' },
|
||||
{ text: 'Carbs (g)', value: 'carbs' },
|
||||
{ text: 'Protein (g)', value: 'protein' },
|
||||
{ text: 'Iron (%)', value: 'iron' }
|
||||
],
|
||||
desserts: [
|
||||
{
|
||||
name: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6.0,
|
||||
carbs: 24,
|
||||
protein: 4.0,
|
||||
iron: '1%'
|
||||
},
|
||||
{
|
||||
name: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 9.0,
|
||||
carbs: 37,
|
||||
protein: 4.3,
|
||||
iron: '1%'
|
||||
},
|
||||
{
|
||||
name: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 16.0,
|
||||
carbs: 23,
|
||||
protein: 6.0,
|
||||
iron: '7%'
|
||||
},
|
||||
{
|
||||
name: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 3.7,
|
||||
carbs: 67,
|
||||
protein: 4.3,
|
||||
iron: '8%'
|
||||
},
|
||||
{
|
||||
name: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 16.0,
|
||||
carbs: 49,
|
||||
protein: 3.9,
|
||||
iron: '16%'
|
||||
},
|
||||
{
|
||||
name: 'Jelly bean',
|
||||
calories: 375,
|
||||
fat: 0.0,
|
||||
carbs: 94,
|
||||
protein: 0.0,
|
||||
iron: '0%'
|
||||
},
|
||||
{
|
||||
name: 'Lollipop',
|
||||
calories: 392,
|
||||
fat: 0.2,
|
||||
carbs: 98,
|
||||
protein: 0,
|
||||
iron: '2%'
|
||||
},
|
||||
{
|
||||
name: 'Honeycomb',
|
||||
calories: 408,
|
||||
fat: 3.2,
|
||||
carbs: 87,
|
||||
protein: 6.5,
|
||||
iron: '45%'
|
||||
},
|
||||
{
|
||||
name: 'Donut',
|
||||
calories: 452,
|
||||
fat: 25.0,
|
||||
carbs: 51,
|
||||
protein: 4.9,
|
||||
iron: '22%'
|
||||
},
|
||||
{
|
||||
name: 'KitKat',
|
||||
calories: 518,
|
||||
fat: 26.0,
|
||||
carbs: 65,
|
||||
protein: 7,
|
||||
iron: '6%'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
grid-list-xl
|
||||
>
|
||||
<v-layout
|
||||
justify-center
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
md12
|
||||
>
|
||||
<material-card
|
||||
color="green"
|
||||
title="Simple Table"
|
||||
text="Here is a subtitle for this table"
|
||||
>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
hide-actions
|
||||
>
|
||||
<template
|
||||
slot="headerCell"
|
||||
slot-scope="{ header }"
|
||||
>
|
||||
<span
|
||||
class="subheading font-weight-light text-success text--darken-3"
|
||||
v-text="header.text"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
slot="items"
|
||||
slot-scope="{ item }"
|
||||
>
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.country }}</td>
|
||||
<td>{{ item.city }}</td>
|
||||
<td class="text-xs-right">{{ item.salary }}</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
md12
|
||||
>
|
||||
<material-card
|
||||
color="green"
|
||||
flat
|
||||
full-width
|
||||
title="Table on Plain Background"
|
||||
text="Here is a subtitle for this table"
|
||||
>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items.slice(0, 7)"
|
||||
hide-actions
|
||||
>
|
||||
<template
|
||||
slot="headerCell"
|
||||
slot-scope="{ header }"
|
||||
>
|
||||
<span
|
||||
class="subheading font-weight-light text--darken-3"
|
||||
v-text="header.text"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
slot="items"
|
||||
slot-scope="{ item }"
|
||||
>
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.country }}</td>
|
||||
<td>{{ item.city }}</td>
|
||||
<td class="text-xs-right">{{ item.salary }}</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
headers: [
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Name',
|
||||
value: 'name'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Country',
|
||||
value: 'country'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'City',
|
||||
value: 'city'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Salary',
|
||||
value: 'salary',
|
||||
align: 'right'
|
||||
}
|
||||
],
|
||||
items: [
|
||||
{
|
||||
name: 'Dakota Rice',
|
||||
country: 'Niger',
|
||||
city: 'Oud-Tunrhout',
|
||||
salary: '$35,738'
|
||||
},
|
||||
{
|
||||
name: 'Minerva Hooper',
|
||||
country: 'Curaçao',
|
||||
city: 'Sinaai-Waas',
|
||||
salary: '$23,738'
|
||||
}, {
|
||||
name: 'Sage Rodriguez',
|
||||
country: 'Netherlands',
|
||||
city: 'Overland Park',
|
||||
salary: '$56,142'
|
||||
}, {
|
||||
name: 'Philip Chanley',
|
||||
country: 'Korea, South',
|
||||
city: 'Gloucester',
|
||||
salary: '$38,735'
|
||||
}, {
|
||||
name: 'Doris Greene',
|
||||
country: 'Malawi',
|
||||
city: 'Feldkirchen in Kārnten',
|
||||
salary: '$63,542'
|
||||
}, {
|
||||
name: 'Mason Porter',
|
||||
country: 'Chile',
|
||||
city: 'Gloucester',
|
||||
salary: '$78,615'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<v-form id="ParentForm">
|
||||
<v-container grid-list-xs>
|
||||
<material-card
|
||||
color="black"
|
||||
title="Add a New Test"
|
||||
class="">
|
||||
<v-layout row wrap class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative">
|
||||
<v-layout row wrap id="Form" class="ma-2">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
name="name"
|
||||
label="Name"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
id="name"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="Items[0]"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
v-model="SelectedType[0]"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
@change="DefaultValue(0, SelectedType[0])"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<!-- Text Input Section -->
|
||||
<v-flex xs12 md3 sm3 v-if="SelectedType[0] === 'text'">
|
||||
<v-text-field
|
||||
name="size"
|
||||
label="Size"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
id="InputSize"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<!-- SelectBox Section -->
|
||||
<v-layout class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" row wrap v-if="SelectedType[0] === 'select'">
|
||||
<v-layout row wrap class="WM-Relative WM-Width-Full">
|
||||
<v-flex xs12 md3 sm3 v-for="(SelectBox , Key) in ArraySelectBox[0]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
|
||||
<v-text-field
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="SelectBox.value"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="pink"
|
||||
v-if="Key >= 1"
|
||||
@click="RemoveInput('ArraySelectBox', 0, Key)"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
REMOVE</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="InputDuplicate('ArraySelectBox', 0)"
|
||||
color="black"
|
||||
class="mb-2">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<!-- Checkbox Section -->
|
||||
<v-layout row wrap class="pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" v-if="SelectedType[0] === 'checkbox'">
|
||||
<v-layout row wrap class="WM-Width-Full WM-Relative">
|
||||
<v-flex xs12 sm3 md3 v-for="(Checkbox , Key) in ArrayCheckBox[0]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
|
||||
<v-text-field
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="Checkbox.value"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
@click="RemoveInput('ArrayCheckBox', 0, Key)"
|
||||
v-if="Key >= 1"
|
||||
color="pink">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
<span class="white--text">REMOVE</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
@click="InputDuplicate('ArrayCheckBox', 0)"
|
||||
class="mb-2"
|
||||
color="black">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<!-- Form Section -->
|
||||
<v-layout row wrap v-if="SelectedType[0] === 'form'" class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative">
|
||||
<v-layout row wrap v-for="(Div , ArrayDivKey) in ArrayDiv" :key="ArrayDivKey" class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Color-LightGrey WM-Width-Full WM-Relative Form">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
name="name"
|
||||
label="Name"
|
||||
id=""
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="Items[1]"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
v-model="SelectedType[1][ArrayDivKey]"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
@change="DefaultValue(ArrayDivKey, SelectedType[1][ArrayDivKey])"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3 v-if="SelectedType[1][ArrayDivKey] === 'text'">
|
||||
<v-text-field
|
||||
name="size"
|
||||
label="Size"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
id="InputSize"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<!-- Inner Form Selectbox Section -->
|
||||
<v-layout row wrap class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" v-if="SelectedType[1][ArrayDivKey] === 'select'" >
|
||||
<v-layout row wrap class="WM-Relative WM-Width-Full">
|
||||
<v-flex xs12 md3 sm3 v-for="(SelectBox , Key) in ArraySelectBox[ArrayDivKey]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
|
||||
<v-text-field
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="SelectBox.value"
|
||||
id="value"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="pink"
|
||||
@click="RemoveInput('ArraySelectBox', ArrayDivKey, Key)"
|
||||
v-if="Key >= 1"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
REMOVE</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="InputDuplicate('ArraySelectBox', ArrayDivKey)"
|
||||
color="black">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<!-- Inner Form Checkbox Section -->
|
||||
<v-layout row wrap class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" v-if="SelectedType[1][ArrayDivKey] === 'checkbox'" >
|
||||
<v-layout row wrap class="WM-Relative WM-Width-Full">
|
||||
<v-flex xs12 md3 sm3 v-if="Key >= 0" v-for="(CheckBox , Key) in ArrayCheckBox[ArrayDivKey]" :key="Key" class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
|
||||
<v-text-field
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="CheckBox.value"
|
||||
id="value"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="pink"
|
||||
@click="RemoveInput('ArrayCheckBox', ArrayDivKey, Key)"
|
||||
v-if="Key >= 1"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
REMOVE</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="InputDuplicate('ArrayCheckBox', ArrayDivKey)"
|
||||
color="black">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
top
|
||||
color="pink"
|
||||
@click="Remove(ArrayDivKey)"
|
||||
id="RemoveFormDuplicator"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
REMOVE</v-btn>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="cyan"
|
||||
@click="Duplicator"
|
||||
id="FormDuplicator"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
ADD</v-btn>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="InputDuplicate('ArrayForm', 0)"
|
||||
color="pink"
|
||||
class="mb-2">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<v-layout row wrap align-center justify-center class="mt-4">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" v-if="Hidden" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
|
||||
<span class="white--text">Generate Form</span>
|
||||
</v-btn>
|
||||
<router-link to="/dashboard">
|
||||
<v-btn
|
||||
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
data () {
|
||||
return {
|
||||
SelectedType : {0 : 0, 1 : {}},
|
||||
InputDuplicator : {0:0},
|
||||
ArrayInput : [{value:''}],
|
||||
ArraySelectBox : [],
|
||||
ArrayCheckBox : [],
|
||||
ArrayForm : [],
|
||||
SelectBox : {},
|
||||
CheckBox : {},
|
||||
ArrayDiv : [0],
|
||||
Hidden : false,
|
||||
select: { state: 'Text', abbr: 'text' },
|
||||
Items: [
|
||||
[
|
||||
{ state: 'Text', abbr: 'text' },
|
||||
{ state: 'Checkbox', abbr: 'checkbox' },
|
||||
{ state: 'Select', abbr: 'select' },
|
||||
{ state: 'Form', abbr: 'form' },
|
||||
],
|
||||
[
|
||||
{ state: 'Text', abbr: 'text' },
|
||||
{ state: 'Checkbox', abbr: 'checkbox' },
|
||||
{ state: 'Select', abbr: 'select' },
|
||||
]
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
Duplicator() {
|
||||
this.ArrayDiv.push(this.ArrayDiv.length);
|
||||
},
|
||||
Remove (index) {
|
||||
this.ArrayDiv.splice(index, 1);
|
||||
},
|
||||
RemoveInput (Type, ArrayDivindex, index) {
|
||||
if (Type === 'ArraySelectBox') {
|
||||
this.ArraySelectBox[ArrayDivindex].splice(index, 1);
|
||||
this.CreateAgainArray(this.ArraySelectBox, 'ArraySelectBox');
|
||||
}
|
||||
else {
|
||||
this.ArrayCheckBox[ArrayDivindex].splice(index, 1);
|
||||
this.CreateAgainArray(this.ArrayCheckBox, 'ArrayCheckBox');
|
||||
}
|
||||
},
|
||||
InputDuplicate (Type, ArrayDivindex) {
|
||||
if (Type === 'ArraySelectBox') {
|
||||
if (this.ArraySelectBox[ArrayDivindex] == undefined) {
|
||||
this.ArraySelectBox[ArrayDivindex] = [];
|
||||
}
|
||||
this.ArraySelectBox[ArrayDivindex].push({value : ''});
|
||||
this.CreateAgainArray(this.ArraySelectBox, 'ArraySelectBox');
|
||||
}
|
||||
else if(Type === 'ArrayCheckBox'){
|
||||
if (this.ArrayCheckBox[ArrayDivindex] == undefined) {
|
||||
this.ArrayCheckBox[ArrayDivindex] = [];
|
||||
}
|
||||
this.ArrayCheckBox[ArrayDivindex].push({value : ''});
|
||||
this.CreateAgainArray(this.ArrayCheckBox, 'ArrayCheckBox');
|
||||
}
|
||||
else {
|
||||
if (this.ArrayForm[ArrayDivindex] == undefined) {
|
||||
this.ArrayForm[ArrayDivindex] = [];
|
||||
}
|
||||
else {
|
||||
this.ArrayForm[ArrayDivindex].push({value : ''});
|
||||
this.CreateAgainArray(this.ArrayForm, 'ArrayForm');
|
||||
}
|
||||
}
|
||||
},
|
||||
CreateAgainArray(arrayDiv, Type) {
|
||||
let array = arrayDiv;
|
||||
if (Type === 'ArraySelectBox') {
|
||||
this.ArraySelectBox = [];
|
||||
this.ArraySelectBox = array;
|
||||
}
|
||||
else if(Type === 'ArrayCheckBox'){
|
||||
this.ArrayCheckBox = [];
|
||||
this.ArrayCheckBox = array;
|
||||
}
|
||||
else {
|
||||
this.ArrayForm = [];
|
||||
this.ArrayForm = array;
|
||||
}
|
||||
},
|
||||
DefaultValue(ArrayDivindex, SelectedType) {
|
||||
this.Hidden = true;
|
||||
if (SelectedType == 'select') {
|
||||
if (this.ArraySelectBox[ArrayDivindex] == undefined) {
|
||||
this.ArraySelectBox[ArrayDivindex] = [];
|
||||
this.ArraySelectBox[ArrayDivindex].push({value : ''});
|
||||
}
|
||||
} else if(SelectedType == 'checkbox') {
|
||||
if (this.ArrayCheckBox[ArrayDivindex] == undefined) {
|
||||
this.ArrayCheckBox[ArrayDivindex] = [];
|
||||
this.ArrayCheckBox[ArrayDivindex].push({value : ''});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.WM-Border-Gray {
|
||||
border-color: #aaa !important;
|
||||
}
|
||||
.WM-Color-LightGrey {
|
||||
background-color : #F5F5F5;
|
||||
}
|
||||
.v-btn--top.v-btn--absolute.v-btn--small {
|
||||
top: -25px !important;
|
||||
}
|
||||
.v-btn--bottom.v-btn--absolute.v-btn--small {
|
||||
bottom: -24px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
>
|
||||
<v-layout
|
||||
justify-center
|
||||
align-center
|
||||
>
|
||||
<v-flex xs12>
|
||||
<material-card
|
||||
color="green"
|
||||
title="Material Dashboard Heading"
|
||||
text="Created using Roboto Font Family"
|
||||
>
|
||||
<v-card-text>
|
||||
<h2 class="font-weight-light mb-4">Typography</h2>
|
||||
|
||||
<v-container
|
||||
class="pa-0"
|
||||
grid-list-xl
|
||||
fluid
|
||||
>
|
||||
<v-layout
|
||||
v-for="(t, i) in typography"
|
||||
:key="i"
|
||||
align-end
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
xs1
|
||||
md3>
|
||||
<span
|
||||
class="tim-note"
|
||||
v-text="t[0]"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex xs8>
|
||||
<component
|
||||
:is="t[2]"
|
||||
:class="i"
|
||||
>
|
||||
<template v-if="i !== 'quote'">
|
||||
{{ t[1] }}
|
||||
</template>
|
||||
|
||||
<p v-if="i === 'quote'">{{ t[1] }}</p>
|
||||
<small v-if="i === 'quote'">Kanye West, Musician</small>
|
||||
|
||||
<template v-if="i === 'small'">
|
||||
<br>
|
||||
<small>Use 'small' tag for the headers</small>
|
||||
</template>
|
||||
</component>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const leader = 'I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.'
|
||||
const leaderShort = leader.slice(0, 105) + '...'
|
||||
const material = 'The Life of Material Dashboard'
|
||||
const small = 'Header with small subtitle'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
typography: {
|
||||
'heading-1': ['Header 1', material, 'h1'],
|
||||
'heading-2': ['Header 2', material, 'h2'],
|
||||
'heading-3': ['Header 3', material, 'h3'],
|
||||
'heading-4': ['Header 4', material, 'h4'],
|
||||
'heading-5': ['Header 5', material, 'h5'],
|
||||
'heading-6 text-uppercase': ['Header 6', material, 'h6'],
|
||||
'': ['Paragraph', leader, 'p'],
|
||||
'quote': ['Quote', leader, 'blockquote'],
|
||||
'text--disabled': ['Muted Text', leaderShort, 'p'],
|
||||
'text-primary': ['Primary Text', leaderShort, 'p'],
|
||||
'text-info': ['Info Text', leaderShort, 'p'],
|
||||
'text-success': ['Success Text', leaderShort, 'p'],
|
||||
'text-warning': ['Warning Text', leaderShort, 'p'],
|
||||
'text-danger': ['Danger Text', leaderShort, 'p'],
|
||||
'small': ['Small Tag', small, 'h2']
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tim-note {
|
||||
bottom: 10px;
|
||||
color: #c0c1c2;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
left: 0;
|
||||
margin-left: 20px;
|
||||
width: 260px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-layout justify-center>
|
||||
<v-flex
|
||||
xs12
|
||||
sm10
|
||||
md8
|
||||
>
|
||||
<material-card
|
||||
color="primary"
|
||||
title="Vue Material Dashboard PRO"
|
||||
text="Are you looking for more components? Please check our Premium Version of Vue Material Dashboard."
|
||||
>
|
||||
<table class="v-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th/>
|
||||
<th class="subheading font-weight-light">Free</th>
|
||||
<th class="subheading font-weight-light">PRO</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-xs-center">
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Components</th>
|
||||
<td>60</td>
|
||||
<td>200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Plugins</th>
|
||||
<td>2</td>
|
||||
<td>15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Example Pages</th>
|
||||
<td>3</td>
|
||||
<td>27</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Login, Register, Pricing, Lock Pages</th>
|
||||
<td>
|
||||
<v-icon color="error">mdi-close</v-icon>
|
||||
</td>
|
||||
<td>
|
||||
<v-icon color="success">mdi-check</v-icon>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Premium Support</th>
|
||||
<td>
|
||||
<v-icon color="error">mdi-close</v-icon>
|
||||
</td>
|
||||
<td>
|
||||
<v-icon color="success">mdi-check</v-icon>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th/>
|
||||
<td>Free</td>
|
||||
<td>Just $59</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th/>
|
||||
<td>
|
||||
<v-btn
|
||||
class="subheading white--text font-weight-light"
|
||||
round
|
||||
large
|
||||
color="grey"
|
||||
disabled
|
||||
>Current Version</v-btn>
|
||||
</td>
|
||||
<td>
|
||||
<v-btn
|
||||
class="subheading white--text font-weight-light"
|
||||
round
|
||||
large
|
||||
color="cyan"
|
||||
>Upgrade to Pro</v-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
grid-list-xl>
|
||||
<v-layout
|
||||
justify-center
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
xs12
|
||||
md8
|
||||
>
|
||||
<material-card
|
||||
color="green"
|
||||
title="Edit Profile"
|
||||
text="Complete your profile"
|
||||
>
|
||||
<v-form>
|
||||
<v-container py-0>
|
||||
<v-layout wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
md4
|
||||
>
|
||||
<v-text-field
|
||||
label="Company (disabled)"
|
||||
disabled/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4
|
||||
>
|
||||
<v-text-field
|
||||
class="purple-input"
|
||||
label="User Name"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4
|
||||
>
|
||||
<v-text-field
|
||||
label="Email Address"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md6
|
||||
>
|
||||
<v-text-field
|
||||
label="First Name"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md6
|
||||
>
|
||||
<v-text-field
|
||||
label="Last Name"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md12
|
||||
>
|
||||
<v-text-field
|
||||
label="Adress"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4>
|
||||
<v-text-field
|
||||
label="City"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4>
|
||||
<v-text-field
|
||||
label="Country"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4>
|
||||
<v-text-field
|
||||
class="purple-input"
|
||||
label="Postal Code"
|
||||
type="number"/>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-textarea
|
||||
class="purple-input"
|
||||
label="About Me"
|
||||
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
text-xs-right
|
||||
>
|
||||
<v-btn
|
||||
class="mx-0 font-weight-light"
|
||||
color="success"
|
||||
>
|
||||
Update Profile
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
<v-flex xs12 md4>
|
||||
<material-card class="v-card-profile">
|
||||
<v-avatar slot="offset" class="mx-auto d-block" size="130" >
|
||||
<img src="/img/" >
|
||||
</v-avatar>
|
||||
<v-card-text class="text-xs-center">
|
||||
<h6 class="category text-gray font-weight-thin mb-3">CEO / CO-FOUNDER</h6>
|
||||
<h4 class="card-title font-weight-light">Alec Thompson</h4>
|
||||
<p class="card-description font-weight-light">Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...</p>
|
||||
<v-btn
|
||||
color="success"
|
||||
round
|
||||
class="font-weight-light"
|
||||
>Follow</v-btn>
|
||||
</v-card-text>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user