/ Changed html / data display

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

View File

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

View File

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

View File

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

View File

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