Skip to content

Commit 2d62e30

Browse files
mattliberarap2hpoutre
mattlibera
authored and
rap2hpoutre
committed
Update for Bootstrap 4 (#122)
* update for bootstrap4, using fontawesome. adjust some spacing and font-size away from bs4 default * better style organization, change style and markup on button in content section for bs4
1 parent 0259522 commit 2d62e30

File tree

2 files changed

+44
-28
lines changed

2 files changed

+44
-28
lines changed

‎src/Rap2hpoutre/LaravelLogViewer/LaravelLogViewer.php‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,15 @@ class LaravelLogViewer
2727
];
2828

2929
private static $levels_imgs = [
30-
'debug' => 'info',
31-
'info' => 'info',
32-
'notice' => 'info',
33-
'warning' => 'warning',
34-
'error' => 'warning',
35-
'critical' => 'warning',
36-
'alert' => 'warning',
37-
'emergency' => 'warning',
38-
'processed' => 'info'
30+
'debug' => 'info-circle',
31+
'info' => 'info-circle',
32+
'notice' => 'info-circle',
33+
'warning' => 'exclamation-triangle',
34+
'error' => 'exclamation-triangle',
35+
'critical' => 'exclamation-triangle',
36+
'alert' => 'exclamation-triangle',
37+
'emergency' => 'exclamation-triangle',
38+
'processed' => 'info-circle'
3939
];
4040

4141
/**

‎src/views/log.blade.php‎

Lines changed: 35 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,12 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
76
<title>Laravel log viewer</title>
87

98
<!-- Bootstrap -->
10-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
11-
<link rel="stylesheet"
12-
href="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.css">
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
10+
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
1311

1412

1513
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
@@ -28,6 +26,20 @@
2826
margin-top: 0;
2927
}
3028
29+
#table-log {
30+
font-size: 0.85rem;
31+
}
32+
33+
.sidebar {
34+
font-size: 0.85rem;
35+
line-height: 1;
36+
}
37+
38+
.btn {
39+
font-size: 0.7rem;
40+
}
41+
42+
3143
.stack {
3244
font-size: 0.85em;
3345
}
@@ -54,8 +66,8 @@
5466
<body>
5567
<div class="container-fluid">
5668
<div class="row">
57-
<div class="col-sm-3 col-md-2 sidebar">
58-
<h1><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> Laravel Log Viewer</h1>
69+
<div class="col sidebar mb-3">
70+
<h1><i class="fa fa-calendar" aria-hidden="true"></i> Laravel Log Viewer</h1>
5971
<p class="text-muted"><i>by Rap2h</i></p>
6072
<div class="list-group">
6173
@foreach($files as $file)
@@ -66,7 +78,7 @@ class="list-group-item @if ($current_file == $file) llv-active @endif">
6678
@endforeach
6779
</div>
6880
</div>
69-
<div class="col-sm-9 col-md-10 table-container">
81+
<div class="col-10 table-container">
7082
@if ($logs === null)
7183
<div>
7284
Log file >50M, please download it.
@@ -85,14 +97,14 @@ class="list-group-item @if ($current_file == $file) llv-active @endif">
8597

8698
@foreach($logs as $key => $log)
8799
<tr data-display="stack{{{$key}}}">
88-
<td class="text-{{{$log['level_class']}}}"><span class="glyphicon glyphicon-{{{$log['level_img']}}}-sign"
100+
<td class="text-{{{$log['level_class']}}}"><span class="fa fa-{{{$log['level_img']}}}"
89101
aria-hidden="true"></span> &nbsp;{{$log['level']}}</td>
90102
<td class="text">{{$log['context']}}</td>
91103
<td class="date">{{{$log['date']}}}</td>
92104
<td class="text">
93-
@if ($log['stack']) <a class="pull-right expand btn btn-default btn-xs"
105+
@if ($log['stack']) <button type="button" class="float-right expand btn btn-outline-dark btn-sm mb-2 ml-2"
94106
data-display="stack{{{$key}}}"><span
95-
class="glyphicon glyphicon-search"></span></a>@endif
107+
class="fa fa-search"></span></button>@endif
96108
{{{$log['text']}}}
97109
@if (isset($log['in_file'])) <br/>{{{$log['in_file']}}}@endif
98110
@if ($log['stack'])
@@ -106,26 +118,30 @@ class="glyphicon glyphicon-search"></span></a>@endif
106118
</tbody>
107119
</table>
108120
@endif
109-
<div>
121+
<div class="p-3">
110122
@if($current_file)
111-
<a href="?dl={{ base64_encode($current_file) }}"><span class="glyphicon glyphicon-download-alt"></span>
123+
<a href="?dl={{ base64_encode($current_file) }}"><span class="fa fa-download"></span>
112124
Download file</a>
113125
-
114126
<a id="delete-log" href="?del={{ base64_encode($current_file) }}"><span
115-
class="glyphicon glyphicon-trash"></span> Delete file</a>
127+
class="fa fa-trash"></span> Delete file</a>
116128
@if(count($files) > 1)
117129
-
118-
<a id="delete-all-log" href="?delall=true"><span class="glyphicon glyphicon-trash"></span> Delete all files</a>
130+
<a id="delete-all-log" href="?delall=true"><span class="fa fa-trash"></span> Delete all files</a>
119131
@endif
120132
@endif
121133
</div>
122134
</div>
123135
</div>
124136
</div>
125-
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
126-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
127-
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
128-
<script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script>
137+
<!-- jQuery for Bootstrap -->
138+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
139+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
140+
<!-- FontAwesome -->
141+
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
142+
<!-- Datatables -->
143+
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
144+
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
129145
<script>
130146
$(document).ready(function () {
131147
$('.table-container tr').on('click', function () {

0 commit comments

Comments
 (0)