@worksafevictoria/wcl7.5 1.1.0-beta.11 → 1.1.0-beta.111

package/src/components/SubComponents/ResourceGroup/index.vue

@@ -1,140 +1,132 @@
 <template>
-  <card-grid
-    :title="title"
-    :title-tag="titleTag"
-    :cards="displayedCards"
-    :rtl="rtl"
-    :force-lg-columns-per-row="columns"
-    :force-md-columns-per-row="columns"
-    :force-sm-columns-per-row="columns"
-    :is-selectable="false"
-    :row-spacing="'large'"
-    :class="[`card_group--${background}`, `card_group--${cardResourseType}`]"
-    :background-variant="background"
-    @selected="selectedCard"
-  >
-    <template
-      v-if="enableBundleFilter && bundle.length > 1"
-      v-slot:gridHeaderRight
+  <div>
+    <card-grid
+      :title="title"
+      :title-tag="titleTag"
+      :cards="displayedCards"
+      :rtl="rtl"
+      :force-lg-columns-per-row="columns"
+      :force-md-columns-per-row="columns"
+      :force-sm-columns-per-row="columns"
+      :is-selectable="false"
+      :row-spacing="'large'"
+      :class="[`card_group--${background}`, `card_group--${cardResourseType}`]"
+      :background-variant="background"
+      @selected="selectedCard"
     >
-      <switcher
-        v-if="enableBundleFilter"
-        :options="bundle"
-        class="card_group__switcher"
-        :get-option-alias="getBundleAlias"
-        @switched="onSwitcher"
-        @reset="onSwitcher"
-      />
-    </template>
+      <template v-if="enableBundleFilter && bundle.length > 1" v-slot:gridHeaderRight>
+        <switcher
+          v-if="enableBundleFilter"
+          :options="bundle"
+          class="card_group__switcher"
+          :get-option-alias="getBundleAlias"
+          @switched="onSwitcher"
+          @reset="onSwitcher"
+        />
+      </template>
 
-    <template v-if="filters.taxonomies.length > 0" v-slot:gridPreContent>
-      <directory-filters
-        class="card_group__filter"
-        :filters="filters"
-        :results="allCards.total"
-        :is-filtering="loader"
-        @onFilter="onFilter"
-        @onReset="reset"
-      />
-    </template>
+      <template v-if="filters.taxonomies.length > 0" v-slot:gridPreContent>
+        <directory-filters
+          class="card_group__filter"
+          :filters="filters"
+          :results="allCards.total"
+          :is-filtering="loader"
+          @onFilter="onFilter"
+          @onReset="reset"
+        />
+      </template>
 
-    <template v-slot:cardItem="{ card }">
-      <card-grid-item
-        v-if="card"
-        :show-divider="false"
-        :header-size="'large'"
-        class="card_group__card"
-        :class="{
-          [`card_group__card--${card.colour}`]: card.pillText,
-          [`card_group__card--none`]: !card.pillText,
-          [`card_group__card--${cardResourseType}`]: 'card_group__card--resourse-group'
-        }"
-        :card-header-title="card.title"
-        :caret="getCaret(card)"
-        :description="card.description"
-        :card-padding="'none'"
-        :caret-position="'bottom'"
-        :rtl="card.rtl"
-        :border-type="background === 'white' ? 'thick' : 'none'"
-        :pill-text="card.pillText"
-        :link="card.link ? card.link : false"
-        :taxonomies="{
-          industry: card.industry,
-          topic: card.topic,
-          language: card.language
-        }"
-      >
-        <template v-slot:cardTop>
-          <card-top :card="card" :resource-type="cardResourseType" />
-        </template>
+      <template v-slot:cardItem="{ card }">
+        <card-grid-item
+          v-if="card"
+          :show-divider="false"
+          :header-size="'large'"
+          class="card_group__card"
+          :class="{
+            [`card_group__card--${card.colour}`]: card.pillText,
+            [`card_group__card--none`]: !card.pillText,
+            [`card_group__card--${cardResourseType}`]: 'card_group__card--resourse-group',
+          }"
+          :card-header-title="card.title"
+          :caret="getCaret(card)"
+          :description="card.description"
+          :card-padding="'none'"
+          :caret-position="'bottom'"
+          :rtl="card.rtl"
+          :border-type="background === 'white' ? 'thick' : 'none'"
+          :pill-text="card.pillText"
+          :link="card.link ? card.link : false"
+          :taxonomies="{
+            industry: card.industry,
+            topic: card.topic,
+            language: card.language,
+          }"
+        >
+          <template v-slot:cardTop>
+            <card-top :card="card" :resource-type="cardResourseType" />
+          </template>
 
-        <template v-slot:cardDescription>
-          <card-body :card="card" :resource-type="cardResourseType" />
-        </template>
+          <template v-slot:cardDescription>
+            <card-body :card="card" :resource-type="cardResourseType" />
+          </template>
 
-        <!-- footer - download button -->
-        <template
-          v-if="cardResourseType === 'resource-group'"
-          v-slot:cardFooter
-        >
-          <card-footer :card="card" :resource-type="cardResourseType" />
-        </template>
-      </card-grid-item>
-    </template>
+          <!-- footer - download button -->
+          <template v-if="cardResourseType === 'resource-group'" v-slot:cardFooter>
+            <card-footer :card="card" :resource-type="cardResourseType" />
+          </template>
+        </card-grid-item>
+      </template>
 
-    <template
-      v-if="
-        loader ||
+      <template
+        v-if="
+          loader ||
           (displayedCards.length === 0 && !loader) ||
           $slots.cardGroupFooter ||
           (!loader && showLoadMore && hasMorePages)
-      "
-      v-slot:cardGridFooter
-    >
-      <column v-if="loader" sm="12">
-        <strong>Loading... </strong>
-        <b-spinner class="float-right"></b-spinner>
-      </column>
-      <column v-if="displayedCards.length === 0 && !loading" sm="12">
-        <strong>{{ emptyCardsText }}</strong>
-      </column>
-      <column v-if="$slots.cardGroupFooter" sm="12">
-        <slot name="cardGroupFooter"></slot>
-      </column>
-      <column v-if="!loader && showLoadMore" sm="12" class="text-center">
-        <cta-button
-          type="dark"
-          :focus-outline="'light'"
-          :text-only="true"
-          :is-centred="true"
-          :class="'card_group__loadmore mb-0'"
-          @clicked="handleLoadMore"
-          >Load more</cta-button
-        >
-      </column>
-    </template>
-  </card-grid>
+        "
+        v-slot:cardGridFooter
+      >
+        <column v-if="loader" sm="12">
+          <strong>Loading... </strong>
+          <b-spinner class="float-right"></b-spinner>
+        </column>
+        <column v-if="displayedCards.length === 0 && !loading" sm="12">
+          <strong>{{ emptyCardsText }}</strong>
+        </column>
+        <column v-if="$slots.cardGroupFooter" sm="12">
+          <slot name="cardGroupFooter"></slot>
+        </column>
+        <column v-if="!loader && showLoadMore" sm="12" class="text-center">
+          <cta-button
+            type="dark"
+            :focus-outline="'light'"
+            :text-only="true"
+            :is-centred="true"
+            :class="'card_group__loadmore mb-0'"
+            @clicked="handleLoadMore"
+            >Load more</cta-button
+          >
+        </column>
+      </template>
+    </card-grid>
+  </div>
 </template>
 
 <script>
-import Column from './../../Containers/Column/index.vue'
-import CardGrid from './../../Common/CardGrid/index.vue'
-import CardGridItem from './../../Common/CardGridItem/index.vue'
-import CardTop from './cardtop.vue'
-import CardBody from './cardbody.vue'
-import CardFooter from './cardfooter.vue'
-import CtaButton from './../CtaButton/index.vue'
-import DirectoryFilters from './../../Global/DirectoryFilters/index.vue'
-import Switcher from './switcher.vue'
-import {
-  isAbsoluteUrl,
-  navigateToPath,
-  isGovSite
-} from './../../../../lib/utility'
-import { BSpinner } from 'bootstrap-vue-next'
+import Column from "./../../Containers/Column/index.vue";
+import CardGrid from "./../../Common/CardGrid/index.vue";
+import CardGridItem from "./../../Common/CardGridItem/index.vue";
+import CardTop from "./cardtop.vue";
+import CardBody from "./cardbody.vue";
+import CardFooter from "./cardfooter.vue";
+import CtaButton from "./../CtaButton/index.vue";
+import DirectoryFilters from "./../../Global/DirectoryFilters/index.vue";
+import Switcher from "./switcher.vue";
+import { isAbsoluteUrl, navigateToPath, isGovSite } from "./../../../../lib/utility";
+import { BSpinner } from "bootstrap-vue-next";
 
 export default {
-  name: 'ResourceGroup',
+  name: "ResourceGroup",
   components: {
     Column,
     CardGrid,
@@ -145,80 +137,92 @@ export default {
     CtaButton,
     DirectoryFilters,
     Switcher,
-    BSpinner
+    BSpinner,
   },
   props: {
     background: {
       type: String,
-      default: 'white'
+      default: "white",
     },
     title: {
       type: String,
-      default: ''
+      default: "",
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: "h2",
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     bundle: {
       type: Array,
-      default: () => ['']
+      default: () => [""],
     },
     columns: {
       type: Number,
-      default: 3
+      default: 3,
     },
     initialDisplyLimit: {
       type: Number,
-      default: 0
+      default: 0,
     },
     fetchContent: {
       type: Function,
-      required: true
+      required: true,
     },
     fetchFilters: {
       type: Function,
       required: false,
-      default: null
+      default: null,
     },
     enableBundleFilter: {
-      type: Boolean
+      type: Boolean,
     },
     getBundleAlias: {
       type: Function,
       required: false,
-      default: null
+      default: null,
     },
     type: {
       type: String,
-      required: true
+      required: true,
     },
     resourceType: {
       type: String,
-      default: 'resource-group'
+      default: "resource-group",
     },
     showLoadMore: {
       type: Boolean,
-      default: false
+      default: false,
     },
     emptyCardsText: {
       type: String,
-      default: 'No results returned'
+      default: "No results returned",
     },
     loading: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  async fetch() {
+  // Temp use of mounted to replace fetch
+  async mounted() {
     if (this.displayedCards.length === 0) {
-      await this.loadFiltersAndContent()
+      console.log(
+        "🚀 ~ mounted ~ this.displayedCards.length:",
+        this.displayedCards.length
+      );
+      await this.loadFiltersAndContent();
     }
   },
+  // TODO useAsyncData <script setup>
+  // async fetch() {
+  //   if (this.displayedCards.length === 0) {
+  //     await this.loadFiltersAndContent()
+  //   }
+  // },
+
   data() {
     return {
       loader: this.loading,
@@ -231,283 +235,282 @@ export default {
       filters: {
         taxonomies: [],
         selected: {},
-        availableBundles: []
-      }
-    }
+        availableBundles: [],
+      },
+    };
   },
   computed: {
     allCardsRTL() {
       if (this.displayedCards.length === 0) {
-        return this.rtl
+        return this.rtl;
       }
-      return this.displayedCards.every((card) => this.rtl || card.rtl)
-    }
+      return this.displayedCards.every((card) => this.rtl || card.rtl);
+    },
   },
   fetchOnServer: true,
-  fetchKey: 'wcl-card-group',
+  fetchKey: "wcl-card-group",
   methods: {
     async loadFiltersAndContent() {
       await Promise.all([
         this.fetchFilters ? this.loadFilters() : Promise.resolve(),
-        this.loadMoreCards(true)
-      ])
+        this.loadMoreCards(true),
+      ]);
+      console.log("🚀 ~ loadFiltersAndContent ~ this.fetchFilters:", this.fetchFilters);
     },
     init() {
       this.allCards = {
         total: 0,
-        cards: []
-      }
-      this.displayLimit = 0
-      this.hasMorePages = false
-      this.displayedCards = []
-      this.bundleCache = {}
+        cards: [],
+      };
+      this.displayLimit = 0;
+      this.hasMorePages = false;
+      this.displayedCards = [];
+      this.bundleCache = {};
     },
     async fetchCards(currentDisplayedCards, allCards, addMoreBy, bundles) {
       const shouldMakeNewFetchCall =
-        currentDisplayedCards.length + addMoreBy > allCards.cards.length
+        currentDisplayedCards.length + addMoreBy > allCards.cards.length;
 
       if (shouldMakeNewFetchCall) {
         const cardBundles = await Promise.all(
-          bundles.map((bundle, index) =>
-            this.getBundle(bundle, addMoreBy, index)
-          )
-        )
+          bundles.map((bundle, index) => this.getBundle(bundle, addMoreBy, index))
+        );
 
-        allCards = this.getShuffledCards(cardBundles)
+        allCards = this.getShuffledCards(cardBundles);
 
         if (
-          this.type === 'paragraph--cards_group_latest' ||
-          this.type === 'paragraph--browse_content' ||
-          this.type === 'paragraph--resource_group' ||
-          this.type === 'paragraph--resource_list'
+          this.type === "paragraph--cards_group_latest" ||
+          this.type === "paragraph--browse_content" ||
+          this.type === "paragraph--resource_group" ||
+          this.type === "paragraph--resource_list"
         ) {
-          allCards.cards = this.sortByDate(allCards.cards)
+          allCards.cards = this.sortByDate(allCards.cards);
         }
       }
-      return allCards
+      return allCards;
     },
     async loadMoreCards(init) {
       const attrs = {
-        group: this.$store?.state?.page?.content?.title
-      }
+        group: this.$pageStore?.content?.title,
+        //group: this.$store?.state?.page?.content?.title,
+      };
       if (this.$gtm && !init) {
-        this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
+        this.$gtm.push({ event: "custom.interaction.showmore.click", ...attrs });
       }
       if (init) {
-        this.init()
+        this.init();
       }
-      this.loader = true
-      const addMoreBy = this.initialDisplyLimit
-      this.displayLimit += addMoreBy
+      this.loader = true;
+      const addMoreBy = this.initialDisplyLimit;
+      this.displayLimit += addMoreBy;
       const bundles =
         this.filters.availableBundles.length > 0
           ? this.filters.availableBundles
-          : this.bundle
+          : this.bundle;
       this.allCards = await this.fetchCards(
         this.displayedCards,
         this.allCards,
         addMoreBy,
         bundles
-      )
+      );
 
-      this.hasMorePages = this.allCards.total > this.allCards.cards.length
-      this.displayedCards = this.allCards.cards.slice(0, this.displayLimit)
+      this.hasMorePages = this.allCards.total > this.allCards.cards.length;
+      this.displayedCards = this.allCards.cards.slice(0, this.displayLimit);
 
-      this.loader = false
+      this.loader = false;
     },
     getBundle(bundle, addMoreBy, index) {
-      let start
-      const rows = addMoreBy
+      let start;
+      const rows = addMoreBy;
       const cache = (this.bundleCache[bundle] = this.bundleCache[bundle] || {
         response: {
           results: [],
-          numFound: 0
+          numFound: 0,
         },
         qs: {
-          start
-        }
-      })
+          start,
+        },
+      });
 
       if (cache.qs.start === undefined) {
-        start = 0
+        start = 0;
       } else if (cache.response.numFound > cache.response.results.length) {
-        start = cache.response.results.length
+        start = cache.response.results.length;
       } else {
-        return Promise.resolve(cache.response)
+        return Promise.resolve(cache.response);
       }
 
       const qs = {
         bundle,
         rows,
-        start
-      }
-      return this.fetchContent(qs, this.filters.selected, index).then(
-        (response) => {
-          cache.qs.start = qs.start
-          cache.response.numFound = response.numFound
-          cache.response.results.push(...response.results)
-          return cache.response
-        }
-      )
+        start,
+      };
+      return this.fetchContent(qs, this.filters.selected, index).then((response) => {
+        cache.qs.start = qs.start;
+        cache.response.numFound = response.numFound;
+        cache.response.results.push(...response.results);
+        return cache.response;
+      });
     },
     getShuffledCards(cardBundles) {
-      const shuffled = []
+      const shuffled = [];
       const bundleWithMostCards = cardBundles.reduce(
         (a, b) => (a.results.length > b.results.length ? a : b),
         { results: [] }
-      ).results.length
+      ).results.length;
 
       for (let i = 0; i < bundleWithMostCards; i++) {
         cardBundles.forEach((bundle) => {
           if (bundle.results[i]) {
-            shuffled.push(bundle.results[i])
+            shuffled.push(bundle.results[i]);
           }
-        })
+        });
       }
 
       const total = cardBundles.reduce((acc, bundle) => {
-        return acc + bundle.numFound
-      }, 0)
+        return acc + bundle.numFound;
+      }, 0);
 
-      return { cards: shuffled, total }
+      return { cards: shuffled, total };
     },
     loadFilters() {
       return this.fetchFilters().then((taxonomies) => {
-        this.filters.taxonomies = taxonomies
-        return Promise.resolve(taxonomies)
-      })
+        console.log("🚀 ~ returnthis.fetchFilters ~ taxonomies:", taxonomies);
+        this.filters.taxonomies = taxonomies;
+        return Promise.resolve(taxonomies);
+      });
     },
     onFilter(filters) {
-      this.bundleCache = {}
+      this.bundleCache = {};
       Object.keys(filters).forEach((filter) => {
-        this.filters.selected[filter] = filters[filter].map((obj) => obj.tid)
-      })
-      this.loadMoreCards(true)
+        this.filters.selected[filter] = filters[filter].map((obj) => obj.tid);
+      });
+      this.loadMoreCards(true);
     },
     onSwitcher(switchToBundle) {
-      this.filters.selected = {}
-      this.filters.availableBundles.length = 0
+      this.filters.selected = {};
+      this.filters.availableBundles.length = 0;
       if (switchToBundle) {
-        this.filters.availableBundles.push(switchToBundle)
+        this.filters.availableBundles.push(switchToBundle);
       }
-      this.loadMoreCards(true)
+      this.loadMoreCards(true);
     },
     async reset() {
-      this.bundleCache = {}
-      this.filters.selected = {}
-      this.filters.availableBundles.length = 0
-      await this.loadMoreCards(true)
+      this.bundleCache = {};
+      this.filters.selected = {};
+      this.filters.availableBundles.length = 0;
+      await this.loadMoreCards(true);
     },
     sortByDate(cards) {
       const sorted = cards.sort((a, b) => {
-        return new Date(b.dateSort) - new Date(a.dateSort)
-      })
-      return sorted
+        return new Date(b.dateSort) - new Date(a.dateSort);
+      });
+      return sorted;
     },
     handleLoadMore() {
-      this.loadMoreCards(false)
+      this.loadMoreCards(false);
     },
 
     getCaret(card) {
       if (card.link && isAbsoluteUrl(card.link)) {
-        return 'external'
+        return "external";
       } else {
-        return undefined
+        return undefined;
       }
     },
     selectedCard(card) {
       // Some custom logic for gov caretaker logic
-      if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
+      if (
+        (this.$config ? this.$config.public.caretaker : process.env.CARETAKER) === "true"
+      ) {
         if (!isGovSite(card?.selectedCard?.link)) {
-          this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
-          this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          // this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
+          // this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          if (this.$pageStore) {
+            this.$pageStore.caretaker.referrer = "list-group";
+          }
+          if (this.$bus) {
+            this.$bus.$emit("caretaker-open", card?.selectedCard?.link);
+          }
         } else {
           navigateToPath.call(
             this,
             card?.selectedCard?.link,
             card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
-          )
+          );
         }
       } else {
         navigateToPath.call(
           this,
           card?.selectedCard?.link,
           card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
-        )
+        );
       }
     },
     focussed(ev) {
-      const path = ev.path || (ev.composedPath && ev.composedPath())
-      const theTabbedCards = path.find(
-        (el) => el['_prevClass'] === 'tabbed-cards'
-      )
+      const path = ev.path || (ev.composedPath && ev.composedPath());
+      const theTabbedCards = path.find((el) => el["_prevClass"] === "tabbed-cards");
       if (ev.shiftKey && theTabbedCards) {
-        ev.preventDefault()
-        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
-          'isSelected'
-        )
-        let selectedCard = selectedTabbedCards[0].getElementsByTagName('button')
+        ev.preventDefault();
+        let selectedTabbedCards = theTabbedCards.getElementsByClassName("isSelected");
+        let selectedCard = selectedTabbedCards[0].getElementsByTagName("button");
         let thePrevLGItem = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
-          'button'
-        )
+          "button"
+        );
         if (thePrevLGItem) {
-          thePrevLGItem[0].focus()
+          thePrevLGItem[0].focus();
         } else {
-          selectedCard[0].focus()
+          selectedCard[0].focus();
         }
       } else if (!ev.shiftKey && theTabbedCards) {
-        ev.preventDefault()
-        let selectedTabbedCards = theTabbedCards.getElementsByClassName(
-          'isSelected'
-        )
+        ev.preventDefault();
+        let selectedTabbedCards = theTabbedCards.getElementsByClassName("isSelected");
         let nextTabbedCard = selectedTabbedCards[0]?.parentElement?.nextSibling?.getElementsByTagName(
-          'button'
-        )
+          "button"
+        );
         let theNextLGItem = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
-          'button'
-        )
+          "button"
+        );
         if (theNextLGItem) {
-          theNextLGItem[0].focus()
+          theNextLGItem[0].focus();
         } else if (nextTabbedCard) {
-          nextTabbedCard[0].focus()
+          nextTabbedCard[0].focus();
         } else {
-          let nextFocus = this.focusNextElement()
-          this.$root.$emit('last-focus-out')
-          nextFocus.focus()
+          let nextFocus = this.focusNextElement();
+          if (this.$bus) {
+            this.$bus.$emit("last-focus-out");
+          }
+          nextFocus.focus();
         }
       } else {
-        return true
+        return true;
       }
     },
     focusNextElement(reverse, activeElem) {
       /*check if an element is defined or use activeElement*/
       activeElem =
-        activeElem instanceof HTMLElement ? activeElem : document.activeElement
+        activeElem instanceof HTMLElement ? activeElem : document.activeElement;
 
       let queryString = [
           'a:not([disabled]):not([tabindex="-1"])',
           'button:not([disabled]):not([tabindex="-1"])',
           'input:not([disabled]):not([tabindex="-1"])',
           'select:not([disabled]):not([tabindex="-1"])',
-          '[tabindex]:not([disabled]):not([tabindex="-1"])'
+          '[tabindex]:not([disabled]):not([tabindex="-1"])',
           /* add custom queries here */
-        ].join(','),
+        ].join(","),
         queryResult = Array.prototype.filter.call(
           document.querySelectorAll(queryString),
           (elem) => {
             /*check for visibility while always include the current activeElement*/
-            return (
-              elem.offsetWidth > 0 ||
-              elem.offsetHeight > 0 ||
-              elem === activeElem
-            )
+            return elem.offsetWidth > 0 || elem.offsetHeight > 0 || elem === activeElem;
           }
         ),
         indexedList = queryResult
           .slice()
           .filter((elem) => {
             /* filter out all indexes not greater than 0 */
-            return elem.tabIndex == 0 || elem.tabIndex == -1 ? false : true
+            return elem.tabIndex == 0 || elem.tabIndex == -1 ? false : true;
           })
           .sort((a, b) => {
             /* sort the array by index from smallest to largest */
@@ -521,28 +524,27 @@ export default {
               ? -1
               : b.tabIndex != 0
               ? 1
-              : 0
+              : 0;
           }),
         focusable = [].concat(
           indexedList,
           queryResult.filter((elem) => {
             /* filter out all indexes above 0 */
-            return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false
+            return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false;
           })
-        )
+        );
 
       /* if reverse is true return the previous focusable element
      if reverse is false return the next focusable element */
       return reverse
-        ? focusable[focusable.indexOf(activeElem) - 1] ||
-            focusable[focusable.length - 1]
-        : focusable[focusable.indexOf(activeElem) + 1] || focusable[0]
-    }
-  }
-}
+        ? focusable[focusable.indexOf(activeElem) - 1] || focusable[focusable.length - 1]
+        : focusable[focusable.indexOf(activeElem) + 1] || focusable[0];
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 $cardTextPadding: 16px;
 $borderRadius: 8px;
 
@@ -551,6 +553,7 @@ $borderRadius: 8px;
     &--resource-list {
       :deep(.section-group__content) {
         display: flex;
+
         > .row {
           flex: 0 0 70%;
         }
@@ -558,14 +561,22 @@ $borderRadius: 8px;
     }
   }
 }
+
 .card_group {
   &--resource-list {
     :deep(.card-body) {
-      padding-left: $cardTextPadding !important;
-      padding-right: $cardTextPadding !important;
+      padding-left: 13px !important;
+      padding-right: 13px !important;
+    }
+    @media screen and (min-width: 768px) {
+      :deep(.card-body) {
+        padding-left: $cardTextPadding !important;
+        padding-right: $cardTextPadding !important;
+      }
     }
   }
 }
+
 .card_group__card--resource-group {
   :deep(.card-body) {
     padding-left: $cardTextPadding !important;