Skip to content

Commit ce8bc4d

Browse files
egauzensegauzens
authored
Merge pull request #7 from nih-sparc/ListCard
listcard and listcarditem migrated
2 parents 8004a1a + a6405a6 commit ce8bc4d

File tree

3 files changed

+289
-1
lines changed

3 files changed

+289
-1
lines changed

‎src/App.vue

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,20 @@
308308
</content-overview-card>
309309
</el-row>
310310
</el-col>
311+
<el-col>
312+
<el-row style="margin: 2rem 2rem">
313+
<list-card
314+
:data="listCardDataStyleOne"
315+
/>
316+
</el-row>
317+
<el-row style="margin: 2rem 2rem">
318+
<list-card
319+
:data="listCardDataStyleTwo.data"
320+
:sectionText="listCardDataStyleTwo.text"
321+
:sectionUrl="listCardDataStyleTwo.url"
322+
/>
323+
</el-row>
324+
</el-col>
311325
<el-select v-model="value" placeholder="Select">
312326
<el-option
313327
v-for="item in options"
@@ -369,6 +383,7 @@
369383
</template>
370384

371385
<script>
386+
import ListCard from './components/ListCard/ListCard.vue'
372387
import HelloWorld from './components/HelloWorld.vue'
373388
import SparcTooltip from './components/SparcTooltip.vue'
374389
import SparcLogo from './components/SparcLogo.vue'
@@ -387,6 +402,53 @@
387402
import { ref } from 'vue'
388403
import { successMessage, infoMessage, failMessage, informationNotification, iconInformationNotification } from "../utils/notificationMessages"
389404
405+
406+
const listCardDataStyleOne= [
407+
{
408+
title: "Prototype simulation of undiseased human cardiac ventricular cells",
409+
summary: "A prototype use-case package consisting of a single-cell, 1D and 2D tissue model for simulation of autonomic effects on the cardiovascular system derived from the human ventricular model developed by O'Hara and Rudy group.",
410+
date: "2020-04-04T10:36:01.516Z",
411+
url: "/#",
412+
image: "https://via.placeholder.com/128"
413+
},
414+
{
415+
title: "Prototype simulation of undiseased human cardiac ventricular cells",
416+
summary: "A prototype use-case package consisting of a single-cell, 1D and 2D tissue model for simulation of autonomic effects on the cardiovascular system derived from the human ventricular model developed by O'Hara and Rudy group.",
417+
date: "2020-04-04T10:36:01.516Z",
418+
url: "/#",
419+
image: "https://via.placeholder.com/128"
420+
},
421+
{
422+
title: "Prototype simulation of undiseased human cardiac ventricular cells",
423+
summary: "A prototype use-case package consisting of a single-cell, 1D and 2D tissue model for simulation of autonomic effects on the cardiovascular system derived from the human ventricular model developed by O'Hara and Rudy group.",
424+
date: "2020-04-04T10:36:01.516Z",
425+
url: "/#",
426+
image: "https://via.placeholder.com/128"
427+
}
428+
];
429+
const listCardDataStyleTwo ={
430+
data: [{
431+
title: "Prototype simulation of undiseased human cardiac ventricular cells",
432+
summary: "A prototype use-case package consisting of a single-cell, 1D and 2D tissue model for simulation of autonomic effects on the cardiovascular system derived from the human ventricular model developed by O'Hara and Rudy group.",
433+
date: "2020-04-04T10:36:01.516Z",
434+
url: "/#"
435+
},
436+
{
437+
title: "Prototype simulation of undiseased human cardiac ventricular cells",
438+
summary: "A prototype use-case package consisting of a single-cell, 1D and 2D tissue model for simulation of autonomic effects on the cardiovascular system derived from the human ventricular model developed by O'Hara and Rudy group.",
439+
date: "2020-04-04T10:36:01.516Z",
440+
url: "/#"
441+
},
442+
{
443+
title: "Prototype simulation of undiseased human cardiac ventricular cells",
444+
summary: "A prototype use-case package consisting of a single-cell, 1D and 2D tissue model for simulation of autonomic effects on the cardiovascular system derived from the human ventricular model developed by O'Hara and Rudy group.",
445+
date: "2020-04-04T10:36:01.516Z",
446+
url: "/#"
447+
}],
448+
text: "Show all News",
449+
url: "/#"
450+
}
451+
390452
const eventCardEvent = {
391453
type: "Conference",
392454
image: "https://via.placeholder.com/736",
@@ -397,6 +459,7 @@
397459
url: "/#"
398460
}
399461
462+
400463
const checkboxItem = ref([
401464
{
402465
label: 1,
@@ -1032,6 +1095,7 @@
10321095
IconCard,
10331096
ContentOverviewCard,
10341097
ContentTabCard,
1098+
ListCard,
10351099
EventCard
10361100
},
10371101
name: 'App',
@@ -1108,9 +1172,10 @@
11081172
breadcrumbs,
11091173
iconCardData,
11101174
contentOverviewCard,
1175+
listCardDataStyleOne,
1176+
listCardDataStyleTwo,
11111177
contentTabCard: tabCard,
11121178
eventCardEvent
1113-
11141179
}
11151180
},
11161181
methods: {

‎src/components/ListCard/ListCard.vue

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<template>
2+
<el-table
3+
class="sparc-design-system-list-card-table"
4+
:data="data"
5+
:show-header="false"
6+
empty-text="No Results"
7+
>
8+
<el-table-column>
9+
<template v-slot="scope">
10+
<el-row>
11+
<list-card-item
12+
:title="scope.row.title"
13+
:summary="scope.row.summary"
14+
:url="scope.row.url"
15+
:date="scope.row.date"
16+
:image="scope.row.image"
17+
/>
18+
</el-row>
19+
<el-row v-if="sectionText && scope.$index === data.length-1">
20+
<div class="section-container">
21+
<a class="section-text" v-if="sectionUrl" :href="sectionUrl">
22+
{{sectionText}}
23+
</a>
24+
<h3 v-else class="section-text">
25+
{{sectionText}}
26+
</h3>
27+
</div>
28+
</el-row>
29+
</template>
30+
</el-table-column>
31+
</el-table>
32+
</template>
33+
34+
<script>
35+
import ListCardItem from './ListCardItem.vue'
36+
37+
export default {
38+
components: { ListCardItem },
39+
name: 'ListCard',
40+
41+
props: {
42+
data: {
43+
type: Array,
44+
default: () => [],
45+
required: true
46+
},
47+
sectionText: {
48+
type: String,
49+
default: ""
50+
},
51+
sectionUrl: {
52+
type: String,
53+
default: ""
54+
}
55+
}
56+
}
57+
</script>
58+
<style lang="scss">
59+
.sparc-design-system-list-card-table::before {
60+
display: none;
61+
}
62+
.sparc-design-system-list-card-table td.el-table__cell {
63+
border: none;
64+
padding: 0;
65+
}
66+
.sparc-design-system-list-card-table tbody {
67+
tr:not(:last-child)>td .cell::after {
68+
content: "";
69+
border-bottom: 2px solid #D8D8D8;
70+
width: 100%;
71+
margin: 0 auto;
72+
display: block;
73+
}
74+
tr:last-of-type>td {
75+
background-color: white !important;
76+
}
77+
tr:last-of-type>td .cell {
78+
padding: 0;
79+
.list-item {
80+
padding-left: 1rem;
81+
padding-right: 1rem;
82+
}
83+
.list-item:hover {
84+
background-color: #F7FAFF;
85+
transition: background-color 0.25s ease;
86+
}
87+
}
88+
}
89+
</style>
90+
<style lang="scss" scoped>
91+
@import '../../assets/_variables.scss';
92+
.sparc-design-system-list-card-table {
93+
border: 1px solid #DBDFE6;
94+
}
95+
.section-container {
96+
width:100%;
97+
border-top: 2px solid #D8D8D8;
98+
margin: 0 1rem;
99+
padding: 1.5rem 0
100+
}
101+
.section-text {
102+
margin-left: 1rem;
103+
font-weight: bold;
104+
color: $darkBlue;
105+
}
106+
</style>

‎src/components/ListCard/ListCardItem.vue

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<template>
2+
<div class="list-item">
3+
<el-row type="flex">
4+
<el-col :xs="image === undefined ? 0 : 4" :sm="image === undefined ? 0 : 3" :md="image === undefined ? 0 : 2" :lg="image === undefined ? 0 : 2">
5+
<img
6+
:src="image"
7+
class="list-card-image"
8+
/>
9+
</el-col>
10+
<el-col :xs="image === undefined ? 24 : 20" :sm="image === undefined ? 24 : 21" :md="image === undefined ? 24 : 22" :lg="image === undefined ? 24 : 22">
11+
<div class="list-card-content">
12+
<div class="body1 mt-0">
13+
<a
14+
:href="url"
15+
:target="openInNewTab ? '_self' : '_blank'"
16+
>
17+
{{ title }}
18+
</a>
19+
</div>
20+
<div v-if="image !== undefined">
21+
<p class="list-item__date spacing">
22+
{{ formattedDate }}
23+
</p>
24+
<p class="spacing">{{ summary }}</p>
25+
</div>
26+
<div v-else>
27+
<p class="spacing">{{ summary }}</p>
28+
<p class="list-item__date spacing">
29+
{{ formattedDate }}
30+
</p>
31+
</div>
32+
</div>
33+
</el-col>
34+
</el-row>
35+
</div>
36+
</template>
37+
38+
<script>
39+
import { format, parseISO } from 'date-fns'
40+
41+
export default {
42+
name: 'ListCardItem',
43+
44+
props: {
45+
title: {
46+
type: String,
47+
required: true
48+
},
49+
summary: {
50+
type: String,
51+
required: true
52+
},
53+
url: {
54+
type: String,
55+
required: true
56+
},
57+
date: {
58+
type: String,
59+
required: true
60+
},
61+
openInNewTab: {
62+
type: Boolean,
63+
default: false
64+
},
65+
image: {
66+
type: String,
67+
default: undefined
68+
}
69+
},
70+
71+
computed: {
72+
/**
73+
* Compute and formate start date
74+
* @returns {String}
75+
*/
76+
formattedDate: function() {
77+
return this.formatDate(this.date || '')
78+
}
79+
},
80+
81+
methods: {
82+
formatDate: function(date) {
83+
return date != '' ? format(parseISO(date), 'MMMM d, yyyy') : ''
84+
}
85+
}
86+
}
87+
</script>
88+
89+
<style lang="scss" scoped>
90+
h3 {
91+
font-size: 1rem;
92+
line-height: 1.15rem;
93+
margin-bottom: 0;
94+
}
95+
p {
96+
margin-bottom: 0rem;
97+
cursor: default;
98+
}
99+
.list-item {
100+
padding: 1.5rem 0;
101+
}
102+
.list-item__date {
103+
font-size: 1rem;
104+
font-style: italic;
105+
cursor: default;
106+
}
107+
.list-card-image {
108+
width: stretch;
109+
aspect-ratio: 1 / 1;
110+
}
111+
.list-card-content {
112+
margin-left: 1rem;
113+
}
114+
.spacing {
115+
margin-top: .5rem;
116+
}
117+
</style>

0 commit comments

Comments
 (0)