Client Fixes (#8821)

* new client: fix animation flickering

* fix transitions

* update copy

website/client/assets/scss/icon.scss

@@ -5,5 +5,9 @@
   stroke-width: 0;
   stroke: currentColor;
   fill: currentColor;
-  transition: none;
+  transition: none !important;
+}
+
+.svg-icon * {
+  transition: none !important;
 }

website/client/assets/scss/index.scss

@@ -2,7 +2,7 @@
 @import './utils';
 @import './colors';
 
-*:not(.svg-icon *) {
+* {
   transition-duration: .15s;
   transition-property: border-color, box-shadow, color;
   transition-timing-function: ease-in;

website/client/components/appMenu.vue

@@ -158,6 +158,7 @@ nav.navbar {
   padding-right: 12.5px;
   padding-left: 12.5px;
   color: $header-color;
+  transition: none;
 
   &:hover {
     color: $white;

website/client/components/inventory/equipment/index.vue

@@ -112,7 +112,7 @@
       a.btn.btn-show-more(
         v-if="items[group.key].length > itemsPerLine",
         @click="viewOptions[group.key].open = !viewOptions[group.key].open"
-      ) {{ viewOptions[group.key].open ? $t('showLessGearItems', { type: group.label }) : $t('showAllGearItems', { type: group.label, items: items[group.key].length }) }}
+      ) {{ viewOptions[group.key].open ? $t('showLessItems', { type: group.label }) : $t('showAllItems', { type: group.label, items: items[group.key].length }) }}
 </template>
 
 <style lang="scss" scoped>

website/client/components/inventory/items/index.vue

@@ -53,7 +53,7 @@
       a.btn.btn-show-more(
         v-if="items[group.key].length > itemsPerLine",
         @click="group.open = !group.open"
-      ) {{ group.open ? $t('showLessGearItems', { type: $t(group.key) }) : $t('showAllGearItems', { type: $t(group.key), items: items[group.key].length }) }}
+      ) {{ group.open ? $t('showLessItems', { type: $t(group.key) }) : $t('showAllItems', { type: $t(group.key), items: items[group.key].length }) }}
 
 </template>
 

website/client/components/memberDetails.vue

@@ -41,16 +41,14 @@
 .member-stats {
   padding-left: 16px;
   padding-right: 24px;
-  height: auto;
   opacity: 1;
   transition: opacity 0.15s ease-out;
 }
 
 .member-details.condensed:not(.expanded) .member-stats {
   opacity: 0;
-  height: 0;
-  padding: 0;
-  width: 0;
+  position: absolute;
+  z-index: -1;
 }
 
 // Condensed version

website/common/locales/en/newClient.json

@@ -30,8 +30,8 @@
   "memberCount": "Member Count",
   "recentActivity": "Recent Activity",
   "gearNotOwned": "You do not own this item.",
-  "showAllGearItems": "Show All <%= items %> <%= type %> Gear Items",
-  "showLessGearItems": "Show Less <%= type %> Gear Items",
+  "showAllItems": "Show All <%= items %> <%= type %> Items",
+  "showLessItems": "Show Less <%= type %> Items",
   "noGearItemsOfType": "You don't own any pieces of <%= type %>.",
   "myGuilds": "My Guilds",
   "guildsDiscovery": "Discover Guilds",