Skip to content

Commit cf4e404

Browse files
rammyblogrammyblog
authored
Merge pull request #60 from daegee/Dashboard-(minor-fix)
Edit-course feature
2 parents a60d9f9 + b9e0a02 commit cf4e404

File tree

2 files changed

+372
-0
lines changed

2 files changed

+372
-0
lines changed

‎admin-dashboard-edit-course.css‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
body {
2+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3+
}
4+
5+
.blur {
6+
filter: blur(8px);
7+
background: rgba(0, 0, 0, 0.15);
8+
position: relative;
9+
overflow: hidden;
10+
}
11+
12+
/*
13+
.blur:after {
14+
content: '';
15+
z-index: 1;
16+
background: rgba(0, 0, 0, 0.15);
17+
width: 100vw;
18+
height: 100%;
19+
position: absolute;
20+
box-shadow: inset 100vw 100px 410px rgba(0, 0, 0, 0.4), inset -100vw -100px 410px rgba(0, 0, 0, 0.4);
21+
}
22+
*/
23+
24+
.dashboard-wrap > nav {
25+
max-width: 200px;
26+
display: flex;
27+
flex-direction: column;
28+
justify-content: space-around;
29+
position: fixed;
30+
height: 100%;
31+
z-index: 1;
32+
}
33+
34+
.dashboard-wrap > nav > ul > li > .dashboard-icon {
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
38+
}
39+
40+
.dashboard-wrap > nav > ul > li > ul > li > a {
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
}
45+
46+
.dashboard-wrap > nav > button {
47+
border: none;
48+
background: #004699;
49+
width: 80%;
50+
padding: 5px;
51+
border-radius: 5px;
52+
color: #F9FAFC;
53+
}
54+
55+
.dashboard-content {
56+
margin: 0 auto;
57+
margin-left: 217px;
58+
}
59+
60+
nav.top-nav {
61+
display: flex;
62+
justify-content: space-between;
63+
}
64+
65+
.courses {
66+
display: grid;
67+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
68+
grid-gap: 5rem;
69+
}
70+
71+
.courses > .card {
72+
border-radius: 6.5px;
73+
}
74+
75+
.courses > .card .card-buttons {
76+
display: flex;
77+
justify-content: space-between;
78+
}
79+
80+
.courses > .card .card-buttons > button {
81+
width: 47%;
82+
}
83+
84+
.courses > .card .card-buttons > button {
85+
display: flex;
86+
justify-content: space-between;
87+
align-items: center;
88+
}
89+
90+
.courses > .card .card-buttons > .btn-delete {
91+
border: 1.4px solid #0050AF;
92+
color: #0050AF;
93+
}
94+
95+
.courses > .card .card-buttons > .btn-delete:hover {
96+
background-color: #0050AF;
97+
color: #fff;
98+
}
99+
100+
.courses > .card .card-buttons > .btn-edit {
101+
background-color: #0050AF;
102+
border: none;
103+
}
104+
105+
.add-new-course {
106+
border: 2px dashed #0050AF;
107+
}
108+
109+
.add-new-course > div > button {
110+
border: none;
111+
background: none;
112+
}
113+
114+
115+
116+
.form-edit-course {
117+
position: absolute;
118+
top: 5%;
119+
left: 39%;
120+
background: #ffffff;
121+
padding: 30px 30px;
122+
border-radius: 10px;
123+
}
124+
125+
.form-edit-course .form-group > select,
126+
.form-edit-course .form-group > input,
127+
.form-edit-course .form-group > textarea {
128+
background: rgba(224, 231, 255, 0.2);
129+
border: 1px solid #E0E7FF;
130+
box-sizing: border-box;
131+
border-radius: 5px;
132+
}
133+
134+
.form-edit-course .form-group > label {
135+
color: #B0BAC9;
136+
}
137+
138+
.form-edit-course > button.btn-submit {
139+
width: 100%;
140+
background: #0050AF;
141+
border-radius: 5px;
142+
}
143+
144+
.form-edit-course > button.btn-danger {
145+
margin-left: 91%;
146+
margin-bottom: 15px;
147+
}
148+
149+
150+
/*** UTILITIES ***/
151+
152+
.text-white {
153+
color: #F9FAFC;
154+
}
155+
156+
.text-yellow {
157+
color: #FFC100;
158+
}
159+
160+
.text-blue {
161+
color: #1F59BB
162+
}
163+
164+
.active {
165+
background: #004699;
166+
height: 100%;
167+
padding: 15px 0;
168+
width: 100%
169+
}
170+
171+
172+
@media (max-width: 467px) {
173+
.form-edit-course {
174+
left: 15%;
175+
176+
}
177+
}

‎admin-dashboard-edit-course.html‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="css/bootstrap.min.css">
8+
<link rel="stylesheet" href="user-dashboard.css">
9+
<link rel="stylesheet" href="taskPage1.css">
10+
<link rel="stylesheet" href="admin-dashboard-edit-course.css">
11+
<script src="https://kit.fontawesome.com/833e0cadb7.js" crossorigin="anonymous"></script>
12+
<title>Admin Dashboard | CCN</title>
13+
</head>
14+
<body>
15+
16+
<div class="dashboard-wrap row blur">
17+
<nav class="col-2">
18+
19+
<ul class="nav flex-column">
20+
<li class="nav-item mb-5">
21+
<a class="nav-link dashboard-icon" href="#">
22+
<i class="fas fa-th-large fa-2x text-yellow"></i>
23+
<span class="ml-3 text-white">Dashboard</span>
24+
</a>
25+
26+
<ul class="nav flex-column mt-5 dashboard-menu-list">
27+
<li class="nav-item mb-5 text-center active">
28+
<a href="#" class="nav-link ml-5">
29+
<i class="fas fa-layer-group fa-2x text-white"></i>
30+
<span class="ml-3 text-white">Courses</span>
31+
</a>
32+
</li>
33+
34+
<li class="nav-item mb-5">
35+
<a href="#" class="nav-link ml-5">
36+
<i class="fas fa-layer-group fa-2x text-white"></i>
37+
<span class="ml-3 text-white">Mentors</span>
38+
</a>
39+
</li>
40+
41+
<li class="nav-item">
42+
<a href="#" class="nav-link ml-5">
43+
<i class="fas fa-layer-group fa-2x text-white"></i>
44+
<span class="ml-3 text-white">Mentees</span>
45+
</a>
46+
</li>
47+
</ul>
48+
</li>
49+
50+
</ul>
51+
52+
<button class="btn-sign-out mx-auto"> <i class="fas fa-power-off"></i><span class="ml-2">Logout</span></button>
53+
</nav>
54+
55+
<div class="dashboard-content col-sm-10 container mt-3">
56+
<div class="top-bar mt-3">
57+
<nav class="top-nav">
58+
59+
<div class="">
60+
<h3>Courses Overview</h3>
61+
</div>
62+
63+
<div class="user__details">
64+
<div class="">
65+
<img src="img/notification.png" alt="notification-icon">
66+
</div>
67+
68+
<div class="display-profile">
69+
<div class="display-picture"></div>
70+
<p class="mt-2 ml-4">John Doe</p>
71+
</div>
72+
73+
<div class="hamburger-menu">
74+
<i class="fas fa-bars fa-2x text-blue"></i>
75+
</div>
76+
</div>
77+
</nav>
78+
</div>
79+
80+
<div class="courses mt-5 pb-5">
81+
<div class="card">
82+
<img src="img/course-img.png" class="card-img-top" alt="...">
83+
<div class="card-body">
84+
<h5 class="card-title text-center">JavaScript Fundamentals</h5>
85+
<p class="card-text">Our introductory course serves as an easy way in for people just starting out in their developer journey.</p>
86+
<div class="card-buttons">
87+
<button type="button" class="btn btn-outline-primary btn-delete">Delete <i class="far fa-trash-alt"></i> </button>
88+
<button type="button" class="btn btn-primary btn-edit">Edit <i class="fas fa-pencil-alt"></i> </button>
89+
</div>
90+
</div>
91+
</div>
92+
93+
<div class="card">
94+
<img src="img/course-img.png" class="card-img-top" alt="...">
95+
<div class="card-body">
96+
<h5 class="card-title text-center">JavaScript Fundamentals</h5>
97+
<p class="card-text">Our introductory course serves as an easy way in for people just starting out in their developer journey.</p>
98+
<div class="card-buttons">
99+
<button type="button" class="btn btn-outline-primary btn-delete">Delete <i class="far fa-trash-alt"></i> </button>
100+
<button type="button" class="btn btn-primary btn-edit">Edit <i class="fas fa-pencil-alt"></i> </button>
101+
</div>
102+
</div>
103+
</div>
104+
105+
<div class="card">
106+
<img src="img/course-img.png" class="card-img-top" alt="...">
107+
<div class="card-body">
108+
<h5 class="card-title text-center">JavaScript Fundamentals</h5>
109+
<p class="card-text">Our introductory course serves as an easy way in for people just starting out in their developer journey.</p>
110+
<div class="card-buttons">
111+
<button type="button" class="btn btn-outline-primary btn-delete">Delete <i class="far fa-trash-alt"></i> </button>
112+
<button type="button" class="btn btn-primary btn-edit">Edit <i class="fas fa-pencil-alt"></i> </button>
113+
</div>
114+
</div>
115+
</div>
116+
117+
<div class="card">
118+
<img src="img/course-img.png" class="card-img-top" alt="...">
119+
<div class="card-body">
120+
<h5 class="card-title text-center">JavaScript Fundamentals</h5>
121+
<p class="card-text">Our introductory course serves as an easy way in for people just starting out in their developer journey.</p>
122+
<div class="card-buttons">
123+
<button type="button" class="btn btn-outline-primary btn-delete">Delete <i class="far fa-trash-alt"></i> </button>
124+
<button type="button" class="btn btn-primary btn-edit">Edit <i class="fas fa-pencil-alt"></i> </button>
125+
</div>
126+
</div>
127+
</div>
128+
129+
<div class="card">
130+
<img src="img/course-img.png" class="card-img-top" alt="...">
131+
<div class="card-body">
132+
<h5 class="card-title text-center">JavaScript Fundamentals</h5>
133+
<p class="card-text">Our introductory course serves as an easy way in for people just starting out in their developer journey.</p>
134+
<div class="card-buttons">
135+
<button type="button" class="btn btn-outline-primary btn-delete">Delete <i class="far fa-trash-alt"></i> </button>
136+
<button type="button" class="btn btn-primary btn-edit">Edit <i class="fas fa-pencil-alt"></i> </button>
137+
</div>
138+
</div>
139+
</div>
140+
141+
<div class="card add-new-course">
142+
<img src="img/course-img.png" class="card-img-top" alt="...">
143+
<div class="card-body text-center">
144+
<button class=""><i class="fas fa-plus fa-2x text-blue"></i></button>
145+
<h5 class="card-title text-center text-blue">Add New Course</h5>
146+
</div>
147+
</div>
148+
149+
150+
151+
152+
153+
154+
</div>
155+
</div>
156+
157+
</div>
158+
159+
<form class="form-edit-course">
160+
161+
162+
163+
<button type="" class="btn btn-danger">X</button>
164+
165+
<h4 class="text-center mb-4">Edit Course</h4>
166+
167+
<div class="form-group">
168+
<label for="exampleFormControlSelect1">Category</label>
169+
<select class="form-control" id="exampleFormControlSelect1">
170+
<option>Frontend Development</option>
171+
<option>Backend Development</option>
172+
<option>Data science</option>
173+
<option>Machine Learning</option>
174+
<option>UI/UX</option>
175+
</select>
176+
</div>
177+
178+
<div class="form-group">
179+
<label for="exampleInputEmail1">Title</label>
180+
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
181+
</div>
182+
183+
<div class="form-group">
184+
<label for="exampleFormControlTextarea1">Description</label>
185+
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
186+
</div>
187+
188+
<div class="form-group">
189+
<label for="exampleInputEmail1">Link</label>
190+
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
191+
</div>
192+
<button type="submit" class="btn btn-primary btn-submit">Submit</button>
193+
</form>
194+
</body>
195+
</html>

0 commit comments

Comments
 (0)