Skip to content

Commit

Permalink
Admin page draft design complete, restyled table, moved apexchart scr…
Browse files Browse the repository at this point in the history 
…ipt to external js file
  • Loading branch information
@BarokDG
BarokDG committed Feb 16, 2021
1 parent f8c9b4e commit 828856d
Show file tree
Hide file tree
Showing 5 changed files with 413 additions and 129 deletions.
103 changes: 88 additions & 15 deletions admin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loan</title>
<title>Admin</title>

<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
Expand All @@ -21,8 +21,8 @@
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital@1&family=Open+Sans&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Merriweather:ital@1&family=Open+Sans:wght@300;400;600;700&display=swap">

</head>

Expand All @@ -42,8 +42,8 @@
<h3 class="heading">AAIT Clearance System</h3>
</div>

<a href="./dash.html"><button><i class="fas fa-tachometer-slowest"></i>Dashboard</button></a>
<a href="./loan.html"><button class="active"><i class="fas fa-books"></i>Students</button></a>
<a href="./dash.html"><button class="active"><i class="fas fa-tachometer-slowest"></i>Dashboard</button></a>
<a href="./loan.html"><button><i class="fas fa-books"></i>Students</button></a>
<a href=""><button><i class="fas fa-info-circle"></i>How To Use</button></a>
<a href=""><button><i class="fas fa-bell"></i>Announcements</button></a>
<a href=""><button><i class="fas fa-sign-out-alt"></i>Log out</button></a>
Expand All @@ -53,9 +53,9 @@ <h3 class="heading">AAIT Clearance System</h3>

<h3 class="heading my-5">AAIT Clearance System</h3>

<a href="./dash.html"><button class="side-button"><i
<a href="./dash.html"><button class="side-button active"><i
class="fas fa-tachometer-slowest fa-2x"></i>Dashboard</button></a>
<a href="./loan.html"><button class="side-button active"><i class="fas fa-books fa-2x"></i>Students</button></a>
<a href="./loan.html"><button class="side-button"><i class="fas fa-books fa-2x"></i>Students</button></a>
<a href=""><button class="side-button"><i class="fas fa-info-circle fa-2x"></i>How To Use</button></a>
<a href=""><button class="side-button"><i class="fas fa-bell fa-2x"></i>Announcements</button></a>
<a href=""><button class="side-button"><i class="fas fa-sign-out-alt fa-2x"></i>Log out</button></a>
Expand All @@ -77,14 +77,84 @@ <h3 class="heading my-5">AAIT Clearance System</h3>
</svg>
</button>

<a class="navbar-brand" href="#">Loan</a>
<a class="navbar-brand" href="#">Dashboard</a>
</div>
</nav>

<div class="main-content mt-3">
<div class="container mt-5">
<div class="row">
<div class="col">
<div class="row">
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<p class="card-title">Total number of Students</p>
<p class="stat-value">4000 <i class="fas fa-graduation-cap"></i></p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<p class="card-title">Gender Ratio (Males/Females)</p>
<p class="stat-value">1.5 <i class="fa fa-venus-mars"></i></p>
<!-- <div id="statusbar"></div> -->
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<p class="card-title">Number of students cleared</p>
<p class="stat-value">1200 <i class="fas fa-check"></i></p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<p class="card-title">Number of students uncleared</p>
<p class="stat-value">2800 <i class="fas fa-user-clock"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row my-5 justify-content-around">
<div class="col-md-5 mb-3" id="radial_bar">
</div>
<div class="col-md-6" id="messages">
<div class="row">
<div class="col-12 sticky-top text-center bg-dark text-light mt-0 p-2">Recent Messages</div>
<div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum
repellat placeat quasi blanditiis. Aliquam placeat molestiae ipsum quisquam eius,
maiores eum repellendus minima unde doloribus eaque, voluptatum blanditiis adipisci
provident!</div>
<div class="col-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere,
aspernatur!</div>
<div class="col-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt mollitia
ut, sit totam quia quibusdam autem? Placeat excepturi quidem fuga.</div>
<div class="col-12">Lorem ipsum, dolor sit amet consectetur adipisicing.</div>
<div class="col-12">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo ex
similique illum sunt, necessitatibus assumenda temporibus tempore molestias atque
placeat quo nulla labore maxime laborum architecto soluta perspiciatis totam autem!
Dolor ipsam dignissimos hic laboriosam, minus distinctio in iste tempore similique non
magnam aliquam aperiam, ipsum necessitatibus? Ratione, ipsa blanditiis?</div>
<div class="col-12">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit delectus,
at vero dolore minima earum corporis aperiam. Ducimus eius culpa labore ex odit aperiam
ad doloremque modi?</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="chart"></div>
</div>
</div>

<!-- Search Bar -->
<div class="search-bar">
<!-- <div class="search-bar">
<input type="search" id="search" placeholder="Search">
<button type="button" class="btn btn-info" id="gradient-button" data-toggle="modal"
data-target="#exampleModal">New Loan
Expand All @@ -104,12 +174,11 @@ <h3 class="heading my-5">AAIT Clearance System</h3>
<th scope="col">All Done</th>
</tr>
</thead>
<tbody class="table-body">
<!-- DATA TO BE ENTERED -->
</tbody>
</table>
<tbody class="table-body"> -->
<!-- DATA TO BE ENTERED -->
<!-- </tbody>
</table> -->
</div>

</div>
</div>

Expand Down Expand Up @@ -139,6 +208,10 @@ <h3 class="heading my-5">AAIT Clearance System</h3>
<!-- personalize for each department -->
<script src="../assets/js/personalize.js"></script>

<!-- ApexCharts js -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="./assets/js/apexscript.js"></script>

</body>

</html>
108 changes: 100 additions & 8 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
}

.sidebar button:hover {
box-shadow: inset 0 0 100px 100px rgba(0, 105, 107, 0.5);
box-shadow: inset 0 0 100px 100px #cdcdcd25;
}

.sidebar a {
Expand Down Expand Up @@ -74,8 +74,7 @@ i {

/* Main Container */
.main-container {
background-image: url("../images/free-vector-blue-texture-halftone-background.jpg");
background-size: cover;
background-color: #F7F9FA;
grid-column-start: 2;
min-height: 100vh;
width: 100%;
Expand Down Expand Up @@ -106,6 +105,84 @@ i {
max-width: 350px;
}

.card {
border: 1px solid red;
height: 8rem;
}

.card-title {
color: #757575;
font-size: 1rem;
width: 9rem;
}

.stat-value {
font-size: 1.2rem;
font-weight: 400;
position: relative;
}

p>i {
border-radius: 50%;
bottom: 80%;
color: white;
left: 80%;
padding: 10px;
position: absolute;
}

.fa-venus-mars {
background-color: #F5365C;
}

.fa-graduation-cap {
background-color: #FB6340;
}

.fa-check {
background-color: #FFD600;
}

.fa-user-clock {
background-color: #11CDEF;
}

#radial_bar {
background-color: white;
}


/* Message box */
#messages {
background-color: white;
border: none;
height: 20rem !important;
overflow-y: auto;
}

#messages > .row > div {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

display: -webkit-box;
margin-top: .5rem;
overflow: hidden;
text-overflow: ellipsis;
}

#messages > .row > div:hover {
position: relative;
bottom: 5px;
}

#messages > .row > div:first-child {
font-size: 1.2rem;
}

/* .statusbar {
} */

/* Loan Page */
/* Search bar inside the main container */
/* Search bar */
Expand Down Expand Up @@ -162,10 +239,29 @@ nav {
}

/* Table */
thead {
background-color: white;
border-bottom: 2px solid red;
}

.table-responsive {
display: table !important;
}

th {
border: none !important;
color: #757575;
font-weight: lighter;
}

tr {
background-color: white;
}

.table-bordered td {
border: 1px solid white;
}

/* Responsiveness */
@media screen and (max-width: 1000px) {
#grid-container {
Expand Down Expand Up @@ -206,7 +302,7 @@ nav {
}

.side-button:hover {
box-shadow: inset 0 0 100px 100px rgba(150, 150, 150, 0.3);
box-shadow: inset 0 0 100px 100px rgba(150, 150, 150, 0.302);
}

.fa-2x {
Expand Down Expand Up @@ -258,10 +354,6 @@ nav {
display: block !important;
}

table {
overflow-x: scroll;
}

.navbar-brand {
display: block;
}
Expand Down
Loading

0 comments on commit 828856d

Please sign in to comment.