Changes to top bar

This commit is contained in:
Unknown 2017-05-12 17:07:18 +01:00
parent 617fa716a7
commit bf1638e2e1
6 changed files with 35 additions and 47 deletions

View file

@ -13,8 +13,8 @@
<a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
</div> </div>
</div> </div>
<h4 class="mb-0">9.823</h4> <h4 class="mb-0">£183.98</h4>
<p>Members online</p> <p>Money spent this week</p>
</div> </div>
<div class="chart-wrapper px-3" style="height:70px;"> <div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart class="chart" <canvas baseChart class="chart"
@ -36,7 +36,7 @@
<i class="icon-location-pin"></i> <i class="icon-location-pin"></i>
</button> </button>
<h4 class="mb-0">9.823</h4> <h4 class="mb-0">9.823</h4>
<p>Members online</p> <p>Money spent last week</p>
</div> </div>
<div class="chart-wrapper px-3" style="height:70px;"> <div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart class="chart" <canvas baseChart class="chart"
@ -65,7 +65,7 @@
</div> </div>
</div> </div>
<h4 class="mb-0">9.823</h4> <h4 class="mb-0">9.823</h4>
<p>Members online</p> <p>Points earned this week</p>
</div> </div>
<div class="chart-wrapper" style="height:70px;"> <div class="chart-wrapper" style="height:70px;">
<canvas baseChart class="chart" <canvas baseChart class="chart"
@ -94,7 +94,7 @@
</div> </div>
</div> </div>
<h4 class="mb-0">9.823</h4> <h4 class="mb-0">9.823</h4>
<p>Members online</p> <p>Points earned last week</p>
</div> </div>
<div class="chart-wrapper px-3" style="height:70px;"> <div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart class="chart" <canvas baseChart class="chart"
@ -114,7 +114,7 @@
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-sm-5"> <div class="col-sm-5">
<h4 class="card-title mb-0">Traffic</h4> <h4 class="card-title mb-0">Customers</h4>
<div class="small text-muted">November 2015</div> <div class="small text-muted">November 2015</div>
</div><!--/.col--> </div><!--/.col-->
<div class="col-sm-7 hidden-sm-down"> <div class="col-sm-7 hidden-sm-down">
@ -148,15 +148,8 @@
</div> </div>
<div class="card-footer"> <div class="card-footer">
<ul> <ul>
<li>
<div class="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<div class="progress progress-xs mt-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="hidden-sm-down"> <li class="hidden-sm-down">
<div class="text-muted">Unique</div> <div class="text-muted">Customers</div>
<strong>24.093 Users (20%)</strong> <strong>24.093 Users (20%)</strong>
<div class="progress progress-xs mt-2"> <div class="progress progress-xs mt-2">
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>

View file

@ -45,7 +45,7 @@ export class DashboardComponent implements OnInit {
// lineChart1 // lineChart1
public lineChart1Data: Array<any> = [ public lineChart1Data: Array<any> = [
{ {
data: [65, 59, 84, 84, 51, 55, 40], data: [44.72, 29.97, 16.65, 30.99, 47.75, 6.95, 6.95],
label: 'Series A' label: 'Series A'
} }
]; ];
@ -68,8 +68,8 @@ export class DashboardComponent implements OnInit {
display: false, display: false,
ticks: { ticks: {
display: false, display: false,
min: 40 - 5, min: 5 - 5,
max: 84 + 5, max: 50 + 5,
} }
}], }],
}, },
@ -467,7 +467,7 @@ export class DashboardComponent implements OnInit {
for (let i = 0; i <= this.mainChartElements; i++) { for (let i = 0; i <= this.mainChartElements; i++) {
this.mainChartData1.push(this.random(50, 200)); this.mainChartData1.push(this.random(50, 200));
this.mainChartData2.push(this.random(80, 100)); this.mainChartData2.push(this.random(80, 100));
this.mainChartData3.push(65); this.mainChartData3.push(this.random(50, 200));
} }
} }
} }

View file

@ -16,15 +16,6 @@
</li> </li>
</ul> </ul>
<ul class="nav navbar-nav ml-auto"> <ul class="nav navbar-nav ml-auto">
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#"><i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span></a>
</li>
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#"><i class="icon-list"></i></a>
</li>
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#"><i class="icon-location-pin"></i></a>
</li>
<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)"> <li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
<a href class="nav-link dropdown-toggle" dropdownToggle (click)="false"> <a href class="nav-link dropdown-toggle" dropdownToggle (click)="false">
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> <img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
@ -147,9 +138,9 @@
<!-- Breadcrumb Menu--> <!-- Breadcrumb Menu-->
<li class="breadcrumb-menu d-md-down-none"> <li class="breadcrumb-menu d-md-down-none">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<a class="btn btn-secondary" href="#"><i class="icon-speech"></i></a> <a class="btn btn-secondary" [routerLink]="['/dashboard']">&nbsp;Money Spent this Month: £364.45</a>
<a class="btn btn-secondary" [routerLink]="['/dashboard']"><i class="icon-graph"></i> &nbsp;Dashboard</a> <a class="btn btn-secondary" href="#">< &nbsp;Add Transaction</a>
<a class="btn btn-secondary" href="#"><i class="icon-settings"></i> &nbsp;Settings</a> <a class="btn btn-secondary" href="#"> &nbsp;Points Total: 206</a>
</div> </div>
</li> </li>
</ol> </ol>

View file

@ -115,7 +115,7 @@
<div class="card"> <div class="card">
<div class="card-header card-header-inverse card-header-primary"> <div class="card-header card-header-inverse card-header-primary">
<div class="font-weight-bold"> <div class="font-weight-bold">
<span>SALE</span> <span>Money spent this week</span>
<span class="float-right">$1.890,65</span> <span class="float-right">$1.890,65</span>
</div> </div>
<div> <div>
@ -155,7 +155,7 @@
<div class="card"> <div class="card">
<div class="card-header card-header-inverse card-header-danger"> <div class="card-header card-header-inverse card-header-danger">
<div class="font-weight-bold"> <div class="font-weight-bold">
<span>SALE</span> <span>Money spent last week</span>
<span class="float-right">$1.890,65</span> <span class="float-right">$1.890,65</span>
</div> </div>
<div> <div>
@ -168,23 +168,23 @@
</div> </div>
<div class="chart-wrapper" style="height:38px;"> <div class="chart-wrapper" style="height:38px;">
<canvas baseChart class="chart" <canvas baseChart class="chart"
[datasets]="lineChart4Data" [datasets]="lineChart5Data"
[labels]="lineChart4Labels" [labels]="lineChart5Labels"
[options]="lineChart4Options" [options]="lineChart5Options"
[colors]="lineChart4Colours" [colors]="lineChart4Colours"
[legend]="lineChart4Legend" [legend]="lineChart5Legend"
[chartType]="lineChart4Type" [chartType]="lineChart5Type"
(chartHover)="chartHovered($event)" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas> (chartClick)="chartClicked($event)"></canvas>
</div> </div>
<div class="chart-wrapper" style="height:38px;"> <div class="chart-wrapper" style="height:38px;">
<canvas baseChart class="chart" <canvas baseChart class="chart"
[datasets]="barChart2Data" [datasets]="barChart3Data"
[labels]="barChart2Labels" [labels]="barChart3Labels"
[options]="barChart2Options" [options]="barChart3Options"
[colors]="barChart2Colours" [colors]="barChart2Colours"
[legend]="barChart2Legend" [legend]="barChart3Legend"
[chartType]="barChart2Type" [chartType]="barChart3Type"
(chartHover)="chartHovered($event)" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas> (chartClick)="chartClicked($event)"></canvas>
</div> </div>

View file

@ -36,7 +36,7 @@ export class WidgetsComponent {
// lineChart1 // lineChart1
public lineChart1Data: Array<any> = [ public lineChart1Data: Array<any> = [
{ {
data: [65, 59, 84, 84, 51, 55, 40], data: [80, 59, 84, 84, 51, 55, 40],
label: 'Series A' label: 'Series A'
} }
]; ];
@ -220,11 +220,11 @@ export class WidgetsComponent {
// lineChart4 // lineChart4
public lineChart4Data: Array<any> = [ public lineChart4Data: Array<any> = [
{ {
data: [4, 18, 9, 17, 34, 22, 11, 3, 15, 12, 18, 9], data: [4, 18, 9, 17, 80, 22, 11],
label: 'Series A' label: 'Series A'
} }
]; ];
public lineChart4Labels: Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; public lineChart4Labels: Array<any> = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
public lineChart4Options: any = { public lineChart4Options: any = {
maintainAspectRatio: false, maintainAspectRatio: false,
scales: { scales: {
@ -259,7 +259,7 @@ export class WidgetsComponent {
label: 'Series A' label: 'Series A'
} }
]; ];
public barChart2Labels: Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; public barChart2Labels: Array<any> = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
public barChart2Options: any = { public barChart2Options: any = {
maintainAspectRatio: false, maintainAspectRatio: false,
scales: { scales: {
@ -338,7 +338,7 @@ export class WidgetsComponent {
// lineChart5 // lineChart5
public lineChart5Data: Array<any> = [ public lineChart5Data: Array<any> = [
{ {
data: [65, 59, 84, 84, 51, 55, 40], data: [4, 18, 9, 17, 34, 22, 11, 3, 15, 12, 18, 9],
label: 'Series A' label: 'Series A'
} }
]; ];

View file

@ -15,6 +15,10 @@
.btn.btn-secondary { .btn.btn-secondary {
color: $text-muted; color: $text-muted;
border: 0; border: 0;
display: block;
float: center;
position: relative;
width: 100%;
&:hover, &.active { &:hover, &.active {
color: $body-color; color: $body-color;