Commit ffd2d3e1 authored by Kittisak Maneewong's avatar Kittisak Maneewong

Add Dialog

parent 43e746d0
This diff is collapsed.
<template>
<div>
<router-view></router-view>
<Dialog></Dialog>
<Toolbar></Toolbar>
<v-content class="mt-5">
<v-container fluid>
<v-layout>
<v-flex xs10 offset-xs1>
<v-card flat height="600px">
<router-view></router-view>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
<Footer></Footer>
</div>
</template>
<script>
import Toolbar from './components/Toolbar.vue';
import Footer from './components/Footer.vue';
import Dialog from './components/Dialog.vue';
export default {
components: {
Toolbar,
Footer,
Dialog
}
}
</script>
......@@ -11,7 +11,6 @@ import stores from './store';
Vue.use(Vuetify);
Vue.use(VueRouter);
Vue.use(Vuex);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const router = new VueRouter({
routes,
......
<template>
<v-dialog
v-model="dialog"
width="500px"
>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
flat
@click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
computed: {
dialog: {
get () {
return this.$store.getters.getOpenDialog
},
set (value) {
this.$store.commit('setOpenDialog', value)
}
}
}
}
</script>
<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>
<template>
<v-footer class="pa-3" color="grey lighten-1">
<v-spacer></v-spacer>
<div>&copy; {{ new Date().getFullYear() }}</div>
<v-spacer></v-spacer>
</v-footer>
</template>
\ No newline at end of file
<template>
<v-toolbar absolute flat color="white" app>
<v-toolbar-title>Cooperative Search</v-toolbar-title>
<v-spacer></v-spacer>
<v-divider inset vertical></v-divider>
<v-btn round small outline color="teal" @click.stop="$store.commit('setOpenDialog', true)">
เข้าสู่ระบบ / สมัครสมาชิก
</v-btn>
</v-toolbar>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
export default {
state: {
message: 'Kittisak Maneewong'
message: 'Kittisak Maneewong',
openDialog: false
},
mutations: {
setOpenDialog(state, payload) {
state.openDialog = payload
}
},
actions: {
......@@ -10,6 +14,9 @@ export default {
getters: {
welcome (state) {
return state.message;
},
getOpenDialog (state) {
return state.openDialog
}
}
};
......@@ -2,7 +2,8 @@
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>CO-OP Search</title>
......@@ -14,76 +15,15 @@
<!-- Styles -->
<style>
html, body {
background-color: #fff;
/* background-color: #f9f9f9; */
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
@if (Route::has('login'))
<div class="top-right links">
@auth
<a href="{{ url('/home') }}">Home</a>
@else
<a href="{{ route('login') }}">Login</a>
@if (Route::has('register'))
<a href="{{ route('register') }}">Register</a>
@endif
@endauth
</div>
@endif
<div class="content" id="app">
</div>
</div>
<v-app id="app"></v-app>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment