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

Merge branch 'develop' into main

Browse Source
This commit is contained in:
Alexis
2021-03-07 18:38:24 +01:00
parent b419d00495 85c5736ec3
commit 69f15c787f
6 changed files with 223 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/assets/scss/_global.scss
View File

@@ -70,6 +70,15 @@ hr {
border-color: rgba($white, .2);
}
.fs-icon {
width: 50px;
height: 50px;
&.icon-sm {
width: 20px;
height: 20px;
}
}
.btn {
display: inline-block;
padding: 13px 33px;
@@ -119,11 +128,28 @@ hr {
}
}
.fs-icon {
width: 50px;
height: 50px;
&.icon-sm {
width: 20px;
height: 20px;
.bg-image {
position: relative;
&:after {
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background-size: cover;
background-attachment: fixed;
z-index: -1;
opacity: 33%;
pointer-events: none;
}
&.bg-fade-in {
&:after {
width: 120vw;
opacity: 0;
animation: fadeInBg 2s ease-out 0s 1 forwards,
paneBgAround 35s ease-in-out 0s infinite forwards;
}
}
}

84
src/components/NestLoader.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<div class="fs-loader-wrapper">
<div class="fs-loader"></div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "nest-loader"
});
</script>
<style lang="scss">
.fs-loader-wrapper {
padding: 100px 0;
.fs-loader {
display: block;
position: relative;
height: 100px;
width: 100px;
margin: -25px auto 0 auto;
border: 2px solid transparent;
border-top-color: $white;
border-radius: 50%;
-webkit-animation: spin7 1.5s ease infinite;
animation: spin7 1.5s ease infinite;
&:before {
content: "";
position: absolute;
top: 14px;
right: 14px;
bottom: 14px;
left: 14px;
border: 2px solid transparent;
border-radius: 50%;
border-top-color: $white;
-webkit-animation: spin7 3s linear infinite;
animation: spin7 3s linear infinite;
}
&:after {
content: "";
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 2px solid transparent;
border-radius: 50%;
border-top-color: $white;
-webkit-animation: spin7 1.5s ease infinite;
animation: spin7 1.5s ease infinite;
}
}
}
@-webkit-keyframes spin7 {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin7 {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
</style>

52
src/components/celestials/CelestialsList.vue
View File

@@ -16,11 +16,6 @@
<script lang="ts">
import { defineComponent } from "vue";
// API
import axios from "axios";
// Global methods
import { addCelestialType } from "@/plugins/methods";
import CelestialCard from "@/components/celestials/CelestialCard.vue";
import CelestialFilters from "./CelestialFilters.vue";
@@ -30,64 +25,39 @@ export default defineComponent({
CelestialCard,
CelestialFilters
},
props: {
celestials: {
type: Array,
required: true
}
},
// Initial state
data() {
return {
celestials: Array<any>(),
activeFilter: "all"
};
},
computed: {
sortedCelestials(): any {
sortedCelestials(): Array<any> {
if (this.activeFilter == "moons") {
return this.celestials.filter(e => e.type === "lune");
return this.celestials.filter((e: any) => e.type === "lune");
} else if (this.activeFilter == "planets") {
return this.celestials.filter(
e => e.type === "planète" || e.type === "planète à lunes"
(e: any) => e.type === "planète" || e.type === "planète à lunes"
);
} else if (this.activeFilter == "stars") {
return this.celestials.filter(e => e.type === "étoile");
return this.celestials.filter((e: any) => e.type === "étoile");
} else if (this.activeFilter == "others") {
return this.celestials.filter(e => e.type === "autre");
return this.celestials.filter((e: any) => e.type === "autre");
} else {
return this.celestials;
}
}
},
mounted() {
// Fetches from API...
this.fetchCelestials().then(res => {
// ...and add type
this.celestials = this.addType(res);
});
},
methods: {
/**
* Fetches celestial bodies from API
*/
fetchCelestials(): Promise<any> {
return axios
.get("https://api.le-systeme-solaire.net/rest/bodies/")
.then(res => {
return res.data.bodies;
})
.catch(err => {
console.log(err);
return [];
});
},
/**
* Assign a type from the celestial object provided
*/
addType(bodies: Array<any>): Array<any> {
return bodies.map((e: any) => addCelestialType(e));
},
/**
* Applies the filter type to the data
*/

15
src/views/Home.vue
View File

@@ -1,5 +1,5 @@
<template>
<section class="home">
<section class="home bg-image bg-fade-in">
<div class="splash fade-in-children">
<h2 class="heading-1">Full Skies</h2>
<p class="heading-2">
@@ -31,20 +31,7 @@ export default defineComponent({
overflow: hidden;
&:after {
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 120vw;
background-image: url("/home_bg-min.jpg");
background-size: cover;
z-index: -1;
opacity: 0;
pointer-events: none;
animation: fadeInBg 2s ease-out 0s 1 forwards,
paneBgAround 35s ease-in-out 0s infinite forwards;
}
}
</style>

57
src/views/celestials/Celestial.vue
View File

@@ -1,8 +1,17 @@
<template>
<section class="celestial">
<header>
<h1 class="heading-1">{{ celestial.name }}</h1>
</header>
<section class="celestial bg-image">
<div v-if="loaded">
<header>
<h1 class="heading-1">{{ celestial.name }}</h1>
</header>
<div class="section-content">
<div v-if="error">Une erreur est survenue : {{ error }}</div>
<div>{{ celestial }}</div>
</div>
</div>
<div v-else>
<nest-loader />
</div>
</section>
</template>
@@ -13,47 +22,67 @@ import { defineComponent } from "vue";
import axios from "axios";
// Global methods
import { addCelestialType } from "@/plugins/methods";
import NestLoader from "@/components/NestLoader.vue";
export default defineComponent({
components: {
NestLoader
},
name: "Celestial",
data() {
return {
celestial: {},
celestial: false,
loaded: false,
error: ""
};
},
props: {
slug: {
type: String,
required: true
}
},
mounted() {
// Fetches from API...
this.fetchCelestial()
.then(res => {
// ...and add type
this.celestial = addCelestialType(res);
// Adds type after fake loading (it's just to showcase the spinner tbh)
setTimeout(() => {
this.celestial = addCelestialType(res);
this.loaded = true;
}, 1000);
})
.catch(err => {
this.error = err.message;
.catch(() => {
this.error = "Impossible de récupérer l'astre demandé.";
});
},
methods: {
/**
* Fetches celestial bodies from API
* Fetches celestial body from API
*/
fetchCelestial(): Promise<any> {
return axios
.get(`https://api.le-systeme-solaire.net/rest/bodies/${this.slug}`)
.then(res => {
return res.data;
})
.catch(err => {
this.error = err.message;
return [];
});
}
}
});
</script>
<style lang="scss" scoped>
.celestial {
position: relative;
min-height: 100%;
padding: 25px 5%;
&:after {
background-image: url("/celestials_bg-min.jpg");
}
}
</style>

67
src/views/celestials/Celestials.vue
View File

@@ -1,22 +1,71 @@
<template>
<section class="celestials">
<section class="celestials bg-image">
<header>
<h1 class="heading-1">Le système solaire</h1>
</header>
<div class="section-content">
<celestials-list />
<div v-if="error">Une erreur est survenue : {{ error }}</div>
<div v-if="celestials.length > 1">
<celestials-list :celestials="celestials" />
</div>
<div v-else>
<nest-loader />
</div>
</div>
</section>
</template>
<script lang="ts">
import { defineComponent } from "vue";
// API
import axios from "axios";
// Global methods
import { addCelestialType } from "@/plugins/methods";
import CelestialsList from "@/components/celestials/CelestialsList.vue";
import NestLoader from "@/components/NestLoader.vue";
export default defineComponent({
name: "Celestials",
components: {
CelestialsList
CelestialsList,
NestLoader
},
data() {
return {
celestials: Array<any>(),
error: ""
};
},
mounted() {
this.fetchCelestials()
.then(res => {
this.celestials = this.addType(res);
})
.catch(() => {
this.error = "Impossible de récupérer les astres.";
});
},
methods: {
/**
* Fetches celestial bodies from API
*/
fetchCelestials(): Promise<any> {
return axios
.get("https://api.le-systeme-solaire.net/rest/bodies/")
.then(res => {
return res.data.bodies;
});
},
/**
* Assign a type from the celestial object provided
*/
addType(bodies: Array<any>): Array<any> {
return bodies.map((e: any) => addCelestialType(e));
}
}
});
</script>
@@ -28,19 +77,7 @@ export default defineComponent({
padding: 25px 5%;
&:after {
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background-image: url("/celestials_bg-min.jpg");
background-size: cover;
background-attachment: fixed;
z-index: -1;
opacity: 33%;
pointer-events: none;
}
}
</style>