mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
Filter layout small (#2458)
* improve feed layout on small screens * improve feed layout on small screens
This commit is contained in:
parent
ab991b4df2
commit
9b5f9e1440
@ -1,40 +1,49 @@
|
||||
<template>
|
||||
<h1 v-t="'titles.feed'" class="font-bold text-center my-4" />
|
||||
|
||||
<button class="btn mr-2" @click="exportHandler">
|
||||
<router-link to="/subscriptions">Subscriptions</router-link>
|
||||
</button>
|
||||
<div class="flex flex-wrap md:items-center flex-col md:flex-row gap-2 children:(flex gap-1 items-center)">
|
||||
<span>
|
||||
<label for="filters">
|
||||
<strong v-text="`${$t('actions.filter')}:`" />
|
||||
</label>
|
||||
<select
|
||||
id="filters"
|
||||
v-model="selectedFilter"
|
||||
default="all"
|
||||
class="select flex-grow"
|
||||
@change="onFilterChange()"
|
||||
>
|
||||
<option v-for="filter in availableFilters" :key="filter" :value="filter" v-t="`video.${filter}`" />
|
||||
</select>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<a :href="getRssUrl">
|
||||
<span>
|
||||
<label for="group-selector">
|
||||
<strong v-text="`${$t('titles.channel_groups')}:`" />
|
||||
</label>
|
||||
<select id="group-selector" v-model="selectedGroupName" default="" class="select flex-grow">
|
||||
<option value="" v-t="`video.all`" />
|
||||
<option
|
||||
v-for="group in channelGroups"
|
||||
:key="group.groupName"
|
||||
:value="group.groupName"
|
||||
v-text="group.groupName"
|
||||
/>
|
||||
</select>
|
||||
</span>
|
||||
|
||||
<span class="md:ml-auto">
|
||||
<SortingSelector by-key="uploaded" @apply="order => videos.sort(order)" />
|
||||
</span>
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
<span class="flex gap-2">
|
||||
<router-link class="btn" to="/subscriptions">Subscriptions</router-link>
|
||||
<a :href="getRssUrl" class="btn">
|
||||
<font-awesome-icon icon="rss" />
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<label for="filters" class="ml-10 mr-2">
|
||||
<strong v-text="`${$t('actions.filter')}:`" />
|
||||
</label>
|
||||
<select id="filters" v-model="selectedFilter" default="all" class="select w-auto" @change="onFilterChange()">
|
||||
<option v-for="filter in availableFilters" :key="filter" :value="filter" v-t="`video.${filter}`" />
|
||||
</select>
|
||||
|
||||
<label for="group-selector" class="ml-10 mr-2">
|
||||
<strong v-text="`${$t('titles.channel_groups')}:`" />
|
||||
</label>
|
||||
<select id="group-selector" v-model="selectedGroupName" default="" class="select w-auto">
|
||||
<option value="" v-t="`video.all`" />
|
||||
<option
|
||||
v-for="group in channelGroups"
|
||||
:key="group.groupName"
|
||||
:value="group.groupName"
|
||||
v-text="group.groupName"
|
||||
/>
|
||||
</select>
|
||||
|
||||
<span class="md:float-right">
|
||||
<SortingSelector by-key="uploaded" @apply="order => videos.sort(order)" />
|
||||
</span>
|
||||
|
||||
<hr />
|
||||
|
||||
<LoadingIndicatorPage :show-content="videosStore != null" class="video-grid">
|
||||
|
@ -1,14 +1,12 @@
|
||||
<template>
|
||||
<h1 class="font-bold text-center" v-t="'titles.history'" />
|
||||
|
||||
<div class="flex">
|
||||
<div>
|
||||
<button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
|
||||
<div class="flex md:items-center gap-2 flex-col md:flex-row">
|
||||
<button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
|
||||
|
||||
<button class="btn mx-3" v-t="'actions.export_to_json'" @click="exportHistory" />
|
||||
</div>
|
||||
<button class="btn" v-t="'actions.export_to_json'" @click="exportHistory" />
|
||||
|
||||
<div class="right-1">
|
||||
<div class="ml-auto flex gap-1 items-center">
|
||||
<SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -45,13 +45,13 @@ export default {
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@apply w-min m-auto px-8 bg-white p-6 rounded-xl min-w-[20vw] relative;
|
||||
@apply w-min m-auto bg-white p-5 rounded-xl min-w-[20vw] relative;
|
||||
}
|
||||
.dark .modal-container {
|
||||
@apply bg-dark-700;
|
||||
}
|
||||
|
||||
.modal-container > button {
|
||||
@apply absolute right-8 top-6;
|
||||
@apply absolute right-2.5 top-1;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<label for="ddlSortBy" v-t="'actions.sort_by'" />
|
||||
<select id="ddlSortBy" v-model="selectedSort" class="select w-auto">
|
||||
<select id="ddlSortBy" v-model="selectedSort" class="select flex-grow">
|
||||
<option v-for="(value, key) in options" v-t="`actions.${key}`" :key="key" :value="value" />
|
||||
</select>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user