/ Changed html / data display
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user