TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Filter layout small (#2458)

Browse source 
* improve feed layout on small screens

* improve feed layout on small screens
This commit is contained in:
Robert Kleinschuster 2023-05-26 17:30:44 +02:00 committed by GitHub
parent ab991b4df2
commit 9b5f9e1440
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/components/FeedPage.vue
View file

@ -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">

10
src/components/HistoryPage.vue
View file

@ -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>

4
src/components/ModalComponent.vue
View file

@ -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>

2
src/components/SortingSelector.vue
View file

@ -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>