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",
"short_name": "Gaben Paradise",
"theme_color": "#4DBA87",
"theme_color": "#24ACF2",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",

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

@ -1,16 +1,7 @@
<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="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-image">
<img class="item-image-main" :src="game.image" />
@ -18,15 +9,15 @@
</div>
<div class="item-details">
<div>
<a :href="game.url">
<h5 style="display: inline-block;">{{game.name}}</h5>
</div>
<div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
</div>
</div>
</a>
</div>
<div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
</div>
</div>
<div class="text-center">
<b-spinner type="grow" label="Spinning"></b-spinner>
</div>
</div>
</template>
@ -40,7 +31,8 @@
.item-image {
display: block;
padding-bottom: 60%; /* 60% sirky */
padding-bottom: 60%;
/* 60% sirky */
position: relative;
}
@ -53,6 +45,7 @@
top: 0;
object-fit: cover;
}
.item-image-icon {
position: absolute;
left: 10px;
@ -87,13 +80,15 @@ export default {
},
async created() {
try {
const res = async axios.get(
var res = async axios.get(
"https://api.gabenparadise.com/api/data",
{ crossdomain: true }
);
this.games = res.data;
} catch (e) {
console.error(e);
} finally {
console.error('finally');
}
}
};