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

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
Download patch file Download diff file Expand all files Collapse all files

31
src/components/SubscriptionsPage.vue
View file

@ -1,36 +1,47 @@
<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"
multiple="multiple"
@change="importGroupsHandler"
/>
<label <label
for="fileSelector" for="fileSelector"
class="btn" class="btn"
v-text="`${$t('actions.import_from_json')} (${$t('titles.channel_groups')})`" 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 <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>
<div class="flex gap-1 self-center">
<!-- subscriptions count, only shown if there are any --> <!-- subscriptions count, only shown if there are any -->
<i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{ <i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{
subscriptions.length subscriptions.length
}}</i18n-t> }}</i18n-t>
</div> </div>
</div>
<br /> <br />
<hr /> <hr />
<div class="w-full flex flex-wrap"> <div class="w-full flex flex-wrap">