JonatanRek/VUE_GabenParadise
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Preparation for loading

Browse Source
This commit is contained in:
Václav Španinger 2020-08-10 14:49:25 +02:00
parent d4dfe45639
commit ff6eb8ce79
2 changed files with 78 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gabenparadise/public/manifest.json
View File

@ -1,7 +1,7 @@
{ {
"name": "Gaben Paradise", "name": "Gaben Paradise",
"short_name": "Gaben Paradise", "short_name": "Gaben Paradise",
"theme_color": "#4DBA87", "theme_color": "#24ACF2",
"icons": [ "icons": [
{ {
"src": "./img/icons/android-chrome-192x192.png", "src": "./img/icons/android-chrome-192x192.png",

159
gabenparadise/src/components/GamesList.vue
View File

@ -1,100 +1,95 @@
<template> <template>
<div class="text-center">
<b-spinner label="Spinning"></b-spinner>
<b-spinner type="grow" label="Spinning"></b-spinner>
<b-spinner variant="primary" label="Spinning"></b-spinner>
<b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
<b-spinner variant="success" label="Spinning"></b-spinner>
<b-spinner variant="success" type="grow" label="Spinning"></b-spinner>
</div>
<div class="row"> <div class="row">
<div class="col-sm-6 col-md-4 mb-5" v-for="game of games" v-bind:key="game.name"> <div class="col-sm-6 col-md-4 mb-5" v-for="game of games" v-bind:key="game.name">
<div class="item"> <a :href="game.url">
<div class="item-image"> <div class="item">
<img class="item-image-main" :src="game.image" /> <div class="item-image">
<img class="item-image-icon" :src="game.platform" /> <img class="item-image-main" :src="game.image" />
</div> <img class="item-image-icon" :src="game.platform" />
<div class="item-details"> </div>
<div> <div class="item-details">
<a :href="game.url"> <div>
<h5 style="display: inline-block;">{{game.name}}</h5> <h5 style="display: inline-block;">{{game.name}}</h5>
</a> </div>
<div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
</div> </div>
<div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
</div> </div>
</div> </a>
</div>
<div class="text-center">
<b-spinner type="grow" label="Spinning"></b-spinner>
</div> </div>
</div> </div>
</template> </template>
<style> <style>
.item { .item {
height: 100%; height: 100%;
background: #222; background: #222;
border-radius: 10px; border-radius: 10px;
} }
.item-image { .item-image {
display: block; display: block;
padding-bottom: 60%; /* 60% sirky */ padding-bottom: 60%;
position: relative; /* 60% sirky */
} position: relative;
}
.item-image-main { .item-image-main {
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
object-fit: cover; object-fit: cover;
} }
.item-image-icon {
position: absolute;
left: 10px;
top: 10px;
width: 30px;
height: auto;
}
.item-details { .item-image-icon {
padding: 10px; position: absolute;
display: flex; left: 10px;
align-items: flex-start; top: 10px;
justify-content: space-between; width: 30px;
} height: auto;
}
.item-counts { .item-details {
border: 1px solid green; padding: 10px;
color: green; display: flex;
padding: 4px; align-items: flex-start;
font-size: 12px; justify-content: space-between;
font-weight: 600; }
}
.item-counts {
border: 1px solid green;
color: green;
padding: 4px;
font-size: 12px;
font-weight: 600;
}
</style> </style>
<script> <script>
import axios from "axios"; import axios from "axios";
export default { export default {
data() { data() {
return { return {
games: [] games: []
}; };
}, },
async created() { async created() {
try { try {
const res = async axios.get( var res = async axios.get(
"https://api.gabenparadise.com/api/data", "https://api.gabenparadise.com/api/data",
{ crossdomain: true } { crossdomain: true }
); );
this.games = res.data; this.games = res.data;
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} finally {
console.error('finally');
}
} }
} };
}; </script>
</script>