improve sub styling

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

@@ -2,11 +2,7 @@
   <form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })">
     <div class="card mt-2">
       <div class="card-header">
-    <h3
+        <h3 class="mb-0 mt-0" :class="{ 'open': expand }" @click="expand = !expand">
-      class="mb-0 mt-0"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
           Subscription, Monthly Perks
         </h3>
       </div>
@@ -23,19 +19,13 @@
           Group plan ID:
           <strong>{{ hero.purchased.plan.owner }}</strong>
         </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:
           </label>
           <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"
-              type="text"
-            >
               <div class="input-group-append">
                 <strong>
                   {{ dateFormat(hero.purchased.plan.dateCreated) }}
@@ -43,19 +33,14 @@
               </div>
             </div>
           </div>
-        <div
+        </div>
-          v-if="hero.purchased.plan.dateCurrentTypeCreated"
+        <div v-if="hero.purchased.plan.dateCurrentTypeCreated" class="form-group row">
-          class="form-group row"
-        >
           <label class="col-sm-3 col-form-label">
-            Start date for current subscription type:
+            Current sub start date:
           </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"
-              type="text"
-            >
               <div class="input-group-append">
                 <strong>
                   {{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}
@@ -63,17 +48,14 @@
               </div>
             </div>
           </div>
+        </div>
         <div class="form-group row">
           <label class="col-sm-3 col-form-label">
             Termination date:
           </label>
           <div class="col-sm-9">
             <div class="input-group">
-              <input
+              <input v-model="hero.purchased.plan.dateTerminated" class="form-control" type="text">
-                v-model="hero.purchased.plan.dateTerminated"
-                class="form-control"
-                type="text"
-              >
               <div class="input-group-append">
                 <strong class="input-group-text">
                   {{ dateFormat(hero.purchased.plan.dateTerminated) }}
@@ -87,13 +69,7 @@
             Consecutive months:
           </label>
           <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"
-              class="form-control"
-              type="number"
-              min="0"
-              step="1"
-            >
           </div>
         </div>
         <div class="form-group row">
@@ -101,13 +77,7 @@
             Perk offset months:
           </label>
           <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"
-              class="form-control"
-              type="number"
-              min="0"
-              step="1"
-            >
           </div>
         </div>
         <div class="form-group row">
@@ -115,14 +85,8 @@
             Perk month count:
           </label>
           <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 class="form-group row">
@@ -136,13 +100,8 @@
             Mystic Hourglasses:
           </label>
           <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"
-              type="number"
-              min="0"
-              step="1"
-            >
           </div>
         </div>
         <div class="form-group row">
@@ -150,14 +109,8 @@
             Gem cap increase:
           </label>
           <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"
-              type="number"
-              min="0"
-              max="25"
-              step="5"
-            >
           </div>
         </div>
         <div class="form-group row">
@@ -173,19 +126,11 @@
             Gems bought this month:
           </label>
           <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"
-              type="number"
-              min="0"
-              :max="hero.purchased.plan.consecutive.gemCapExtra + 25"
-              step="1"
-            >
           </div>
         </div>
-        <div
+        <div v-if="hero.purchased.plan.extraMonths > 0">
-          v-if="hero.purchased.plan.extraMonths > 0"
-        >
           Additional credit (applied upon cancellation):
           <strong>{{ hero.purchased.plan.extraMonths }}</strong>
         </div>
@@ -194,13 +139,8 @@
             Mystery Items:
           </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">
-          >
-            <span
-              v-for="(item, index) in hero.purchased.plan.mysteryItems"
-              :key="index"
-            >
                 <strong v-if="index < hero.purchased.plan.mysteryItems.length - 1">
                   {{ item }},
                 </strong>
@@ -214,11 +154,8 @@
         </div>
       </div>
       <div class="card-footer" v-if="expand">
-        <input
+        <input type="submit" value="Save" class="btn btn-primary mt-1">
-          type="submit"
+      </div>
-          value="Save"
-          class="btn btn-primary mt-1"
-        ></div>
     </div>
   </form>
 </template>