130 lines
2.9 KiB
Vue
130 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<my-header :index-name="indexName" :small-format="false" />
|
|
|
|
<main>
|
|
<div class="card search-home">
|
|
<img :src="searchImageUrl" alt="" />
|
|
|
|
<form id="search-anchor" role="search" onsubmit="return false;">
|
|
<search-input :label="false"></search-input>
|
|
</form>
|
|
|
|
<h3>
|
|
<SafeHTML>
|
|
{{
|
|
$gettext(
|
|
'Search for your favorite videos, channels and playlists on <a class="peertube-link" href="%{indexedInstancesUrl}" target="_blank">%{instancesCount} PeerTube websites</a> indexed by %{indexName}!',
|
|
{ instancesCount: instancesCount, indexedInstancesUrl: indexedInstancesUrl, indexName: indexName },
|
|
true
|
|
)
|
|
}}
|
|
</SafeHTML>
|
|
|
|
</h3>
|
|
</div>
|
|
|
|
<search-warning class="search-warning" :index-name="indexName" :is-block-mode="true" />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
import Header from '../components/Header.vue'
|
|
import SearchWarning from '../components/SearchWarning.vue'
|
|
import SearchInput from '../components/SearchInput.vue'
|
|
import { getConfig } from '../shared/config'
|
|
import { buildApiUrl } from '@/shared/utils'
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
'search-input': SearchInput,
|
|
'search-warning': SearchWarning,
|
|
'my-header': Header
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
instancesCount: undefined,
|
|
indexedInstancesUrl: '',
|
|
indexName: '',
|
|
formSearch: '',
|
|
searchImageUrl: '',
|
|
|
|
introSentence: ''
|
|
}
|
|
},
|
|
|
|
async mounted () {
|
|
const config = await getConfig()
|
|
|
|
this.instancesCount = config.indexedHostsCount
|
|
this.indexedInstancesUrl = config.indexedInstancesUrl
|
|
this.indexName = config.searchInstanceName
|
|
|
|
this.searchImageUrl = config.searchInstanceSearchImage
|
|
? buildApiUrl(config.searchInstanceSearchImage)
|
|
: buildApiUrl('/img/sepia-search.svg')
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use 'sass:math';
|
|
|
|
@import '../scss/_variables';
|
|
@import '../scss/bootstrap-mixins';
|
|
|
|
main {
|
|
margin: auto;
|
|
}
|
|
|
|
h3 {
|
|
@include margin(2rem auto 0 auto);
|
|
|
|
max-width: 600px;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
font-size: 1rem;
|
|
line-height: inherit;
|
|
|
|
a {
|
|
color: $orange-main;
|
|
|
|
&:hover {
|
|
color: $orange-600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card {
|
|
@include margin-bottom(4rem);
|
|
|
|
img {
|
|
display: block;
|
|
width: 290px;
|
|
height: 250px;
|
|
margin: 0 auto 1rem auto;
|
|
}
|
|
}
|
|
|
|
form {
|
|
max-width: 700px;
|
|
margin: auto;
|
|
}
|
|
|
|
.search-home img {
|
|
position: relative;
|
|
bottom: -8px;
|
|
margin-bottom: 0;
|
|
z-index: 100;
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
width: 200px;
|
|
height: auto;
|
|
bottom: -5px;
|
|
}
|
|
}
|
|
</style>
|