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",

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

@ -1,16 +1,7 @@
<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">
<a :href="game.url">
<div class="item"> <div class="item">
<div class="item-image"> <div class="item-image">
<img class="item-image-main" :src="game.image" /> <img class="item-image-main" :src="game.image" />
@ -18,15 +9,15 @@
</div> </div>
<div class="item-details"> <div class="item-details">
<div> <div>
<a :href="game.url">
<h5 style="display: inline-block;">{{game.name}}</h5> <h5 style="display: inline-block;">{{game.name}}</h5>
</div>
<div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
</div>
</div>
</a> </a>
</div> </div>
<div class="text-center">
<div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div> <b-spinner type="grow" label="Spinning"></b-spinner>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -40,7 +31,8 @@
.item-image { .item-image {
display: block; display: block;
padding-bottom: 60%; /* 60% sirky */ padding-bottom: 60%;
/* 60% sirky */
position: relative; position: relative;
} }
@ -53,6 +45,7 @@
top: 0; top: 0;
object-fit: cover; object-fit: cover;
} }
.item-image-icon { .item-image-icon {
position: absolute; position: absolute;
left: 10px; left: 10px;
@ -87,13 +80,15 @@ export default {
}, },
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');
} }
} }
}; };