mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-29 16:33:17 +00:00
45 lines
1 KiB
Vue
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>
|