Skip to content

Commit f7918df

Browse files
prakhyatoxprakhyatox
committed
adding new cards and removing carousel
1 parent c5303fc commit f7918df

File tree

6 files changed

+176
-2
lines changed

6 files changed

+176
-2
lines changed

‎public/assets/Home/BlockHero/pattern-gray.png

224 KB
Loading

‎public/assets/Home/BlockHero/pattern-orange.png

212 KB
Loading

‎src/components/Home/CommunityBlock.vue

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<template>
2+
<v-container>
3+
<v-row class="block-category justify-center">
4+
<v-col
5+
cols="12"
6+
sm="12"
7+
md="4"
8+
lg="4"
9+
>
10+
<v-card
11+
class="mx-auto block-category__card"
12+
max-width="350"
13+
height="350px"
14+
>
15+
<div
16+
:style="{ backgroundImage: 'linear-gradient(90deg, #e67e22, #ea862d, #ed8e38, #f19642, #f59e4c, #f8a657, #fcad61, #ffb56b),url(' + 'assets/Home/BlockHero/pattern-orange.png',backgroundSize:'100%',backgroundBlendMode:'color'}"
17+
class="white--text d-flex flex-column justify-center block-category__card__gradiant__2"
18+
>
19+
<div
20+
style="height: 136px"
21+
class="d-flex justify-center"
22+
>
23+
<v-icon
24+
size="80"
25+
color="white"
26+
style="opacity: .7"
27+
>
28+
{{ $vuetify.icons.values[communityBlock.firstColumn.icon].icon }}
29+
</v-icon>
30+
</div>
31+
<v-card-title class="d-inline">
32+
{{ communityBlock.firstColumn.title }}
33+
</v-card-title>
34+
</div>
35+
<v-card-text class="text--primary height-75">
36+
{{ truncate(communityBlock.firstColumn.description,100) }}
37+
</v-card-text>
38+
<v-card-actions class="text-center d-block">
39+
<router-link :to="communityBlock.firstColumn.link">
40+
<v-btn
41+
color="primary"
42+
text
43+
>
44+
{{ communityBlock.firstColumn.buttonTitle }}
45+
</v-btn>
46+
</router-link>
47+
</v-card-actions>
48+
</v-card>
49+
</v-col>
50+
<v-col
51+
cols="12"
52+
sm="12"
53+
md="4"
54+
lg="4"
55+
>
56+
<v-card
57+
class="mx-auto block-category__card"
58+
max-width="350"
59+
height="350px"
60+
>
61+
<div
62+
:style="{ backgroundImage: 'linear-gradient(180deg, #7d7d7d, #868686, #8f8f8f, #989898, #a1a1a1, #aaaaaa, #b4b4b4, #bdbdbd),url(' + 'assets/Home/BlockHero/pattern-gray.png',backgroundSize:'300px',backgroundBlendMode:'lighten'}"
63+
class="white--text d-flex flex-column justify-center block-category__card__gradiant__1"
64+
>
65+
<div
66+
style="height: 136px"
67+
class="d-flex justify-center"
68+
>
69+
<v-icon
70+
size="80"
71+
color="white"
72+
style="opacity: .7"
73+
>
74+
{{ $vuetify.icons.values[communityBlock.secondColumn.icon].icon }}
75+
</v-icon>
76+
</div>
77+
<v-card-title class="d-inline">
78+
{{ communityBlock.secondColumn.title }}
79+
</v-card-title>
80+
</div>
81+
<v-card-text class="text--primary height-75">
82+
{{ truncate(communityBlock.secondColumn.description,100) }}
83+
</v-card-text>
84+
<v-card-actions class="text-center d-block">
85+
<router-link :to="communityBlock.secondColumn.link">
86+
<v-btn
87+
color="primary"
88+
text
89+
>
90+
{{ communityBlock.secondColumn.buttonTitle }}
91+
</v-btn>
92+
</router-link>
93+
</v-card-actions>
94+
</v-card>
95+
</v-col>
96+
</v-row>
97+
</v-container>
98+
</template>
99+
100+
<script>
101+
import {truncate} from "@/utils/stringUtils";
102+
import {communityBlock} from "@/data/homePageData.json"
103+
export default {
104+
name: "CommunityBlock",
105+
mixins: [ truncate ],
106+
data: () => {
107+
return {
108+
communityBlock: communityBlock
109+
}
110+
}
111+
}
112+
</script>
113+
114+
<style scoped lang="scss">
115+
.block-category {
116+
&__card {
117+
border-radius: 200px;
118+
transition: all .2ms ease;
119+
-webkit-transition: all .2s ease;
120+
-moz-transition: all .2s ease;
121+
-o-transition: all .2s ease;
122+
box-shadow: 0 1rem 2rem rgba(black, .15) !important;
123+
-webkit-box-shadow: 0 1rem 2rem rgba(black, .15) !important;
124+
-moz-box-shadow: 0 1rem 2rem rgba(black, .15) !important;
125+
-o-box-shadow: 0 1rem 2rem rgba(black, .15) !important;
126+
127+
&:hover {
128+
transform: scale(1.05);
129+
-moz-transform: scale(1.05);
130+
-webkit-transform: scale(1.05);
131+
-o-transform: scale(1.05);
132+
}
133+
134+
&__gradiant__1 {
135+
height: 200px;
136+
background: rgb(37, 52, 66);
137+
background: linear-gradient(180deg, rgba(37, 52, 66, 1) 0%, rgba(39, 170, 225, 1) 100%);
138+
background: -webkit-linear-gradient(180deg, rgba(37, 52, 66, 1) 0%, rgba(39, 170, 225, 1) 100%);
139+
background: -o-linear-gradient(180deg, rgba(37, 52, 66, 1) 0%, rgba(39, 170, 225, 1) 100%);
140+
background: -ms-linear-gradient(180deg, rgba(37, 52, 66, 1) 0%, rgba(39, 170, 225, 1) 100%);
141+
}
142+
143+
&__gradiant__2 {
144+
height: 200px;
145+
background: rgb(37, 52, 66);
146+
background: linear-gradient(180deg, rgba(37, 52, 66, 1) 0%, rgb(26, 110, 27) 100%);
147+
background: -webkit-linear-gradient(180deg, rgba(37, 52, 66, 1) 0%, rgb(26, 110, 27) 100%);
148+
background: -o-linear-gradient(180deg, rgba(37, 52, 66, 1) 0%, rgb(26, 110, 27) 100%);
149+
background: -ms-linear-gradient(180deg, rgba(37, 52, 66, 1) 0%, rgb(26, 110, 27) 100%);
150+
}
151+
}
152+
}
153+
</style>

‎src/data/homePageData.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,22 @@
200200
"link": "/educational"
201201
}
202202
},
203+
"communityBlock": {
204+
"firstColumn":{
205+
"title": "Community Champions",
206+
"description": "Put your expertise into action and get credited by joining our Community Champions programme.",
207+
"icon": "users",
208+
"buttonTitle": "view and join in",
209+
"link": "/community_champions"
210+
},
211+
"secondColumn":{
212+
"title": "Adopters and Collaborators",
213+
"description": "Standards and/or databases grouped by domain, species or organisation.",
214+
"icon": "users",
215+
"buttonTitle": "view all",
216+
"link": "/communities"
217+
}
218+
},
203219
"blockLogos":
204220
{
205221
"singleImageSlider": [

‎src/plugins/icons.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,10 @@ const customIcons = {
274274
user: {
275275
type: "icon",
276276
icon: "fa-user"
277+
},
278+
users: {
279+
type: "icon",
280+
icon: "fa-users"
277281
}
278282
},
279283
iconfont: 'fa'

‎src/views/Home/Home.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<InfoBlock class="mb-12" />
99
<SearchBlock />
1010
<CategoryBlock class="mt-12" />
11+
<CommunityBlock class="mt-12" />
1112
<CommunityCarousel class="mt-12 mb-12" />
1213
<v-lazy>
1314
<StatisticsBlock class="my-12" />
@@ -28,9 +29,9 @@ import Carousel from "@/components/Home/Carousel";
2829
import InfoBlock from "@/components/Home/InfoBlock";
2930
import SearchBlock from "@/components/Home/SearchBlock";
3031
import CategoryBlock from "@/components/Home/CategoryBlock";
31-
import CommunityCarousel from "@/components/Home/CommunityCarousel";
3232
import StatisticsBlock from "@/components/Home/StatisticsBlock";
3333
import RestClient from "@/lib/Client/RESTClient.js"
34+
import CommunityBlock from "@/components/Home/CommunityBlock";
3435
3536
const restClient = new RestClient();
3637
@@ -39,7 +40,7 @@ const restClient = new RestClient();
3940
*/
4041
export default {
4142
name: "Home",
42-
components:{CommunityCarousel, Carousel, InfoBlock, SearchBlock, CategoryBlock, StatisticsBlock },
43+
components:{Carousel, InfoBlock, SearchBlock, CategoryBlock, StatisticsBlock, CommunityBlock },
4344
data() {
4445
return {
4546
JSONLD: {}

0 commit comments

Comments
 (0)