Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-11-10 10:18:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve mobile layout of the subscriptions page

Browse Source
This commit is contained in:
Bnyro 2022-07-28 19:58:57 +02:00
parent d35ad02c7c
commit aaeac2ff7f
2 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -106,7 +106,7 @@ b {
} }
.btn { .btn {
@apply py-2 px-4 rounded cursor-pointer; @apply h-full py-2 <md:(px-2) md:(px-4) rounded cursor-pointer;
} }
.reset { .reset {
@ -132,10 +132,6 @@ b {
@apply h-8; @apply h-8;
} }
.btn {
@apply h-full;
}
.checkbox { .checkbox {
@apply h-4 w-4; @apply h-4 w-4;
} }

12
src/components/SubscriptionsPage.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<h1 class="font-bold text-center" v-t="'titles.subscriptions'" /> <h1 class="font-bold text-center my-4" v-t="'titles.subscriptions'" />
<div v-if="authenticated" class="flex justify-between w-full"> <div v-if="authenticated" class="flex justify-between w-full">
<div> <div class="flex">
<button class="btn mr-0.5"> <button class="btn mx-1">
<router-link to="/import" v-t="'actions.import_from_json'" /> <router-link to="/import" v-t="'actions.import_from_json'" />
</button> </button>
<button class="btn" @click="exportHandler" v-t="'actions.export_to_json'" /> <button class="btn" @click="exportHandler" v-t="'actions.export_to_json'" />
@ -15,10 +15,10 @@
<div class="grid"> <div class="grid">
<div class="mb-3" v-for="subscription in subscriptions" :key="subscription.url"> <div class="mb-3" v-for="subscription in subscriptions" :key="subscription.url">
<div class="flex justify-center place-items-center"> <div class="flex justify-center place-items-center">
<div class="w-full grid grid-cols-3"> <div class="w-full flex justify-between items-center">
<router-link :to="subscription.url" class="col-start-2 block flex text-center font-bold text-4xl"> <router-link :to="subscription.url" class="flex text-center font-bold text-4xl">
<img :src="subscription.avatar" class="rounded-full" width="48" height="48" /> <img :src="subscription.avatar" class="rounded-full" width="48" height="48" />
<span v-text="subscription.name" /> <span class="mx-2" v-text="subscription.name" />
</router-link> </router-link>
<button <button
class="btn !w-min" class="btn !w-min"