Migrated to nuxt-js frontend framework
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<v-card color="primary" dark>
|
||||
<v-btn icon to="/">
|
||||
<v-icon>mdi-arrow-left</v-icon>
|
||||
</v-btn>
|
||||
<v-card-title class="text-center justify-center py-6">
|
||||
<h1 class="font-weight-bold display-2">Account</h1>
|
||||
</v-card-title>
|
||||
|
||||
<v-tabs
|
||||
v-model="tab"
|
||||
background-color="transparent"
|
||||
dark
|
||||
grow
|
||||
>
|
||||
<v-tab
|
||||
v-for="tab in tabs"
|
||||
:key="tab"
|
||||
>
|
||||
{{ tab }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item
|
||||
v-for="tab in tabs"
|
||||
:key="tab"
|
||||
>
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<LoginForm v-if="tab === 'Login'"></LoginForm>
|
||||
<RegisterForm v-else></RegisterForm>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoginForm from "~/components/LoginForm";
|
||||
import RegisterForm from "~/components/RegisterForm";
|
||||
|
||||
export default {
|
||||
name: "centered",
|
||||
layout: "centered",
|
||||
data: () => ({
|
||||
tab: 0,
|
||||
tabs: ["Login", "Register"]
|
||||
}),
|
||||
head: () => ({
|
||||
title: "Account"
|
||||
}),
|
||||
components: {
|
||||
LoginForm,
|
||||
RegisterForm
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-toolbar
|
||||
flat
|
||||
color="secondary"
|
||||
class="mt-12"
|
||||
dark
|
||||
>
|
||||
<v-toolbar-title>Create a note</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
|
||||
<v-card-text>
|
||||
<v-text-field label="Title" outlined value="My new note"></v-text-field>
|
||||
|
||||
<v-textarea
|
||||
label="Text"
|
||||
outlined
|
||||
counter
|
||||
loader-height="5"
|
||||
spellcheck="false"
|
||||
value="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"
|
||||
></v-textarea>
|
||||
|
||||
<v-combobox
|
||||
outlined
|
||||
v-model="tags"
|
||||
:items="possibleTags"
|
||||
:delimiters="delimiters"
|
||||
label="Tags"
|
||||
multiple
|
||||
chips
|
||||
deletable-chips
|
||||
></v-combobox>
|
||||
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="success"
|
||||
depressed
|
||||
>
|
||||
Create
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "create",
|
||||
data: () => ({
|
||||
delimiters: [" ", ","],
|
||||
tags: [],
|
||||
possibleTags: ["Dev", "Ephec", "Java"]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<h1>slt</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
title: 'Home',
|
||||
layout: 'home',
|
||||
data: () => ({
|
||||
|
||||
}),
|
||||
head: () => ({
|
||||
title: "Home"
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #1565c0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<v-card flat>
|
||||
<v-toolbar
|
||||
color="primary"
|
||||
dark
|
||||
extended
|
||||
prominent
|
||||
>
|
||||
<v-app-bar-nav-icon></v-app-bar-nav-icon>
|
||||
<v-toolbar-title>Notes</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
|
||||
<v-card
|
||||
class="mx-auto"
|
||||
max-width="700"
|
||||
style="margin-top: -64px;"
|
||||
>
|
||||
<v-toolbar flat>
|
||||
<v-toolbar-title class="grey--text">Create a note</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-text>
|
||||
<v-text-field label="Title" value="My new note"></v-text-field>
|
||||
|
||||
<v-textarea
|
||||
label="Text"
|
||||
counter
|
||||
loader-height="5"
|
||||
spellcheck="false"
|
||||
value="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"
|
||||
></v-textarea>
|
||||
|
||||
<v-combobox
|
||||
v-model="tags"
|
||||
:items="possibleTags"
|
||||
:delimiters="delimiters"
|
||||
label="Tags"
|
||||
multiple
|
||||
chips
|
||||
deletable-chips
|
||||
></v-combobox>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
color="success"
|
||||
class="mx-auto"
|
||||
depressed
|
||||
block
|
||||
>
|
||||
Create
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "new",
|
||||
layout: "empty",
|
||||
data: () => ({
|
||||
delimiters: [" ", ","],
|
||||
tags: [],
|
||||
possibleTags: ["Dev", "Ephec", "Java"]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row dense
|
||||
align-content="stretch"
|
||||
align="stretch"
|
||||
>
|
||||
<v-col
|
||||
v-for="(note, index) in notes"
|
||||
:key="index"
|
||||
cols="12" md="6" xl="3"
|
||||
class="viewer">
|
||||
<Note
|
||||
class="item"
|
||||
:title="note.title"
|
||||
:tags="note.tags"
|
||||
>
|
||||
{{ note.content }}
|
||||
</Note>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
<v-btn to="/create" fab fixed bottom right large color="accent">
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
|
||||
</v-container>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Note from '@/components/Note'
|
||||
|
||||
export default {
|
||||
name: "notes",
|
||||
title: "Notes",
|
||||
components: {
|
||||
Note,
|
||||
},
|
||||
data: () => ({
|
||||
selector: ".viewer",
|
||||
options: {
|
||||
columnWidth: "200",
|
||||
percentPosition: true,
|
||||
gutter: 0,
|
||||
itemSelector: ".item"
|
||||
},
|
||||
notes: [
|
||||
{
|
||||
title: "Elec analogique",
|
||||
tags: ["Ephec"],
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
tags: ["Ephec", "Dev"],
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
|
||||
},
|
||||
{
|
||||
title: "Melvin fait du ski",
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
|
||||
},
|
||||
{
|
||||
title: "Daniel étudie elec",
|
||||
tags: ["Ephec", "Ephec", "Ephec", "Ephec", "Ephec", "Ephec"],
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
tags: ["Ephec", "Dev"],
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
tags: ["Ephec", "Dev"],
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
tags: ["Ephec", "Dev"],
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
|
||||
},
|
||||
{
|
||||
title: "Daniel étudie elec",
|
||||
tags: ["Ephec", "Ephec", "Ephec", "Ephec", "Ephec", "Ephec"],
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
tags: ["Ephec", "Dev"],
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
tags: ["Ephec", "Dev"],
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
tags: ["Ephec", "Dev"],
|
||||
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
|
||||
},
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user