Skip to content

Edit-course feature #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 9, 2020
Merged

Edit-course feature #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 177 additions & 0 deletions admin-dashboard-edit-course.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.blur {
filter: blur(8px);
background: rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
}

/*
.blur:after {
content: '';
z-index: 1;
background: rgba(0, 0, 0, 0.15);
width: 100vw;
height: 100%;
position: absolute;
box-shadow: inset 100vw 100px 410px rgba(0, 0, 0, 0.4), inset -100vw -100px 410px rgba(0, 0, 0, 0.4);
}
*/

.dashboard-wrap > nav {
max-width: 200px;
display: flex;
flex-direction: column;
justify-content: space-around;
position: fixed;
height: 100%;
z-index: 1;
}

.dashboard-wrap > nav > ul > li > .dashboard-icon {
display: flex;
justify-content: center;
align-items: center;
}

.dashboard-wrap > nav > ul > li > ul > li > a {
display: flex;
justify-content: center;
align-items: center;
}

.dashboard-wrap > nav > button {
border: none;
background: #004699;
width: 80%;
padding: 5px;
border-radius: 5px;
color: #F9FAFC;
}

.dashboard-content {
margin: 0 auto;
margin-left: 217px;
}

nav.top-nav {
display: flex;
justify-content: space-between;
}

.courses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-gap: 5rem;
}

.courses > .card {
border-radius: 6.5px;
}

.courses > .card .card-buttons {
display: flex;
justify-content: space-between;
}

.courses > .card .card-buttons > button {
width: 47%;
}

.courses > .card .card-buttons > button {
display: flex;
justify-content: space-between;
align-items: center;
}

.courses > .card .card-buttons > .btn-delete {
border: 1.4px solid #0050AF;
color: #0050AF;
}

.courses > .card .card-buttons > .btn-delete:hover {
background-color: #0050AF;
color: #fff;
}

.courses > .card .card-buttons > .btn-edit {
background-color: #0050AF;
border: none;
}

.add-new-course {
border: 2px dashed #0050AF;
}

.add-new-course > div > button {
border: none;
background: none;
}



.form-edit-course {
position: absolute;
top: 5%;
left: 39%;
background: #ffffff;
padding: 30px 30px;
border-radius: 10px;
}

.form-edit-course .form-group > select,
.form-edit-course .form-group > input,
.form-edit-course .form-group > textarea {
background: rgba(224, 231, 255, 0.2);
border: 1px solid #E0E7FF;
box-sizing: border-box;
border-radius: 5px;
}

.form-edit-course .form-group > label {
color: #B0BAC9;
}

.form-edit-course > button.btn-submit {
width: 100%;
background: #0050AF;
border-radius: 5px;
}

.form-edit-course > button.btn-danger {
margin-left: 91%;
margin-bottom: 15px;
}


/*** UTILITIES ***/

.text-white {
color: #F9FAFC;
}

.text-yellow {
color: #FFC100;
}

.text-blue {
color: #1F59BB
}

.active {
background: #004699;
height: 100%;
padding: 15px 0;
width: 100%
}


@media (max-width: 467px) {
.form-edit-course {
left: 15%;

}
}
195 changes: 195 additions & 0 deletions admin-dashboard-edit-course.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="user-dashboard.css">
<link rel="stylesheet" href="taskPage1.css">
<link rel="stylesheet" href="admin-dashboard-edit-course.css">
<script src="https://kit.fontawesome.com/833e0cadb7.js" crossorigin="anonymous"></script>
<title>Admin Dashboard | CCN</title>
</head>
<body>

<div class="dashboard-wrap row blur">
<nav class="col-2">

<ul class="nav flex-column">
<li class="nav-item mb-5">
<a class="nav-link dashboard-icon" href="#">
<i class="fas fa-th-large fa-2x text-yellow"></i>
<span class="ml-3 text-white">Dashboard</span>
</a>

<ul class="nav flex-column mt-5 dashboard-menu-list">
<li class="nav-item mb-5 text-center active">
<a href="#" class="nav-link ml-5">
<i class="fas fa-layer-group fa-2x text-white"></i>
<span class="ml-3 text-white">Courses</span>
</a>
</li>

<li class="nav-item mb-5">
<a href="#" class="nav-link ml-5">
<i class="fas fa-layer-group fa-2x text-white"></i>
<span class="ml-3 text-white">Mentors</span>
</a>
</li>

<li class="nav-item">
<a href="#" class="nav-link ml-5">
<i class="fas fa-layer-group fa-2x text-white"></i>
<span class="ml-3 text-white">Mentees</span>
</a>
</li>
</ul>
</li>

</ul>

<button class="btn-sign-out mx-auto"> <i class="fas fa-power-off"></i><span class="ml-2">Logout</span></button>
</nav>

<div class="dashboard-content col-sm-10 container mt-3">
<div class="top-bar mt-3">
<nav class="top-nav">

<div class="">
<h3>Courses Overview</h3>
</div>

<div class="user__details">
<div class="">
<img src="img/notification.png" alt="notification-icon">
</div>

<div class="display-profile">
<div class="display-picture"></div>
<p class="mt-2 ml-4">John Doe</p>
</div>

<div class="hamburger-menu">
<i class="fas fa-bars fa-2x text-blue"></i>
</div>
</div>
</nav>
</div>

<div class="courses mt-5 pb-5">
<div class="card">
<img src="img/course-img.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">JavaScript Fundamentals</h5>
<p class="card-text">Our introductory course serves as an easy way in for people just starting out in their developer journey.</p>
<div class="card-buttons">
<button type="button" class="btn btn-outline-primary btn-delete">Delete <i class="far fa-trash-alt"></i> </button>
<button type="button" class="btn btn-primary btn-edit">Edit <i class="fas fa-pencil-alt"></i> </button>
</div>
</div>
</div>

<div class="card">
<img src="img/course-img.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">JavaScript Fundamentals</h5>
<p class="card-text">Our introductory course serves as an easy way in for people just starting out in their developer journey.</p>
<div class="card-buttons">
<button type="button" class="btn btn-outline-primary btn-delete">Delete <i class="far fa-trash-alt"></i> </button>
<button type="button" class="btn btn-primary btn-edit">Edit <i class="fas fa-pencil-alt"></i> </button>
</div>
</div>
</div>

<div class="card">
<img src="img/course-img.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">JavaScript Fundamentals</h5>
<p class="card-text">Our introductory course serves as an easy way in for people just starting out in their developer journey.</p>
<div class="card-buttons">
<button type="button" class="btn btn-outline-primary btn-delete">Delete <i class="far fa-trash-alt"></i> </button>
<button type="button" class="btn btn-primary btn-edit">Edit <i class="fas fa-pencil-alt"></i> </button>
</div>
</div>
</div>

<div class="card">
<img src="img/course-img.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">JavaScript Fundamentals</h5>
<p class="card-text">Our introductory course serves as an easy way in for people just starting out in their developer journey.</p>
<div class="card-buttons">
<button type="button" class="btn btn-outline-primary btn-delete">Delete <i class="far fa-trash-alt"></i> </button>
<button type="button" class="btn btn-primary btn-edit">Edit <i class="fas fa-pencil-alt"></i> </button>
</div>
</div>
</div>

<div class="card">
<img src="img/course-img.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">JavaScript Fundamentals</h5>
<p class="card-text">Our introductory course serves as an easy way in for people just starting out in their developer journey.</p>
<div class="card-buttons">
<button type="button" class="btn btn-outline-primary btn-delete">Delete <i class="far fa-trash-alt"></i> </button>
<button type="button" class="btn btn-primary btn-edit">Edit <i class="fas fa-pencil-alt"></i> </button>
</div>
</div>
</div>

<div class="card add-new-course">
<img src="img/course-img.png" class="card-img-top" alt="...">
<div class="card-body text-center">
<button class=""><i class="fas fa-plus fa-2x text-blue"></i></button>
<h5 class="card-title text-center text-blue">Add New Course</h5>
</div>
</div>






</div>
</div>

</div>

<form class="form-edit-course">



<button type="" class="btn btn-danger">X</button>

<h4 class="text-center mb-4">Edit Course</h4>

<div class="form-group">
<label for="exampleFormControlSelect1">Category</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>Frontend Development</option>
<option>Backend Development</option>
<option>Data science</option>
<option>Machine Learning</option>
<option>UI/UX</option>
</select>
</div>

<div class="form-group">
<label for="exampleInputEmail1">Title</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>

<div class="form-group">
<label for="exampleFormControlTextarea1">Description</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

<div class="form-group">
<label for="exampleInputEmail1">Link</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<button type="submit" class="btn btn-primary btn-submit">Submit</button>
</form>
</body>
</html>