responsive version enhancements

This commit is contained in:
Čarodej
2022-01-26 11:43:49 +01:00
parent fb91c1883a
commit e22ae97a87
26 changed files with 263 additions and 140 deletions

View File

@@ -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"

View File

@@ -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>

View File

@@ -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
},

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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

View File

@@ -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>