53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<h2 class="text-2xl">{{ title }}</h2>
|
|
<div class="flex items-center mb-3 gap-1 eventMetadataBlock">
|
|
<slot name="icon"></slot>
|
|
<!-- Custom icons -->
|
|
<!-- <span
|
|
class="icon is-medium"
|
|
v-if="icon && icon.substring(0, 7) === 'mz:icon'"
|
|
>
|
|
<img
|
|
:src="`/img/${icon.substring(8)}_monochrome.svg`"
|
|
width="32"
|
|
height="32"
|
|
/>
|
|
</span>
|
|
<o-icon v-else-if="icon" :icon="icon" size="is-medium" /> -->
|
|
<div class="content-wrapper">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
defineProps<{
|
|
title: string;
|
|
}>();
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
div.eventMetadataBlock {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1.75rem;
|
|
|
|
.content-wrapper {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
max-width: calc(100vw - 32px - 20px);
|
|
|
|
&.padding-left {
|
|
padding: 0 20px;
|
|
|
|
a {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|