hubert/SimpleNotes
1
0
Fork 0
Code Projects Releases Activity

Workaround for nuxtjs layout bug

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-04-26 12:46:15 +02:00
parent 7e1425c25e
commit 3d2f950433
5 changed files with 135 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/layouts/default.vue
View File

@ -4,9 +4,7 @@
<v-content> <v-content>
<v-container fill-height> <v-container fill-height>
<v-row no-gutters justify="center"> <v-row no-gutters justify="center">
<v-col cols="12" sm="8" md="6"> <nuxt />
<nuxt />
</v-col>
</v-row> </v-row>
</v-container> </v-container>
</v-content> </v-content>

28
frontend/layouts/wide.vue
View File

@ -1,28 +0,0 @@
<template>
<v-app>
<Navbar />
<v-content>
<v-container fill-height>
<v-row no-gutters justify="center">
<v-col cols="12">
<nuxt />
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
<script>
import Navbar from '@/components/Navbar'
export default {
components: { Navbar },
}
</script>
<style>
html {
overflow-y: auto;
}
</style>

48
frontend/pages/account.vue
View File

@ -1,29 +1,31 @@
<template> <template>
<v-card color="primary" dark> <v-col cols="12" sm="8" md="6">
<v-btn icon to="/"> <v-card color="primary" dark>
<v-icon>mdi-arrow-left</v-icon> <v-btn icon to="/">
</v-btn> <v-icon>mdi-arrow-left</v-icon>
<v-card-title class="text-center justify-center py-6"> </v-btn>
<h1 class="font-weight-bold display-2">Account</h1> <v-card-title class="text-center justify-center py-6">
</v-card-title> <h1 class="font-weight-bold display-2">Account</h1>
</v-card-title>
<v-tabs v-model="tab" background-color="transparent" dark grow> <v-tabs v-model="tab" background-color="transparent" dark grow>
<v-tab v-for="tab in tabs" :key="tab"> <v-tab v-for="tab in tabs" :key="tab">
{{ tab }} {{ tab }}
</v-tab> </v-tab>
</v-tabs> </v-tabs>
<v-tabs-items v-model="tab"> <v-tabs-items v-model="tab">
<v-tab-item v-for="tab in tabs" :key="tab"> <v-tab-item v-for="tab in tabs" :key="tab">
<v-card flat> <v-card flat>
<v-card-text> <v-card-text>
<LoginForm v-if="tab === 'Login'"></LoginForm> <LoginForm v-if="tab === 'Login'"></LoginForm>
<RegisterForm v-else></RegisterForm> <RegisterForm v-else></RegisterForm>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-tab-item> </v-tab-item>
</v-tabs-items> </v-tabs-items>
</v-card> </v-card>
</v-col>
</template> </template>
<script> <script>

101
frontend/pages/index.vue
View File

@ -1,48 +1,33 @@
<template> <template>
<v-container> <v-col cols="12">
<v-row dense> <v-container fluid>
<v-col cols="12"> <v-row>
<v-card color="#385F73" dark> <v-col
<v-card-title class="headline"> v-for="(item, index) in items"
Unlimited notes now :key="index"
</v-card-title> class="d-flex"
<v-card-subtitle> cols="12"
Listen to your favorite artists and albums whenever and lg="6"
wherever, online and offline. >
</v-card-subtitle> <v-card
<v-card-actions> :color="item.color"
<v-btn text>See a demo</v-btn> dark
</v-card-actions> style="min-height: 350px; width: 100%;"
</v-card> >
</v-col> <v-card-title class="headline">
<v-col cols="12"> {{ item.title }}
<v-card color="#1F7087" dark> </v-card-title>
<v-card-title class="headline"> <v-card-subtitle>
Wow {{ item.content }}
</v-card-title> </v-card-subtitle>
<v-card-subtitle> <v-card-actions>
You can even search your notes <v-btn text>See a demo</v-btn>
</v-card-subtitle> </v-card-actions>
<v-card-actions> </v-card>
<v-btn text>Create an account</v-btn> </v-col>
</v-card-actions> </v-row>
</v-card> </v-container>
</v-col> </v-col>
<v-col cols="12">
<v-card color="#952175" dark>
<v-card-title class="headline">
babar
</v-card-title>
<v-card-subtitle>
You notes are safe with us
</v-card-subtitle>
<v-card-actions>
<v-btn text>Privacy policy</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</template> </template>
<script> <script>
@ -51,8 +36,36 @@ export default {
options: { options: {
auth: false, auth: false,
}, },
data: () => ({
items: [
{
title: 'Writes your notes in markdown',
content:
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut consectetur debitis harum' +
' illum in incidunt maxime modi quae velit? Aspernatur, consequatur error' +
' mollitia nesciunt officiis porro ratione sequi voluptas?',
color: 'indigo',
},
{
title: '',
content: '',
color: 'purple',
},
{
title: '',
content: '',
color: 'warning',
},
{
title: '',
content: '',
color: 'teal darken-2',
},
],
}),
head: () => ({ head: () => ({
title: 'Home', title: 'Home',
}), }),
} }
</script> </script>
&

103
frontend/pages/notes.vue
View File

@ -1,56 +1,58 @@
<template> <template>
<v-data-table <v-col cols="12">
:headers="headers" <v-data-table
:items="notes" :headers="headers"
:loading="loading" :items="notes"
loading-text="Loading notes..." :loading="loading"
class="elevation-1" loading-text="Loading notes..."
disable-sort class="elevation-1"
> disable-sort
<template v-slot:top> >
<v-toolbar flat color="secondary"> <template v-slot:top>
<h2 class="title white--text"> <v-toolbar flat color="secondary">
Notes <h2 class="title white--text">
</h2> Notes
<v-spacer></v-spacer> </h2>
<v-btn to="/create" outlined dark> <v-spacer></v-spacer>
New Note <v-btn to="/create" outlined dark>
</v-btn> New Note
</v-toolbar> </v-btn>
</template> </v-toolbar>
<template v-slot:item.updatedAt="{ item }"> </template>
{{ format(item.updatedAt) }} <template v-slot:item.updatedAt="{ item }">
</template> {{ format(item.updatedAt) }}
<template v-slot:item.tags="{ item }"> </template>
<div class="tags"> <template v-slot:item.tags="{ item }">
<v-chip <div class="tags">
v-for="tag in item.tags" <v-chip
:key="tag" v-for="tag in item.tags"
active :key="tag"
active
color="secondary"
>
{{ tag }}
</v-chip>
</div>
</template>
<template v-slot:item.actions="{ item }">
<v-icon
small
color="secondary" color="secondary"
dark
class="mr-2"
@click="editItem(item)"
> >
{{ tag }} mdi-pencil
</v-chip> </v-icon>
</div> <v-icon small color="secondary" dark @click="deleteItem(item)">
</template> mdi-delete
<template v-slot:item.actions="{ item }"> </v-icon>
<v-icon </template>
small <template v-slot:no-data>
color="secondary" <v-btn color="primary" @click="initialize">Reset</v-btn>
dark </template>
class="mr-2" </v-data-table>
@click="editItem(item)" </v-col>
>
mdi-pencil
</v-icon>
<v-icon small color="secondary" dark @click="deleteItem(item)">
mdi-delete
</v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize">Reset</v-btn>
</template>
</v-data-table>
</template> </template>
<script> <script>
@ -59,7 +61,6 @@ import { format } from 'timeago.js'
export default { export default {
name: 'Notes', name: 'Notes',
title: 'Notes', title: 'Notes',
layout: 'wide',
data: () => ({ data: () => ({
loading: true, loading: true,
notes: [], notes: [],