Skip to content

Commit 7cb313c

Browse files
author
George Khoury
authored
Merge pull request #38 from jordanopensource/development
Release v1.1.0 of DSP web portal
2 parents 3563fc7 + 7270f55 commit 7cb313c

31 files changed

+2323
-229
lines changed

Diff for: ‎assets/css/hamburgers.css

+1,011
Large diffs are not rendered by default.

Diff for: ‎assets/css/transitions.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.fade-enter,
2+
.fade-leave-to {
3+
opacity: 0;
4+
}
5+
6+
.fade-enter-to,
7+
.menu-fade-leave {
8+
opacity: 1;
9+
}
10+
11+
.fade-enter-active,
12+
.fade-leave-active {
13+
transition: opacity 0.5s ease-in-out;
14+
}

Diff for: ‎components/Elements/Dropdown.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212
<!-- Dropdown Menu -->
1313
<transition name="dropdown">
1414
<div class="dropdown-menu" v-bind:class="{ active: show }" v-if="show">
15-
<div :class="active == 'all' ? 'active': ''" class="dropdown-menu-link" @click="setActive('all')">
15+
<div :class="active == 'all' ? 'active': ''" class="dropdown-menu-link" @click="setActive('all', $t('all'))">
1616
<p class="dropdown-menu-text">{{ $t('all') }}</p>
1717
</div>
1818
<div v-for="item in items" :key="item.id" :class="active == item.name ? 'active': ''" class="dropdown-menu-link"
19-
@click="setActive(item.name)">
19+
@click="setActive(item.name, item['title_' + $i18n.locale])">
2020
<p class="dropdown-menu-text">{{ item['title_' + $i18n.locale] }}</p>
2121
</div>
2222
</div>
@@ -42,9 +42,9 @@
4242
}
4343
},
4444
methods: {
45-
setActive(value) {
45+
setActive(value, title) {
4646
this.show = false
47-
this.$emit('setActive', value)
47+
this.$emit('setActive', value, title)
4848
}
4949
},
5050
computed: {

Diff for: ‎components/Lists/AppAll.vue

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<div class="grid-list container">
3+
<div class="flex flex-row flex-wrap justify-between items-center mb-8">
4+
<h2 v-if="title" class="mb-4 flex-grow">{{ title }}</h2>
5+
<div class="flex flex-row flex-no-wrap justify-start items-center mb-4">
6+
<!-- Sort -->
7+
<div class="inline-block relative">
8+
<select name="sortMembers" id="sortMembers" v-model="sortValue"
9+
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">
10+
<option value="publishedAtDESC" selected>{{$t('sort.publishedAtDESC')}}</option>
11+
<option value="publishedAtASC">{{$t('sort.publishedAtASC')}}</option>
12+
<option value="alphabeticallyASC">{{$t('sort.alphabeticallyASC')}}</option>
13+
<option value="alphabeticallyDESC">{{$t('sort.alphabeticallyDESC')}}</option>
14+
</select>
15+
<span
16+
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">
17+
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
18+
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
19+
</span>
20+
</div><!-- Sort -->
21+
<!-- Layout -->
22+
<div class="inline-block ltr:ml-4 rtl:mr-4 layout-icons">
23+
<i class="ri-grid-fill" @click="viewLayout = 'grid'" :class="viewLayout == 'grid' ? 'is-active' : ''"></i>
24+
<i class="ri-list-check" @click="viewLayout = 'list'" :class="viewLayout == 'list' ? 'is-active' : ''"></i>
25+
</div><!-- Layout -->
26+
</div>
27+
</div>
28+
<p v-if="!contentList.length">{{ $t('noResults') }}</p>
29+
<div class="grid grid-cols-1 gap-4" :class="viewLayout == 'grid' ? 'view-grid sm:grid-cols-2 lg:grid-cols-3' : ''">
30+
<ViewsAppCompact v-for="item in orderedContentList" :key="item.id" :id="item.id" :image="item.image"
31+
:name="item['name_' + $i18n.locale]" :description="item['description_' + $i18n.locale]"
32+
:publisher="item.app_publisher" :website="item.website" :platforms="item.Platform"
33+
:privacyPolicy="item.privacy_policy_url" :sourceCode="item.github_url" :openSource="item.open_source"
34+
:free="item.free" :endorsed="item.endorsed" class="p-4 bg-white" :view="viewLayout" />
35+
</div>
36+
</div>
37+
</template>
38+
39+
<script>
40+
import Vue2Filters from 'vue2-filters';
41+
export default {
42+
mixins: [Vue2Filters.mixin],
43+
data() {
44+
return {
45+
sortValue: 'publishedAtDESC',
46+
viewLayout: 'list',
47+
}
48+
},
49+
props: {
50+
title: {
51+
type: String
52+
},
53+
contentList: {
54+
type: Array,
55+
required: true
56+
},
57+
},
58+
computed: {
59+
orderedContentList() {
60+
return this.orderBy(this.contentList, this.sortBy[0], this.sortBy[1])
61+
},
62+
sortBy() {
63+
switch (this.sortValue) {
64+
case 'publishedAtASC':
65+
return ['published_at', 1]
66+
break;
67+
case 'publishedAtDESC':
68+
return ['published_at', -1]
69+
break;
70+
case 'alphabeticallyASC':
71+
return ['name_' + this.$i18n.locale, 1]
72+
break;
73+
case 'alphabeticallyDESC':
74+
return ['name_' + this.$i18n.locale, -1]
75+
break;
76+
default:
77+
return ['published_at', -1]
78+
break;
79+
}
80+
},
81+
}
82+
}
83+
84+
</script>
85+
86+
<style scoped>
87+
.layout-icons>i {
88+
@apply text-3xl text-josa-grey cursor-pointer;
89+
}
90+
91+
.layout-icons>i.is-active,
92+
.layout-icons>i:hover {
93+
@apply text-josa-black;
94+
}
95+
96+
@screen lg {
97+
.layout-icons>i {
98+
@apply text-4xl;
99+
}
100+
}
101+
102+
</style>

Diff for: ‎components/Lists/AppStacked.vue

-37
This file was deleted.

Diff for: ‎components/Lists/Grid.vue

+14-9
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,8 @@
22
<div class="grid-list container">
33
<h2 class="mb-8">{{ title }}</h2>
44
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
5-
<ViewsMeduim
6-
v-for="item in limitBy(contentList, count)"
7-
:key="item.id"
8-
:id="item.id"
9-
:image="item.image"
10-
:title="item['title_' + $i18n.locale]"
11-
:dateUpdated="item.updated_at"
12-
:contributor="item.contributors[0]"
5+
<ViewsMeduim v-for="item in list" :key="item.id" :id="item.id" :image="item.image"
6+
:title="item['title_' + $i18n.locale]" :dateUpdated="item.updated_at" :contributor="item.contributors[0]"
137
:link="localePath('/guide/' + item.id)" />
148
</div>
159
</div>
@@ -30,7 +24,18 @@
3024
},
3125
count: {
3226
type: Number,
33-
default: 3
27+
default: 0
28+
}
29+
},
30+
computed: {
31+
list() {
32+
let list = this.contentList
33+
let ordered = this.orderBy(list, 'published_at', -1)
34+
let limited = ordered
35+
if (this.count > 0) {
36+
limited = this.limitBy(ordered, this.count)
37+
}
38+
return limited
3439
}
3540
}
3641
}

Diff for: ‎components/Sliders/Guides.vue

-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
let str = item.style.transform
2828
let newStr = str.replace('-', '')
2929
item.style.transform = newStr
30-
console.log(item.style.transform)
3130
}
3231
}
3332
},

Diff for: ‎components/Tabs/index.vue

+42-18
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<div class="tabs-component">
33
<ul class="tabs-list">
44
<li v-for="(tab, i) in tabs" :key="i" :class="{ 'is-active': tab.isActive, 'is-disabled': tab.isDisabled }"
5-
class="tab-list-item" role="presentation" v-show="tab.isVisible">
6-
<a v-html="tab.header" :aria-controls="tab.hash" :aria-selected="tab.isActive"
7-
@click="selectTab(tab.hash, $event)" :href="tab.hash" class="tab-list-item-a" role="tab"></a>
5+
class="tab-list-item" role="presentation" v-show="tab.isVisible" :aria-controls="tab.hash"
6+
:aria-selected="tab.isActive" @click="selectTab(tab.hash, $event)">
7+
<a v-html="tab.header" :href="tab.hash" class="tab-list-item-a" role="tab"></a>
88
</li>
99
</ul>
1010
<div class="tabs-panels">
@@ -129,39 +129,63 @@
129129
-webkit-transition: all 0.25s linear;
130130
}
131131
132+
.tabs-panels {
133+
@apply relative block p-8 bg-white border-b border-l border-r border-solid border-josa-grey;
134+
}
135+
136+
.tab-panel {
137+
transition: all 0.25s linear;
138+
-webkit-transition: all 0.25s linear;
139+
}
140+
141+
.tabs-list:before {
142+
content: "";
143+
@apply absolute block bg-white top-auto left-0 right-0 bottom-0 border-b border-solid border-josa-grey;
144+
}
145+
132146
.tabs-list {
133-
@apply list-none relative;
147+
@apply list-none relative flex flex-row flex-no-wrap;
134148
}
135149
136150
.tab-list-item {
137-
@apply cursor-pointer relative inline-block m-0 py-4 px-8 bg-josa-teal-100 z-10;
151+
@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;
138152
transition: all 0.25s linear;
139153
-webkit-transition: all 0.25s linear;
140154
}
141155
142-
.tab-list-item.is-active {
143-
@apply bg-white z-20;
156+
[dir='ltr'] .tab-list-item {
157+
@apply border-l;
144158
}
145159
146-
.tab-list-item:hover {
147-
@apply bg-white;
160+
[dir='rtl'] .tab-list-item {
161+
@apply border-r;
148162
}
149163
150-
.tab-list-item-a {
151-
@apply z-0 font-medium;
164+
[dir='ltr'] .tab-list-item:last-child {
165+
@apply border-r;
152166
}
153167
154-
.tab-list-item-a:hover,
155-
.tab-list-item-a.active {
156-
@apply text-josa-black;
168+
[dir='rtl'] .tab-list-item:last-child {
169+
@apply border-l;
157170
}
158171
159-
.tabs-panels {
160-
@apply block bg-white;
172+
.tab-list-item:hover {
173+
@apply bg-white;
161174
}
162175
163-
.tab-panel {
164-
@apply pt-8;
176+
.tab-list-item.is-active {
177+
@apply bg-white z-20;
178+
border-bottom-color: white;
179+
}
180+
181+
.tab-list-item-a {
182+
@apply z-0 font-medium text-josa-black;
183+
}
184+
185+
@screen md {
186+
.tab-list-item {
187+
@apply py-4 px-8;
188+
}
165189
}
166190
167191
</style>

0 commit comments

Comments
 (0)