Files
dragonroll/frontend/app/components/partials/CampaignEntry.vue
BinarySandia04 76bb9fbb30
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 36s
A lot of progress
2026-04-28 00:20:15 +02:00

84 lines
1.7 KiB
Vue

<script setup>
import { onMounted, ref } from 'vue';
import { AddSound } from '../../services/Sound';
const props = defineProps(['data']);
const data = props.data;
const title = ref("");
const container = ref(null);
onMounted(() => {
title.value = data.name;
if (data.color && container.value) {
container.value.style.background = `linear-gradient(90deg, ${data.color}, ${data.color}44)`;
}
AddSound(container.value)
});
function ViewCampaign(){
// ConnectToCampaign(data);
// DisplayCampaign(data);
}
</script>
<template>
<div class="campaign-entry-container" ref="container">
<div class="main-campaign-entry-container-inner">
<img class="campaign-icon" src="/img/def-avatar.jpg" draggable="false">
<div class="campaign-info">
<b>{{ title }}</b>
</div>
<div class="campaign-user-actions">
<button class="btn-primary button-small sound-click" v-on:click.prevent="ViewCampaign">{{ $t('general.open')}}</button>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.button-small {
height: 32px;
padding: 10px;
}
.campaign-entry-container {
background-color: var(--color-background-softer);
width: 100%;
user-select: none;
border-bottom: 1px solid var(--color-border);
&:first-child {
border-top: 1px solid var(--color-border);
}
}
.main-campaign-entry-container-inner {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.campaign-info {
text-align: left;
margin-left: 10px;
}
.campaign-icon {
width: 40px;
height: 40px;
}
.campaign-user-actions {
margin-left: auto;
}
</style>