Joururi/spellsaurus
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Added detail pages for both spells and schools

Browse Source
This commit is contained in:
Alexis
2020-12-24 22:54:18 +01:00
parent d69ea0fa72
commit 7b932f1b86
7 changed files with 98 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/app.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<div id="srs"> <div id="srs">
<header> <header>
<navbar/> <navbar/>
</header> </header>
<router-view/> <router-view/>
</div> </div>
</template> </template>
<script> <script>
@@ -18,8 +18,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
#srs { #srs {
padding-top: 50px; padding-top: 50px;
min-height: 100vh; min-height: 100vh;
background: url('./assets/images/bg1.png') center center fixed repeat; background: url('./assets/images/bg1.png') center center fixed repeat;
} }
</style> </style>

52
client/src/pages/index-page.vue
View File

@@ -1,41 +1,43 @@
<template> <template>
<div class="container-fluid"> <div class="container-fluid">
<section class="d-flex justify-content-center align-items-center"> <section class="d-flex justify-content-center align-items-center">
<main class="px-4"> <main class="px-4">
<h1 class="title text-dark mb-4 font-display font-weight-black line-height-100">"C'est magique, ta gueule."</h1> <h1 class="title text-dark mb-4 font-display font-weight-black line-height-100">"C'est magique, ta gueule."</h1>
<div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div> <div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
<hr class="w-50"> <hr class="w-50">
<div class="lead"><span class="font-display font-weight-bold">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.</div> <div class="lead">
</main> <span class="font-display font-weight-bold">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.
</section> </div>
</div> </main>
</section>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'index-page', name: 'index-page',
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
section { section {
min-height: calc(100vh - 56px); min-height: calc(100vh - 56px);
main { main {
width: 1000px; width: 1000px;
.title { .title {
color: $white; color: $white;
font-size: 64px; font-size: 64px;
text-align: center; text-align: center;
}
} }
}
} }
@media only screen and (max-width: $bp-md) { @media only screen and (max-width: $bp-md) {
section { section {
main { main {
.title { .title {
font-size: 48px; font-size: 48px;
} }
}
} }
}
} }
</style> </style>

6
client/src/pages/schools/schools-page.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="container-fluid p-4" id="spell-container"> <div class="container-fluid p-4" id="spell-container">
<h1 class="display-3 font-display mb-3">Écoles</h1> <h1 class="display-3 font-display mb-3">Écoles</h1>
</div> </div>
</template> </template>
<script> <script>

40
client/src/pages/schools/single-school-page.vue
View File

@@ -7,42 +7,40 @@
</template> </template>
<script> <script>
import SpellsList from "~/components/spells/spells-list"
// API // API
import { RepositoryFactory } from "~/api/repositories" import { RepositoryFactory } from "~/api/repositories";
const Schools = RepositoryFactory.get('schools') const Schools = RepositoryFactory.get('schools');
import SpellsList from "~/components/spells/spells-list";
export default { export default {
name: 'single-school-page', name: 'single-school-page',
metaInfo: { metaInfo() {
titleTemplate: '%s - Maîtrise I' return {
titleTemplate: `%s - ${this.school.name}`,
}
}, },
components: { components: {
'spell-list': SpellsList, 'spell-list': SpellsList,
}, },
data() { data() {
return { return {
loading: false, id: this.$route.params.id,
school: {}, school: {},
id: this.$route.params.id errors: {
loading: "",
}
} }
}, },
created() { created() {
this.computeSchool(); Schools.getOne(this.id)
.then(v => {
this.school = v.data;
})
.catch(err => {
console.log(err);
});
}, },
methods: {
async fetchSchool(id) {
const { data } = await Schools.getOne(id);
return data;
},
async computeSchool() {
this.loading = true;
const displaySchool = await this.fetchSchool(this.id);
this.loading = false;
this.school = displaySchool;
},
}
} }
</script> </script>

32
client/src/pages/spells/single-spell-page.vue
View File

@@ -1,14 +1,38 @@
<template> <template>
<div class="container-fluid p-4" id="spell-container"> <div class="container-fluid p-4" id="spell-container">
<h1 class="display-3 font-display mb-3">Sortilège I</h1> <h1 class="display-3 font-display mb-3">{{ spell.name }}</h1>
</div> <p>{{ spell.description }}</p> </div>
</template> </template>
<script> <script>
// API
import { RepositoryFactory } from "~/api/repositories";
const Spells = RepositoryFactory.get('spells');
export default { export default {
name: 'single-spell-page', name: 'single-spell-page',
metaInfo: { metaInfo() {
titleTemplate: '%s - Sortilège I' return {
titleTemplate: `%s - ${this.spell.name}`,
}
},
data() {
return {
id: this.$route.params.id,
spell: {},
errors: {
loading: "",
}
}
},
created() {
Spells.getOne(this.id)
.then(v => {
this.spell = v.data;
})
.catch(err => {
console.log(err);
});
}, },
} }
</script> </script>

12
client/src/pages/timelines/timeline-page.vue
View File

@@ -1,15 +1,21 @@
<template> <template>
<div class="container-fluid p-4" id="spell-container"> <div class="container-fluid p-4" id="spell-container">
<h1 class="display-3 font-display mb-3">Chronologie</h1> <h1 class="display-3 font-display mb-3">Chronologie</h1>
</div> <timeline/>
</div>
</template> </template>
<script> <script>
import Timeline from "~/components/timeline/timeline"
export default { export default {
name: 'timeline-page', name: 'timeline-page',
metaInfo: { metaInfo: {
titleTemplate: '%s - Âges' titleTemplate: '%s - Âges'
}, },
components: {
'timeline': Timeline
}
} }
</script> </script>

6
client/src/pages/user/profile-page.vue
View File

@@ -16,6 +16,9 @@
export default { export default {
name: 'profile-page', name: 'profile-page',
metaInfo: {
titleTemplate: '%s - Profil'
},
data() { data() {
return { return {
} }
@@ -36,9 +39,6 @@ export default {
return new Intl.DateTimeFormat("fr", date_options).format(raw_date); return new Intl.DateTimeFormat("fr", date_options).format(raw_date);
} }
}, },
metaInfo: {
titleTemplate: '%s - Profil'
}
} }
</script> </script>