Fix mobile process list formatting

resources/js/processes-catalogue/components/Bookmark.vue

@@ -3,7 +3,7 @@
       v-b-tooltip.hover.bottom
       :title="bookmarkTitle"
       :class="bookmarkClass"
-      @click="checkBookmark()"
+      @click="checkBookmark"
     />
 </template>
 
@@ -24,7 +24,10 @@ export default {
     this.bookmarkId = this.process?.bookmark_id;
   },
   methods: {
-    checkBookmark() {
+    checkBookmark(event) {
+      // prevent opening the process when the bookmark is clicked
+      event.stopPropagation();
+
       if (this.isBookmarked) {
         ProcessMaker.apiClient
           .delete(`process_bookmarks/${this.bookmarkId}`)
@@ -53,6 +56,9 @@ export default {
       return this.isBookmarked ? "fas fa-bookmark marked bookmark" : "fas fa-bookmark unmarked bookmark";
     },
     bookmarkTitle() {
+      if (!this.clickable) {
+        return null;
+      }
       return this.isBookmarked ? this.$t("Remove from My Bookmarks") : this.$t("Add to My Bookmarks");
     },
 

resources/js/processes-catalogue/components/CardProcess.vue

@@ -243,6 +243,7 @@ export default {
   justify-content: flex-start;
   @media (max-width: $lp-breakpoint) {
     display: block;
+    height: auto;
   }
 }
 .text-custom {

resources/js/processes-catalogue/components/ProcessListing.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="process-listing h-100">
-
     <CardProcess
       :key="index"
       v-if="!isTemplateCategory"

resources/js/processes-catalogue/components/ProcessesCatalogue.vue

@@ -36,10 +36,16 @@
       </div>
       <div class="processes-info">
           <div class="mobile-menu-control" v-show="showMobileMenuControl">
-            <span @click="showMenu = !showMenu">
+            <div class="menu-button" @click="showMenu = !showMenu">
               <i class="fa fa-bars"></i>
               {{ category?.name || '' }}
-            </span>
+            </div>
+            <div class="bookmark-button" @click="showBookmarks">
+              <i class="fas fa-bookmark"></i>
+            </div>
+            <div class="search-button" @click="$root.mobileSearchVisible = !$root.mobileSearchVisible">
+              <i class="fas fa-search"></i>
+            </div>
           </div>
 
           <router-view @goBackCategory="goBackCategory"></router-view>
@@ -234,6 +240,13 @@ export default {
     hasTemplateParams(url) {
       return url.search.includes("&template=");
     },
+    showBookmarks() {
+      if (this.$route.query.categoryId !== "bookmarks") {
+        this.$router.push({ name: "index", query: { categoryId: "bookmarks" } });
+      }
+    },
+    showSearch() {
+    }
   },
 };
 </script>
@@ -363,11 +376,31 @@ export default {
   font-size: 1.3em;
   margin-top: 10px;
   margin-left: 1em;
-  i {
-    margin-right: 3px;
+  margin-right: 1em;
+  align-items: center;
+
+  .menu-button {
+    flex-grow: 1;
+    i {
+      margin-right: 3px;
+    }
+  }
+
+  .bookmark-button {
+    display: flex;
+    padding: 10px;
+    margin-right: 10px;
+    font-size: 1.1em;
+  }
+
+  .search-button {
+    display: flex;
+    padding: 10px;
+    font-size: 1.1em;
   }
+
   @media (max-width: $lp-breakpoint) {
-    display: block;
+    display: flex;
   }
 }
 

resources/js/processes-catalogue/components/menuCatologue.vue

@@ -99,13 +99,11 @@
 </template>
 
 <script>
-import SearchCategories from "./utils/SearchCategories.vue";
 import SelectTemplateModal from "../../components/templates/SelectTemplateModal.vue";
 import { EventBus } from '../index.js';
 
 export default {
   components: {
-    SearchCategories,
     SelectTemplateModal,
   },
   props: [

resources/js/processes-catalogue/components/utils/Card.vue

@@ -3,11 +3,11 @@
     v-if="showCards"
     overlay
     class="card-process"
+    @click="openInfo(process)"
   >
     <b-card-text>
       <div
         class="card-info"
-        @click="openInfo(process)"
       >
         <img
           class="icon-process"
@@ -130,7 +130,8 @@ export default {
     max-width: none;
     min-width: none;
     border-radius: 8px;
-    height: 100px;
+    height: 72px;
+    margin-right: 5px;
   }
 }
 .card-process2 {
@@ -158,7 +159,8 @@ export default {
   margin-bottom: 20px;
 
   @media (max-width: $lp-breakpoint) {
-    padding: 16px;
+    padding-left: 16px;
+    padding-right: 20px;
   }
 }
 .card-img {
@@ -172,9 +174,9 @@ export default {
   background-color: #F9E7C3;
   margin-right: 8px;
 
-  border-radius: 15px;
-  min-width: 30px;
-  height: 30px;
+  border-radius: 12px;
+  min-width: 24px;
+  height: 24px;
   justify-content: center;
   align-items: center;
   padding: 0 8px;
@@ -186,6 +188,7 @@ export default {
 
 .bookmark {
   float:right;
+  font-size: 1.2em;
 }
 .card-text {
   height: 100%;
@@ -212,8 +215,8 @@ export default {
   }
 }
 .icon-process {
-  width: 48px;
-  height: 48px;
+  width: 24px;
+  height: 24px;
   margin-bottom: 16px;
 
   @media (max-width: $lp-breakpoint) {

resources/js/processes-catalogue/components/utils/SearchCards.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="search">
+  <div class="search" :class="{ 'show-on-mobile' : $root.mobileSearchVisible }">
     <b-input-group class="search-input-group">
       <b-input-group-prepend >
         <b-button
           :title="$t('Search Processes')"
           @click="fetch()"
         >
           <i class="fas fa-search search-icon" />
+          <i class="fas fa-arrow-left search-icon" />
         </b-button>
       </b-input-group-prepend>
 
@@ -19,11 +20,10 @@
 
       <b-input-group-append>
         <b-button
-          v-if="filter"
           v-b-tooltip.hover.bottom="$t('Clear Search')"
           @click="clearSearch()"
         >
-          <b-icon class="icon-close" icon="x" />
+          <i class="fas fa-times clear-icon" />
         </b-button>
       </b-input-group-append>
     </b-input-group>
@@ -90,13 +90,62 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '~styles/variables';
+
+.search {
+  margin-right: 15px;
+
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+    margin-right: 0;
+
+    .input-group {
+      width: 100%;
+    }
+  }
+}
+
+.show-on-mobile {
+  display: block;
+}
+
 .search-input-group {
   margin-top: 10px;
   .btn-secondary, input {
     background-color: #E5EDF3;
     border-color: #E5EDF3;
     color: #5C5C63;
   }
+
+  .fa-search {
+    display: block;
+  }
+
+  .fa-arrow-left {
+    display: none;
+  }
+
+  @media (max-width: $lp-breakpoint) {
+    .input-group-prepend .btn {
+      border-radius: 10px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .input-group-append .btn {
+      border-radius: 10px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    .fa-search {
+      display:none;
+    }
+
+    .fa-arrow-left {
+      display: block;
+    }
+  }
 }
 
 .category-button {

resources/js/processes-catalogue/index.js

@@ -43,6 +43,7 @@ new Vue({
       permission: window.ProcessMaker.permission,
       isDocumenterInstalled: window.ProcessMaker.isDocumenterInstalled,
       categories: [],
+      mobileSearchVisible: false,
     };
   },
   methods: {