105 lines
2.2 KiB
Vue
105 lines
2.2 KiB
Vue
<template>
|
|
<div class="root">
|
|
<label class="d-none d-sm-inline" for="sort">{{ $gettext('Sort by:') }}</label>
|
|
|
|
<div class="peertube-button peertube-secondary-button">
|
|
<select id="sort" v-model="formSort" name="sort">
|
|
<option value="-match">{{ $gettext('Best match') }}</option>
|
|
|
|
<option value="-createdAt">{{ $gettext('Most recent') }}</option>
|
|
|
|
<option value="createdAt">{{ $gettext('Least recent') }}</option>
|
|
</select>
|
|
|
|
<span class="focus"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { SearchUrl } from '@/models'
|
|
import { defineComponent } from 'vue'
|
|
|
|
export default defineComponent({
|
|
data () {
|
|
return {
|
|
formSort: '-match'
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
formSort () {
|
|
this.updateUrl()
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.loadUrl()
|
|
},
|
|
|
|
methods: {
|
|
updateUrl () {
|
|
this.$router.push({ path: '/search', query: { ...this.$route.query, sort: this.formSort }})
|
|
},
|
|
|
|
loadUrl () {
|
|
const query = this.$route.query as SearchUrl
|
|
|
|
if (query.sort) this.formSort = query.sort
|
|
else this.formSort = '-match'
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use 'sass:math';
|
|
|
|
@import '../scss/_variables';
|
|
|
|
.peertube-secondary-button {
|
|
margin-left: 1rem;
|
|
padding: 0;
|
|
position: relative;
|
|
|
|
select {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
appearance: none;
|
|
background-color: transparent;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: $font-bold;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
padding: 0.5rem 2rem 0.5rem 1rem;
|
|
|
|
&:focus + span {
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
border: 2px solid var(--select-focus);
|
|
border-radius: inherit;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
width: 8px;
|
|
height: 5px;
|
|
background-color: $main-font-color;
|
|
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
|
|
display: inline-block;
|
|
margin-left: 1.5rem;
|
|
margin-right: 0.75rem;
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(50% - 2px);
|
|
}
|
|
}
|
|
|
|
</style>
|