Joururi/sample-full-skies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

/ Changed html / data display

Browse Source
This commit is contained in:
Alexis
2021-03-29 14:24:19 +02:00
parent 51dffd48dc
commit c6fe4f9d98
4 changed files with 62 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/celestials/CelestialsList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="celestial-list-wrapper">
<div v-if="celestials != undefined">
<celestial-filters v-if="hasFilters" @filter:celestials="filterCelestials" />
<div v-if="celestials">
<celestial-filters v-if="hasFilters && celestials.length > 0" @filter:celestials="filterCelestials" />
<ul v-if="celestials" class="celestial-list grid no-style">
<li

76
pages/astres/_slug.vue
View File

@@ -1,42 +1,44 @@
<template>
<section class="celestial bg-image">
<header>
<h1 class="heading-1">
<span>{{ celestial.name }}</span>
<span v-if="celestial.name != celestial.englishName">/ {{ celestial.englishName }}</span>
<span class="txt-capitalize">- {{ celestial.type }}</span>
</h1>
</header>
<div class="section-content">
<main v-if="celestial" class="celestial-body">
<div>
<h3 class="heading-3">
Informations
</h3>
<p v-if="celestial.aroundPlanet">
Orbite autour de
<nuxt-link
:to="`/astres/${celestial.aroundPlanet.planet}`"
class="txt-capitalize"
>
{{ celestial.aroundPlanet.planet }}
</nuxt-link>
</p>
<p v-if="celestial.discoveredBy">
Découvert par {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
</p>
<p>Facteur Gravité : {{ celestial.gravity }}</p>
<p>Facteur Densité : {{ celestial.density }}</p>
<p>Inclinaison : {{ celestial.inclination }}</p>
<main v-if="celestial">
<header>
<h1 class="heading-1">
<span>{{ celestial.name }}</span>
<span v-if="celestial.name != celestial.englishName">/ {{ celestial.englishName }}</span>
<span class="txt-capitalize">- {{ celestial.type }}</span>
</h1>
</header>
<div class="section-content">
<div class="celestial-body">
<div>
<h3 class="heading-3">
Informations
</h3>
<p v-if="celestial.aroundPlanet">
Orbite autour de
<nuxt-link
:to="`/astres/${celestial.aroundPlanet.planet}`"
class="txt-capitalize"
>
{{ celestial.aroundPlanet.planet }}
</nuxt-link>
</p>
<p v-if="celestial.discoveredBy">
Découvert par {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
</p>
<p>Facteur Gravité : {{ celestial.gravity }}</p>
<p>Facteur Densité : {{ celestial.density }}</p>
<p>Inclinaison : {{ celestial.inclination }}</p>
</div>
<div v-if="celestial.moons" class="celestial-moons">
<h2 class="heading-2">
Astres orbitant {{ celestial.name }}
</h2>
<celestials-list :celestials="celestial.moons" :has-filters="false" />
</div>
</div>
<div v-if="celestial.moons" class="celestial-moons">
<h2 class="heading-2">
Astres orbitant {{ celestial.name }}
</h2>
<celestials-list :celestials="celestial.moons" :has-filters="false" />
</div>
</main>
</div>
</div>
</main>
</section>
</template>
@@ -49,7 +51,7 @@ export default {
data () {
return {
celestial: {}
celestial: false
}
},

18
pages/astres/index.vue
View File

@@ -1,13 +1,15 @@
<template>
<section class="celestials bg-image">
<header>
<h1 class="heading-1">
Le système solaire
</h1>
</header>
<div class="section-content">
<celestials-list :celestials="celestials" />
</div>
<main>
<header>
<h1 class="heading-1">
Le système solaire
</h1>
</header>
<div class="section-content">
<celestials-list :celestials="celestials" />
</div>
</main>
</section>
</template>

20
pages/favoris/index.vue
View File

@@ -1,13 +1,15 @@
<template>
<section class="favourites bg-image">
<header>
<h1 class="heading-1">
Mes favoris
</h1>
</header>
<div class="section-content">
<celestials-list :celestials="favourites" />
</div>
<main>
<header>
<h1 class="heading-1">
Mes favoris
</h1>
</header>
<div class="section-content">
<celestials-list :celestials="favourites" />
</div>
</main>
</section>
</template>
@@ -22,7 +24,7 @@ export default {
},
created () {
// const favourites = this.$store.state.user.favourites
console.log(this.$store.state.user.favourites)
}
}
</script>