use card component in botcard & add onlineindicator prot
This commit is contained in:
@@ -1,87 +1,43 @@
|
||||
<template>
|
||||
<div v-if="status">
|
||||
<div class="card">
|
||||
<div class="titleCard">
|
||||
<img
|
||||
:src="
|
||||
<Card
|
||||
tabindex="0"
|
||||
:name="
|
||||
`${status.mainInfo.username + '#' + status.mainInfo.discriminator}`
|
||||
"
|
||||
:photoDyn="
|
||||
`https://cdn.discordapp.com/avatars/${status.mainInfo.id}/${
|
||||
status.mainInfo.avatar
|
||||
}.png?size=64`
|
||||
}.png?size=128`
|
||||
"
|
||||
alt="Gractwo bot current avatar"
|
||||
description="Bot obsługujący serwer discord Gractwa."
|
||||
onlineIndicator="1"
|
||||
/>
|
||||
<h3>
|
||||
{{ status.mainInfo.username + '#' + status.mainInfo.discriminator }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="titleCard">
|
||||
<img
|
||||
:src="
|
||||
<Card
|
||||
tabindex="0"
|
||||
:name="
|
||||
`${status.canaryInfo.username + '#' + status.canaryInfo.discriminator}`
|
||||
"
|
||||
:photoDyn="
|
||||
`https://cdn.discordapp.com/avatars/${status.canaryInfo.id}/${
|
||||
status.canaryInfo.avatar
|
||||
}.png?size=64`
|
||||
}.png?size=128`
|
||||
"
|
||||
alt="Gractwo Canary bot current avatar"
|
||||
description="Bot zastępczy do testowania nowych funkcji."
|
||||
onlineIndicator="0"
|
||||
/>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
@@ -10,6 +10,12 @@
|
||||
v-if="photo"
|
||||
width="128"
|
||||
/>
|
||||
<img
|
||||
:src="`${photoDyn}`"
|
||||
alt="Dynamic photo"
|
||||
v-if="photoDyn"
|
||||
style="width: 128px"
|
||||
/>
|
||||
</div>
|
||||
<div class="cardInnerInfo">
|
||||
<div class="cardInnerInfoTitle">
|
||||
@@ -51,6 +57,16 @@
|
||||
<i class="fab fa-discord" />
|
||||
{{ discord }}
|
||||
</a>
|
||||
<div
|
||||
class="cardOnlineIndicator"
|
||||
v-tooltip="`Offline.`"
|
||||
v-if="onlineIndicator == 0"
|
||||
/>
|
||||
<div
|
||||
class="cardOnlineIndicator isOnline"
|
||||
v-tooltip="`Online`"
|
||||
v-if="onlineIndicator == 1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,6 +80,7 @@ export default {
|
||||
name: String,
|
||||
nickname: String,
|
||||
photo: String,
|
||||
photoDyn: String,
|
||||
description: String,
|
||||
external: String,
|
||||
externalTooltip: String,
|
||||
@@ -72,6 +89,7 @@ export default {
|
||||
twitter: String,
|
||||
facebook: String,
|
||||
discord: String,
|
||||
onlineIndicator: Number,
|
||||
},
|
||||
methods: {
|
||||
copyDiscord: function() {
|
||||
@@ -162,6 +180,18 @@ export default {
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
.cardOnlineIndicator {
|
||||
background-color: var(--graytext);
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
// margin: 0.5rem;
|
||||
// background-color: var(--graytext);
|
||||
border-radius: 50%;
|
||||
align-self: center;
|
||||
&.isOnline {
|
||||
background-color: var(--green);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@ query {
|
||||
--red: #fb636b;
|
||||
--light-red: rgba(251, 99, 107, 0.25);
|
||||
--blue: #61f2ea;
|
||||
--green: #3ded97;
|
||||
--radius: 6px;
|
||||
--trandur: 0.1s;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
</g-link>
|
||||
<p style="text-align: center">
|
||||
Strona w trakcie rewrite-u! Niektóre rzeczy mogą nie działać.
|
||||
<!-- Strona w trakcie rewrite-u! Niektóre rzeczy mogą nie działać. -->
|
||||
</p>
|
||||
<div class="header-buttons">
|
||||
<g-link to="/discord" target="_blank">Discord</g-link>
|
||||
@@ -112,15 +112,17 @@
|
||||
<section>
|
||||
<h2>Status Bota Discordowego</h2>
|
||||
<p>
|
||||
Sprawdź jak się ma nasz bot discordowy - in progress!
|
||||
Sprawdź jak się ma nasz bot discordowy - w trakcie prac. Nie
|
||||
odzwierciedla stanu rzeczy.
|
||||
</p>
|
||||
<BotCard />
|
||||
</section>
|
||||
<section>
|
||||
<h3>Gractwo 2020-2021</h3>
|
||||
<p>
|
||||
Napisane i hostowane przez <a href="#jamesen">Jakuba Mańczaka</a>. Kod
|
||||
dostępny na <a href="/github" target="_blank">GitHubie</a>.
|
||||
Napisane i hostowane przez
|
||||
<g-link to="/jamesen-external">Jakuba Mańczaka</g-link>. Kod dostępny na
|
||||
<a href="/github" target="_blank">GitHubie</a>.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user