Challenge participants spacing & text sizing fix

* chore: update time travelers shop to display seasonal backgrounds

* chore: update time travelers banner (note CSS borken rn)

* chore: fix borken CSS and update logic in shop

* chore: added isSubscribed function, not working

* chore: isSubscribed working but no bg for subscribers

* chore: logic and css updates

* chore: update habitica-images

* chore: add check for trinket

* chore: more time traveler shop logicking

* Add backend support for Hydra mount

- Add Dragon-Hydra to special mounts in stable.js
  - Configure as contributor level 7 reward with canFind: true
  - Add GIF format support for mount sprites
  - Enable admin panel granting capability

* Fix Vue template errors in timeTravelers component

* Fix duplicate template block in timeTravelers component

* add CSS for Hydra mount GIF sprites

Added CSS rules for Mount_Head_Dragon-Hydra and Mount_Body_Dragon-Hydra GIF sprites

* Remove the separate Hydra mount dimension declaration

---------

Co-authored-by: CuriousMagpie <eilatan@gmail.com>

website/client/src/assets/css/sprites.css

@@ -177,7 +177,7 @@
   height: 96px;
 }
 
-.Mount_Head_Gryphon-Gryphatrice, .Mount_Body_Gryphon-Gryphatrice {
+.Mount_Head_Gryphon-Gryphatrice, .Mount_Body_Gryphon-Gryphatrice, .Mount_Head_Dragon-Hydra, .Mount_Body_Dragon-Hydra {
   width: 135px;
   height: 135px;
 }
@@ -190,6 +190,14 @@
   background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/BackerOnly-Mount-Body-Gryphatrice.gif") no-repeat;
 }
 
+.Mount_Head_Dragon-Hydra {
+  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Dragon-Hydra.gif") no-repeat;
+}
+
+.Mount_Body_Dragon-Hydra {
+  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Dragon-Hydra.gif") no-repeat;
+}
+
 .background_airship, .background_clocktower, .background_steamworks {
   width: 141px;
   height: 147px;

website/client/src/components/challenges/challengeDetail.vue

@@ -75,16 +75,20 @@
             class="box member-count"
             @click="showMemberModal()"
           >
-            <div
-              class="svg-icon member-icon"
-              v-html="icons.memberIcon"
-            ></div>
-            {{ challenge.memberCount }}
-            <div
-              v-once
-              class="details"
-            >
-              {{ $t('participantsTitle') }}
+            <div class="box-content">
+              <div class="icon-number-row">
+                <div
+                  class="svg-icon member-icon"
+                  v-html="icons.memberIcon"
+                ></div>
+                <span class="number">{{ challenge.memberCount }}</span>
+              </div>
+              <div
+                v-once
+                class="details"
+              >
+                {{ $t('participantsTitle') }}
+              </div>
             </div>
           </div>
           <div class="box">
@@ -304,7 +308,7 @@
 
   .box {
     display: inline-block;
-    padding: 1em;
+    padding: 0.5em;
     border-radius: 2px;
     background-color: $white;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
@@ -314,22 +318,69 @@
     text-align: center;
     font-size: 20px;
     vertical-align: bottom;
+    overflow: hidden;
+    position: relative;
 
     &.member-count:hover {
       cursor: pointer;
     }
 
+    .box-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+    }
+
+    .icon-number-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0.1em;
+
+      .number {
+        font-size: 20px;
+        font-weight: normal;
+        margin-left: 0.2em;
+      }
+    }
+
     .svg-icon {
       width: 30px;
       display: inline-block;
-      margin-right: .2em;
       vertical-align: bottom;
     }
 
     .details {
       font-size: 12px;
-      margin-top: 0.4em;
       color: $gray-200;
+      width: 100%;
+      padding: 0 4px;
+      line-height: 1.15;
+      word-break: break-word;
+      max-height: 2.3em;
+      overflow: visible;
+    }
+
+    &.member-count {
+      .icon-number-row {
+        .svg-icon {
+          width: 24px;
+          height: 24px;
+        }
+
+        .number {
+          font-size: 18px;
+        }
+      }
+
+      .details {
+        font-size: 11px;
+        line-height: 1.1;
+        max-height: 2.2em;
+      }
     }
   }
 

website/client/src/components/header/notifications/g1g1.vue

@@ -70,13 +70,19 @@
   }
 
   .btn-secondary {
-    width: 5.75rem;
+    min-width: 5.75rem;
+    width: auto;
+    max-width: calc(100% - 2rem);
     min-height: 1.5rem;
+    padding: 0.25rem 0.75rem;
     border-radius: 2px;
     border-color: $white;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
     font-size: 12px;
     font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 </style>
 

website/client/src/components/shops/timeTravelers/index.vue

@@ -154,7 +154,8 @@
           </template>
         </itemRows>
       </div>
-    </div><buyQuestModal
+    </div>
+    <buyQuestModal
       :item="selectedItemToBuy || {}"
       :price-type="selectedItemToBuy ? selectedItemToBuy.currency : ''"
       :with-pin="true"

website/common/script/content/constants/gifSprites.js

@@ -11,7 +11,9 @@ export default [
   'head_special_0',
   'head_special_1',
   'head_special_ks2019',
+  'Mount_Body_Dragon-Hydra',
   'Mount_Body_Gryphon-Gryphatrice',
+  'Mount_Head_Dragon-Hydra',
   'Mount_Head_Gryphon-Gryphatrice',
   'Pet_HatchingPotion_Cryptid',
   'Pet_HatchingPotion_Dessert',

website/common/script/content/stable.js

@@ -115,6 +115,7 @@ const canFindSpecial = {
     'Hippogriff-Hopeful': true,
 
     // Contributor/Backer pets
+    'Dragon-Hydra': true, // Contributor level 7
     'LionCub-Ethereal': false, // Backer tier 90
     'Jackalope-RoyalPurple': true, // subscription
     'Gryphon-Gryphatrice': false, // Pet once granted to kickstarter
@@ -152,6 +153,7 @@ const specialPets = {
 
 const specialMounts = {
   'BearCub-Polar': 'polarBear',
+  'Dragon-Hydra': 'hydra',
   'LionCub-Ethereal': 'etherealLion',
   'MantisShrimp-Base': 'mantisShrimp',
   'Turkey-Base': 'turkey',