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

fixed conflict with forms.html

pull/143/head
Francesca Sperati 7 years ago
parent
4b820f17e8 7a3319aa0e
commit
2d397cac95
6 changed files with 110 additions and 195 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -2
      package.json
  2. +1
    -1
      server.js
  3. +1
    -0
      src/assets/scripts/index.js
  4. +82
    -0
      src/assets/scripts/user-form/index.js
  5. +14
    -0
      src/assets/styles/spec/settings/baseColors.scss
  6. +11
    -192
      src/forms.html

+ 1
- 2
package.json View File

@ -13,8 +13,7 @@
"lint:scss": "stylelint ./src/**/*.scss --syntax scss",
"lint": "npm run lint:js && npm run lint:scss"
},
"devDependencies": {
},
"devDependencies": {},
"dependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.1",


+ 1
- 1
server.js View File

@ -9,4 +9,4 @@ app.use('/', express.static(__dirname + '/build'));
const server = app.listen(process.env.PORT || 3000, function () {
console.log('Server started at http://localhost:%s', server.address().port);
});
});

+ 1
- 0
src/assets/scripts/index.js View File

@ -15,3 +15,4 @@ import './email';
import './fullcalendar';
import './googleMaps';
import './utils';
import './user-form';

+ 82
- 0
src/assets/scripts/user-form/index.js View File

@ -0,0 +1,82 @@
import * as $ from 'jquery';
const schemeJson = [
{name: "full_name", type: "text", required: true, label: "Full name" },
{name: "dob", type: "date", required: true, label: "Date of Birth" },
{name: "arrived", type: "date", required: true, label: "Arrived in Australia" },
{name: "visa", type: "dropdown", required: true, label: "Visa Type",
dropdown: [
{
id: 0,
name: "417 Working Holiday 1st yr"
},
{
id: 1,
name: "417 Working Holiday 2nd yr"
},
{
id: 2,
name: "417 Working Holiday 3rd yr"
},
{
id: 3,
name: "462 Work and Holiday"
},
{
id: 4,
name: "600 Student"
}
]
},
{name: "skills", type: "tags", required: true, label: "Skills" },
];
let formHtml = '';
for (let key in schemeJson) {
let field = schemeJson[key];
let visas = field.dropdown;
switch(field.type){
case 'text':
formHtml += `
<div class="form-group">
<label for="${field.name}" class="bmd-label-floating">${field.label}</label>
<input type="${field.type}" class="form-control" name="${field.name}">
</div>
`;
break;
case 'dropdown':
formHtml += `
<div class="form-group">
<label for="${field.name}">${field.label}</label>
<select id="${field.name}" class="form-control">
<option selected>Choose...</option>
${ visas.map(visa => `
<option>${visa.name}</option>
`)}
</select>
</div>
`;
break;
case 'date':
formHtml += `
<div class="form-group">
<label for="${field.name}" class="bmd-label-floating">${field.label}</label>
<input type="text" id="date-${field.name}" class="form-control datepicker" name="${field.name}">
</div>
`;
break;
}
}
formHtml += `<button type="submit" class="btn btn-primary">Submit</button>`;
$('#user-form').html(formHtml);
$('#date-dob').datepicker({
format: 'mm/dd/yyyy',
endDate: '-18y'
});
$('#date-arrived').datepicker({
format: 'mm/dd/yyyy',
endDate: '0d'
});

+ 14
- 0
src/assets/styles/spec/settings/baseColors.scss View File

@ -9,6 +9,7 @@
// + @Others
// + @Header Themes
// + @Social Networks Colors
// + @Nomit WISP Color System
// ---------------------------------------------------------
// @Greyscale Colors
@ -101,3 +102,16 @@ $theme-dark : lighten($side-nav-dark, 10%);
$theme-info : $default-info;
$theme-primary : $default-primary;
$theme-success : desaturate($default-success, 5%);
// ---------------------------------------------------------
// @Nomit WISP Color System
// ---------------------------------------------------------
$nomit-purple : #501DB9;
$nomit-pink : #EE38A4;
$nomit-gradient : linear-gradient(-45deg, #501DB9, #EE38A4);
$grey-dark : #454545;
$grey-light : #888888;
$bkg : #F4F4F4;

+ 11
- 192
src/forms.html View File

@ -130,202 +130,21 @@
</div>
</div>
<!-- #Successful Matches ==================== -->
<div class='col-md-4'>
<div class="layers bd bgc-white p-20">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Successful Matches</h6>
</div>
<div class="layer w-100">
<div class="peers ai-sb fxw-nw">
<div class="peer peer-greed">
<span id="sparklinedash2"></span>
</div>
<div class="peer">
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">127</span>
</div>
</div>
</div>
</div>
</div>
<!-- #New Ads ==================== -->
<div class='col-md-4'>
<div class="layers bd bgc-white p-20">
<div class="layer w-100 mB-10">
<h6 class="lh-1">New Ads (last month)</h6>
</div>
<div class="layer w-100">
<div class="peers ai-sb fxw-nw">
<div class="peer peer-greed">
<span id="sparklinedash3"></span>
</div>
<div class="peer">
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">79</span>
</div>
</div>
</div>
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-100'>
<div id='mainContent'>
<div class="row gap-20 masonry pos-r">
<div class="masonry-sizer col-md-6"></div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">User Form</h6>
<div class="mT-30">
<form id="user-form">
</form>
</div>
</div>
</div>
</div>
<div class="masonry-item col-12">
<!-- #New Registered Users ==================== -->
<div class="bd bgc-white">
<div class="layers">
<div class="layer w-100 pX-20 pT-20">
<h6 class="lh-1">New Registered Users</h6>
</div>
<div class="layer w-100 p-20">
<canvas id="line-chart" height="220"></canvas>
</div>
<div class="layer bdT p-20 w-100">
<div class="peers ai-c jc-c gapX-20">
<div class="peer">
<span class="fsz-def fw-600 mR-10 c-grey-800">10% <i class="fa fa-level-up c-green-500"></i></span>
<small class="c-grey-500 fw-600">APPL</small>
</div>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">2% <i class="fa fa-level-down c-red-500"></i></span>
<small class="c-grey-500 fw-600">Average</small>
</div>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">15% <i class="fa fa-level-up c-green-500"></i></span>
<small class="c-grey-500 fw-600">Sales</small>
</div>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">8% <i class="fa fa-level-down c-red-500"></i></span>
<small class="c-grey-500 fw-600">Profit</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item w-100">
<div class="row gap-20">
<div class="col-3">
<!-- #Successful Mathches ==================== -->
<div class="bd bgc-white p-20 peer peer-greed" style="height: 400px">
<div class="layers">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Successful Mathches</h6>
</div>
<!-- Pie Charts -->
<div class="peers pT-50 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
<div class="peer">
<div class="easy-pie-chart" data-size='130' data-percent="75" data-bar-color='#a19ff8'>
<span></span>
</div>
<h6 class="fsz-sm">Matched</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-9">
<!-- #Nationality ==================== -->
<div class="bd bgc-white" style="height: 400px">
<div class="peers fxw-nw@lg+ ai-s">
<div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
<div class="layers">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Nationality</h6>
</div>
<div class="layer w-100">
<div id="world-map-marker"></div>
</div>
</div>
</div>
<div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
<div class="layers">
<div class="layer w-100">
<!-- Progress Bars -->
<div class="layers">
<div class="layer w-100">
<h5 class="mB-5">100k</h5>
<small class="fw-600 c-grey-700">Visitors From USA</small>
<span class="pull-right c-grey-600 fsz-sm">50%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50%
Complete</span></div>
</div>
</div>
<div class="layer w-100 mT-15">
<h5 class="mB-5">1M</h5>
<small class="fw-600 c-grey-700">Visitors From Europe</small>
<span class="pull-right c-grey-600 fsz-sm">80%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80%
Complete</span></div>
</div>
</div>
<div class="layer w-100 mT-15">
<h5 class="mB-5">450k</h5>
<small class="fw-600 c-grey-700">Visitors From Australia</small>
<span class="pull-right c-grey-600 fsz-sm">40%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40%
Complete</span></div>
</div>
</div>
<div class="layer w-100 mT-15">
<h5 class="mB-5">1B</h5>
<small class="fw-600 c-grey-700">Visitors From India</small>
<span class="pull-right c-grey-600 fsz-sm">90%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90%
Complete</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item w-100">
<div class="row gap-20">
<!-- #Visitors ==================== -->
<div class="col-9">
<div class="bgc-white p-20 bd" style="height: 350px">
<h6 class="c-grey-900">Visitors</h6>
<div class="mT-30">
<canvas id="bar-chart" height="90"></canvas>
</div>
</div>
</div>
<div class="col-3">
<!-- #Visa Types ==================== -->
<div class="bd bgc-white p-20 peer peer-greed" style="height: 350px">
<div class="layers">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Visa Types</h6>
</div>
<!-- Pie Chart -->
<div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
<div class="peer">
<div class="easy-pie-chart" data-size='130' data-percent="75" data-bar-color='#a19ff8'>
<span></span>
</div>
<h6 class="fsz-sm">Matched</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


Write Preview
Loading…
Cancel
Save