pixelfed/resources/assets/components/groups/partials/Page/GroupBanner.vue
Daniel Supernault 3811a1cd65
Add Groups vues
2024-07-09 23:52:08 -06:00

45 lines
1 KiB
Vue

<template>
<div class="px-md-5" style="background-color: #fff;">
<img
v-if="group.metadata && group.metadata.hasOwnProperty('header')"
:src="group.metadata.header.url"
class="header-image">
<div v-else class="header-jumbotron"></div>
</div>
</template>
<script>
export default {
props: {
group: {
type: Object
}
}
}
</script>
<style lang="scss" scoped>
.header-image {
width: 100%;
height: auto;
object-fit: cover;
max-height: 220px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-top:-1px;
border: 1px solid var(--light);
margin-bottom: 0px;
@media(min-width: 768px) {
max-height: 420px;
}
}
.header-jumbotron {
background-color: #F3F4F6;
height: 320px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
</style>