Skip to content

Commit

Permalink
Updating the dashboad
Browse files Browse the repository at this point in the history
  • Loading branch information
@arcanedev-maroc
arcanedev-maroc committed Mar 17, 2016
1 parent d323584 commit e87a6bb
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 80 deletions.
202 changes: 139 additions & 63 deletions resources/views/_template/style.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,111 +69,187 @@
color: #C62828;
}
/* Log level labels & progress bars */
.label-env {
padding: 2px 6px;
background-color: #6A1B9A;
font-size: .85em;
.pagination {
margin: 0;
}
.pagination > li > a,
.pagination > li > span {
padding: 4px 10px;
}
.table-condensed > tbody > tr > td.stack,
.table-condensed > tfoot > tr > td.stack,
.table-condensed > thead > tr > td.stack {
padding: 0;
border-top: none;
}
.stack-content {
padding: 8px;
background-color: #F6F6F6;
border-top: 1px solid #D1D1D1;
color: #AE0E0E;
font-family: consolas,sans-serif;
font-size: 12px;
}
.info-box.level {
display: block;
padding: 0;
margin-bottom: 15px;
min-height: 70px;
background: #fff;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-radius: 2px;
}
.info-box.level .info-box-text,
.info-box.level .info-box-number,
.info-box.level .info-box-icon > i {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
span.level {
.info-box.level .info-box-text {
display: block;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-box.level .info-box-content {
padding: 5px 10px;
margin-left: 70px;
}
.info-box.level .info-box-number {
display: block;
font-weight: bold;
font-size: 18px;
}
.info-box.level .info-box-icon {
border-radius: 2px 0 0 2px;
display: block;
float: left;
height: 70px; width: 70px;
text-align: center;
font-size: 40px;
line-height: 70px;
background: rgba(0,0,0,0.2);
}
.info-box.level .progress {
background: rgba(0,0,0,0.2);
margin: 5px -10px 5px -10px;
height: 2px;
}
.info-box.level .progress .progress-bar {
background: #fff;
}
.info-box.level-empty {
opacity: .6;
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
filter: grayscale(1);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transition-property: -webkit-filter, opacity;
-moz-transition-property: -moz-filter, opacity;
-o-transition-property: filter, opacity;
transition-property: -webkit-filter, -moz-filter, -o-filter, filter, opacity;
}
.info-box.level-empty:hover {
opacity: 1;
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
filter: grayscale(0);
}
.level {
padding: 2px 6px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 2px;
font-size: .9em;
font-weight: 600;
}
.progress {
margin-bottom: 10px;
}
.progress-bar,
span.level,
span.level i {
.badge.level-all,
.badge.level-emergency,
.badge.level-alert,
.badge.level-critical,
.badge.level-error,
.badge.level-warning,
.badge.level-notice,
.badge.level-info,
.badge.level-debug,
.level, .level i,
.info-box.level-all,
.info-box.level-emergency,
.info-box.level-alert,
.info-box.level-critical,
.info-box.level-error,
.info-box.level-warning,
.info-box.level-notice,
.info-box.level-info,
.info-box.level-debug {
color: #FFF;
}
span.level.level-empty {
background-color: {{ log_styler()->color('empty') }};
.label-env {
font-size: .85em;
}
.progress-bar.level-all,
span.level.level-all,
.badge.level-all {
.badge.level-all, .level.level-all, .info-box.level-all {
background-color: {{ log_styler()->color('all') }};
}
.progress-bar.level-emergency,
span.level.level-emergency,
.badge.level-emergency {
.badge.level-emergency, .level.level-emergency, .info-box.level-emergency {
background-color: {{ log_styler()->color('emergency') }};
}
.progress-bar.level-alert,
span.level.level-alert,
.badge.level-alert {
.badge.level-alert, .level.level-alert, .info-box.level-alert {
background-color: {{ log_styler()->color('alert') }};
}
.progress-bar.level-critical,
span.level.level-critical,
.badge.level-critical {
.badge.level-critical, .level.level-critical, .info-box.level-critical {
background-color: {{ log_styler()->color('critical') }};
}
.progress-bar.level-error,
span.level.level-error,
.badge.level-error {
.badge.level-error, .level.level-error, .info-box.level-error {
background-color: {{ log_styler()->color('error') }};
}
.progress-bar.level-warning,
span.level.level-warning,
.badge.level-warning {
.badge.level-warning, .level.level-warning, .info-box.level-warning {
background-color: {{ log_styler()->color('warning') }};
}
.progress-bar.level-notice,
span.level.level-notice,
.badge.level-notice {
.badge.level-notice, .level.level-notice, .info-box.level-notice {
background-color: {{ log_styler()->color('notice') }};
}
.progress-bar.level-info,
span.level.level-info,
.badge.level-info {
.badge.level-info, .level.level-info, .info-box.level-info {
background-color: {{ log_styler()->color('info') }};
}
.progress-bar.level-debug,
span.level.level-debug,
.badge.level-debug {
.badge.level-debug, .level.level-debug, .info-box.level-debug {
background-color: {{ log_styler()->color('debug') }};
}
.pagination {
margin: 0;
}
.pagination > li > a,
.pagination > li > span {
padding: 4px 10px;
}
.table-condensed > tbody > tr > td.stack,
.table-condensed > tfoot > tr > td.stack,
.table-condensed > thead > tr > td.stack {
padding: 0;
border-top: none;
.badge.level-empty, .level.level-empty {
background-color: {{ log_styler()->color('empty') }};
}
.stack-content {
padding: 8px;
background-color: #F6F6F6;
border-top: 1px solid #D1D1D1;
color: #AE0E0E;
font-family: consolas,sans-serif;
font-size: 12px;
.badge.label-env, .label.label-env {
background-color: #6A1B9A;
}
</style>
41 changes: 24 additions & 17 deletions resources/views/dashboard.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,29 @@
<canvas id="stats-doughnut-chart"></canvas>
</div>
<div class="col-md-9">
<div class="row">
@foreach($percents as $level => $item)
<div class="col-md-4">
<h5>
<span class="level level-{{ $level }}">
{!! log_styler()->icon($level) . ' ' . $item['name'] !!} - {!! $item['percent'] !!} %
</span>
</h5>
<div class="progress">
<div class="progress-bar level-{{ $level }}" role="progressbar" aria-valuenow="{{ $item['percent'] }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $item['percent'] }}%">
{{ $item['count'] }}
<section class="box-body">
<div class="row">
@foreach($percents as $level => $item)
<div class="col-md-4">
<div class="info-box level level-{{ $level }} {{ $item['count'] === 0 ? 'level-empty' : '' }}">
<span class="info-box-icon">
{!! log_styler()->icon($level) !!}
</span>

<div class="info-box-content">
<span class="info-box-text">{{ $item['name'] }}</span>
<span class="info-box-number">
{{ $item['count'] }} entries - {!! $item['percent'] !!} %
</span>
<div class="progress">
<div class="progress-bar" style="width: {{ $item['percent'] }}%"></div>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
@endforeach
</div>
</section>
</div>
</div>
@endsection
Expand All @@ -34,9 +41,9 @@
var data = {!! $reports !!};
new Chart($('#stats-doughnut-chart')[0].getContext('2d'))
.Doughnut(data, {
animationEasing : "easeOutQuart"
});
.Doughnut(data, {
animationEasing : "easeOutQuart"
});
});
</script>
@endsection

0 comments on commit e87a6bb

Please sign in to comment.