Style fixes (#9108)

* fixed some columns on smaller screens * changed mystic hourglass check * Checked for bad data * Groupped pets and mounts * Added show more * Fixed lint * Fixed lint
2025-12-14 21:27:23 +01:00 · 2017-09-30 08:34:25 -05:00
parent 77d75c4669
commit 9cf2ccf7c4
12 changed files with 140 additions and 87 deletions
--- a/website/client/components/appFooter.vue
+++ b/website/client/components/appFooter.vue
@@ -4,12 +4,12 @@
  modify-inventory(v-if="isUserLoaded")
  footer.container-fluid
    .row
-      .col-2
+      .col-12.col-md-2
        h3
          a(href='https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8', target='_blank') {{ $t('mobileIOS') }}
        h3
          a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank') {{ $t('mobileAndroid') }}
-      .col-2
+      .col-12.col-md-2
        h3 Company
        ul
          li
@@ -28,7 +28,7 @@
            a(href='/static/press-kit') {{ $t('presskit') }}
          li
            a(href='/static/contact') {{ $t('contactUs') }}
-      .col-2
+      .col-12.col-md-2
        h3 Community
        ul
          li
@@ -47,7 +47,7 @@
            a(href='https://www.facebook.com/Habitica', target='_blank') {{ $t('communityFacebook') }}
          li
            a(href='https://www.reddit.com/r/habitrpg/', target='_blank') {{ $t('communityReddit') }}
-      .col-6
+      .col-12.col-md-6
        .row
          .col-6
            h3 Developers
--- a/website/client/components/appMenu.vue
+++ b/website/client/components/appMenu.vue
@@ -52,7 +52,7 @@ div
            a.dropdown-item(href="https://trello.com/c/odmhIqyW/440-read-first-table-of-contents", target='_blank') {{ $t('requestAF') }}
            a.dropdown-item(href="http://habitica.wikia.com/wiki/Contributing_to_Habitica", target='_blank') {{ $t('contributing') }}
            a.dropdown-item(href="http://habitica.wikia.com/wiki/Habitica_Wiki", target='_blank') {{ $t('wiki') }}
-      .item-with-icon(v-if="userHourglasses != 0")
+      .item-with-icon(v-if="userHourglasses > 0")
        .svg-icon(v-html="icons.hourglasses")
        span {{ userHourglasses }}
      .item-with-icon
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -51,7 +51,7 @@
          )

    .row
-      task-column.col-6(
+      task-column.col-12.col-sm-6(
        v-for="column in columns",
        :type="column",
        :key="column",
--- a/website/client/components/challenges/findChallenges.vue
+++ b/website/client/components/challenges/findChallenges.vue
@@ -16,7 +16,7 @@
          .svg-icon.positive-icon(v-html="icons.positiveIcon")
          span(v-once) {{$t('createChallenge')}}
    .row
-      .col-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
+      .col-12.col-md-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
        challenge-item(:challenge='challenge')
 </template>

--- a/website/client/components/challenges/myChallenges.vue
+++ b/website/client/components/challenges/myChallenges.vue
@@ -23,7 +23,7 @@
        p(v-once) {{$t('challengeDescription2')}}

    .row
-      .col-6(v-for='challenge in filteredChallenges')
+      .col-12.col-md-6(v-for='challenge in filteredChallenges')
        challenge-item(:challenge='challenge')
 </template>

--- a/website/client/components/challenges/sidebar.vue
+++ b/website/client/components/challenges/sidebar.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.col-2.standard-sidebar
+.col-2.standard-sidebar.hidden-xs-down
  .form-group
    input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')

--- a/website/client/components/group-plans/taskInformation.vue
+++ b/website/client/components/group-plans/taskInformation.vue
@@ -72,7 +72,7 @@
        v-on:taskEdited='taskEdited',
      )
  .row
-    task-column.col-3(
+    task-column.col-12.col-sm-6.col-3(
      v-for="column in columns",
      :type="column",
      :key="column",
--- a/website/client/components/groups/group.vue
+++ b/website/client/components/groups/group.vue
@@ -4,7 +4,7 @@
  invite-modal(:group='this.group')
  start-quest-modal(:group='this.group')
  quest-details-modal(:group='this.group')
-  .col-8.standard-page
+  .col-12.col-sm-8.standard-page
    .row
      .col-6.title-details
        h1 {{group.name}}
@@ -46,7 +46,7 @@
          .col-12.hr
          chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')

-  .col-4.sidebar
+  .col-12.col-sm-4.sidebar
    .row(:class='{"guild-background": !isParty}')
      .col-6
      .col-6
--- a/website/client/components/groups/sidebar.vue
+++ b/website/client/components/groups/sidebar.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.standard-sidebar
+.standard-sidebar.hidden-xs-down
  .form-group
    input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')

--- a/website/client/components/groups/tavern.vue
+++ b/website/client/components/groups/tavern.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 .row
-  .clearfix.col-8.standard-page
+  .col-12.col-sm-8.clearfix.standard-page
    .row
      .col-6.title-details
        h1(v-once) {{ $t('welcomeToTavern') }}
@@ -29,7 +29,7 @@
          .hr.col-12
          chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')

-  .col-md-4.sidebar
+  .col-12.col-sm-4.sidebar
    .section
      .grassy-meadow-backdrop
        .daniel_front
--- a/website/client/components/inventory/stable/index.vue
+++ b/website/client/components/inventory/stable/index.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
+  // @TODO: breakdown to componentes and use some SOLID
  .row.stable(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
-    .standard-sidebar
+    .standard-sidebar.col-3.hidden-xs-down
      div
        #npmMattStable.npc_matt
        b-popover(
@@ -53,7 +54,7 @@
            @change="updateHideMissing"
          )

-    .standard-page
+    .standard-page.col-12.col-sm-9
      .clearfix
        h1.float-left.mb-0.page-header(v-once) {{ $t('stable') }}

@@ -73,55 +74,49 @@
        span.badge.badge-pill.badge-default {{countOwnedAnimals(petGroups[0], 'pet')}}

      div(
-        v-for="petGroup in petGroups",
+        v-for="(petGroup, index) in petGroups",
        v-if="viewOptions[petGroup.key].selected",
        :key="petGroup.key"
      )
-        h4(v-if="viewOptions[petGroup.key].animalCount != 0") {{ petGroup.label }}
+        h4(v-if="viewOptions[petGroup.key].animalCount !== 0") {{ petGroup.label }}

-        itemRows(
-          :items="pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
-          :itemWidth=94,
-          :itemMargin=24,
-          :type="petGroup.key",
-        )
-          template(slot="item", scope="context")
-            div(
-              v-drag.drop.food="context.item.key",
-              @itemDragOver="onDragOver($event, context.item)",
-              @itemDropped="onDrop($event, context.item)",
-              @itemDragLeave="onDragLeave()",
-              :class="{'last': context.item.isLastInRow}"
+        .pet-row.d-flex(
+          v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
+          v-if='index === 0 || showMore === petGroup.key')
+          .pet-group(
+            v-for='item in group'
+            v-drag.drop.food="item.key",
+            @itemDragOver="onDragOver($event, item)",
+            @itemDropped="onDrop($event, item)",
+            @itemDragLeave="onDragLeave()",
+            :class="{'last': item.isLastInRow}"
+          )
+            petItem(
+              :item="item",
+              :itemContentClass="getPetItemClass(item)",
+              :popoverPosition="'top'",
+              :progress="item.progress",
+              :emptyItem="!item.isOwned()",
+              :showPopover="currentDraggingFood == null",
+              :highlightBorder="highlightPet == item.key",
+              @click="petClicked(item)"
            )
-              petItem(
-                :item="context.item",
-                :itemContentClass="getPetItemClass(context.item)",
-                :popoverPosition="'top'",
-                :progress="context.item.progress",
-                :emptyItem="!context.item.isOwned()",
-                :showPopover="currentDraggingFood == null",
-                :highlightBorder="highlightPet == context.item.key",
-                @click="petClicked(context.item)"
-              )
-                span(slot="popoverContent")
-                  div.hatchablePopover(v-if="context.item.isHatchable()")
-                    h4.popover-content-title {{ context.item.name }}
-                    div.popover-content-text(v-html="$t('haveHatchablePet', { potion: context.item.potionName, egg: context.item.eggName })")
-                    div.potionEggGroup
-                      div.potionEggBackground
-                        div(:class="'Pet_HatchingPotion_'+context.item.potionKey")
-                      div.potionEggBackground
-                        div(:class="'Pet_Egg_'+context.item.eggKey")
+              span(slot="popoverContent")
+                div.hatchablePopover(v-if="item.isHatchable()")
+                  h4.popover-content-title {{ item.name }}
+                  div.popover-content-text(v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })")
+                  div.potionEggGroup
+                    div.potionEggBackground
+                      div(:class="'Pet_HatchingPotion_'+item.potionKey")
+                    div.potionEggBackground
+                      div(:class="'Pet_Egg_'+item.eggKey")
+                div(v-else)
+                  h4.popover-content-title {{ item.name }}
+              template(slot="itemBadge", scope="context")
+              starBadge(:selected="item.key === currentPet", :show="item.isOwned()", @click="selectPet(item)")

-                  div(v-else)
-                    h4.popover-content-title {{ context.item.name }}
-
-                template(slot="itemBadge", scope="context")
-                  starBadge(
-                    :selected="context.item.key === currentPet",
-                    :show="context.item.isOwned()",
-                    @click="selectPet(context.item)",
-                  )
+        .btn.btn-flat.btn-show-more(@click="setShowMore(petGroup.key)", v-if='petGroup.key !== "specialPets"')
+          | {{ showMore === petGroup.key ? $t('showLess') : $t('showMore') }}

      h2
        | {{ $t('mounts') }}
@@ -135,31 +130,30 @@
      )
        h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}

-        itemRows(
-          :items="mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)",
-          :itemWidth=94,
-          :itemMargin=24,
-          :type="mountGroup.key",
-        )
-          template(slot="item", scope="context")
+        .pet-row.d-flex(v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
+          v-if='index === 0 || showMore === mountGroup.key')
+          .pet-group(v-for='item in group')
            mountItem(
-              :item="context.item",
-              :itemContentClass="context.item.isOwned() ? ('Mount_Icon_' + context.item.key) : 'PixelPaw GreyedOut'",
-              :key="context.item.key",
+              :item="item",
+              :itemContentClass="item.isOwned() ? ('Mount_Icon_' + item.key) : 'PixelPaw GreyedOut'",
+              :key="item.key",
              :popoverPosition="'top'",
-              :emptyItem="!context.item.isOwned()",
+              :emptyItem="!item.isOwned()",
              :showPopover="true",
-              @click="selectMount(context.item)"
+              @click="selectMount(item)"
            )
              span(slot="popoverContent")
-                h4.popover-content-title {{ context.item.name }}
+                h4.popover-content-title {{ item.name }}
              template(slot="itemBadge", scope="context")
                starBadge(
-                  :selected="context.item.key === currentMount",
-                  :show="context.item.isOwned()",
-                  @click="selectMount(context.item)",
+                  :selected="item.key === currentMount",
+                  :show="item.isOwned()",
+                  @click="selectMount(item)",
                )

+        .btn.btn-flat.btn-show-more(@click="setShowMore(mountGroup.key)", v-if='mountGroup.key !== "specialMounts"')
+          | {{ showMore === mountGroup.key ? $t('showLess') : $t('showMore') }}
+
      drawer(
        :title="$t('quickInventory')",
        :errorMessage="(!hasDrawerTabItems(selectedDrawerTab)) ? ((selectedDrawerTab === 0) ?  $t('noFoodAvailable') : $t('noSaddlesAvailable')) : null"
@@ -219,7 +213,6 @@
      :visible="hatchablePet != null",
      @change="resetHatchablePet($event)"
    )
-
      div.content(v-if="hatchablePet")
        div.potionEggGroup
          div.potionEggBackground
@@ -253,11 +246,9 @@
        div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
        div.popover
          div.popover-content {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
-
 </template>

 <style lang="scss">
-
  @import '~client/assets/scss/colors.scss';
  @import '~client/assets/scss/modal.scss';

@@ -283,6 +274,20 @@
    top: -16px !important;
  }

+  .group {
+    height: 130px;
+    overflow: hidden;
+  }
+
+  .pet-row {
+    max-width: 100%;
+    flex-wrap: wrap;
+
+    .item {
+      margin-right: .5em;
+    }
+  }
+
  .hatchablePopover {
    width: 180px
  }
@@ -500,6 +505,7 @@
  import _filter from 'lodash/filter';
  import _flatMap from 'lodash/flatMap';
  import _throttle from 'lodash/throttle';
+  import groupBy from 'lodash/groupBy';

  import Item from '../item';
  import ItemRows from 'client/components/ui/itemRows';
@@ -585,6 +591,7 @@
        currentDraggingFood: null,

        selectedDrawerTab: 0,
+        showMore: '',
      };
    },
    watch: {
@@ -712,7 +719,13 @@
      },
    },
    methods: {
-
+      setShowMore (key) {
+        if (this.showMore === key) {
+          this.showMore = '';
+          return;
+        }
+        this.showMore = key;
+      },
      getAnimalList (animalGroup, type) {
        let key = animalGroup.key;

@@ -833,11 +846,39 @@
      },

      pets (animalGroup, hideMissing, sortBy, searchText) {
-        return this.listAnimals(animalGroup, 'pet', hideMissing, sortBy, searchText);
+        let pets = this.listAnimals(animalGroup, 'pet', hideMissing, sortBy, searchText);
+
+        // Don't group special
+        if (animalGroup.key === 'specialPets') {
+          return {none: pets};
+        }
+
+        let groupKey = 'eggKey';
+        if (sortBy === 'sortByColor') {
+          groupKey = 'potionKey';
+        } else if (sortBy === 'AZ') {
+          groupKey = '';
+        }
+
+        return groupBy(pets, groupKey);
      },

      mounts (animalGroup, hideMissing, sortBy, searchText) {
-        return this.listAnimals(animalGroup, 'mount', hideMissing, sortBy, searchText);
+        let mounts = this.listAnimals(animalGroup, 'mount', hideMissing, sortBy, searchText);
+
+        // Don't group special
+        if (animalGroup.key === 'specialMounts') {
+          return {none: mounts};
+        }
+
+        let groupKey = 'eggKey';
+        if (sortBy === 'sortByColor') {
+          groupKey = 'potionKey';
+        } else if (sortBy === 'AZ') {
+          groupKey = '';
+        }
+
+        return groupBy(mounts, groupKey);
      },

      getPetItemClass (pet) {
--- a/website/client/components/notificationMenu.vue
+++ b/website/client/components/notificationMenu.vue
@@ -37,11 +37,11 @@ div.item-with-icon.item-notifications.dropdown
      @click='go("/user/profile")')
      span.glyphicon.glyphicon-plus-sign
      span {{ $t('haveUnallocated', {points: user.stats.points}) }}
-    a.dropdown-item(v-for='(message, key) in user.newMessages', v-if='message.value')
-      span(@click='navigateToGroup(key)')
+    a.dropdown-item(v-for='message in userNewMessages')
+      span(@click='navigateToGroup(message.key)')
        span.glyphicon.glyphicon-comment
        span {{message.name}}
-      span.clear-button(@click='clearMessages(key)', :popover="$t('clear')",
+      span.clear-button(@click='clearMessages(message.key)', :popover="$t('clear')",
        popover-placement='right', popover-trigger='mouseenter', popover-append-to-body='true') Clear
    a.dropdown-item(v-for='(notification, index) in user.groupNotifications', @click='viewGroupApprovalNotification(notification, index, true)')
      span(:class="groupApprovalNotificationIcon(notification)")
@@ -156,6 +156,18 @@ export default {
      return {name: ''};
      // return this.user.party;
    },
+    userNewMessages () {
+      // @TODO: For some reason data becomes corrupted. We should fix this on the server
+      let userNewMessages = [];
+      for (let key in this.user.newMessages) {
+        let message = this.user.newMessages[key];
+        if (message && message.name && message.value) {
+          message.key = key;
+          userNewMessages.push(message);
+        }
+      }
+      return userNewMessages;
+    },
  },
  methods: {
    // @TODO: I hate this function, we can do better with a hashmap
@@ -244,8 +256,8 @@ export default {
        count += this.user.stats.points > 0 ? 1 : 0;
      }

-      if (this.user.newMessages) {
-        count += Object.keys(this.user.newMessages).length;
+      if (this.userNewMessages) {
+        count += Object.keys(this.userNewMessages).length;
      }

      return count;