ALHP/alhp-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added pulsar to card-title

Browse Source
This commit is contained in:
vikingowl
2024-01-24 16:02:28 +01:00
parent 38700911be
commit 0da3809c45
1 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/components/CurrentlyBuilding.vue
View File

@@ -6,8 +6,14 @@
style="border-radius: 10px; border: 2px solid grey" style="border-radius: 10px; border: 2px solid grey"
variant="elevated"> variant="elevated">
<v-card-title class="d-flex align-center justify-space-between w-100"> <v-card-title class="d-flex align-center justify-space-between w-100">
<span v-if="packageCount.building > 0">Building</span> <span v-if="packageCount.building > 0" class="d-flex">
<span v-else>Idle</span> <div class="pulsating-circle-amber me-4" style="transform: translateY(10px)" />
<span>Building</span>
</span>
<span v-else class="d-flex">
<div class="pulsating-circle-green me-4" style="transform: translateY(10px)" />
<span>Idle</span>
</span>
<v-sheet class="d-flex align-center w-100"> <v-sheet class="d-flex align-center w-100">
<v-progress-linear <v-progress-linear
:max="packageCount.built + packageCount.building + packageCount.queued" :max="packageCount.built + packageCount.building + packageCount.queued"
@@ -16,8 +22,10 @@
height="10" height="10"
rounded rounded
striped striped
style="transform: translateX(-650px)"></v-progress-linear> style="transform: translateX(-620px)"></v-progress-linear>
<span class="text-grey" style="font-size: 13px; min-width: 250px; padding-left: 50px"> <span
class="text-grey me-2"
style="font-size: 13px; min-width: 220px; width: 220px; padding-left: 60px">
Last updated Last updated
{{ {{
lastUpdatedSeconds > 59 lastUpdatedSeconds > 59
@@ -28,12 +36,12 @@
</v-sheet> </v-sheet>
</v-card-title> </v-card-title>
<v-card-text class="d-flex"> <v-card-text v-if="packageCount.building > 0 || packageCount.queued > 0" class="d-flex">
<v-list width="50%"> <v-list width="50%">
<v-list-subheader>Building</v-list-subheader> <v-list-subheader>Building</v-list-subheader>
<v-list-item v-for="(pkg, index) in packages.building" :key="index"> <v-list-item v-for="(pkg, index) in packages.building" :key="index">
<template v-slot:prepend> <template v-slot:prepend>
<div class="pulsating-circle me-4" /> <div class="pulsating-circle-amber me-4" />
</template> </template>
<v-list-item-title> <v-list-item-title>
{{ pkg.pkgbase }} <span class="text-grey">({{ pkg.repo }})</span> {{ pkg.pkgbase }} <span class="text-grey">({{ pkg.repo }})</span>
@@ -192,14 +200,35 @@ onMounted(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
.pulsating-circle { .pulsating-circle-green {
background-color: rgba(126, 206, 5, 0.94);
border-radius: 50%;
width: 12px;
height: 12px;
}
.pulsating-circle-green:before {
content: '';
display: block;
width: 200%;
height: 200%;
box-sizing: border-box;
margin-left: -50%;
margin-top: -50%;
border-radius: 50%;
background-color: rgba(126, 206, 5, 0.94);
-webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle-amber {
background-color: #f39c12f0; background-color: #f39c12f0;
border-radius: 50%; border-radius: 50%;
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
.pulsating-circle:before { .pulsating-circle-amber:before {
content: ''; content: '';
display: block; display: block;
width: 200%; width: 200%;