Browse Source

Merge pull request #21 from ExtProjNomit/users-history-reports-pages-updates

updated footer, history, users pages
pull/146/head
Charlie Chiu 7 years ago
committed by GitHub
parent
commit
2d868c044b
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 485 additions and 155 deletions
  1. +1
    -0
      package.json
  2. +25
    -1
      src/assets/scripts/nwFooter/nwFooter.html
  3. +83
    -12
      src/assets/styles/nomit.scss
  4. +175
    -0
      src/history.html
  5. +172
    -123
      src/reports.html
  6. +28
    -19
      src/users.html
  7. +1
    -0
      webpack/plugins/htmlPlugin.js

+ 1
- 0
package.json View File

@ -19,6 +19,7 @@
"dependencies": { "dependencies": {
"angular": "^1.6.4", "angular": "^1.6.4",
"angular-cookies": "^1.6.4", "angular-cookies": "^1.6.4",
"avatar-initials": "^4.1.0",
"angular-filter": "^0.5.17", "angular-filter": "^0.5.17",
"angular-route": "^1.6.4", "angular-route": "^1.6.4",
"babel-core": "^6.26.0", "babel-core": "^6.26.0",


+ 25
- 1
src/assets/scripts/nwFooter/nwFooter.html View File

@ -1,3 +1,27 @@
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 the princesses, all rights reserved.</span>
<div class="d-inline-block mr-3">
<p><small class="text-muted powered">Powered by:</small></p>
</div>
<div class="d-inline-block mr-4">
<div class="rounded-social-buttons mb-2">
<a href="http://nomit.com.au" >
<img src="http://nomit.com.au/app/themes/nomit/dist/images/logo.png" class="mr-2 mb-1" height="40px">
</a>
<a class="social-button facebook" href="https://www.facebook.com/nomitnetwork" target="_blank"><i class="fa fa-facebook-f"></i></a>
<a class="social-button twitter" href="https://twitter.com/nomitnetwork" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="social-button linkedin" href="https://www.linkedin.com/company/nomit/about/" target="_blank"><i class="fa fa-linkedin"></i></a>
</div>
</div>
<div class="d-inline-block">
<form class="form-inline">
<div class="form-group mr-1">
<label for="email" class="sr-only">Email</label>
<input type="email" class="form-control form-control-sm" placeholder="Email" required>
</div>
<button type="submit" class="btn btn-secondary btn-sm">Subscribe</button>
</form>
</div>
<p><small class="text-muted">&#169; 2019 NOMIT. All rights reserved.</small></p>
</footer> </footer>

+ 83
- 12
src/assets/styles/nomit.scss View File

@ -188,10 +188,6 @@ h1{
} }
// ***** STAR RATING ***** / // ***** STAR RATING ***** /
body{
font-size: 5em;
}
.star-rating-display { .star-rating-display {
unicode-bidi: bidi-override; unicode-bidi: bidi-override;
color: #c5c5c5; color: #c5c5c5;
@ -233,7 +229,6 @@ body{
} }
} }
/* Completely remove from the flow but leave available to screen readers. */
.is-vishidden { .is-vishidden {
position: absolute !important; position: absolute !important;
overflow: hidden; overflow: hidden;
@ -332,22 +327,39 @@ textarea {
} }
.card-body-users { .card-body-users {
border-top: 1px solid #9c9fa0;
border-top: 0.03125em solid #DDDDDD;
margin: 0; margin: 0;
} }
.users-icons { .users-icons {
margin-left: 150px;
padding: 5px;
margin-left: 160px;
padding: 8px;
padding-left: 0; padding-left: 0;
} }
.users-icons i { .users-icons i {
font-size: 20px;
margin-right: 15px;
color: #9c9fa0;
font-size: 17px;
margin-right: 20px;
color: #DDDDDD;
} }
.users-col {
vertical-align: middle;
margin-top: 30px;
}
.users-action-btn {
padding-left: 2;
margin-top: 10px;
}
.users-action-btn i {
font-size: 17px;
margin-right: 5px;
color: #DDDDDD;
}
//login //login
.modal-dialog { .modal-dialog {
max-width: 800px; max-width: 800px;
@ -436,7 +448,7 @@ textarea {
border-top: 1px solid #9c9fa0; border-top: 1px solid #9c9fa0;
margin: 0; margin: 0;
} }
f
.companies-icons { .companies-icons {
margin-left: 150px; margin-left: 150px;
padding: 5px; padding: 5px;
@ -513,6 +525,64 @@ textarea {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
/* FOOTER */
.rounded-social-buttons {
text-align: center;
}
.rounded-social-buttons .social-button {
display: inline-block;
position: relative;
cursor: pointer;
width: 1.875rem;
height: 1.8755rem;
padding: 0;
text-decoration: none;
text-align: center;
font-size: 1rem;
font-weight: normal;
line-height: 2em;
border-radius: 1.6875rem;
transition: all 0.5s ease;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.rounded-social-buttons .fa-twitter, .fa-facebook-f, .fa-linkedin {
font-size: 15px;
color: #FFFFFF;
}
.rounded-social-buttons .social-button.facebook {
background: #3b5998;
}
.rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
background: #888888;
}
.rounded-social-buttons .social-button.twitter {
background: #55acee;
}
.rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {
background: #888888;
}
.rounded-social-buttons .social-button.linkedin {
background: #007bb5;
}
.rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
background: #888888;
}
//new-ad page //new-ad page
.form-h2{ .form-h2{
@ -520,6 +590,7 @@ textarea {
color: #454545; color: #454545;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
}
/* Modal */ /* Modal */
body.modal-open .blurra{ body.modal-open .blurra{


+ 175
- 0
src/history.html View File

@ -0,0 +1,175 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>History</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
</head>
<body class="app">
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- @App Content -->
<!-- =================================================== -->
<div>
<!-- #sidebar ============================ -->
${require('html-loader!./_sidebar.html')}
<!-- #Main ============================ -->
<div class="page-container">
<!-- #topbar ============================ -->
${require('html-loader!./_topbar.html')}
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300'>
<div id='mainContent row'>
<div class="row content-title mT-60">
<h1 class="col-8 ml-1 mb-3">
History
</h1>
</div>
<!-- ### Table ### -->
<table class="table table-hover">
<thead class="thead-purple-border">
<tr>
<th scope="col">#</th>
<th scope="col">Position</th>
<th scope="col">Company</th>
<th scope="col">Industry</th>
<th scope="col">Submission Date</th>
<th scope="col">Application Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td style="text-decoration:underline"><a href="ads_1.html">Graphic Design Intern</a></td>
<td>Sierra Delta Creative</td>
<td>Design</td>
<td>07 Jan 2019</td>
<td>
<div class="btn btn-outline-success btn-sm" data-toggle="tooltip" data-placement="right" title="Application is still open">
ON
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td style="text-decoration:underline"><a href="ads_1.html">Barista Intern</a></td>
<td>Brunetti</td>
<td>Hospitality</td>
<td>21 Jan 2019</td>
<td>
<div class="btn btn-outline-secondary btn-sm" data-toggle="tooltip" data-placement="right" title="Application has expired">
OFF
</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td style="text-decoration:underline"><a href="ads_1.html">Web Developer Intern</a></td>
<td>Agile Talent</td>
<td>IT / Software Engineering</td>
<td>23 Jan 2019</td>
<td>
<div class="btn btn-outline-info btn-sm" data-toggle="tooltip" data-placement="right" title="Application is closed">
CLOSED
</div>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td style="text-decoration:underline"><a href="ads_1.html">Kitchen Hand Intern</a></td>
<td>Yarra River Grill</td>
<td>Hospitality</td>
<td>25 Jan 2019</td>
<td>
<div class="btn btn-outline-danger btn-sm" data-toggle="tooltip" data-placement="right" title="This job listing is removed">
CANCELLED
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- ### $App Screen Footer ### -->
${require('html-loader!./_footer.html')}
</div>
</div>
</body>
</html>

+ 172
- 123
src/reports.html View File

@ -1,131 +1,180 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="assets/styles/style.css">
<title>Reports</title>
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
<!--
+ @Page Loader
+ @App Content
- #Left Sidebar
> $Sidebar Header
> $Sidebar Menu
- #Main
> $Topbar
> $App Screen Content
-->
<!-- @Page Loader -->
<!-- =================================================== -->
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- @App Content -->
<!-- =================================================== -->
<div>
${require('html-loader!./_sidebar.html')}
<!-- #Main ============================ -->
<div class="page-container">
${require('html-loader!./_topbar.html')}
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300' style="padding-left: 80px; padding-right: 80px;">
<div class="col-8 ml-1 mb-3">
<h1>Reports</h1>
</div>
<!-- ### Table ### -->
<div class="container">
<table class="table table-hover">
<thead class="thead-purple-border">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
<th scope="col">State</th>
<th scope="col">Language</th>
<th scope="col">Fields</th>
<th scope="col">Member Since</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Tony</td>
<td>Stark</td>
<td>tonystark</td>
<td>VIC</td>
<td>English</td>
<td>Hospitality</td>
<td>Feb 2019</td>
</tr>
<tr>
<th scope="row">2</th>
<td>David</td>
<td>James</td>
<td>davidjames</td>
<td>VIC</td>
<td>English, Italian</td>
<td>Design</td>
<td>Feb 2019</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Miro</td>
<td>Kirov</td>
<td>mirokirov</td>
<td>VIC</td>
<td>English, Japanese</td>
<td>IT</td>
<td>Feb 2019</td>
</tr>
</tbody>
</table>
</div>
</main>
</div><!-- page-container -->
</div> <!-- App Content -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Reports</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
<!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer>
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
</head>
<body class="app">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- @App Content -->
<!-- =================================================== -->
<div>
<!-- #sidebar ============================ -->
${require('html-loader!./_sidebar.html')}
<!-- #Main ============================ -->
<div class="page-container">
<!-- #topbar ============================ -->
${require('html-loader!./_topbar.html')}
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300'>
<div id='mainContent row'>
<div class="row content-title mT-60">
<h1 class="col-8 ml-1 mb-3">
Reports
</h1>
</div>
<!-- ### Table ### -->
<table class="table table-hover">
<thead class="thead-purple-border">
<tr>
<th scope="col">#</th>
<th scope="col">Position</th>
<th scope="col">Company</th>
<th scope="col">Industry</th>
<th scope="col">Submitted By (ID)</th>
<th scope="col">Submission Date</th>
<th scope="col">Application Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td style="text-decoration:underline"><a href="ads_1.html">Graphic Design Intern</a></td>
<td>Sierra Delta Creative</td>
<td>Design</td>
<td>davidchan</td>
<td>07 Jan 2019</td>
<td>
<div class="btn btn-outline-success btn-sm" data-toggle="tooltip" data-placement="right" title="Application is still open">
ON
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td style="text-decoration:underline"><a href="ads_1.html">Barista Intern</a></td>
<td>Brunetti</td>
<td>Hospitality</td>
<td>jenniferbrown</td>
<td>21 Jan 2019</td>
<td>
<div class="btn btn-outline-secondary btn-sm" data-toggle="tooltip" data-placement="right" title="Application has expired">
OFF
</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td style="text-decoration:underline"><a href="ads_1.html">Web Developer Intern</a></td>
<td>Agile Talent</td>
<td>IT / Software Engineering</td>
<td>christhomson</td>
<td>23 Jan 2019</td>
<td>
<div class="btn btn-outline-info btn-sm" data-toggle="tooltip" data-placement="right" title="Application is closed">
CLOSED
</div>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td style="text-decoration:underline"><a href="ads_1.html">Kitchen Hand Intern</a></td>
<td>Yarra River Grill</td>
<td>Hospitality</td>
<td>johndoe</td>
<td>25 Jan 2019</td>
<td>
<div class="btn btn-outline-danger btn-sm" data-toggle="tooltip" data-placement="right" title="This job listing is removed">
CANCELLED
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- ### $App Screen Footer ### -->
${require('html-loader!./_footer.html')}
</div>
</div>
</body>
</html> </html>

+ 28
- 19
src/users.html View File

@ -104,37 +104,46 @@
<!-- ### $App Screen Content ### --> <!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300'> <main class='main-content bgc-grey-300'>
<div id='mainContent row'> <div id='mainContent row'>
<div class="content-title mT-60">
<div class="ml-1 mb-3">
Users
</div>
</div>
<div class="row content-title mT-60">
<h1 class="col-8 ml-1 mb-4">Users</h1>
</div>
<div class=" gap-30 masonry pos-r"> <!-- #content container ===== --> <div class=" gap-30 masonry pos-r"> <!-- #content container ===== -->
<div class="masonry-sizer col-md-6"></div> <div class="masonry-sizer col-md-6"></div>
<div class="masonry-item w-50"> <!-- #first user ========= --> <div class="masonry-item w-50"> <!-- #first user ========= -->
<div class="card item-box" >
<div class="user-data-title">
<img class="user-update-img" src="assets/static/images/nomit-logo.png" alt="">
<div class="card item-box" >
<div class="user-data-title container">
<div class="row">
<div class="col-8">
<img class="user-update-img rounded-circle" src="https://content.invisioncic.com/Mseclife/monthly_2017_08/C.png.2537be5c760ba5232ee4716f77d13c51.png" alt="">
<div class="testo"><h5 class=" form-title">David James</h5> <div class="testo"><h5 class=" form-title">David James</h5>
<div class=" text-size-11">Victoria</div> <div class=" text-size-11">Victoria</div>
<div class=" text-size-11">Mobile: 0414987654</div> <div class=" text-size-11">Mobile: 0414987654</div>
</div> </div>
</div>
<div class="col-4 users-action-btn" style="text-align: right">
<div class="d-inline-block">
<a href="" ><i class="fa fa-eye" data-toggle="tooltip" data-placement="bottom" title="View user details"></i></a>
<a href="" ><i class="fa fa-ban" data-toggle="tooltip" data-placement="bottom" title="Ban user (user will not be able to login)"></i></a>
</div>
</div> </div>
<div class="card-body p-0">
<div class="card-body-users row">
<div class="users-icons">
<a href="" ><i class="ti-instagram "></i></a>
<a href="" ><i class="ti-twitter "></i></a>
<a href="" ><i class="ti-facebook "></i></a>
<a href="" ><i class="ti-email"></i></a>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="card-body-users row">
<div class="users-icons">
<a href="" ><i class="fa fa-envelope-o"></i></a>
<a href="" ><i class="fa fa-linkedin"></i></a>
<a href="" ><i class="fa fa-facebook"></i></a>
<a href="" ><i class="fa fa-instagram"></i></a>
<a href="" ><i class="fa fa-github"></i></a>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item w-50"> <!-- #second user ========= --> <div class="masonry-item w-50"> <!-- #second user ========= -->
<div class="card item-box" > <div class="card item-box" >


+ 1
- 0
webpack/plugins/htmlPlugin.js View File

@ -14,6 +14,7 @@ const titles = {
'new-ad':'new-ad', 'new-ad':'new-ad',
'ad-details':'ad-details', 'ad-details':'ad-details',
'reports':'reports', 'reports':'reports',
'history':'history',
'chat': 'Chat', 'chat': 'Chat',
'compose': 'Compose', 'compose': 'Compose',
'datatable': 'Datatable', 'datatable': 'Datatable',


Loading…
Cancel
Save