Skip to content

Commit b74dbca

Browse files
dvcabiyadvcabiya
authored
Merge pull request #218 from makeopensource/#39-Updated-Join-course-Page
#39 updated join course page
2 parents 883151c + 471e0d6 commit b74dbca

9 files changed

Lines changed: 373 additions & 132 deletions

File tree

‎devU-client/src/components/authenticatedRouter.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import CoursesListPage from "./pages/listPages/courses/coursesListPage";
2121
import AssignmentProblemFormPage from './pages/forms/assignments/assignmentProblemFormPage'
2222
import InstructorSubmissionspage from "./pages/submissions/InstructorSubmissionspage";
2323
import SubmissionFileView from './pages/submissions/submissionFileView'
24+
import UserCoursesListPage from "./pages/listPages/courses/coursesListPage";
25+
import JoinCoursePage from "./pages/listPages/joinwithcodepage";
2426

2527
import WebhookURLForm from './pages/webhookURLForm'
2628

@@ -55,6 +57,8 @@ const AuthenticatedRouter = () => (
5557
<Route exact path='/course/:courseId/assignment/:assignmentId/submission/:submissionId/feedback'
5658
component={SubmissionFeedbackPage}/>
5759
<Route exact path ='/course/:courseId/assignment/:assignmentId/submission/:submissionId/fileView' component={SubmissionFileView}/>
60+
<Route path="/join-course" component={JoinCoursePage} />
61+
<Route path="/" component={UserCoursesListPage} />
5862
// TBD, undecided where webhooks should be placed
5963
{/*<Route exact path='/webhookURLPage' component={webhookURLForm}/>*/}
6064

‎devU-client/src/components/pages/courses/courseDetailPage.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -142,15 +142,3 @@ h4 {
142142
justify-content: flex-start;
143143
}
144144
}
145-
// .actual_button { // probably garbage
146-
// display: flex;
147-
// flex-direction: row;
148-
// border: 0; /* Primary button color */
149-
// /* Button text color */
150-
// padding: 10px 20px; /* Padding for button */
151-
// border-radius: 5px;
152-
// font-weight: 600;
153-
// transition: background-color 0.3s ease;
154-
// background-color: $purple !important;
155-
// color: white !important;
156-
// }

‎devU-client/src/components/pages/gradebook/gradebookPage.scss‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,27 +21,27 @@ table {
2121
border-collapse: collapse;
2222
}
2323

24-
// Alternating Row Colors
25-
tr.evenRow {
26-
background-color: $table-row-even;
27-
}
28-
29-
tr.oddRow {
30-
background-color: $table-row-odd;
31-
}
3224

3325
// Table Header & Cell Styling
3426
th {
35-
background-color: #5a3d8a;
27+
background-color: $primary;
3628
color: white;
3729
}
3830

3931
th, td {
4032
padding: 10px;
41-
border-bottom: 1px solid #ccc;
4233
text-align: left;
4334
}
4435

36+
tr{
37+
border-bottom: 1px solid #ccc;
38+
}
39+
40+
tr:last-of-type{
41+
border-bottom-right-radius: 10px;
42+
border-bottom: none;
43+
}
44+
4545
// Table Borders & Rounded Corners
4646
th:first-of-type {
4747
border-top-left-radius: 10px;
@@ -51,12 +51,13 @@ th:last-of-type {
5151
border-top-right-radius: 10px;
5252
}
5353

54-
tr:last-of-type td:first-of-type {
54+
td:first-of-type {
5555
border-bottom-left-radius: 10px;
56-
}
5756

58-
tr:last-of-type td:last-of-type {
57+
}
58+
td:last-of-type {
5959
border-bottom-right-radius: 10px;
60+
border-bottom: none;
6061
}
6162

6263
// Table Options Section
@@ -70,6 +71,7 @@ tr:last-of-type td:last-of-type {
7071
display: flex;
7172
justify-content: space-between;
7273
align-items: center;
74+
margin-bottom: 20px;
7375
}
7476

7577
// Text Colors for Status Indicators
@@ -99,7 +101,8 @@ span.red {
99101
background-color: white;
100102
padding: -3px;
101103
border-radius: 10px;
102-
border: 2px solid #5a3d8a;
104+
height:fit-content;
105+
border: 2px solid $primary;
103106
}
104107

105108
.categoryRow {
@@ -131,10 +134,6 @@ span.red {
131134
margin-top: 10px; // 🟢 FIX: Added spacing so it doesn’t overlap
132135
}
133136

134-
// Page Wrapper & Title
135-
.pageWrapper {
136-
padding: 20px;
137-
}
138137

139138
.gradebookTitle {
140139
text-align: center;
@@ -144,7 +143,7 @@ span.red {
144143

145144
// 🟢 FIX: "Back to Course" Button Alignment
146145
.backToCourseButton {
147-
background-color: #5a3d8a;
146+
background-color: $primary;
148147
color: white;
149148
padding: 8px 15px;
150149
border-radius: 30px;
@@ -157,7 +156,7 @@ span.red {
157156

158157
// Section Headers (Purple Background)
159158
.sectionHeader {
160-
background-color: #5a3d8a;
159+
background-color: $primary;
161160
color: white;
162161
padding: 12px 20px;
163162
border-radius: 8px 8px 0 0;

‎devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const GradebookStudentPage = () => {
7171
<div className={styles.topSection}>
7272
<h1 className={styles.gradebookTitle}>{courseName} Gradebook</h1>
7373
{role.isInstructor() && (
74-
<button className={styles.backToCourseButton} onClick={() => history.push(`/course/${courseId}/courses`)}>
74+
<button className='btnPrimary' onClick={() => history.goBack()}>
7575
Back to Course
7676
</button>
7777
)}

‎devU-client/src/components/pages/homePage/homePage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const HomePage = () => {
8383
history.push(`/addCoursesForm`);
8484
}}>Create Course</button>
8585
<button className='btnSecondary' id='joinCoursBtn' onClick={() => {
86-
history.push(`/joinCourseForm`);
86+
history.push(`/courses`);
8787
}}>Join Course</button>
8888
</div>
8989
</div>

‎devU-client/src/components/pages/listPages/courses/coursesListPage.scss‎

Lines changed: 143 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,160 @@
11
@import 'variables';
22

3+
.coursesListPage {
4+
font-family: $font-family;
5+
background-color: $background;
6+
color: $text-color;
7+
min-height: 100vh;
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
311

12+
/* Breadcrumbs & Navigation */
13+
.navigation {
14+
display: flex;
15+
align-items: center;
16+
width: 80%;
17+
max-width: 1000px;
18+
justify-content: space-between;
19+
margin: 15px 0;
420

21+
.homeLink {
22+
font-size: 1rem;
23+
font-weight: bold;
24+
color: $primary;
25+
text-decoration: none;
26+
transition: 0.2s;
527

6-
.addCourseBtn {
28+
&:hover {
29+
color: $secondary;
30+
}
31+
}
732

8-
background-color: $primary;
9-
color: $text-color;
10-
border: 0px;
11-
padding: 10px 40px;
12-
border-radius: 50px;
13-
font-size: 14px;
14-
font-weight: 700;
15-
text-decoration: none;
16-
cursor: pointer;
17-
}
33+
.breadcrumbs {
34+
font-size: 0.9rem;
35+
color: $text-color-secondary;
36+
}
37+
}
1838

19-
.courseName {
20-
color: $text-color;
21-
text-decoration: none;
22-
font-size: 14px;
23-
}
39+
/* Page Title */
40+
.pageTitle {
41+
font-size: 2.5rem;
42+
font-weight: bold;
43+
text-align: center;
44+
margin-bottom: 20px;
45+
}
2446

25-
.filters {
26-
display: flex;
27-
justify-content: flex-end;
47+
/* Search Section */
48+
.searchSection {
49+
display: flex;
50+
justify-content: space-between;
51+
align-items: center;
52+
width: 90%;
53+
max-width: 1000px;
54+
margin-bottom: 20px;
55+
gap: 12px;
2856

29-
margin-bottom: 1rem;
30-
}
57+
input {
58+
flex-grow: 1;
59+
padding: 10px;
60+
border: 1px solid $input-border;
61+
background-color: $input-field-background;
62+
color: $text-color;
63+
border-radius: 12px;
64+
font-size: 1rem;
65+
}
3166

32-
.dropdown {
33-
width: 300px;
34-
}
67+
button {
68+
padding: 10px 16px;
69+
background-color: $primary;
70+
color: white;
71+
border: none;
72+
border-radius: 12px;
73+
font-size: 1rem;
74+
font-weight: bold;
75+
cursor: pointer;
76+
transition: 0.2s;
3577

36-
.header {
37-
color: $text-color;
38-
display: flex;
39-
justify-content: space-between;
40-
align-items: center;
41-
cursor: default;
42-
}
78+
}
4379

44-
@media (max-width: 700px) {
45-
.dropdown {
46-
width: 100%;
80+
.joinWithCodeButton {
81+
margin-left: auto;
82+
background-color: $primary;
83+
}
4784
}
4885

49-
.header {
50-
display: block;
86+
/* Table Styling */
87+
.tableContainer {
88+
width: 96%;
89+
max-width: 1200px;
90+
margin: 10px auto;
91+
border-radius: 8px;
92+
overflow: hidden;
93+
94+
table {
95+
width: 100%;
96+
border-collapse: collapse;
97+
98+
th, td {
99+
text-align: center;
100+
padding: 12px;
101+
border-bottom: 1px solid $grey;
102+
}
103+
104+
th {
105+
background-color: $primary;
106+
color: white;
107+
font-weight: bold;
108+
text-transform: capitalize;
109+
}
110+
111+
tr:nth-child(even) {
112+
background-color: $table-row-even;
113+
}
114+
115+
tr:nth-child(odd) {
116+
background-color: $table-row-odd;
117+
}
118+
119+
tr:hover {
120+
background-color: $list-item-background-hover;
121+
}
122+
}
123+
124+
/* Join Button */
125+
.joinButton {
126+
background-color: $primary;
127+
color: white;
128+
border: none;
129+
padding: 10px 14px;
130+
border-radius: 20px; /* ✅ Makes button rounded */
131+
cursor: pointer;
132+
font-size: 1rem;
133+
font-weight: bold;
134+
transition: 0.2s;
135+
box-shadow: $box-shadow;
136+
137+
&:hover {
138+
background-color: $secondary-darker;
139+
}
140+
141+
&:disabled {
142+
background-color: $grey-lighter;
143+
cursor: not-allowed;
144+
}
145+
}
51146
}
52-
}
53147

54-
.smallLine {
55-
width: 50px; /* adjust this value to set the length of the small line */
56-
border-top: 3px solid $text-color; /* adjust this value to set the color and thickness of the line */
57-
margin-right: 10px; /* adjust this value to set the space between the line and the text */
58-
}
148+
/* Responsive Design */
149+
@media (max-width: $medium) {
150+
.tableContainer {
151+
width: 100%;
152+
overflow-x: auto;
153+
}
59154

60-
.largeLine {
61-
flex-grow: 1;
62-
border-top: 3px solid $text-color; /* adjust this value to set the color and thickness of the line */
63-
margin-left: 10px; /* adjust this value to set the space between the line and the text */
64-
margin-right: 10px; /* add this line to create some space between the line and the button */
65-
}
155+
.searchSection {
156+
flex-direction: column;
157+
align-items: flex-start;
158+
}
159+
}
160+
}

0 commit comments

Comments
 (0)