Merge pull request #46 from jordanopensource/feature/app-category-sin…

…gle-page

Fix search field and alignments in apps page

components/Elements/Dropdown.vue

@@ -66,7 +66,7 @@
   }
 
   .dropdown-link {
-    @apply w-full flex flex-row flex-no-wrap items-center justify-start;
+    @apply w-full h-full flex flex-row flex-no-wrap items-center justify-start;
   }
 
   .dropdown-link:hover>* {
@@ -84,7 +84,6 @@
   .dropdown-menu {
     @apply absolute z-10 overflow-y-auto py-4 my-4 bg-white;
     top: 100%;
-    left: 40px;
     background-clip: padding-box;
   }
 

components/Lists/AppAll.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="grid-list container">
     <div class="flex flex-row flex-wrap justify-between items-center mb-8">
-      <h2 v-if="title" class="mb-4 flex-grow">{{ title }}</h2>
-      <div class="flex flex-row flex-no-wrap justify-start items-center mb-4">
+      <h2 v-if="title" class="mb-4">{{ title }}</h2>
+      <div class="flex flex-grow flex-row flex-no-wrap justify-end items-center mb-4">
         <!-- Sort -->
         <div class="inline-block relative">
           <select name="sortMembers" id="sortMembers" v-model="sortValue"

pages/apps/category/_slug.vue

@@ -4,7 +4,7 @@
     <div class="container flex flex-col-reverse lg:flex-row justify-between py-6">
       <ElementsDropdown :items="categories" :active="activeCat" @setActive="setActiveCat" class="min-w-xs" />
       <ElementsControlInput v-model="searchString" :placeholder="$t('searchIn') + ' ' + activeCatTitle"
-        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto" />
+        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto rtl:mr-8 ltr:ml-8" />
     </div>
     <ListsAppAll v-if="allApps.length" :title="searchString ? $t('searchResults') + ' ' + searchString : ''"
       :contentList="filterBy(allApps, searchString, 'name_en', 'name_ar')" class="my-10" />

pages/apps/index.vue

@@ -4,14 +4,14 @@
     <div class="container flex flex-col-reverse lg:flex-row justify-between py-6">
       <ElementsDropdown :items="categories" :active="activeCat" @setActive="setActiveCat" class="min-w-xs" />
       <ElementsControlInput v-model="searchString" :placeholder="$t('search')"
-        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto" />
+        class="search-bar mb-8 lg:mb-0 rounded-full flex-grow w-full lg:w-auto rtl:mr-8 ltr:ml-8" />
     </div>
     <ListsAppSpotlight v-if="spotlightApps.length && !searchString" :title="$t('spotlightApp')"
       :content="orderBy(spotlightApps, 'published_at', -1)[0]" class="mt-10" />
     <ListsAppGrid v-if="popularApps.length && !searchString" :title="$t('popularApps')" :contentList="popularApps"
       :count="3" class="mt-10" />
     <ListsAppAll v-if="allApps.length" :title="searchString ? $t('searchResults') + ' ' + searchString : $t('allApps')"
-      :contentList="filterBy(allApps, searchString, 'name_en', 'description_en', 'name_ar', 'description_ar')"
+      :contentList="filterBy(allApps, searchString, 'name_en', 'name_ar')"
       class="my-10" />
   </div>
 </template>