Skip to content

Commit

Permalink
Insert Chartjs, adjustments in content page, breadcrumb and user info…
Browse files Browse the repository at this point in the history 
… header
  • Loading branch information
@dioney
dioney committed Aug 6, 2016
1 parent 6341356 commit a4906f3
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 23 deletions.
5 changes: 5 additions & 0 deletions .bowerrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"resolvers": [
"bower-npm-resolver"
]
}
50 changes: 42 additions & 8 deletions assets/side-menu.css → assets/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
body {
color: #777;
font-family: 'Roboto', sans-serif;
}

.pure-img-responsive {
Expand Down Expand Up @@ -41,10 +40,11 @@ The content `<div>` is where all your content goes.
*/
.content {
margin: 0 auto;
padding: 0 2em;
max-width: 800px;
padding: 2em;
max-width: 95%;
margin-bottom: 50px;
line-height: 1.6em;
background: #f5f5f5;
}

.header {
Expand Down Expand Up @@ -72,23 +72,56 @@ The content `<div>` is where all your content goes.
color: #888;
}

.b-grey{
background: #f5f5f5;
padding: 1em;
margin: 2.5em 0.2em;
.box{
background: #fff;
outline: 1px solid #ddd;
}

.box-content{
padding: 2em;
}

.box .header-title{
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: .9em;
}

.site-logo{
color: #fff;
font-size: 1.4em;
padding: 0 0.4em;
padding: 0.6em 0.4em;
}

.site-logo strong{
color: #2097e6;
}

.text-right{
text-align: right;
}

.user-info{
padding: 1.6em 0.4em;
}

.user-info a{
text-decoration: none;
font-weight: normal;
font-size: 0.8em;
color: #999;
text-transform: uppercase;
}
.user-info a:hover,
.user-info a:focus{
color: #2097e6;
}

.divider{
border-right: 1px solid #ddd;
margin: 0 1em;
}



/*
Expand Down Expand Up @@ -116,6 +149,7 @@ appears on the left side of the page.
border: none;
padding: 0.6em 0 0.6em 0.6em;
font-size: 0.9em;
font-weight: normal;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
Expand Down
4 changes: 3 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
"tests"
],
"dependencies": {
"pure": "^0.6.0"
"pure": "^0.6.0",
"font-awesome": "Font-Awesome#^4.6.3",
"chart.js": "npm:chart.js#^2.2.1"
}
}
86 changes: 72 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
<html>
<head>
<title>Admin PureCSS</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/pure/pure-min.css">
<link rel="stylesheet" type="text/css" href="assets/side-menu.css">
<link rel="stylesheet" type="text/css" href="assets/style.css">
<script src="bower_components/chart.js/dist/Chart.min.js"></script>
</head>
<body>

Expand All @@ -18,6 +19,7 @@
<div id="menu">
<nav class="pure-menu">
<h1 class="site-logo">Admin<strong>Pure<strong></h1>
<div class="menu-item-divided"></div>
<h2 class="pure-menu-heading">Pedidos</h2>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Relatórios</a></li>
Expand All @@ -36,25 +38,81 @@ <h2 class="pure-menu-heading">Configurações</h2>

<div id="main">
<div class="header">
<h1>Dashboard</h1>
<div class="pure-g">
<div class="pure-u-1-2"><h1>Dashboard</h1></div>
<div class="pure-u-1-2 text-right">
<section class="user-info">
<i class="fa fa-user"></i> <a href="#" rel="User">Dioney Vítor</a>
<span class="divider"></span>
<i class="fa fa-cog"></i> <a href="#" rel="User">Settings</a>
</section>
</div>
</div>

</div>

<div class="content">
<div class="pure-g">
<div class="pure-u-1-2">
<section class="b-grey">
<div class="breadcrumb">
<i class="fa fa-home"></i> <a href="#" rel="Dashboard">Dashboard</a><i class="fa fa-angle-right"></i>
</div>
<div class="pure-g">
<div class="pure-u-1-2 box">
<div class="header">
<h3 class="header-title">Sales</h3>
</div>
<div class="box-content">
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
</div>
</div>
<div class="pure-u-1-2 box">
<div class="header">
<h3>Pedidos</h3>
<h3 class="header-title">Posts</h3>
</div>
</section>
</div>
<div class="pure-u-1-2">
<section class="b-grey">teste 1</section>
<div class="box-content">
<p>as vendas estão ótimas</p>
</div>
</div>
</div>
</div>
<h2 class="content-subhead">Hey there!</h2>
<p>Meu texto explicando sobre isso</p>
</div>
</div>

<script src="assets/ui.js"></script>
Expand Down
32 changes: 32 additions & 0 deletions npm-debug.log
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'install',
1 verbose cli 'npm:chart.js',
1 verbose cli '--save',
1 verbose cli '--allow-root' ]
2 info using npm@2.15.8
3 info using node@v4.4.7
4 verbose install initial load of /Users/dioneyvitor/Dropbox/Developer/adminpure/package.json
5 verbose installManyTop reading scoped package data from /Users/dioneyvitor/Dropbox/Developer/adminpure/node_modules/chart.js/package.json
6 verbose readDependencies loading dependencies from /Users/dioneyvitor/Dropbox/Developer/adminpure/package.json
7 verbose stack Error: Unsupported URL Type: npm:chart.js
7 verbose stack at parseUrl (/usr/local/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:169:13)
7 verbose stack at npa (/usr/local/lib/node_modules/npm/node_modules/npm-package-arg/npa.js:75:12)
7 verbose stack at resolver (/usr/local/lib/node_modules/npm/lib/install.js:845:42)
7 verbose stack at /usr/local/lib/node_modules/npm/node_modules/slide/lib/async-map.js:52:35
7 verbose stack at Array.forEach (native)
7 verbose stack at /usr/local/lib/node_modules/npm/node_modules/slide/lib/async-map.js:52:11
7 verbose stack at Array.forEach (native)
7 verbose stack at asyncMap (/usr/local/lib/node_modules/npm/node_modules/slide/lib/async-map.js:51:8)
7 verbose stack at /usr/local/lib/node_modules/npm/lib/install.js:703:5
7 verbose stack at /usr/local/lib/node_modules/npm/lib/install.js:325:20
8 verbose cwd /Users/dioneyvitor/Dropbox/Developer/adminpure
9 error Darwin 15.6.0
10 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "npm:chart.js" "--save" "--allow-root"
11 error node v4.4.7
12 error npm v2.15.8
13 error Unsupported URL Type: npm:chart.js
14 error If you need help, you may report this error at:
14 error <https://github.com/npm/npm/issues>
15 verbose exit [ 1, true ]

0 comments on commit a4906f3

Please sign in to comment.