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

Merge pull request #3210 from kskarthik/master

Browse source 
feat: improve the layout of SubscriptionsPage
This commit is contained in:
Bnyro 2023-12-09 18:27:44 +01:00 • committed by GitHub
commit 6a2310d874
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/components/SubscriptionsPage.vue
View file

@ -1,35 +1,46 @@
<template>
<h1 v-t="'titles.subscriptions'" class="my-4 text-center font-bold" />
<!-- import / export section -->
<div class="w-full flex justify-between">
<div class="flex gap-2">
<div class="flex flex-wrap justify-between">
<div class="flex gap-1">
<!-- import json/csv -->
<button class="btn">
<router-link v-t="'actions.import_from_json_csv'" to="/import" />
</button>
<!-- export to json -->
<button v-t="'actions.export_to_json'" class="btn" @click="exportHandler" />
<input
id="fileSelector"
ref="fileSelector"
type="file"
class="display-none"
multiple="multiple"
@change="importGroupsHandler"
/>
<label
for="fileSelector"
class="btn"
v-text="`${$t('actions.import_from_json')} (${$t('titles.channel_groups')})`"
/>
</div>
<div class="flex gap-1 flex-wrap m-1">
<!-- import channel groups to json-->
<div>
<label
for="fileSelector"
class="btn"
v-text="`${$t('actions.import_from_json')} (${$t('titles.channel_groups')})`"
/>
<input
id="fileSelector"
ref="fileSelector"
type="file"
class="hidden"
multiple="multiple"
@change="importGroupsHandler"
/>
</div>
<!-- export channel groups to json -->
<button
class="btn"
@click="exportGroupsHandler"
v-text="`${$t('actions.export_to_json')} (${$t('titles.channel_groups')})`"
/>
</div>
<!-- subscriptions count, only shown if there are any -->
<i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{
subscriptions.length
}}</i18n-t>
<div class="flex gap-1 self-center">
<!-- subscriptions count, only shown if there are any -->
<i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{
subscriptions.length
}}</i18n-t>
</div>
</div>
<br />
<hr />