RuhNetConsulting
/
Adminator-admin-dashboard
mirror of https://github.com/puikinsh/Adminator-admin-dashboard
1
0
Fork 0
Code Issues 0 Projects 0 Releases 16 Wiki Activity
Browse Source

ads page by charlie

pull/146/head
Charlie Chiu 7 years ago
parent
7a3319aa0e
commit
3bc67f4969
7 changed files with 383 additions and 3 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -2
      package.json
  2. +141
    -0
      src/ad-details.html
  3. BIN
      src/assets/static/images/user-testing.jpg
  4. +2
    -1
      src/assets/styles/spec/settings/baseColors.scss
  5. +5
    -0
      src/assets/styles/spec/settings/fonts.scss
  6. +97
    -0
      src/assets/styles/style.css
  7. +135
    -0
      src/reports.html

+ 3
- 2
package.json View File

@ -13,7 +13,9 @@
"lint:scss": "stylelint ./src/**/*.scss --syntax scss",
"lint": "npm run lint:js && npm run lint:scss"
},
"devDependencies": {},
"devDependencies": {
"html-loader": "^0.5.5"
},
"dependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.1",
@ -34,7 +36,6 @@
"extract-text-webpack-plugin": "^3.0.1",
"html-webpack-plugin": "^2.30.1",
"html-includes": "^4.0.0",
"html-loader": "^0.5.5",
"imagemin-webpack-plugin": "^1.5.2",
"node-sass": "^4.5.3",
"postcss-cssnext": "^3.0.2",


+ 141
- 0
src/ad-details.html View File

@ -0,0 +1,141 @@
<!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>About the Job</title>
<!-- Fonts -->
<style>
@import url('https://fonts.googleapis.com/css?family=Fredoka+One|Source+Sans+Pro');
</style>
</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 mb-3">
<h1>About the Job</h1>
</div>
<!-- ### Job Details Cards ### -->
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="row">
<div class="col-3 mt-4 ">
<img class="img-fluid ml-4 mb-4 rounded-circle img-responsive" style="height: 100px" src="assets/static/images/nomit-logo.png" alt="company" class="avatar">
</div>
<div class="col-9 card-body">
<h2 class="card-title mt-4 mr-4">Graphic Design Internship</h2>
<h6 class="card-title mr-4">Great Southern Press</h6>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title mt-4 ml-4 mr-4">About the business:</h5>
<p class="card-text ml-4 mr-4">Great Southern Press is a leading B2B publishing and events company built on partnerships with industry. We deliver quality business information to our industries and great marketing results to our clients.
We build long-lasting partnerships with our industry partners in the energy and infrastructure sectors, aligning the success of our business with the continued growth and expansion of the industries we publish for.
</p>
<h5 class="card-title mt-4 ml-4 mr-4">About the role:</h5>
<p class="card-text ml-4 mb-4 mr-4">This part-time role will suit a university graduate or someone looking for an entry-level design position. The successful candidate will be involved in all areas of design including:<br><br>
• Publication layout (annual directories, books etc).<br>
• Creation of artwork for print and online advertisements.<br>
• Wallcharts, flyers, brochures and other print design as required.<br>
• Event collateral including branding, signage, handbooks etc.<br>
• Designs for website, email communications and social media.<br><br>
Reporting to the Head of Design, you will have an opportunity to work with and be mentored by someone with more than 10 years’ industry experience.
</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title mt-4 ml-4 mr-4">Reviews</h5>
<p class="card-text ml-4 mb-4 mr-4">With supporting text below as a natural lead-in to additional content.</p>
<p class="card-text ml-4 mb-4 mr-4"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="row mt-3">
<button class="col-5 btn" href="#">
<span>Apply Now</span>
</button>
<button class="col-5 btn-border" href="#">
<span>Sign in</span>
</button>
</div>
</div>
</div>
</main>
</div><!-- page-container -->
</div> <!-- App Content -->
<!-- ### $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>
<!-- 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>
</html>

BIN
src/assets/static/images/user-testing.jpg View File

Before After
Width: 457  |  Height: 457  |  Size: 33 KiB

+ 2
- 1
src/assets/styles/spec/settings/baseColors.scss View File

@ -107,8 +107,9 @@ $theme-success : desaturate($default-success, 5%);
// @Nomit WISP Color System
// ---------------------------------------------------------
$nomit-purple : #501DB9;
$nomit-purple : #8B00B1;
$nomit-pink : #EE38A4;
$nomit-dark-purple : #501DB9;
$nomit-gradient : linear-gradient(-45deg, #501DB9, #EE38A4);
$grey-dark : #454545;
$grey-light : #888888;


+ 5
- 0
src/assets/styles/spec/settings/fonts.scss View File

@ -2,3 +2,8 @@ $font-primary:
Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
$font-secondary: $font-primary;
$font-size-base: 0.875rem;
h2{
font-family: 'Fredoka One', cursive;
color: #501D89;
}

+ 97
- 0
src/assets/styles/style.css View File

@ -0,0 +1,97 @@
/* FONT SETTINGS */
body{
background-color: #F4F4F4;
}
*{
font-family: 'Source Sans Pro', sans-serif;
color: #454545;
font-size: 14px;
}
h1{
font-family: 'Fredoka One', cursive;
color: #501D89;
font-size: 28px;
}
h2{
font-family: 'Fredoka One', cursive;
color: #454545;
font-size: 24px;
}
h3{
font-family: 'Source Sans Pro', sans-serif;
color: #454545;
font-size: 20px;
font-weight: bold;
}
h5{
font-family: 'Source Sans Pro', sans-serif;
color: #454545;
font-size: 16px;
font-weight: bold;
}
h6{
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
color: #888888;
}
/* BUTTONS */
.btn span{
color: #FFFFFF;
font-weight: bold;
}
.btn-border span {
color: #501DB9;
font-weight: bold;
align-items: center;
background: #F4F4F4;
border-radius: 23px;
display: flex;
justify-content: center;
height: 100%;
transition: background .5s ease;
width: 100%;
}
.btn-border:hover {
color: #FFFFFF;
}
.btn-border:hover span {
background: transparent;
color: #FFFFFF;
}
.btn, .btn-border {
background-image: linear-gradient(-45deg, #501DB9 0%, #EE38A4 100%);
border-radius: 23px;
box-sizing: border-box;
height: 40px;
margin: 0 auto;
padding: 4px;
position: relative;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* REPORTS PAGE */
.table .thead-purple-border th{
border-top: transparent;
border-bottom-color: #8B00B1;
border-width: 3px;
}
.table {
background-color: #FFFFFF;
}

+ 135
- 0
src/reports.html View File

@ -0,0 +1,135 @@
<!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>
<style>
@import url('https://fonts.googleapis.com/css?family=Fredoka+One|Source+Sans+Pro');
</style>
</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 -->
<!-- ### $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>
<!-- 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>
</html>

Write Preview
Loading…
Cancel
Save