Skip to content

Commit cfac255

Browse files
mattcuentomattcuento
committed
completed styling for task page
1 parent 2e12910 commit cfac255

File tree

19 files changed

+30411
-90
lines changed

19 files changed

+30411
-90
lines changed

‎package-lock.json‎

Lines changed: 30282 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App/App.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
.App {
22
text-align: left;
33
height: 100%;
4+
background-color: #fff;
5+
}
6+
7+
.side {
8+
background-color: #fff;
49
}
510

611
.App-logo {
@@ -46,4 +51,4 @@
4651
.content-container {
4752
background-color: ghostwhite;
4853
}
49-
}
54+
}

‎src/App/App.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,14 @@ function App() {
5757
<Navigation />
5858
<div className="main container-fluid">
5959
<div className="row h-100">
60-
<div className="sidebar-container col-md-2">
61-
<img src={StudentPicture} alt="" style={{ width: 180, height: 180 }} />
62-
{fname}
60+
<div className="sidebar-container col-md-2 p-0 side">
61+
<div className="img-container">
62+
<img src={StudentPicture} alt="" className="img-fluid" />
63+
</div>
64+
<div className="pl-2 pt-2 pr-2">{fname}</div>
6365
<Sidebar />
6466
</div>
65-
<div className="content-container col-md-10">
67+
<div className="content-container col-md-10 p-0">
6668
<Content />
6769
</div>
6870
</div>

‎src/Components/Sidebar/Sidebar.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,16 @@
55
flex-direction: column;
66
align-items: center;
77
padding: 22px;
8+
background-color: #fff;
89
}
910

10-
1111
.sidebar .menu-container {
1212
width: 80px;
1313
margin-bottom: 10px;
1414
color: ghostwhite;
1515
text-align: center;
1616
align-self: center;
1717
padding-top: 22px !important;
18-
1918
}
2019

2120
.menu-container .menu-icon {
@@ -31,4 +30,4 @@
3130
text-decoration: none;
3231
font-weight: 700;
3332
font-size: 1rem;
34-
}
33+
}

‎src/Components/TaskBlocks/ImageBlock/ImageBlock.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import '../TaskBlock.css';
22

3-
function ImageBlock({ title, contents }: { title: string; contents: string }) {
3+
function ImageBlock({
4+
title,
5+
contents,
6+
cssKey,
7+
}: {
8+
title: string;
9+
contents: string;
10+
cssKey: number;
11+
}) {
412
return (
5-
<div className="row">
6-
<div className="col-md-12 my-2 p-3">
7-
<h2 className="text-left">
8-
<b>{title || 'N/A'}</b>
9-
</h2>
13+
<div className={`${cssKey % 2 === 1 ? 'white ' : 'gray '}row`}>
14+
<div className="col-md-6 text-center py-5 mx-auto">
15+
<h3 className="text-left mb-3">{title}</h3>
1016
{contents ? (
1117
<div className="container" id="img-container">
1218
<img src={contents} alt={contents} className="img-fluid" />

‎src/Components/TaskBlocks/IntroBlock/IntroBlock.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import '../TaskBlock.css';
22

3-
function IntroBlock({ instructions }: { instructions: string }) {
3+
function IntroBlock({ instructions, cssKey }: { instructions: string; cssKey: number }) {
44
return (
5-
<div className="row">
6-
<div className="col-md-12 my-2 p-3">
7-
<h2 className="text-left">
8-
<b>Introduction</b>
9-
</h2>
5+
<div className="white row">
6+
<div className="col-md-6 text-center py-5 mx-auto">
7+
<h3 className="text-left mb-3">Introduction</h3>
108
<p className="text-left">{instructions || 'No instructions given.'}</p>
119
</div>
1210
</div>

‎src/Components/TaskBlocks/QuizBlock/QuizBlock.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,22 +35,23 @@ function renderQuestions(questions: Array<QuestionFieldsFragment>) {
3535
// #render multiple choice question
3636
switch (question.__typename) {
3737
case 'FrQuestion': {
38+
const answer = question.answer ? question.answer : 'Not answered.';
3839
return (
39-
<div className="col-12" key={question.id}>
40+
<div className="col-12 my-3" key={question.id}>
4041
<p className="question-desc">
4142
<span className="question-index">{index + 1}</span>
4243
{question.description}
4344
</p>
4445
<InputGroup className="mb-3">
45-
<FormControl aria-label="Type your answer here." />
46+
<FormControl value={answer} disabled />
4647
</InputGroup>
4748
</div>
4849
);
4950
}
5051
case 'McQuestion': {
5152
const mcQ = question;
5253
return (
53-
<div className="col-12" key={mcQ.id}>
54+
<div className="col-12 my-3" key={mcQ.id}>
5455
<p className="question-desc">
5556
<span className="question-index">{index + 1}</span>
5657
{mcQ.description}
@@ -69,17 +70,17 @@ function QuizBlock({
6970
title,
7071
questions,
7172
reqScore,
73+
cssKey,
7274
}: {
7375
title: string;
7476
questions: QuestionFieldsFragment[];
7577
reqScore: number;
78+
cssKey: number;
7679
}) {
7780
return (
78-
<div className="row">
79-
<div className="col-md-12 py-3 my-2">
80-
<h2 className="text-left">
81-
<b>{title}</b>
82-
</h2>
81+
<div className={`${cssKey % 2 === 1 ? 'white ' : 'gray '}row`}>
82+
<div className="col-md-6 text-center py-5 mx-auto">
83+
<h3 className="text-left mb-3">{title}</h3>
8384
<p className="text-left">Required Score: {reqScore}</p>
8485
<div className="row">{renderQuestions(questions)}</div>
8586
</div>

‎src/Components/TaskBlocks/TaskBlock.css‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
.col-md-12 {
2-
background-color: rgb(224, 224, 224);
3-
border-radius: 5px;
4-
border: 1px;
5-
border-color: #007bff;
6-
}
7-
81
#img-container {
92
background-color: #fff;
103
border-radius: 5px;
@@ -24,3 +17,15 @@
2417
padding: 5px 20px;
2518
background-color: #383838;
2619
}
20+
21+
.white {
22+
background-color: #fff;
23+
}
24+
25+
.gray {
26+
background-color: #f2f2f2;
27+
}
28+
29+
h3 {
30+
color: #4274f3;
31+
}

‎src/Components/TaskBlocks/TextBlock/TextBlock.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
import '../TaskBlock.css';
22
import { Maybe } from '../../../__generated__/types';
33

4-
function TextBlock({ title, contents }: { title: string; contents: Maybe<string> }) {
4+
function TextBlock({
5+
title,
6+
contents,
7+
cssKey,
8+
}: {
9+
title: string;
10+
contents: Maybe<string>;
11+
cssKey: number;
12+
}) {
513
return (
6-
<div className="row">
7-
<div className="col-md-12 justifyCenter my-2 p-3">
8-
<h2 className="text-left">
9-
<b>{title}</b>
10-
</h2>
14+
<div className={`${cssKey % 2 === 1 ? 'white ' : 'gray '}row`}>
15+
<div className="col-md-6 text-center py-5 mx-auto">
16+
<h3 className="text-left mb-3">{title}</h3>
1117
<p className="text-left">{contents || 'N/A'}</p>
1218
</div>
1319
</div>

‎src/Components/TaskBlocks/VideoBlock/VideoBlock.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,20 @@ function onReady(event: any) {
99
event.target.pauseVideo();
1010
}
1111

12-
function VideoBlock({ title, contents }: { title: string; contents: string }) {
12+
function VideoBlock({
13+
title,
14+
contents,
15+
cssKey,
16+
}: {
17+
title: string;
18+
contents: string;
19+
cssKey: number;
20+
}) {
1321
const { id } = getVideoId(contents); // extract video id from yt url
1422
return (
15-
<div className="row">
16-
<div className="col-md-12 justifyCenter my-2 p-3">
17-
<h2 className="text-left">
18-
<b>{title}</b>
19-
</h2>
23+
<div className={`${cssKey % 2 === 1 ? 'white ' : 'gray '}row`}>
24+
<div className="col-md-6 text-center py-5 mx-auto">
25+
<h3 className="text-left mb-3">{title}</h3>
2026
<div className="container">
2127
<YouTube videoId={id as never} onReady={onReady} />
2228
</div>

0 commit comments

Comments
 (0)