fix: icons for Activity Finder ynorth-projects/openy_activity_finder@6…

…d41ed4
ymcatwincities · Apr 26, 2022 · f79fc4f · f79fc4f
1 parent eaf0b11
commit f79fc4f
Show file tree

Hide file tree

Showing 16 changed files with 2,158 additions and 6,803 deletions.
diff --git a/openy_activity_finder.libraries.yml b/openy_activity_finder.libraries.yml
@@ -60,7 +60,7 @@ openy_activity_finder_search:
     - core/jquery.cookie
 
 activity_finder_4:
-  version: 4.0.13
+  version: 4.0.14
   js:
     openy_af4_vue_app/dist/activity_finder_4.umd.min.js: { minified: true }
   css:

diff --git a/openy_af4_vue_app/dist/activity_finder_4.css b/openy_af4_vue_app/dist/activity_finder_4.css
diff --git a/openy_af4_vue_app/dist/activity_finder_4.umd.min.js b/openy_af4_vue_app/dist/activity_finder_4.umd.min.js
diff --git a/openy_af4_vue_app/package-lock.json b/openy_af4_vue_app/package-lock.json
diff --git a/openy_af4_vue_app/package.json b/openy_af4_vue_app/package.json
@@ -1,13 +1,16 @@
 {
   "name": "activity_finder_4",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "build": "vue-cli-service build --target lib --formats umd-min --name activity_finder_4 src/main.js",
     "dev": "vue-cli-service build --target lib --formats umd-min --name activity_finder_4 src/main.js --watch",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^2.0.6",
     "axios": "^0.26.0",
     "bootstrap": "^4.6.1",
     "bootstrap-vue": "^2.21.2",

diff --git a/openy_af4_vue_app/src/components/BookmarkIcon.vue b/openy_af4_vue_app/src/components/BookmarkIcon.vue
@@ -2,7 +2,7 @@
   <div class="bookmark-toggle">
     <a role="button" title="Bookmarked items" @click="onClick">
       <span v-if="counter > 0" class="counter">{{ counter }}</span>
-      <i class="fa fa-bookmark"></i>
+      <font-awesome-icon icon="bookmark" />
     </a>
   </div>
 </template>
@@ -38,6 +38,7 @@ export default {
 }
 
 .bookmark-toggle {
+  line-height: 50px;
   position: fixed;
   top: 50%;
   margin-top: -25px;
@@ -73,7 +74,7 @@ export default {
     min-width: 24px;
   }
 
-  .fa {
+  .fa, .svg-inline--fa {
     color: $white;
     font-size: 18px;
     line-height: 50px;

diff --git a/openy_af4_vue_app/src/components/Foldable.vue b/openy_af4_vue_app/src/components/Foldable.vue
@@ -2,7 +2,8 @@
   <div class="foldable-component">
     <div v-b-toggle="collapseId" class="foldable-title">
       <span class="left">
-        <i class="fa fa-chevron-down" aria-hidden="true" />
+        <font-awesome-icon icon="chevron-down" />
+        <font-awesome-icon icon="chevron-up" />
         <i class="fa fa-chevron-up" aria-hidden="true" />
         <span class="title">
           <strong>{{ label }}</strong>
@@ -59,6 +60,7 @@ export default {
       display: flex;
       align-items: center;
       flex: auto;
+      line-height: 50px;
     }
 
     .counter {

diff --git a/openy_af4_vue_app/src/components/FoldableInput.vue b/openy_af4_vue_app/src/components/FoldableInput.vue
@@ -9,7 +9,8 @@
         </span>
       </span>
       <span class="right">
-        <i class="fa fa-chevron-down" aria-hidden="true" />
+        <font-awesome-icon icon="chevron-down" />
+        <font-awesome-icon icon="chevron-up" />
         <i class="fa fa-chevron-up" aria-hidden="true" />
       </span>
     </div>

diff --git a/openy_af4_vue_app/src/components/ResultsList.vue b/openy_af4_vue_app/src/components/ResultsList.vue
@@ -293,7 +293,7 @@ export default {
         line-height: 15px;
       }
 
-      .fa {
+      .fa, .svg-inline--fa {
         font-size: 20px;
         color: $af-dark-gray;
         margin-right: 10px;

diff --git a/openy_af4_vue_app/src/components/WizardBar.vue b/openy_af4_vue_app/src/components/WizardBar.vue
@@ -6,7 +6,7 @@
           <div class="controls">
             <span class="filters">
               <a :class="{ 'no-filters': !filtersCount }" role="button" @click="showFiltersModal()">
-                <i class="fa fa-filter" />
+                <font-awesome-icon icon="filter" />
                 {{ filtersCount | formatPlural('1 Filter', '@count Filters') }}
               </a>
             </span>
@@ -39,6 +39,7 @@
 </template>
 
 <script>
+
 import FiltersModal from '@/components/modals/Filters.vue'
 
 export default {
@@ -155,10 +156,6 @@ export default {
       .no-filters {
         color: $af-dark-gray;
       }
-
-      .fa-filter {
-        padding: 0 8px;
-      }
     }
 
     .start-over {

diff --git a/openy_af4_vue_app/src/components/filters/SortSelect.vue b/openy_af4_vue_app/src/components/filters/SortSelect.vue
@@ -5,7 +5,7 @@
         {{ option }}
       </option>
     </select>
-    <i class="fa fa-chevron-down"></i>
+    <font-awesome-icon icon="chevron-down" />
   </div>
 </template>
 
@@ -70,11 +70,11 @@ export default {
     }
   }
 
-  .fa {
+  .fa, .svg-inline--fa {
     position: absolute;
     right: 0;
     font-size: 12px;
-    padding: 0 14px;
+    margin: 0 14px;
   }
 }
 </style>
diff --git a/openy_af4_vue_app/src/components/modals/ActivityDetails.vue b/openy_af4_vue_app/src/components/modals/ActivityDetails.vue
@@ -36,7 +36,7 @@
             <div class="right">
               <div class="info-section">
                 <div v-if="item.dates" class="item-detail dates">
-                  <i class="fa fa-calendar"></i>
+                  <font-awesome-icon icon="calendar" />
                   <span>
                     <span class="info">{{ item.dates }}</span>
                     <br />
@@ -45,7 +45,7 @@
                 </div>
 
                 <div class="item-detail schedule">
-                  <i class="fa fa-clock fa-clock-o"></i>
+                  <font-awesome-icon icon="clock" />
                   <span class="schedule-items">
                     <span
                       v-for="(schedule, index) in item.schedule"
@@ -78,7 +78,7 @@
                 </div>
 
                 <div v-if="item.price" class="item-detail price">
-                  <i class="fa fa-money-bill fa-money"></i>
+                  <font-awesome-icon icon="money-bill" />
                   <span>
                     <span class="info">{{ item.price }}</span>
                   </span>
@@ -115,7 +115,7 @@
                     title="Add bookmark"
                     @click="bookmarkItem(age, index)"
                   >
-                    <i class="fa fa-bookmark"></i>
+                    <font-awesome-icon icon="bookmark" />
                   </a>
                   <a
                     v-else-if="!legacyMode"
@@ -125,7 +125,7 @@
                     title="Remove bookmark"
                     @click="unbookmarkItem(age)"
                   >
-                    <i class="fa fa-bookmark"></i>
+                    <font-awesome-icon icon="bookmark" />
                   </a>
                 </template>
                 <template v-else-if="buttonsState[index] === 'sentToRegister'">
@@ -146,7 +146,7 @@
                     title="Add bookmark"
                     @click="bookmarkItem(age, index)"
                   >
-                    <i class="fa fa-bookmark"></i>
+                    <font-awesome-icon icon="bookmark" />
                   </a>
                   <a
                     v-else-if="!legacyMode"
@@ -156,7 +156,7 @@
                     title="Remove bookmark"
                     @click="unbookmarkItem(age)"
                   >
-                    <i class="fa fa-bookmark"></i>
+                    <font-awesome-icon icon="bookmark" />
                   </a>
                 </template>
                 <template v-else-if="buttonsState[index] === 'itemBookmarked'">
@@ -466,7 +466,7 @@ export default {
         line-height: 15px;
       }
 
-      .fa {
+      .fa, .svg-inline--fa {
         font-size: 20px;
         color: $af-dark-gray;
         margin-right: 10px;
@@ -501,14 +501,15 @@ export default {
 
       .bookmark {
         display: inline-block;
+        line-height: 46px;
         width: 50px;
         height: 50px;
         border-radius: 5px;
         text-align: center;
         margin-left: 10px;
         border: 2px solid $af-blue;
 
-        .fa {
+        .fa, .svg-inline--fa {
           color: $af-blue;
           font-size: 18px;
           line-height: 46px;
@@ -519,7 +520,7 @@ export default {
         border: none;
         background-color: $af-green;
 
-        .fa {
+        .fa, .svg-inline--fa {
           color: $white;
           line-height: 50px;
         }
@@ -539,7 +540,7 @@ export default {
         padding: 0 15px 0 20px;
         white-space: normal;
 
-        .fa {
+        .fa, .svg-inline--fa {
           font-size: 20px;
         }
       }

diff --git a/openy_af4_vue_app/src/components/modals/BookmarkFeatureDescription.vue b/openy_af4_vue_app/src/components/modals/BookmarkFeatureDescription.vue
@@ -2,7 +2,7 @@
   <div class="bookmark-feature-description">
     <div class="top">
       <span class="bookmark-icon">
-        <i class="fa fa-bookmark"></i>
+        <font-awesome-icon icon="bookmark" />
       </span>
       <p class="title">{{ 'Now you can bookmark activities!' | t }}</p>
       <p>
@@ -43,14 +43,15 @@ export default {
   }
 
   .bookmark-icon {
+    line-height: 50px;
     display: inline-block;
     width: 50px;
     height: 50px;
     border: 2px solid $af-blue;
     border-radius: 5px;
     margin-bottom: 20px;
 
-    .fa {
+    .fa, .svg-inline--fa {
       color: $af-blue;
       font-size: 18px;
       line-height: 50px;

diff --git a/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue b/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal id="activity-finder-bookmarked-items" v-model="visible" flyout>
     <template v-slot:modal-title>
-      <i class="fa fa-bookmark"></i>
+      <font-awesome-icon icon="bookmark" />
       <span>{{ 'Bookmarked items' | t }}</span>
     </template>
     <template>
@@ -24,7 +24,7 @@
               <div class="row">
                 <div class="col-8 col-xs-8">
                   <div class="item-detail dates">
-                    <i class="fa fa-calendar"></i>
+                    <font-awesome-icon icon="calendar" />
                     <span>
                       <span class="info">{{ item.item.dates }}</span>
                       <br />
@@ -33,7 +33,7 @@
                   </div>
 
                   <div class="item-detail schedule">
-                    <i class="fa fa-clock fa-clock-o"></i>
+                    <font-awesome-icon icon="clock" />
                     <span class="schedule-items">
                       <span
                         v-for="(schedule, schedule_index) in item.item.schedule"
@@ -307,7 +307,7 @@ export default {
           line-height: 15px;
         }
 
-        .fa {
+        .fa, .svg-inline--fa {
           font-size: 20px;
           color: $af-dark-gray;
           margin-right: 10px;
@@ -357,6 +357,7 @@ export default {
         }
 
         .remove {
+          line-height: 46px;
           display: inline-block;
           width: 50px;
           height: 50px;
@@ -365,7 +366,7 @@ export default {
           text-align: center;
           margin-left: 10px;
 
-          .fa {
+          .fa, .svg-inline--fa {
             font-size: 18px;
             line-height: 46px;
           }

diff --git a/openy_af4_vue_app/src/components/modals/Modal.vue b/openy_af4_vue_app/src/components/modals/Modal.vue
@@ -195,7 +195,7 @@ export default {
       font-size: 18px;
       line-height: 27px;
 
-      .fa {
+      .fa, .svg-inline--fa {
         width: 50px;
         margin-left: -10px;
         text-align: center;

diff --git a/openy_af4_vue_app/src/main.js b/openy_af4_vue_app/src/main.js
@@ -2,6 +2,12 @@ import Vue from 'vue'
 import BootstrapVue from 'bootstrap-vue'
 import App from '@/App.vue'
 import router from '@/router/index.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFilter, faCalendar, faMoneyBill, faClock, faChevronDown, faChevronUp, faBookmark } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add([faFilter, faCalendar, faMoneyBill, faClock, faChevronDown, faChevronUp, faBookmark])
+Vue.component('font-awesome-icon', FontAwesomeIcon)
 
 // Listen to custom event to track events in Google Analytics.
 document.addEventListener('openy_activity_finder_event', e => {