143 lines
3.0 KiB
Vue
143 lines
3.0 KiB
Vue
<template>
|
|
<div>
|
|
<label for="search" :class="{ 'visually-hidden': !label }">{{ $gettext('My search') }}</label>
|
|
|
|
<div class="input-container">
|
|
<input
|
|
v-model="formSearch"
|
|
:placeholder="inputPlaceholder"
|
|
autofocus
|
|
type="text"
|
|
name="search"
|
|
autocapitalize="off"
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
maxlength="1024"
|
|
@keydown.enter="search"
|
|
>
|
|
|
|
<router-link class="peertube-button peertube-primary-button search-button" :to="{ path: '/search', query: { ...getUrlQuery() } }">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<circle cx="11" cy="11" r="8" />
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
</svg>
|
|
|
|
<span v-if="formSearch">{{ $gettext('Search!') }}</span>
|
|
<span v-else>{{ $gettext('Explore!') }}</span>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { SearchUrl } from '@/models/search-url.model'
|
|
import { defineComponent } from 'vue'
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
label: Boolean
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
formSearch: ''
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
inputPlaceholder (): string {
|
|
return this.$gettext('Keyword, channel, video, playlist, etc.')
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.loadUrl()
|
|
},
|
|
|
|
methods: {
|
|
getUrlQuery (): SearchUrl {
|
|
return { ...this.$route.query, search: this.formSearch }
|
|
},
|
|
|
|
loadUrl () {
|
|
const query = this.$route.query as SearchUrl
|
|
|
|
if (query.search) this.formSearch = query.search
|
|
else this.formSearch = undefined
|
|
},
|
|
|
|
search (event: Event) {
|
|
event.preventDefault()
|
|
|
|
this.$router.push({ path: '/search', query: { ...this.getUrlQuery() } })
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use 'sass:math';
|
|
|
|
@import '../scss/_variables';
|
|
@import '../scss/bootstrap-mixins';
|
|
|
|
.input-container {
|
|
display: flex;
|
|
height: 45px;
|
|
margin: auto;
|
|
}
|
|
|
|
label {
|
|
font-size: 1.125rem;
|
|
display: block;
|
|
font-weight: $font-bold;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
input[type=text] {
|
|
background-color: #fff;
|
|
border-radius: 2px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
|
|
border: 0;
|
|
color: #000;
|
|
flex-grow: 1;
|
|
padding: 0 20px;
|
|
height: 100%;
|
|
}
|
|
|
|
.search-button {
|
|
text-decoration: none;
|
|
border-radius: 0 2px 2px 0;
|
|
height: 100%;
|
|
padding: 0 1rem 0 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
svg {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
min-width: 130px;
|
|
}
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|