Merge pull request #38 from jordanopensource/development

Release v1.1.0 of DSP web portal

assets/css/transitions.css

@@ -0,0 +1,14 @@
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .fade-enter-to,
+  .menu-fade-leave {
+    opacity: 1;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.5s ease-in-out;
+  }

components/Elements/Dropdown.vue

@@ -12,11 +12,11 @@
     <!-- Dropdown Menu -->
     <transition name="dropdown">
       <div class="dropdown-menu" v-bind:class="{ active: show }" v-if="show">
-        <div :class="active == 'all' ? 'active': ''" class="dropdown-menu-link" @click="setActive('all')">
+        <div :class="active == 'all' ? 'active': ''" class="dropdown-menu-link" @click="setActive('all', $t('all'))">
           <p class="dropdown-menu-text">{{ $t('all') }}</p>
         </div>
         <div v-for="item in items" :key="item.id" :class="active == item.name ? 'active': ''" class="dropdown-menu-link"
-          @click="setActive(item.name)">
+          @click="setActive(item.name, item['title_' + $i18n.locale])">
           <p class="dropdown-menu-text">{{ item['title_' + $i18n.locale] }}</p>
         </div>
       </div>
@@ -42,9 +42,9 @@
       }
     },
     methods: {
-      setActive(value) {
+      setActive(value, title) {
         this.show = false
-        this.$emit('setActive', value)
+        this.$emit('setActive', value, title)
       }
     },
     computed: {

components/Lists/AppAll.vue

@@ -0,0 +1,102 @@
+<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">
+        <!-- Sort -->
+        <div class="inline-block relative">
+          <select name="sortMembers" id="sortMembers" v-model="sortValue"
+            class="block appearance-none w-full h-full px-4 py-2 ltr:pr-8 rtl:pl-8 focus:outline-none bg-josa-grey-300 cursor-pointer">
+            <option value="publishedAtDESC" selected>{{$t('sort.publishedAtDESC')}}</option>
+            <option value="publishedAtASC">{{$t('sort.publishedAtASC')}}</option>
+            <option value="alphabeticallyASC">{{$t('sort.alphabeticallyASC')}}</option>
+            <option value="alphabeticallyDESC">{{$t('sort.alphabeticallyDESC')}}</option>
+          </select>
+          <span
+            class="pointer-events-none absolute flex items-center px-2 inset-y-0 ltr:right-0 rtl:left-0 bg-josa-grey-300 cursor-pointer">
+            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+              <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
+          </span>
+        </div><!-- Sort -->
+        <!-- Layout -->
+        <div class="inline-block ltr:ml-4 rtl:mr-4 layout-icons">
+          <i class="ri-grid-fill" @click="viewLayout = 'grid'" :class="viewLayout == 'grid' ? 'is-active' : ''"></i>
+          <i class="ri-list-check" @click="viewLayout = 'list'" :class="viewLayout == 'list' ? 'is-active' : ''"></i>
+        </div><!-- Layout -->
+      </div>
+    </div>
+    <p v-if="!contentList.length">{{ $t('noResults') }}</p>
+    <div class="grid grid-cols-1 gap-4" :class="viewLayout == 'grid' ? 'view-grid sm:grid-cols-2 lg:grid-cols-3' : ''">
+      <ViewsAppCompact v-for="item in orderedContentList" :key="item.id" :id="item.id" :image="item.image"
+        :name="item['name_' + $i18n.locale]" :description="item['description_' + $i18n.locale]"
+        :publisher="item.app_publisher" :website="item.website" :platforms="item.Platform"
+        :privacyPolicy="item.privacy_policy_url" :sourceCode="item.github_url" :openSource="item.open_source"
+        :free="item.free" :endorsed="item.endorsed" class="p-4 bg-white" :view="viewLayout" />
+    </div>
+  </div>
+</template>
+
+<script>
+  import Vue2Filters from 'vue2-filters';
+  export default {
+    mixins: [Vue2Filters.mixin],
+    data() {
+      return {
+        sortValue: 'publishedAtDESC',
+        viewLayout: 'list',
+      }
+    },
+    props: {
+      title: {
+        type: String
+      },
+      contentList: {
+        type: Array,
+        required: true
+      },
+    },
+    computed: {
+      orderedContentList() {
+        return this.orderBy(this.contentList, this.sortBy[0], this.sortBy[1])
+      },
+      sortBy() {
+        switch (this.sortValue) {
+          case 'publishedAtASC':
+            return ['published_at', 1]
+            break;
+          case 'publishedAtDESC':
+            return ['published_at', -1]
+            break;
+          case 'alphabeticallyASC':
+            return ['name_' + this.$i18n.locale, 1]
+            break;
+          case 'alphabeticallyDESC':
+            return ['name_' + this.$i18n.locale, -1]
+            break;
+          default:
+            return ['published_at', -1]
+            break;
+        }
+      },
+    }
+  }
+
+</script>
+
+<style scoped>
+  .layout-icons>i {
+    @apply text-3xl text-josa-grey cursor-pointer;
+  }
+
+  .layout-icons>i.is-active,
+  .layout-icons>i:hover {
+    @apply text-josa-black;
+  }
+
+  @screen lg {
+    .layout-icons>i {
+      @apply text-4xl;
+    }
+  }
+
+</style>

components/Lists/Grid.vue

@@ -2,14 +2,8 @@
   <div class="grid-list container">
     <h2 class="mb-8">{{ title }}</h2>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
-    <ViewsMeduim
-        v-for="item in limitBy(contentList, count)"
-        :key="item.id"
-        :id="item.id" 
-        :image="item.image" 
-        :title="item['title_' + $i18n.locale]"
-        :dateUpdated="item.updated_at"
-        :contributor="item.contributors[0]"
+      <ViewsMeduim v-for="item in list" :key="item.id" :id="item.id" :image="item.image"
+        :title="item['title_' + $i18n.locale]" :dateUpdated="item.updated_at" :contributor="item.contributors[0]"
         :link="localePath('/guide/' + item.id)" />
     </div>
   </div>
@@ -30,7 +24,18 @@
       },
       count: {
         type: Number,
-        default: 3
+        default: 0
+      }
+    },
+    computed: {
+      list() {
+        let list = this.contentList
+        let ordered = this.orderBy(list, 'published_at', -1)
+        let limited = ordered
+        if (this.count > 0) {
+          limited = this.limitBy(ordered, this.count)
+        }
+        return limited
       }
     }
   }

components/Sliders/Guides.vue

@@ -27,7 +27,6 @@
           let str = item.style.transform
           let newStr = str.replace('-', '')
           item.style.transform = newStr
-          console.log(item.style.transform)
         }
       }
     },

components/Tabs/index.vue

@@ -2,9 +2,9 @@
   <div class="tabs-component">
     <ul class="tabs-list">
       <li v-for="(tab, i) in tabs" :key="i" :class="{ 'is-active': tab.isActive, 'is-disabled': tab.isDisabled }"
-        class="tab-list-item" role="presentation" v-show="tab.isVisible">
-        <a v-html="tab.header" :aria-controls="tab.hash" :aria-selected="tab.isActive"
-          @click="selectTab(tab.hash, $event)" :href="tab.hash" class="tab-list-item-a" role="tab"></a>
+        class="tab-list-item" role="presentation" v-show="tab.isVisible" :aria-controls="tab.hash"
+        :aria-selected="tab.isActive" @click="selectTab(tab.hash, $event)">
+        <a v-html="tab.header" :href="tab.hash" class="tab-list-item-a" role="tab"></a>
       </li>
     </ul>
     <div class="tabs-panels">
@@ -129,39 +129,63 @@
     -webkit-transition: all 0.25s linear;
   }
 
+  .tabs-panels {
+    @apply relative block p-8 bg-white border-b border-l border-r border-solid border-josa-grey;
+  }
+
+  .tab-panel {
+    transition: all 0.25s linear;
+    -webkit-transition: all 0.25s linear;
+  }
+
+  .tabs-list:before {
+    content: "";
+    @apply absolute block bg-white top-auto left-0 right-0 bottom-0 border-b border-solid border-josa-grey;
+  }
+
   .tabs-list {
-    @apply list-none relative;
+    @apply list-none relative flex flex-row flex-no-wrap;
   }
 
   .tab-list-item {
-    @apply cursor-pointer relative inline-block m-0 py-4 px-8 bg-josa-teal-100 z-10;
+    @apply cursor-pointer relative inline-block m-0 p-2 bg-josa-grey-100 z-10 border-t border-b border-solid border-josa-grey;
     transition: all 0.25s linear;
     -webkit-transition: all 0.25s linear;
   }
 
-  .tab-list-item.is-active {
-    @apply bg-white z-20;
+  [dir='ltr'] .tab-list-item {
+    @apply border-l;
   }
 
-  .tab-list-item:hover {
-    @apply bg-white;
+  [dir='rtl'] .tab-list-item {
+    @apply border-r;
   }
 
-  .tab-list-item-a {
-    @apply z-0 font-medium;
+  [dir='ltr'] .tab-list-item:last-child {
+    @apply border-r;
   }
 
-  .tab-list-item-a:hover,
-  .tab-list-item-a.active {
-    @apply text-josa-black;
+  [dir='rtl'] .tab-list-item:last-child {
+    @apply border-l;
   }
 
-  .tabs-panels {
-    @apply block bg-white;
+  .tab-list-item:hover {
+    @apply bg-white;
   }
 
-  .tab-panel {
-    @apply pt-8;
+  .tab-list-item.is-active {
+    @apply bg-white z-20;
+    border-bottom-color: white;
+  }
+
+  .tab-list-item-a {
+    @apply z-0 font-medium text-josa-black;
+  }
+
+  @screen md {
+    .tab-list-item {
+      @apply py-4 px-8;
+    }
   }
 
 </style>