Skip to content

Commit 8004a1a

Browse files
egauzensegauzens
authored
Merge pull request #6 from nih-sparc/EventCard
eventcard added
2 parents a11a890 + bcb36e8 commit 8004a1a

File tree

4 files changed

+230
-5
lines changed

4 files changed

+230
-5
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
"element-plus": "^2.4.2",
2424
"ramda": "^0.29.1",
2525
"vue": "^3.3.4",
26-
"vue-router":"^4.2.5"
26+
"vue-router":"^4.2.5",
27+
"date-fns": "^2.3.0"
2728
},
2829
"devDependencies": {
2930
"@storybook/addon-essentials": "7.5.1",

‎src/App.vue

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,47 @@
205205
:display="r.display"
206206
/>
207207
</div>
208+
<el-col>
209+
<el-row class="event-card-row">
210+
211+
<event-card
212+
:eventType="eventCardEvent.type"
213+
:eventImage="eventCardEvent.image"
214+
:title="eventCardEvent.title"
215+
:startDate="eventCardEvent.startDate"
216+
:endDate="eventCardEvent.endDate"
217+
:location="eventCardEvent.location"
218+
:url="eventCardEvent.url"
219+
/>
220+
<event-card
221+
:eventType="eventCardEvent.type"
222+
:eventImage="eventCardEvent.image"
223+
:title="eventCardEvent.title"
224+
:startDate="eventCardEvent.startDate"
225+
:endDate="eventCardEvent.endDate"
226+
:location="eventCardEvent.location"
227+
:url="eventCardEvent.url"
228+
/>
229+
<event-card
230+
:eventType="eventCardEvent.type"
231+
:eventImage="eventCardEvent.image"
232+
:title="eventCardEvent.title"
233+
:startDate="eventCardEvent.startDate"
234+
:endDate="eventCardEvent.endDate"
235+
:location="eventCardEvent.location"
236+
:url="eventCardEvent.url"
237+
/>
238+
<event-card
239+
:eventType="eventCardEvent.type"
240+
:eventImage="eventCardEvent.image"
241+
:title="eventCardEvent.title"
242+
:startDate="eventCardEvent.startDate"
243+
:endDate="eventCardEvent.endDate"
244+
:location="eventCardEvent.location"
245+
:url="eventCardEvent.url"
246+
/>
247+
</el-row>
248+
</el-col>
208249
<el-col class="dropdown-multiselect">
209250
<el-row>
210251
<dropdown-multiselect
@@ -341,10 +382,20 @@
341382
import IconCard from './components/IconCard.vue'
342383
import ContentOverviewCard from './components/ContentOverviewCard.vue'
343384
import ContentTabCard from './components/ContentTabCard.vue'
385+
import EventCard from './components/EventCard.vue'
344386
345387
import { ref } from 'vue'
346388
import { successMessage, infoMessage, failMessage, informationNotification, iconInformationNotification } from "../utils/notificationMessages"
347389
390+
const eventCardEvent = {
391+
type: "Conference",
392+
image: "https://via.placeholder.com/736",
393+
title: "SPARC and Experimental Biology (EB)",
394+
startDate: "2020-04-04T10:36:01.516Z",
395+
endDate:"2020-04-07T10:36:01.516Z",
396+
location: "San Diego, California",
397+
url: "/#"
398+
}
348399
349400
const checkboxItem = ref([
350401
{
@@ -979,9 +1030,9 @@
9791030
PaginationMenu,
9801031
BreadcrumbTrail,
9811032
IconCard,
982-
ContentOverviewCard
983-
ContentTabCard
984-
1033+
ContentOverviewCard,
1034+
ContentTabCard,
1035+
EventCard
9851036
},
9861037
name: 'App',
9871038
setup() {
@@ -1057,7 +1108,8 @@
10571108
breadcrumbs,
10581109
iconCardData,
10591110
contentOverviewCard,
1060-
contentTabCard: tabCard
1111+
contentTabCard: tabCard,
1112+
eventCardEvent
10611113
10621114
}
10631115
},
@@ -1125,6 +1177,17 @@ header {
11251177
border-bottom: none !important;
11261178
}
11271179
}
1180+
.event-card-row {
1181+
.el-col {
1182+
width: 100%;
1183+
@media (min-width: 48em) {
1184+
width: 50%;
1185+
}
1186+
@media (min-width: 64em) {
1187+
width: 25%;
1188+
}
1189+
}
1190+
}
11281191
11291192
@media (min-width: 1024px) {
11301193
header {

‎src/components/EventCard.vue

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<template>
2+
<div class="upcoming-event">
3+
<div class="upcoming-event__image">
4+
<a v-if="url" :href="url">
5+
<img :src="eventImage" :alt="title" />
6+
</a>
7+
<div v-else>
8+
<img :src="eventImage" :alt="title" />
9+
</div>
10+
<span>{{ eventType }}</span>
11+
</div>
12+
<h3>
13+
<a v-if="url" :href="url">
14+
{{ title }}
15+
</a>
16+
<div v-else>
17+
{{ title }}
18+
</div>
19+
</h3>
20+
<div class="upcoming-event__detail">
21+
<svgicon name="calendar" height="16" width="16" />
22+
<div class="body1">{{ getDateRange(startDate, endDate) }}</div>
23+
</div>
24+
<div v-if="location" class="upcoming-event__detail">
25+
<svgicon name="map" height="16" width="16" />
26+
<div class="body1">{{ location }}</div>
27+
</div>
28+
</div>
29+
</template>
30+
31+
<script>
32+
import { format, parseISO } from 'date-fns'
33+
34+
export default {
35+
name: 'EventCard',
36+
37+
props: {
38+
title: {
39+
type: String,
40+
required: true
41+
},
42+
eventImage: {
43+
type: String,
44+
required: true
45+
},
46+
eventType: {
47+
type: String,
48+
},
49+
location: {
50+
type: String,
51+
required: true
52+
},
53+
startDate: {
54+
type: String,
55+
required: true
56+
},
57+
endDate: {
58+
type: String,
59+
},
60+
url: {
61+
type: String
62+
}
63+
},
64+
65+
methods: {
66+
/**
67+
* Get event date range, if there is no end date, default to start date
68+
* @returns {String}
69+
*/
70+
getDateRange: function(startDate, endDate) {
71+
startDate = this.formatDate(startDate || '')
72+
endDate = this.formatDate(endDate || '')
73+
return startDate === endDate || !endDate
74+
? startDate
75+
: `${startDate} - ${endDate}`
76+
},
77+
formatDate: function(date) {
78+
return date != '' ? format(parseISO(date), 'MMMM d, yyyy') : ''
79+
}
80+
}
81+
}
82+
</script>
83+
84+
<style lang="scss" scoped>
85+
@import '../assets/_variables.scss';
86+
87+
.upcoming-event {
88+
background: #fff;
89+
border: 1px solid #dbdfe6;
90+
color: $darkBlue;
91+
padding: 1em;
92+
margin: 1em;
93+
&__image {
94+
margin-bottom: 1rem;
95+
overflow: hidden;
96+
padding-top: 100%;
97+
position: relative;
98+
img {
99+
display: block;
100+
height: auto;
101+
left: 0;
102+
position: absolute;
103+
top: 0;
104+
width: 100%;
105+
}
106+
span {
107+
background: $purple;
108+
border-radius: 15px;
109+
color: #fff;
110+
font-size: 0.875rem;
111+
top: 10px;
112+
padding: 0 0.65rem;
113+
position: absolute;
114+
right: 14px;
115+
}
116+
}
117+
&__detail {
118+
align-items: baseline;
119+
display: flex;
120+
margin-bottom: 0.625rem;
121+
&:last-child {
122+
margin: 0;
123+
}
124+
.svg-icon {
125+
flex-shrink: 0;
126+
margin-right: 0.5rem;
127+
}
128+
p {
129+
margin: 0;
130+
}
131+
}
132+
h3 {
133+
font-size: 1.125rem;
134+
font-weight: 500;
135+
margin-bottom: 1rem;
136+
line-height: 1.375rem;
137+
}
138+
a {
139+
color: $purple;
140+
text-decoration: none;
141+
&:hover,
142+
&:focus {
143+
text-decoration: underline;
144+
}
145+
}
146+
}
147+
</style>

‎yarn.lock

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1010,6 +1010,13 @@
10101010
dependencies:
10111011
regenerator-runtime "^0.14.0"
10121012

1013+
"@babel/runtime@^7.21.0":
1014+
version "7.23.5"
1015+
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
1016+
integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
1017+
dependencies:
1018+
regenerator-runtime "^0.14.0"
1019+
10131020
"@babel/template@^7.22.15":
10141021
version "7.22.15"
10151022
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -3481,6 +3488,13 @@ csstype@^3.0.2, csstype@^3.1.2:
34813488
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
34823489
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
34833490

3491+
date-fns@^2.3.0:
3492+
version "2.30.0"
3493+
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
3494+
integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
3495+
dependencies:
3496+
"@babel/runtime" "^7.21.0"
3497+
34843498
dayjs@^1.11.3:
34853499
version "1.11.10"
34863500
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"

0 commit comments

Comments
 (0)