krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 15:48:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve sub styling

Browse Source
This commit is contained in:
Phillip Thelen
2024-07-29 16:12:35 +02:00
parent abf5629f80
commit 26d5a4503c
1 changed files with 78 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
View File

@@ -1,16 +1,12 @@
<template> <template>
<form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })"> <form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })">
<div class="card mt-2"> <div class="card mt-2">
<div class="card-header"> <div class="card-header">
<h3 <h3 class="mb-0 mt-0" :class="{ 'open': expand }" @click="expand = !expand">
class="mb-0 mt-0" Subscription, Monthly Perks
:class="{'open': expand}" </h3>
@click="expand = !expand" </div>
> <div v-if="expand" class="card-body">
Subscription, Monthly Perks
</h3>
</div>
<div v-if="expand" class="card-body">
<div v-if="hero.purchased.plan.paymentMethod"> <div v-if="hero.purchased.plan.paymentMethod">
Payment method: Payment method:
<strong>{{ hero.purchased.plan.paymentMethod }}</strong> <strong>{{ hero.purchased.plan.paymentMethod }}</strong>
@@ -23,43 +19,33 @@
Group plan ID: Group plan ID:
<strong>{{ hero.purchased.plan.owner }}</strong> <strong>{{ hero.purchased.plan.owner }}</strong>
</div> </div>
<div <div v-if="hero.purchased.plan.dateCreated" class="form-group row">
v-if="hero.purchased.plan.dateCreated" <label class="col-sm-3 col-form-label">
class="form-group row"
>
<label>
Creation date: Creation date:
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<input <div class="input-group">
v-model="hero.purchased.plan.dateCreated" <input v-model="hero.purchased.plan.dateCreated" class="form-control" type="text">
class="form-control" <div class="input-group-append">
type="text" <strong>
> {{ dateFormat(hero.purchased.plan.dateCreated) }}
<div class="input-group-append"> </strong>
<strong> </div>
{{ dateFormat(hero.purchased.plan.dateCreated) }}
</strong>
</div>
</div> </div>
</div>
</div> </div>
<div <div v-if="hero.purchased.plan.dateCurrentTypeCreated" class="form-group row">
v-if="hero.purchased.plan.dateCurrentTypeCreated"
class="form-group row"
>
<label class="col-sm-3 col-form-label"> <label class="col-sm-3 col-form-label">
Start date for current subscription type: Current sub start date:
</label> </label>
<div class="col-sm-9 input-group"> <div class="col-sm-9">
<input <div class="input-group">
v-model="hero.purchased.plan.dateCurrentTypeCreated" <input v-model="hero.purchased.plan.dateCurrentTypeCreated" class="form-control" type="text">
class="form-control" <div class="input-group-append">
type="text" <strong>
> {{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}
<div class="input-group-append"> </strong>
<strong> </div>
{{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}
</strong>
</div> </div>
</div> </div>
</div> </div>
@@ -67,98 +53,65 @@
<label class="col-sm-3 col-form-label"> <label class="col-sm-3 col-form-label">
Termination date: Termination date:
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<div class="input-group"> <div class="input-group">
<input <input v-model="hero.purchased.plan.dateTerminated" class="form-control" type="text">
v-model="hero.purchased.plan.dateTerminated" <div class="input-group-append">
class="form-control" <strong class="input-group-text">
type="text" {{ dateFormat(hero.purchased.plan.dateTerminated) }}
> </strong>
<div class="input-group-append"> </div>
<strong class="input-group-text">
{{ dateFormat(hero.purchased.plan.dateTerminated) }}
</strong>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-3 col-form-label"> <label class="col-sm-3 col-form-label">
Consecutive months: Consecutive months:
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<input <input v-model="hero.purchased.plan.consecutive.count" class="form-control" type="number" min="0" step="1">
v-model="hero.purchased.plan.consecutive.count" </div>
class="form-control"
type="number"
min="0"
step="1"
>
</div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-3 col-form-label"> <label class="col-sm-3 col-form-label">
Perk offset months: Perk offset months:
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<input <input v-model="hero.purchased.plan.consecutive.offset" class="form-control" type="number" min="0" step="1">
v-model="hero.purchased.plan.consecutive.offset" </div>
class="form-control"
type="number"
min="0"
step="1"
>
</div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-3 col-form-label"> <label class="col-sm-3 col-form-label">
Perk month count: Perk month count:
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<input <input v-model="hero.purchased.plan.perkMonthCount" class="form-control" type="number" min="0" max="2"
v-model="hero.purchased.plan.perkMonthCount" step="1">
class="form-control"
type="number"
min="0"
max="2"
step="1"
>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-3 col-form-label"> <label class="col-sm-3 col-form-label">
Next Mystic Hourglass: Next Mystic Hourglass:
</label> </label>
<strong class="col-sm-9 col-form-label">{{ nextHourglassDate }}</strong> <strong class="col-sm-9 col-form-label">{{ nextHourglassDate }}</strong>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-3 col-form-label"> <label class="col-sm-3 col-form-label">
Mystic Hourglasses: Mystic Hourglasses:
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<input <input v-model="hero.purchased.plan.consecutive.trinkets" class="form-control" type="number" min="0"
v-model="hero.purchased.plan.consecutive.trinkets" step="1">
class="form-control" </div>
type="number"
min="0"
step="1"
>
</div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-3 col-form-label"> <label class="col-sm-3 col-form-label">
Gem cap increase: Gem cap increase:
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<input <input v-model="hero.purchased.plan.consecutive.gemCapExtra" class="form-control" type="number" min="0"
v-model="hero.purchased.plan.consecutive.gemCapExtra" max="25" step="5">
class="form-control" </div>
type="number"
min="0"
max="25"
step="5"
>
</div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-3 col-form-label"> <label class="col-sm-3 col-form-label">
@@ -172,20 +125,12 @@
<label class="col-sm-3 col-form-label"> <label class="col-sm-3 col-form-label">
Gems bought this month: Gems bought this month:
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<input <input v-model="hero.purchased.plan.gemsBought" class="form-control" type="number" min="0"
v-model="hero.purchased.plan.gemsBought" :max="hero.purchased.plan.consecutive.gemCapExtra + 25" step="1">
class="form-control" </div>
type="number"
min="0"
:max="hero.purchased.plan.consecutive.gemCapExtra + 25"
step="1"
>
</div>
</div> </div>
<div <div v-if="hero.purchased.plan.extraMonths > 0">
v-if="hero.purchased.plan.extraMonths > 0"
>
Additional credit (applied upon cancellation): Additional credit (applied upon cancellation):
<strong>{{ hero.purchased.plan.extraMonths }}</strong> <strong>{{ hero.purchased.plan.extraMonths }}</strong>
</div> </div>
@@ -194,45 +139,37 @@
Mystery Items: Mystery Items:
</label> </label>
<div class="col-sm-9 col-form-label"> <div class="col-sm-9 col-form-label">
<span <span v-if="hero.purchased.plan.mysteryItems.length > 0">
v-if="hero.purchased.plan.mysteryItems.length > 0" <span v-for="(item, index) in hero.purchased.plan.mysteryItems" :key="index">
> <strong v-if="index < hero.purchased.plan.mysteryItems.length - 1">
<span {{ item }},
v-for="(item, index) in hero.purchased.plan.mysteryItems" </strong>
:key="index" <strong v-else> {{ item }} </strong>
> </span>
<strong v-if="index < hero.purchased.plan.mysteryItems.length - 1"> </span>
{{ item }}, <span v-else>
</strong> <strong>None</strong>
<strong v-else> {{ item }} </strong>
</span> </span>
</span>
<span v-else>
<strong>None</strong>
</span>
</div> </div>
</div> </div>
</div>
<div class="card-footer" v-if="expand">
<input type="submit" value="Save" class="btn btn-primary mt-1">
</div>
</div> </div>
<div class="card-footer" v-if="expand"> </form>
<input
type="submit"
value="Save"
class="btn btn-primary mt-1"
></div>
</div>
</form>
</template> </template>
<style scoped> <style scoped>
.input-group-append { .input-group-append {
width:auto; width: auto;
.input-group-text { .input-group-text {
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
border-top-right-radius: 2px; border-top-right-radius: 2px;
}
} }
}
</style> </style>
<script> <script>
@@ -248,20 +185,20 @@ export default {
required: true, required: true,
}, },
}, },
data () { data() {
return { return {
expand: false, expand: false,
}; };
}, },
computed: { computed: {
nextHourglassDate () { nextHourglassDate() {
const currentPlanContext = getPlanContext(this.hero, new Date()); const currentPlanContext = getPlanContext(this.hero, new Date());
return currentPlanContext.nextHourglassDate.format('MMMM YYYY'); return currentPlanContext.nextHourglassDate.format('MMMM YYYY');
}, },
}, },
methods: { methods: {
dateFormat (date) { dateFormat(date) {
if (!date) { if (!date) {
return '--'; return '--';
} }