Skip to content

Commit

Permalink
Adding bootstrap 5 template
Browse files Browse the repository at this point in the history
  • Loading branch information
@arcanedev-maroc
arcanedev-maroc committed Oct 6, 2023
1 parent ccb20c6 commit b4c9ff4
Show file tree
Hide file tree
Showing 6 changed files with 765 additions and 4 deletions.
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"laravel/framework": "^11.0",
"mockery/mockery": "^1.5.1",
"orchestra/testbench-core": "^9.0",
"phpunit/phpunit": "^10.0"
"phpunit/phpunit": "^10.0.7"
},
"autoload": {
"psr-4": {
Expand Down
9 changes: 6 additions & 3 deletions config/log-viewer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,14 @@
| Theme
| -----------------------------------------------------------------
| Supported themes :
| 'bootstrap-3', 'bootstrap-4'
| Make your own theme by adding a folder to the views directory and specifying it here.
| 'bootstrap-5'
| 'bootstrap-4'
| 'bootstrap-3'
|
| You can make your own theme by adding a folder to the views directory and specifying it here.
*/

'theme' => 'bootstrap-4',
'theme' => 'bootstrap-5',

/* -----------------------------------------------------------------
| Route settings
Expand Down
277 changes: 277 additions & 0 deletions views/bootstrap-5/_master.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="LogViewer">
<meta name="author" content="ARCANEDEV">
<title>LogViewer - Created by ARCANEDEV</title>
{{-- Styles --}}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
<style>
html {
position: relative;
min-height: 100%;
}
body {
font-size: .875rem;
margin-bottom: 60px;
}
.main-footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #E8EAF6;
}
.main-footer p {
margin-bottom: 0;
}
.main-footer .fa.fa-heart {
color: #C62828;
}
.page-header {
border-bottom: 1px solid #8a8a8a;
}
/*
* Navbar
*/
.navbar-brand {
padding: .75rem 1rem;
font-size: 1rem;
}
.navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
/*
* Boxes
*/
.box {
display: block;
padding: 0;
min-height: 70px;
background: #fff;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-radius: .25rem;
}
.box > .box-icon > i,
.box .box-content .box-text,
.box .box-content .box-number {
color: #FFF;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.box > .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);
}
.box .box-content {
padding: 5px 10px;
margin-left: 70px;
}
.box .box-content .box-text {
display: block;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
}
.box .box-content .box-number {
display: block;
}
.box .box-content .progress {
background: rgba(0,0,0,0.2);
margin: 5px -10px 5px -10px;
}
.box .box-content .progress .progress-bar {
background-color: #FFF;
}
/*
* Log Menu
*/
.log-menu .list-group-item.disabled {
cursor: not-allowed;
}
.log-menu .list-group-item.disabled .level-name {
color: #D1D1D1;
}
/*
* Log Entry
*/
.stack-content {
color: #AE0E0E;
font-family: consolas, Menlo, Courier, monospace;
white-space: pre-line;
font-size: .8rem;
}
/*
* Colors: Badge & Infobox
*/
.badge.badge-env,
.badge.badge-level-all,
.badge.badge-level-emergency,
.badge.badge-level-alert,
.badge.badge-level-critical,
.badge.badge-level-error,
.badge.badge-level-warning,
.badge.badge-level-notice,
.badge.badge-level-info,
.badge.badge-level-debug,
.badge.empty {
color: #FFF;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.badge.badge-level-all,
.box.level-all {
background-color: {{ log_styler()->color('all') }};
}
.badge.badge-level-emergency,
.box.level-emergency {
background-color: {{ log_styler()->color('emergency') }};
}
.badge.badge-level-alert,
.box.level-alert {
background-color: {{ log_styler()->color('alert') }};
}
.badge.badge-level-critical,
.box.level-critical {
background-color: {{ log_styler()->color('critical') }};
}
.badge.badge-level-error,
.box.level-error {
background-color: {{ log_styler()->color('error') }};
}
.badge.badge-level-warning,
.box.level-warning {
background-color: {{ log_styler()->color('warning') }};
}
.badge.badge-level-notice,
.box.level-notice {
background-color: {{ log_styler()->color('notice') }};
}
.badge.badge-level-info,
.box.level-info {
background-color: {{ log_styler()->color('info') }};
}
.badge.badge-level-debug,
.box.level-debug {
background-color: {{ log_styler()->color('debug') }};
}
.badge.empty,
.box.empty {
background-color: {{ log_styler()->color('empty') }};
}
.badge.badge-env {
background-color: #6A1B9A;
}
#entries {
overflow-wrap: anywhere;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark sticky-top bg-dark p-0">
<a href="{{ route('log-viewer::dashboard') }}" class="navbar-brand mr-0">
<i class="fa fa-fw fa-book"></i> LogViewer
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item {{ Route::is('log-viewer::dashboard') ? 'active' : '' }}">
<a href="{{ route('log-viewer::dashboard') }}" class="nav-link">
<i class="fa fa-dashboard"></i> @lang('Dashboard')
</a>
</li>
<li class="nav-item {{ Route::is('log-viewer::logs.list') ? 'active' : '' }}">
<a href="{{ route('log-viewer::logs.list') }}" class="nav-link">
<i class="fa fa-archive"></i> @lang('Logs')
</a>
</li>
</ul>
</div>
</nav>

<div class="container-fluid">
<main role="main" class="pt-3">
@yield('content')
</main>
</div>

{{-- Footer --}}
<footer class="main-footer">
<div class="container-fluid">
<p class="text-muted pull-left">
LogViewer - <span class="badge text-bg-info">version {{ log_viewer()->version() }}</span>
</p>
<p class="text-muted pull-right">
Created with <i class="fa fa-heart"></i> by ARCANEDEV <sup>&copy;</sup>
</p>
</div>
</footer>

{{-- Scripts --}}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js" integrity="sha512-SIMGYRUjwY8+gKg7nn9EItdD8LCADSDfJNutF9TPrvEo86sQmFMh6MyralfIyhADlajSxqc7G0gs7+MwWF/ogQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
function ready(fn) {
if (document.readyState !== 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
</script>

@yield('modals')
@yield('scripts')
</body>
</html>
53 changes: 53 additions & 0 deletions views/bootstrap-5/dashboard.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
@extends('log-viewer::bootstrap-5._master')

@section('content')
<div class="page-header mb-4">
<h1>@lang('Dashboard')</h1>
</div>

<div class="row">
<div class="col-md-6 col-lg-3">
<canvas id="stats-doughnut-chart" height="300" class="mb-3"></canvas>
</div>

<div class="col-md-6 col-lg-9">
<div class="row">
@foreach($percents as $level => $item)
<div class="col-sm-6 col-md-12 col-lg-4 mb-3">
<div class="box level-{{ $level }} {{ $item['count'] === 0 ? 'empty' : '' }}">
<div class="box-icon">
{!! log_styler()->icon($level) !!}
</div>

<div class="box-content">
<span class="box-text">{{ $item['name'] }}</span>
<span class="box-number">
{{ $item['count'] }} @lang('entries') - {!! $item['percent'] !!} %
</span>
<div class="progress" style="height: 3px;">
<div class="progress-bar" style="width: {{ $item['percent'] }}%"></div>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
@endsection

@section('scripts')
<script>
ready(function () {
new Chart(document.getElementById("stats-doughnut-chart"), {
type: 'doughnut',
data: {!! $chartData !!},
options: {
legend: {
position: 'bottom'
}
}
});
});
</script>
@endsection
Loading

0 comments on commit b4c9ff4

Please sign in to comment.