118 lines
2.5 KiB
Vue
118 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<header>
|
|
<interface-language-dropdown class="interface-language-dropdown" />
|
|
|
|
<h1>
|
|
<router-link to="/" :title="$gettext('Come back to homepage')">
|
|
<span v-if="configLoaded && !titleImageUrl">{{ indexName }}</span>
|
|
|
|
<img v-else class="title-image" :src="titleImageUrl" :alt="indexName" />
|
|
</router-link>
|
|
</h1>
|
|
|
|
<template v-if="!smallFormat">
|
|
<h4>
|
|
<SafeHTML>
|
|
{{
|
|
$gettext('A search engine of <a class="peertube-link" href="https://joinpeertube.org" target="_blank">PeerTube</a> videos, channels and playlists', {}, true)
|
|
}}
|
|
</SafeHTML>
|
|
|
|
<br />
|
|
|
|
<SafeHTML>
|
|
{{
|
|
$gettext('Developed by <a class="peertube-link" href="https://framasoft.org" target="_blank">Framasoft</a>', {}, true)
|
|
}}
|
|
</SafeHTML>
|
|
</h4>
|
|
</template>
|
|
</header>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
import { getConfig } from '../shared/config'
|
|
import { buildApiUrl } from '../shared/utils'
|
|
import InterfaceLanguageDropdown from './InterfaceLanguageDropdown.vue'
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
'interface-language-dropdown': InterfaceLanguageDropdown
|
|
},
|
|
|
|
props: {
|
|
indexName: String,
|
|
smallFormat: Boolean,
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
configLoaded: false,
|
|
titleImageUrl: '',
|
|
}
|
|
},
|
|
|
|
async mounted () {
|
|
const config = await getConfig()
|
|
|
|
this.titleImageUrl = config.searchInstanceNameImage
|
|
? buildApiUrl(config.searchInstanceNameImage)
|
|
: ''
|
|
|
|
this.configLoaded = true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '../scss/_variables';
|
|
@import '../scss/bootstrap-mixins.scss';
|
|
|
|
header {
|
|
@include margin-bottom(3rem);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.interface-language-dropdown {
|
|
width: 20px;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
}
|
|
|
|
h1 {
|
|
@include font-size(3rem);
|
|
|
|
// Because it's loaded dynamically
|
|
min-height: 70px;
|
|
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.title-image {
|
|
width: 500px;
|
|
height: 78px;
|
|
}
|
|
|
|
h4 {
|
|
@include font-size(1.25rem);
|
|
|
|
font-weight: normal;
|
|
text-align: center;
|
|
line-height: inherit;
|
|
margin: 1rem 0 0;
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
@include font-size(1rem);
|
|
}
|
|
}
|
|
}
|
|
</style>
|