Skip to content

Commit 72954cf

Browse files
PierreBrisorgueilPierreBrisorgueil
committed
feat(users, home): init team page members ✨
1 parent 3df61c3 commit 72954cf

File tree

9 files changed

+344
-7
lines changed

9 files changed

+344
-7
lines changed

‎src/assets/images/background.jpg‎

-764 Bytes
Loading

‎src/config/defaults/development.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,11 @@ module.exports = {
242242
items: [
243243
{
244244
// set null to hide
245+
label: 'Us ?',
246+
icon: 'fa-users',
247+
url: '/team',
248+
},
249+
{
245250
label: 'Changelogs',
246251
icon: 'fa-clipboard-list',
247252
url: '/changelogs',

‎src/modules/home/components/team.member.component.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<v-col cols="12" sm="6" md="6" lg="4" xl="3">
3+
<v-card
4+
class="mx-auto"
5+
:outlined="true"
6+
:style="{ background: config.vuetify.theme.themes[theme].surface }"
7+
:flat="config.vuetify.theme.flat"
8+
>
9+
<v-img
10+
:src="require('@/assets/images/background.jpg')"
11+
height="175"
12+
class="pt-2"
13+
:gradient="theme == 'dark' ? 'to top right, rgba(0,0,0,.3), rgba(0,0,0,.7)' : 'to top right, rgba(255,255,255,.3), rgba(255,255,255,.7)'"
14+
>
15+
<center>
16+
<userAvatarComponent
17+
:user="item"
18+
:width="'150px'"
19+
:height="'150px'"
20+
:radius="'50%'"
21+
:border="'5px'"
22+
:color="config.vuetify.theme.themes[theme].surface"
23+
:size="512"
24+
/>
25+
</center>
26+
</v-img>
27+
<v-card-actions>
28+
{{ item.firstName }} {{ item.lastName }}
29+
<span class="pl-4 secondary--text" v-if="item.position && item.position !== ''"> {{ item.position }}</span>
30+
<v-spacer></v-spacer>
31+
<v-btn icon @click="show = !show">
32+
<v-icon>{{ show ? 'fa-chevron-up' : 'fa-chevron-down' }}</v-icon>
33+
</v-btn>
34+
</v-card-actions>
35+
<v-expand-transition>
36+
<div v-show="show">
37+
<v-divider></v-divider>
38+
<v-card-text>{{ item.bio }}</v-card-text>
39+
</div>
40+
</v-expand-transition>
41+
</v-card>
42+
</v-col>
43+
</template>
44+
45+
<script>
46+
/**
47+
* Module dependencies.
48+
*/
49+
import { mapGetters } from 'vuex';
50+
import userAvatarComponent from '@/modules/users/components/user.avatar.component.vue';
51+
52+
/**
53+
* Export default
54+
*/
55+
export default {
56+
name: 'taskComponent',
57+
data: () => ({
58+
show: false,
59+
}),
60+
props: ['item'],
61+
components: {
62+
userAvatarComponent,
63+
},
64+
computed: {
65+
...mapGetters(['isLoggedIn', 'theme']),
66+
},
67+
};
68+
</script>

‎src/modules/home/router/home.router.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
*/
44
import home from '@/modules/home/views/home.view.vue';
55
import pages from '@/modules/home/views/pages.view.vue';
6+
import team from '@/modules/home/views/team.view.vue';
67

78
/**
89
* Router configuration
@@ -26,6 +27,15 @@ export default [
2627
data: 'getChangelogs', // array of {title: ..., markdown: ...}
2728
},
2829
},
30+
{
31+
path: '/team',
32+
name: 'Team',
33+
component: team,
34+
meta: {
35+
display: false, // hide any time
36+
title: 'Team',
37+
},
38+
},
2939
{
3040
path: '*',
3141
redirect: { name: 'Home' },

‎src/modules/home/stores/home.store.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const whitelists = ['email', 'news'];
1515
* Getters: get state
1616
*/
1717
const getters = {
18+
team: (state) => state.team,
1819
contents: (state) => state.contents,
1920
news: (state) => state.news,
2021
homeSubscription: (state) => state.subscription,
@@ -26,6 +27,14 @@ const getters = {
2627
* Actions
2728
*/
2829
const actions = {
30+
getTeam: async ({ commit }) => {
31+
try {
32+
const team = await Vue.prototype.axios.get(`${api}/${config.api.endPoints.home}/team`);
33+
commit('team_set', team.data.data);
34+
} catch (err) {
35+
commit('error', err);
36+
}
37+
},
2938
getChangelogs: async ({ commit }) => {
3039
try {
3140
const changelogs = await Vue.prototype.axios.get(
@@ -94,6 +103,10 @@ const mutations = {
94103
error(err) {
95104
console.log(err);
96105
},
106+
// team
107+
team_set(state, data) {
108+
state.team = data;
109+
},
97110
// news
98111
contents_set(state, data) {
99112
state.contents = data;
@@ -137,6 +150,7 @@ const mutations = {
137150
* State
138151
*/
139152
const state = {
153+
team: [],
140154
contents: [],
141155
news: [],
142156
subscription: {},

‎src/modules/home/views/team.view.vue‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<template>
2+
<div>
3+
<homeBannerComponent
4+
v-bind:ratio="3"
5+
v-bind:subscribe="false"
6+
v-bind:app="{ subtitle: this.$route.meta.title }"
7+
></homeBannerComponent>
8+
<v-container fluid>
9+
<v-layout wrap align-content-space-around text-xs-center>
10+
<teamMemberComponent
11+
v-for="(item, index) in team"
12+
v-bind:item="item"
13+
v-bind:index="index"
14+
v-bind:key="item.id"
15+
></teamMemberComponent>
16+
</v-layout>
17+
</v-container>
18+
</div>
19+
</template>
20+
21+
<script>
22+
/**
23+
* Module dependencies.
24+
*/
25+
import { mapGetters } from 'vuex';
26+
import teamMemberComponent from '../components/team.member.component.vue';
27+
import homeBannerComponent from '../components/home.banner.component.vue';
28+
29+
/**
30+
* Export default
31+
*/
32+
export default {
33+
data() {
34+
return {
35+
valid: false,
36+
password: 'Password',
37+
rules: {
38+
email: (v) => /\S+@\S+\.\S+/.test(v) || '',
39+
},
40+
};
41+
},
42+
components: {
43+
homeBannerComponent,
44+
teamMemberComponent,
45+
},
46+
computed: {
47+
...mapGetters(['theme', 'team']),
48+
},
49+
created() {
50+
this.$store.dispatch('getTeam');
51+
},
52+
methods: {
53+
generateTemporalBackground() {
54+
return `${this.config.home.temporalBackground}/${`0${new Date().getHours()}`.slice(-2)}.jpg`;
55+
},
56+
},
57+
};
58+
</script>
59+
60+
<style>
61+
@media print {
62+
.air *,
63+
.air :after,
64+
.air :before {
65+
background: 0 0 !important;
66+
color: #000 !important;
67+
box-shadow: none !important;
68+
text-shadow: none !important;
69+
}
70+
.air a,
71+
.air a:visited {
72+
text-decoration: underline;
73+
}
74+
.air a[href]:after {
75+
content: ' (' attr(href) ')';
76+
}
77+
.air abbr[title]:after {
78+
content: ' (' attr(title) ')';
79+
}
80+
.air a[href^='#']:after,
81+
.air a[href^='javascript:']:after {
82+
content: '';
83+
}
84+
.air blockquote,
85+
.air pre {
86+
border: 1px solid #999;
87+
page-break-inside: avoid;
88+
}
89+
.air thead {
90+
display: table-header-group;
91+
}
92+
.air img,
93+
.air tr {
94+
page-break-inside: avoid;
95+
}
96+
.air img {
97+
max-width: 100% !important;
98+
}
99+
.air h2,
100+
.air h3,
101+
.air p {
102+
orphans: 3;
103+
widows: 3;
104+
}
105+
.air h2,
106+
.air h3 {
107+
page-break-after: avoid;
108+
}
109+
}
110+
.air {
111+
font-size: 12px;
112+
}
113+
@media screen and (min-width: 32rem) and (max-width: 48rem) {
114+
.air {
115+
font-size: 15px;
116+
}
117+
}
118+
@media screen and (min-width: 48rem) {
119+
.air {
120+
font-size: 16px;
121+
}
122+
}
123+
.air {
124+
line-height: 1.85;
125+
}
126+
.air .air-p,
127+
.air p {
128+
font-size: 1rem;
129+
margin-bottom: 1.3rem;
130+
}
131+
.air .air-h1,
132+
.air .air-h2,
133+
.air .air-h3,
134+
.air .air-h4,
135+
.air h1,
136+
.air h2,
137+
.air h3,
138+
.air h4 {
139+
margin: 1.414rem 0 0.5rem;
140+
font-weight: 700;
141+
line-height: 1.42;
142+
}
143+
.air .air-h1,
144+
.air h1 {
145+
margin-top: 0;
146+
font-size: 200%;
147+
}
148+
.air .air-h2,
149+
.air h2 {
150+
font-size: 180%;
151+
}
152+
.air .air-h3,
153+
.air h3 {
154+
font-size: 160%;
155+
}
156+
.air .air-h4,
157+
.air h4 {
158+
font-size: 140%;
159+
}
160+
.air .air-h5,
161+
.air h5 {
162+
font-size: 120%;
163+
}
164+
.air .air-h6,
165+
.air h6 {
166+
font-size: 100%;
167+
}
168+
.air .air-small,
169+
.air small {
170+
font-size: 0.707em;
171+
}
172+
.air canvas,
173+
.air iframe,
174+
.air img,
175+
.air select,
176+
.air svg,
177+
.air textarea,
178+
.air video {
179+
max-width: 100%;
180+
}
181+
.air {
182+
color: #444;
183+
font-family: 'Open Sans', Helvetica, sans-serif;
184+
font-weight: 300;
185+
margin: 2rem auto 1rem;
186+
max-width: 48rem;
187+
text-align: center;
188+
}
189+
.air img {
190+
border-radius: 50%;
191+
height: 250px;
192+
margin: 5px auto;
193+
width: 250px;
194+
}
195+
.air a,
196+
.air a:visited {
197+
color: #3498db;
198+
}
199+
.air a:active,
200+
.air a:focus,
201+
.air a:hover {
202+
color: #2980b9;
203+
}
204+
.air pre {
205+
background-color: #fafafa;
206+
padding: 1rem;
207+
text-align: left;
208+
}
209+
.air blockquote {
210+
margin: 0;
211+
border-left: 5px solid #7a7a7a;
212+
font-style: italic;
213+
padding: 1.33em;
214+
text-align: left;
215+
}
216+
.air li,
217+
.air ol,
218+
.air ul {
219+
text-align: left;
220+
}
221+
.air p {
222+
color: #777;
223+
}
224+
</style>

0 commit comments

Comments
 (0)