kavin/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-12-14 06:10:28 +05:30
Code Issues Projects Releases Wiki Activity

feat: improve the layout of SubscriptionsPage

Browse Source 
* fixed the overflow issue
* hidden the input area so that it improves the look
* added some code comments
This commit is contained in:
Sai Karthik 2023-12-02 13:53:30 +05:30
parent fa57591687
commit 7be93d6ef9
No known key found for this signature in database
GPG Key ID: F5B9A961BF6EAF0E
1 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/SubscriptionsPage.vue
View File

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