mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
responsive version enhancements
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
|
||||
<!--Payment Options-->
|
||||
<div v-if="isPaymentOptionPage">
|
||||
<PopupContent class="px-4">
|
||||
<PopupContent>
|
||||
|
||||
<!--Stripe implementation-->
|
||||
<PaymentMethod
|
||||
@@ -95,7 +95,7 @@
|
||||
</div>
|
||||
|
||||
<!--List available plans-->
|
||||
<div class="px-4">
|
||||
<div>
|
||||
<PlanDetail
|
||||
v-for="(plan, i) in plans.data"
|
||||
:plan="plan"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{{ $t('Balance') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ user.data.relationships.balance.data.attributes.formatted }}
|
||||
</b>
|
||||
|
||||
|
||||
@@ -4,21 +4,23 @@
|
||||
{{ $t('Edit your Subscription') }}
|
||||
</FormLabel>
|
||||
|
||||
<AppInputSwitch v-if="subscription.attributes.status !== 'cancelled'" :title="$t('Cancel Subscription')" :description="$t('You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.')">
|
||||
<AppInputButton v-if="subscription.attributes.status !== 'cancelled'" :title="$t('Cancel Subscription')" :description="$t('You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.')">
|
||||
<ButtonBase @click.native="cancelSubscriptionConfirmation" :loading="isCancelling" class="sm:w-auto w-full" button-style="secondary">
|
||||
{{ $t('Cancel Now') }}
|
||||
</ButtonBase>
|
||||
</AppInputSwitch>
|
||||
</AppInputButton>
|
||||
|
||||
<AppInputSwitch :title="$t('Upgrade or Downgrade Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
|
||||
<AppInputButton :title="$t('Upgrade or Downgrade Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
|
||||
<ButtonBase @click.native="$openUpgradeOptions" class="sm:w-auto w-full" button-style="secondary">
|
||||
{{ $t('Change Plan') }}
|
||||
</ButtonBase>
|
||||
</AppInputSwitch>
|
||||
</AppInputButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputButton from "../Admin/AppInputButton";
|
||||
import AppInputText from "../Admin/AppInputText";
|
||||
import AppInputSwitch from "../Admin/AppInputSwitch"
|
||||
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
@@ -28,7 +30,9 @@
|
||||
export default {
|
||||
name: 'UserEditSubscription',
|
||||
components: {
|
||||
AppInputButton,
|
||||
AppInputSwitch,
|
||||
AppInputText,
|
||||
ButtonBase,
|
||||
FormLabel
|
||||
},
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{{ $t('Subscription') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ $t('Free Plan') }}
|
||||
</b>
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{{ $t('Failed Payments') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
-{{ user.data.meta.totalDebt.formatted }}
|
||||
</b>
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{{ $t('Subscription') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ status }}
|
||||
</b>
|
||||
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
{{ $t('Update Payments') }}
|
||||
</FormLabel>
|
||||
|
||||
<AppInputSwitch :title="$t('Update your Payment Method')" :description="$t('You will be redirected to your payment provider to edit your payment method.')" :is-last="true">
|
||||
<AppInputButton :title="$t('Update your Payment Method')" :description="$t('You will be redirected to your payment provider to edit your payment method.')" :is-last="true">
|
||||
<ButtonBase @click.native="updatePaymentMethod" :loading="isGeneratedUpdateLink" class="sm:w-auto w-full" button-style="theme">
|
||||
{{ $t('Update Payments') }}
|
||||
</ButtonBase>
|
||||
</AppInputSwitch>
|
||||
</AppInputButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -18,10 +18,12 @@
|
||||
import FormLabel from "../Others/Forms/FormLabel"
|
||||
import axios from "axios";
|
||||
import {events} from "../../bus";
|
||||
import AppInputButton from "../Admin/AppInputButton";
|
||||
|
||||
export default {
|
||||
name: 'UserUpdatePaymentMethodsExternally',
|
||||
components: {
|
||||
AppInputButton,
|
||||
AppInputSwitch,
|
||||
ButtonBase,
|
||||
FormLabel
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{{ $t('Usage Estimates') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ user.data.meta.usages.costEstimate }}
|
||||
</b>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user