html format other components

website/client/src/components/avatarModal/body-settings.vue

@@ -8,16 +8,19 @@
       :items="items"
       :active-sub-page="activeSubPage"
       @changeSubPage="changeSubPage($event)"
-    /><div v-if="activeSubPage === 'size'">
+    />
+    <div v-if="activeSubPage === 'size'">
       <customize-options
         :items="sizes"
         :current-value="user.preferences.size"
       />
-    </div><div v-if="activeSubPage === 'shirt'">
+    </div>
+    <div v-if="activeSubPage === 'shirt'">
       <customize-options
         :items="freeShirts"
         :current-value="user.preferences.shirt"
-      /><customize-options
+      />
+      <customize-options
         v-if="editing"
         :items="specialShirts"
         :current-value="user.preferences.shirt"

website/client/src/components/avatarModal/customize-options.vue

@@ -22,32 +22,39 @@
             <div class="redline"></div>
           </div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="option.gemLocked"
         class="gem-lock"
       >
         <div
           class="svg-icon gem"
           v-html="icons.gem"
-        ></div><span>{{ option.gem }}</span>
-      </div><div
+        ></div>
+        <span>{{ option.gem }}</span>
+      </div>
+      <div
         v-if="option.goldLocked"
         class="gold-lock"
       >
         <div
           class="svg-icon gold"
           v-html="icons.gold"
-        ></div><span>{{ option.gold }}</span>
+        ></div>
+        <span>{{ option.gold }}</span>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="fullSet"
       class="purchase-set"
       @click="unlock()"
     >
-      <span class="label">{{ $t('purchaseAll') }}</span><div
+      <span class="label">{{ $t('purchaseAll') }}</span>
+      <div
         class="svg-icon gem"
         v-html="icons.gem"
-      ></div><span class="price">5</span>
+      ></div>
+      <span class="price">5</span>
     </div>
   </div>
 </template>

website/client/src/components/avatarModal/extra-settings.vue

@@ -8,12 +8,14 @@
       :items="extraSubMenuItems"
       :active-sub-page="activeSubPage"
       @changeSubPage="changeSubPage($event)"
-    /><div
+    />
+    <div
       v-if="activeSubPage === 'glasses'"
       id="hair-color"
     >
       <customize-options :items="eyewear" />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'ears'"
       id="animal-ears"
     >
@@ -22,7 +24,8 @@
         :full-set="!animalItemsOwned('headAccessory')"
         @unlock="unlock(animalItemsUnlockString('headAccessory'))"
       />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'tails'"
       id="animal-tails"
     >
@@ -31,17 +34,20 @@
         :full-set="!animalItemsOwned('back')"
         @unlock="unlock(animalItemsUnlockString('back'))"
       />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'headband'"
       id="headband"
     >
       <customize-options :items="headbands" />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'wheelchair'"
       id="wheelchairs"
     >
       <customize-options :items="chairs" />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'flower'"
       id="flowers"
     >

website/client/src/components/avatarModal/hair-settings.vue

@@ -8,14 +8,16 @@
       :items="hairSubMenuItems"
       :active-sub-page="activeSubPage"
       @changeSubPage="changeSubPage($event)"
-    /><div
+    />
+    <div
       v-if="activeSubPage === 'color'"
       id="hair-color"
     >
       <customize-options
         :items="freeHairColors"
         :current-value="user.preferences.hair.color"
-      /><div
+      />
+      <div
         v-for="set in seasonalHairColors"
         v-if="editing && set.key !== 'undefined'"
       >
@@ -26,7 +28,8 @@
           @unlock="unlock(`hair.color.${set.keys.join(',hair.color.')}`)"
         />
       </div>
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'style'"
       id="style"
     >
@@ -37,7 +40,8 @@
           @unlock="set.unlock()"
         />
       </div>
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'bangs'"
       id="bangs"
     >
@@ -45,14 +49,16 @@
         :items="hairBangs"
         :current-value="user.preferences.hair.bangs"
       />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'facialhair'"
       id="facialhair"
     >
       <customize-options
         v-if="editing"
         :items="mustacheList"
-      /><customize-options
+      />
+      <customize-options
         v-if="editing"
         :items="beardList"
         :full-set="isPurchaseAllNeeded('hair', ['baseHair5', 'baseHair6'], ['mustache', 'beard'])"

website/client/src/components/avatarModal/skin-settings.vue

@@ -8,10 +8,12 @@
       :items="skinSubMenuItems"
       :active-sub-page="activeSubPage"
       @changeSubPage="changeSubPage($event)"
-    /><customize-options
+    />
+    <customize-options
       :items="freeSkins"
       :current-value="user.preferences.skin"
-    /><div
+    />
+    <div
       v-for="set in seasonalSkins"
       v-if="editing && set.key !== 'undefined'"
     >