Skip to content

C
CO-OP Search
Commit ffd2d3e1 authored by Kittisak Maneewong's avatar Kittisak Maneewong
Browse files
Options

Add Dialog

parent 43e746d0
Expand all Show whitespace changes
Inline Side-by-side
Showing with 113 additions and 89 deletions
public/js/app.js
View file @ ffd2d3e1
This diff is collapsed.
resources/js/App.vue
View file @ ffd2d3e1
<template> <template>
<div> <div>
<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> <router-view></router-view>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
<Footer></Footer>
</div> </div>
</template> </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>
resources/js/app.js
View file @ ffd2d3e1
...@@ -11,7 +11,6 @@ import stores from './store'; ...@@ -11,7 +11,6 @@ import stores from './store';
Vue.use(Vuetify); Vue.use(Vuetify);
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(Vuex); Vue.use(Vuex);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const router = new VueRouter({ const router = new VueRouter({
routes, routes,
......
resources/js/components/Dialog.vue 0 → 100644
View file @ ffd2d3e1
<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>
resources/js/components/ExampleComponent.vue deleted 100644 → 0
View file @ 43e746d0
<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>
resources/js/components/Footer.vue 0 → 100644
View file @ ffd2d3e1
<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
resources/js/components/Toolbar.vue 0 → 100644
View file @ ffd2d3e1
<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>
resources/js/store.js
View file @ ffd2d3e1
export default { export default {
state: { state: {
message: 'Kittisak Maneewong' message: 'Kittisak Maneewong',
openDialog: false
}, },
mutations: { mutations: {
setOpenDialog(state, payload) {
state.openDialog = payload
}
}, },
actions: { actions: {
...@@ -10,6 +14,9 @@ export default { ...@@ -10,6 +14,9 @@ export default {
getters: { getters: {
welcome (state) { welcome (state) {
return state.message; return state.message;
},
getOpenDialog (state) {
return state.openDialog
} }
} }
}; };
resources/views/app.blade.php
View file @ ffd2d3e1
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head> <head>
<meta charset="utf-8"> <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() }}"> <meta name="csrf-token" content="{{ csrf_token() }}">
<title>CO-OP Search</title> <title>CO-OP Search</title>
...@@ -14,76 +15,15 @@ ...@@ -14,76 +15,15 @@
<!-- Styles --> <!-- Styles -->
<style> <style>
html, body { html, body {
background-color: #fff; /* background-color: #f9f9f9; */
color: #636b6f; color: #636b6f;
font-family: 'Nunito', sans-serif; font-family: 'Nunito', sans-serif;
font-weight: 200; 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> </style>
</head> </head>
<body> <body>
<div class="flex-center position-ref full-height"> <v-app id="app"></v-app>
@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>
<script src="{{ asset('js/app.js') }}"></script> <script src="{{ asset('js/app.js') }}"></script>
</body> </body>
</html> </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