Skip to content

Commit c910d93

Browse files
EliasJRHMathyouMB
EliasJRH
and
MathyouMB
authored
component card (#111)
* Create content card component * export component * add component to course page * update style * update page style * update display name Co-authored-by: MathyouMB <matthewmacraebovell@bell.net>
1 parent 0d6f619 commit c910d93

7 files changed

Lines changed: 212 additions & 16 deletions

File tree

‎api/app/models/course_session.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ class CourseSession < ApplicationRecord
1010
has_many :lectures, dependent: :delete_all
1111

1212
def display_name
13-
"#{course.code}: #{term.capitalize} #{year}"
13+
"#{term.capitalize} #{year}"
1414
end
1515
end

‎client/src/components/ContentCard/ContentCard.stories.svelte‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script>
2+
import {Meta, Template, Story} from '@storybook/addon-svelte-csf';
3+
import ContentCard from './ContentCard.svelte';
4+
</script>
5+
6+
<Meta
7+
title="Example/ContentCard"
8+
component={ContentCard}
9+
argTypes={{
10+
title: {control: 'text'},
11+
info: {control: 'text'},
12+
tag: {control: 'text'}
13+
}}
14+
/>
15+
16+
<Template let:args>
17+
<ContentCard {...args} />
18+
</Template>
19+
20+
<Story
21+
name="Lecture example"
22+
args={{
23+
title: 'Sequences and Sums',
24+
info: 'Yesterday lol',
25+
tag: 'COMP 1805',
26+
type: 'Lecture'
27+
}}
28+
/>
29+
30+
<Story
31+
name="Drill example"
32+
args={{
33+
title: 'Lecture 5 Drill',
34+
info: '5',
35+
tag: 'COMP 1805',
36+
type: 'Drill'
37+
}}
38+
/>
39+
40+
<Story
41+
name="Test example"
42+
args={{
43+
title: 'Functions Test',
44+
info: '20',
45+
tag: 'COMP 1805',
46+
type: 'Test'
47+
}}
48+
/>
49+
50+
<Story
51+
name="Midterm example"
52+
args={{
53+
title: 'Mock Midterm 2021',
54+
info: '50',
55+
tag: 'COMP 1805',
56+
type: 'Midterm'
57+
}}
58+
/>
59+
60+
<Story
61+
name="Exam example"
62+
args={{
63+
title: 'Final Exam 2020',
64+
info: '50',
65+
tag: 'COMP 1805',
66+
type: 'Exam'
67+
}}
68+
/>

‎client/src/components/ContentCard/ContentCard.svelte‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<script>
2+
export let title;
3+
export let info;
4+
export let tag;
5+
export let type;
6+
7+
import Fa from 'svelte-fa';
8+
import {
9+
faQuestion, //Questions
10+
faCalendarAlt, // Date
11+
faChalkboard, //Lecture / lesson
12+
faLightbulb, //Drill
13+
faClipboard, //Test
14+
faPencilAlt, //Midterm
15+
faPenAlt, //Exam
16+
faUser // Person
17+
} from '@fortawesome/free-solid-svg-icons';
18+
19+
const tagIcons = {
20+
Lecture: faChalkboard,
21+
Drill: faLightbulb,
22+
Test: faClipboard,
23+
Midterm: faPencilAlt,
24+
Exam: faPenAlt
25+
};
26+
27+
const infoIcons = {
28+
Lecture: faCalendarAlt,
29+
Drill: faQuestion,
30+
Test: faQuestion,
31+
Midterm: faQuestion,
32+
Exam: faQuestion,
33+
User: faUser
34+
};
35+
</script>
36+
37+
<div class="content-card">
38+
<div class="content-card-tag">
39+
<!--<Fa icon={tagIcons[type]} />-->
40+
{tag}
41+
</div>
42+
<div class="content-card-title">{title}</div>
43+
<div class="content-card-info">
44+
<Fa icon={infoIcons[type]} />
45+
<span class="content-card-info-spacing" />{info}
46+
</div>
47+
</div>
48+
49+
<style type="text/scss">
50+
.content-card {
51+
padding: 1rem;
52+
min-width: 200px;
53+
max-width: 250px;
54+
height: 125px;
55+
box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.02),
56+
0 6px 20px 0 rgba(0, 0, 0, 0.02);
57+
transition: all 0.15s;
58+
overflow: hidden;
59+
font-family: 'Assistant', sans-serif;
60+
}
61+
62+
.content-card:hover {
63+
box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.035),
64+
0 6px 20px 0 rgba(0, 0, 0, 0.035);
65+
opacity: 1;
66+
}
67+
68+
.content-card-tag {
69+
transition: all 0.15s;
70+
background: #ffab0443;
71+
margin-bottom: 1rem;
72+
background: #ffab04;
73+
color: white;
74+
font-weight: bold;
75+
font-size: 0.7rem;
76+
border-radius: 0.2rem;
77+
padding: 0.25rem 0.7rem;
78+
width: fit-content;
79+
opacity: 0.8;
80+
}
81+
82+
.content-card-title {
83+
font-weight: bold;
84+
font-size: 1rem;
85+
margin-bottom: 10px;
86+
min-height: 60px;
87+
width: 100%;
88+
opacity: 0.6;
89+
transition: all 0.15s;
90+
}
91+
92+
.content-card-info {
93+
margin-bottom: 5px;
94+
color: #6c717a;
95+
font-size: 0.9rem;
96+
opacity: 0.6;
97+
transition: all 0.15s;
98+
}
99+
100+
.content-card-info-spacing {
101+
margin-left: 0.25rem;
102+
}
103+
104+
.content-card:hover {
105+
.content-card-info {
106+
opacity: 1;
107+
}
108+
109+
.content-card-title {
110+
opacity: 1;
111+
}
112+
113+
.content-card-tag {
114+
background: #ffab04;
115+
color: white;
116+
opacity: 1;
117+
}
118+
}
119+
</style>

‎client/src/components/ContentCard/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {default as ContentCard} from './ContentCard.svelte';

‎client/src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export {Button} from './Button';
2+
export {ContentCard} from './ContentCard';
23
export {CourseNavbar} from './CourseNavbar';
34
export {Footer} from './Footer';
45
export {Header} from './Header';

‎client/src/global.style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
:global(.course-page) {
2-
margin-top: 2rem;
2+
margin-top: 0.5rem;
33
overflow: hidden;
44
margin-bottom: 5rem;
55
font-family: "Assistant", sans-serif;

‎client/src/pages/Course.svelte‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import {link} from 'svelte-spa-router';
3-
import {CourseNavbar as Navbar} from '../components';
3+
import {ContentCard, CourseNavbar as Navbar} from '../components';
44
import {getCourse} from '../data';
55
export let id;
66
const response = getCourse(id);
@@ -20,28 +20,32 @@
2020
<h1>{$response.data.course.displayName}</h1>
2121
<p>{$response.data.course.description}</p>
2222
<!--
23-
<h2>Sessions</h2>
24-
<div class="course-tests">
23+
<div class="content-container">
2524
{#each $response.data.course.courseSessions as session}
26-
<a href={'/sessions/' + session.id} use:link
27-
><div class="course-test">{session.id}</div></a
28-
>
25+
<a href={'/sessions/' + session.id} use:link>
26+
<ContentCard title={session.displayName} info={session.instructor} tag={"Session"} type="User"/>
27+
</a>
2928
{/each}
3029
</div>
3130
-->
3231

3332
<!--<h2>Tests</h2>-->
34-
<div class="course-tests">
33+
<div class="content-container">
3534
{#each $response.data.course.tests as test}
36-
<a href={'#/tests/' + test.id + '/?reload=true'}
37-
><div class="course-test">{test.id}</div></a
38-
>
35+
<a href={'#/tests/' + test.id + '/?reload=true'}>
36+
<ContentCard
37+
title={test.title}
38+
info={test.questionCount}
39+
tag={'Test'}
40+
type="Midterm"
41+
/>
42+
</a>
3943
{/each}
4044
</div>
4145

4246
<!--
4347
<h2>Lectures</h2>
44-
<div class="course-tests">
48+
<div class="content-container">
4549
{#each $response.data.course.lectures as lecture}
4650
<a href={lecture.url}><div class="course-test">{lecture.id}</div></a>
4751
{/each}
@@ -51,12 +55,15 @@
5155
</div>
5256

5357
<style>
54-
.course-tests {
58+
.content-container {
5559
display: flex;
5660
flex-wrap: wrap;
61+
gap: 1.5rem;
62+
margin-top: 3rem;
5763
}
5864
59-
.course-test {
60-
margin: 1em;
65+
a {
66+
text-decoration: none;
67+
color: inherit;
6168
}
6269
</style>

0 commit comments

Comments
 (0)