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

139
src/components/BotCard.vue
View File

@@ -1,87 +1,43 @@
<template> <template>
<div v-if="status"> <div v-if="status">
<div class="card"> <Card
<div class="titleCard"> tabindex="0"
<img :name="
:src=" `${status.mainInfo.username + '#' + status.mainInfo.discriminator}`
"
:photoDyn="
`https://cdn.discordapp.com/avatars/${status.mainInfo.id}/${ `https://cdn.discordapp.com/avatars/${status.mainInfo.id}/${
status.mainInfo.avatar 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> <Card
{{ status.mainInfo.username + '#' + status.mainInfo.discriminator }} tabindex="0"
</h3> :name="
</div> `${status.canaryInfo.username + '#' + status.canaryInfo.discriminator}`
</div> "
<div class="card"> :photoDyn="
<div class="titleCard">
<img
:src="
`https://cdn.discordapp.com/avatars/${status.canaryInfo.id}/${ `https://cdn.discordapp.com/avatars/${status.canaryInfo.id}/${
status.canaryInfo.avatar 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> </div>
</template> </template>
<script> <script>
import axios from 'axios'; import axios from 'axios';
import Card from '~/components/Card.vue';
export default { export default {
name: 'BotCard', name: 'BotCard',
components: {
Card,
},
data() { data() {
return { return {
status: null, status: null,
@@ -104,24 +60,37 @@ export default {
}; };
</script> </script>
//
<style lang="scss" scoped> <style lang="scss" scoped>
.card { // .card {
display: inline-block; // display: inline-block;
border: 1px solid var(--gray); // border: 1px solid var(--gray);
border-radius: 4px; // border-radius: 4px;
padding: 1rem; // padding: 1rem;
margin: 1rem 0.2rem; // margin: 1rem 0.2rem;
width: 100%; // width: 100%;
transition-duration: var(--trandur); // transition-duration: var(--trandur);
.titleCard { // .cardInner {
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
justify-content: baseline; // .cardTitle {
} // display: flex;
&:hover, // align-items: baseline;
&:focus { // .botOnlineStatus {
border: 1px solid transparent; // width: 0.5rem;
box-shadow: 0 0 10px black; // 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> </style>

30
src/components/Card.vue
View File

@@ -10,6 +10,12 @@
v-if="photo" v-if="photo"
width="128" width="128"
/> />
<img
:src="`${photoDyn}`"
alt="Dynamic photo"
v-if="photoDyn"
style="width: 128px"
/>
</div> </div>
<div class="cardInnerInfo"> <div class="cardInnerInfo">
<div class="cardInnerInfoTitle"> <div class="cardInnerInfoTitle">
@@ -51,6 +57,16 @@
<i class="fab fa-discord" /> <i class="fab fa-discord" />
{{ discord }} {{ discord }}
</a> </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> </div>
</div> </div>
@@ -64,6 +80,7 @@ export default {
name: String, name: String,
nickname: String, nickname: String,
photo: String, photo: String,
photoDyn: String,
description: String, description: String,
external: String, external: String,
externalTooltip: String, externalTooltip: String,
@@ -72,6 +89,7 @@ export default {
twitter: String, twitter: String,
facebook: String, facebook: String,
discord: String, discord: String,
onlineIndicator: Number,
}, },
methods: { methods: {
copyDiscord: function() { copyDiscord: function() {
@@ -162,6 +180,18 @@ export default {
color: var(--black); 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);
}
}
} }
} }
} }

1
src/layouts/Default.vue
View File

@@ -23,6 +23,7 @@ query {
--red: #fb636b; --red: #fb636b;
--light-red: rgba(251, 99, 107, 0.25); --light-red: rgba(251, 99, 107, 0.25);
--blue: #61f2ea; --blue: #61f2ea;
--green: #3ded97;
--radius: 6px; --radius: 6px;
--trandur: 0.1s; --trandur: 0.1s;
} }

10
src/pages/Index.vue
View File

@@ -11,7 +11,7 @@
</div> </div>
</g-link> </g-link>
<p style="text-align: center"> <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> </p>
<div class="header-buttons"> <div class="header-buttons">
<g-link to="/discord" target="_blank">Discord</g-link> <g-link to="/discord" target="_blank">Discord</g-link>
@@ -112,15 +112,17 @@
<section> <section>
<h2>Status Bota Discordowego</h2> <h2>Status Bota Discordowego</h2>
<p> <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> </p>
<BotCard /> <BotCard />
</section> </section>
<section> <section>
<h3>Gractwo 2020-2021</h3> <h3>Gractwo 2020-2021</h3>
<p> <p>
Napisane i hostowane przez <a href="#jamesen">Jakuba Mańczaka</a>. Kod Napisane i hostowane przez
dostępny na <a href="/github" target="_blank">GitHubie</a>. <g-link to="/jamesen-external">Jakuba Mańczaka</g-link>. Kod dostępny na
<a href="/github" target="_blank">GitHubie</a>.
</p> </p>
</section> </section>
</main> </main>