archiwum/old-gractwo-pl
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use card component in botcard & add onlineindicator prot

Browse Source
This commit is contained in:
Jakub Mańczak
2021-08-01 16:08:04 +02:00
parent f4f6c8ec8f
commit 3352a7b635
4 changed files with 99 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/BotCard.vue
View File

@@ -1,87 +1,43 @@
<template>
<div v-if="status">
<div class="card">
<div class="titleCard">
<img
:src="
`https://cdn.discordapp.com/avatars/${status.mainInfo.id}/${
status.mainInfo.avatar
}.png?size=64`
"
alt="Gractwo bot current avatar"
/>
<h3>
{{ status.mainInfo.username + '#' + status.mainInfo.discriminator }}
</h3>
</div>
</div>
<div class="card">
<div class="titleCard">
<img
:src="
`https://cdn.discordapp.com/avatars/${status.canaryInfo.id}/${
status.canaryInfo.avatar
}.png?size=64`
"
alt="Gractwo Canary bot current avatar"
/>
<h3>
{{
status.canaryInfo.username + '#' + status.canaryInfo.discriminator
}}
</h3>
</div>
</div>
<div class="card">
<h3>bot card</h3>
<p>
Bot Name:
{{ status.mainInfo.username + '#' + status.mainInfo.discriminator }}
<br />
Bot ID: {{ status.mainInfo.id }} <br />
Bot Avatar:
<img
:src="
`https://cdn.discordapp.com/avatars/${status.mainInfo.id}/${
status.mainInfo.avatar
}.png?size=64`
"
alt=""
v-if="status"
/>
<br />
Bot Info: {{ status.mainInfo }}
</p>
</div>
<div class="card">
<h3>sub bot card</h3>
<p>
Bot Name:
{{ status.canaryInfo.username + '#' + status.canaryInfo.discriminator }}
<br />
Bot ID: {{ status.canaryInfo.id }} <br />
Bot Avatar:
<img
:src="
`https://cdn.discordapp.com/avatars/${status.canaryInfo.id}/${
status.canaryInfo.avatar
}.png?size=64`
"
alt=""
v-if="status"
/>
<br />
Bot Info: {{ status.canaryInfo }}
</p>
</div>
<Card
tabindex="0"
:name="
`${status.mainInfo.username + '#' + status.mainInfo.discriminator}`
"
:photoDyn="
`https://cdn.discordapp.com/avatars/${status.mainInfo.id}/${
status.mainInfo.avatar
}.png?size=128`
"
description="Bot obsługujący serwer discord Gractwa."
onlineIndicator="1"
/>
<Card
tabindex="0"
:name="
`${status.canaryInfo.username + '#' + status.canaryInfo.discriminator}`
"
:photoDyn="
`https://cdn.discordapp.com/avatars/${status.canaryInfo.id}/${
status.canaryInfo.avatar
}.png?size=128`
"
description="Bot zastępczy do testowania nowych funkcji."
onlineIndicator="0"
/>
</div>
</template>
<script>
import axios from 'axios';
import Card from '~/components/Card.vue';
export default {
name: 'BotCard',
components: {
Card,
},
data() {
return {
status: null,
@@ -104,24 +60,37 @@ export default {
};
</script>
//
<style lang="scss" scoped>
.card {
display: inline-block;
border: 1px solid var(--gray);
border-radius: 4px;
padding: 1rem;
margin: 1rem 0.2rem;
width: 100%;
transition-duration: var(--trandur);
.titleCard {
display: flex;
flex-direction: row;
justify-content: baseline;
}
&:hover,
&:focus {
border: 1px solid transparent;
box-shadow: 0 0 10px black;
}
}
// .card {
// display: inline-block;
// border: 1px solid var(--gray);
// border-radius: 4px;
// padding: 1rem;
// margin: 1rem 0.2rem;
// width: 100%;
// transition-duration: var(--trandur);
// .cardInner {
// display: flex;
// flex-direction: row;
// .cardTitle {
// display: flex;
// align-items: baseline;
// .botOnlineStatus {
// width: 0.5rem;
// height: 0.5rem;
// background-color: var(--gray);
// margin-left: 0.5rem;
// border-radius: 50%;
// margin-bottom: 0.2rem;
// }
// }
// }
// &:hover,
// &:focus {
// border: 1px solid transparent;
// box-shadow: 0 0 10px black;
// }
// }
//
</style>