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

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

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