Workaround for nuxtjs layout bug

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

View File

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

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>

View File

@ -1,4 +1,5 @@
<template>
<v-col cols="12" sm="8" md="6">
<v-card color="primary" dark>
<v-btn icon to="/">
<v-icon>mdi-arrow-left</v-icon>
@ -24,6 +25,7 @@
</v-tab-item>
</v-tabs-items>
</v-card>
</v-col>
</template>
<script>

View File

@ -1,48 +1,33 @@
<template>
<v-container>
<v-row dense>
<v-col cols="12">
<v-card color="#385F73" dark>
<v-container fluid>
<v-row>
<v-col
v-for="(item, index) in items"
:key="index"
class="d-flex"
cols="12"
lg="6"
>
<v-card
:color="item.color"
dark
style="min-height: 350px; width: 100%;"
>
<v-card-title class="headline">
Unlimited notes now
{{ item.title }}
</v-card-title>
<v-card-subtitle>
Listen to your favorite artists and albums whenever and
wherever, online and offline.
{{ item.content }}
</v-card-subtitle>
<v-card-actions>
<v-btn text>See a demo</v-btn>
</v-card-actions>
</v-card>
</v-col>
<v-col cols="12">
<v-card color="#1F7087" dark>
<v-card-title class="headline">
Wow
</v-card-title>
<v-card-subtitle>
You can even search your notes
</v-card-subtitle>
<v-card-actions>
<v-btn text>Create an account</v-btn>
</v-card-actions>
</v-card>
</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>
</v-col>
</template>
<script>
@ -51,8 +36,36 @@ export default {
options: {
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: () => ({
title: 'Home',
}),
}
</script>
&

View File

@ -1,4 +1,5 @@
<template>
<v-col cols="12">
<v-data-table
:headers="headers"
:items="notes"
@ -51,6 +52,7 @@
<v-btn color="primary" @click="initialize">Reset</v-btn>
</template>
</v-data-table>
</v-col>
</template>
<script>
@ -59,7 +61,6 @@ import { format } from 'timeago.js'
export default {
name: 'Notes',
title: 'Notes',
layout: 'wide',
data: () => ({
loading: true,
notes: [],