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

Merge pull request #24 from AlexisNP/issues/single_pages

Browse Source 
- Added detail pages for both spells and schools
This commit is contained in:
AlexisNP
2020-12-24 22:56:11 +01:00
committed by GitHub
parent d69ea0fa72 7b932f1b86
commit b8e12c1665
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>
<div id="srs">
<header>
<navbar/>
</header>
<router-view/>
</div>
<div id="srs">
<header>
<navbar/>
</header>
<router-view/>
</div>
</template>
<script>
@@ -18,8 +18,8 @@ export default {
<style lang="scss" scoped>
#srs {
padding-top: 50px;
min-height: 100vh;
background: url('./assets/images/bg1.png') center center fixed repeat;
padding-top: 50px;
min-height: 100vh;
background: url('./assets/images/bg1.png') center center fixed repeat;
}
</style>

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

@@ -1,41 +1,43 @@
<template>
<div class="container-fluid">
<section class="d-flex justify-content-center align-items-center">
<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>
<div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
<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>
</main>
</section>
</div>
<div class="container-fluid">
<section class="d-flex justify-content-center align-items-center">
<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>
<div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
<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>
</main>
</section>
</div>
</template>
<script>
export default {
name: 'index-page',
name: 'index-page',
}
</script>
<style lang="scss" scoped>
section {
min-height: calc(100vh - 56px);
main {
width: 1000px;
.title {
color: $white;
font-size: 64px;
text-align: center;
}
min-height: calc(100vh - 56px);
main {
width: 1000px;
.title {
color: $white;
font-size: 64px;
text-align: center;
}
}
}
@media only screen and (max-width: $bp-md) {
section {
main {
.title {
font-size: 48px;
}
}
section {
main {
.title {
font-size: 48px;
}
}
}
}
</style>

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

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

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

@@ -7,42 +7,40 @@
</template>
<script>
import SpellsList from "~/components/spells/spells-list"
// API
import { RepositoryFactory } from "~/api/repositories"
const Schools = RepositoryFactory.get('schools')
import { RepositoryFactory } from "~/api/repositories";
const Schools = RepositoryFactory.get('schools');
import SpellsList from "~/components/spells/spells-list";
export default {
name: 'single-school-page',
metaInfo: {
titleTemplate: '%s - Maîtrise I'
metaInfo() {
return {
titleTemplate: `%s - ${this.school.name}`,
}
},
components: {
'spell-list': SpellsList,
},
data() {
return {
loading: false,
id: this.$route.params.id,
school: {},
id: this.$route.params.id
errors: {
loading: "",
}
}
},
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>

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

@@ -1,14 +1,38 @@
<template>
<div class="container-fluid p-4" id="spell-container">
<h1 class="display-3 font-display mb-3">Sortilège I</h1>
</div>
<h1 class="display-3 font-display mb-3">{{ spell.name }}</h1>
<p>{{ spell.description }}</p> </div>
</template>
<script>
// API
import { RepositoryFactory } from "~/api/repositories";
const Spells = RepositoryFactory.get('spells');
export default {
name: 'single-spell-page',
metaInfo: {
titleTemplate: '%s - Sortilège I'
metaInfo() {
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>

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

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

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

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