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
-      class="mb-0 mt-0"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
+        <h3 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
-          v-if="hero.purchased.plan.dateCreated"
-          class="form-group row"
-        >
-          <label>
+        <div v-if="hero.purchased.plan.dateCreated" class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Creation date:
           </label>
           <div class="col-sm-9">
-            <input
-              v-model="hero.purchased.plan.dateCreated"
-              class="form-control"
-              type="text"
-            >
+            <div class="input-group">
+              <input v-model="hero.purchased.plan.dateCreated" class="form-control" type="text">
               <div class="input-group-append">
                 <strong>
                   {{ dateFormat(hero.purchased.plan.dateCreated) }}
@@ -43,19 +33,14 @@
               </div>
             </div>
           </div>
-        <div
-          v-if="hero.purchased.plan.dateCurrentTypeCreated"
-          class="form-group row"
-        >
+        </div>
+        <div v-if="hero.purchased.plan.dateCurrentTypeCreated" 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">
-            <input
-              v-model="hero.purchased.plan.dateCurrentTypeCreated"
-              class="form-control"
-              type="text"
-            >
+          <div class="col-sm-9">
+            <div class="input-group">
+              <input v-model="hero.purchased.plan.dateCurrentTypeCreated" 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
-                v-model="hero.purchased.plan.dateTerminated"
-                class="form-control"
-                type="text"
-              >
+              <input 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
-              v-model="hero.purchased.plan.consecutive.count"
-              class="form-control"
-              type="number"
-              min="0"
-              step="1"
-            >
+            <input 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
-              v-model="hero.purchased.plan.consecutive.offset"
-              class="form-control"
-              type="number"
-              min="0"
-              step="1"
-            >
+            <input 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
-            v-model="hero.purchased.plan.perkMonthCount"
-            class="form-control"
-            type="number"
-            min="0"
-            max="2"
-            step="1"
-          >
+            <input v-model="hero.purchased.plan.perkMonthCount" 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
-              v-model="hero.purchased.plan.consecutive.trinkets"
-              class="form-control"
-              type="number"
-              min="0"
-              step="1"
-            >
+            <input v-model="hero.purchased.plan.consecutive.trinkets" 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
-              v-model="hero.purchased.plan.consecutive.gemCapExtra"
-              class="form-control"
-              type="number"
-              min="0"
-              max="25"
-              step="5"
-            >
+            <input v-model="hero.purchased.plan.consecutive.gemCapExtra" 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
-              v-model="hero.purchased.plan.gemsBought"
-              class="form-control"
-              type="number"
-              min="0"
-              :max="hero.purchased.plan.consecutive.gemCapExtra + 25"
-              step="1"
-            >
+            <input v-model="hero.purchased.plan.gemsBought" class="form-control" type="number" min="0"
+              :max="hero.purchased.plan.consecutive.gemCapExtra + 25" step="1">
           </div>
         </div>
-        <div
-          v-if="hero.purchased.plan.extraMonths > 0"
-        >
+        <div 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
-            v-if="hero.purchased.plan.mysteryItems.length > 0"
-          >
-            <span
-              v-for="(item, index) in hero.purchased.plan.mysteryItems"
-              :key="index"
-            >
+            <span 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">
                   {{ item }},
                 </strong>
@@ -214,25 +154,22 @@
         </div>
       </div>
       <div class="card-footer" v-if="expand">
-        <input
-          type="submit"
-          value="Save"
-          class="btn btn-primary mt-1"
-        ></div>
+        <input type="submit" value="Save" class="btn btn-primary mt-1">
       </div>
-</form>
+    </div>
+  </form>
 </template>
 
 <style scoped>
 .input-group-append {
-    width:auto;
+  width: auto;
 
   .input-group-text {
 
     border-bottom-right-radius: 2px;
     border-top-right-radius: 2px;
   }
-  }
+}
 </style>
 
 <script>
@@ -248,20 +185,20 @@ export default {
       required: true,
     },
   },
-  data () {
+  data() {
     return {
       expand: false,
     };
   },
   computed: {
-    nextHourglassDate () {
+    nextHourglassDate() {
       const currentPlanContext = getPlanContext(this.hero, new Date());
 
       return currentPlanContext.nextHourglassDate.format('MMMM YYYY');
     },
   },
   methods: {
-    dateFormat (date) {
+    dateFormat(date) {
       if (!date) {
         return '--';
       }