fix logs table grid slyting

Author: Mulkave

resources/assets/css/stylesheet.css

@@ -1,3 +1,7 @@
+#console {
+    background-color: rgb(252, 252, 252);
+}
+
 #lucid-add-button {
     position: absolute;
     right: 2%;
@@ -24,9 +28,19 @@
     min-width: 210px;
 }
 
+#lucid-logs .mdl-data-table {
+    table-layout:fixed;
+}
+
+#lucid-logs td {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+}
+
 .lucid-logs-stack {
     text-align: left !important;
-    max-width: 100px;
 }
 
 /* invert the colours */

resources/views/logs.blade.php

@@ -3,14 +3,14 @@
 @section('content')
 
 <div class="page-content">
-    <div class="mdl-grid">
+    <div class="mdl-grid" id="lucid-logs">
         <div class="mdl-layout-spacer"></div>
-        <div class="dl-cell mdl-cell--11-col">
-            <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width" style="word-wrap: break-word; max-width: 200px;">
-                <thead>
+        <div class="dl-cell mdl-cell--10-col">
+            <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+              {{--   <thead>
                     <tr>
-                        <th class="mdl-data-table__cell--non-numeric">Level</th>
-                        <th colspan=2 class="mdl-data-table__cell--non-numeric full-width">
+                        <th class="mdl-data-table__cell--non-numeric" style="width: 7%;">Level</th>
+                        <th class="mdl-data-table__cell--non-numeric" style="width: 60%;">
                             <button id="lucid-logs-filter" class="mdl-button mdl-js-button mdl-button--icon">
                                 <i class="material-icons">@{{levelIcon}}</i>
                             </button>
@@ -22,15 +22,30 @@
                                 <li class="mdl-menu__item" @click="chooseFilterLevel('warning')">Warnings</li>
                                 <li class="mdl-menu__item" @click="chooseFilterLevel('info')">Info</li>
                             </ul>
-
                         </th>
+                        <th class="mdl-data-table__cell--non-numeric" style="width: 17%;"></th>
+                        <th class="mdl-data-table__cell--non-numeric"></th>
+                        <th class="mdl-data-table__cell--non-numeric"></th>
                     </tr>
-                </thead>
+                </thead> --}}
                 <thead>
                     <tr>
-                        <th class="mdl-data-table__cell--non-numeric">Type</th>
-                        <th class="mdl-data-table__cell--non-numeric">Error</th>
-                        <th class="mdl-data-table__cell--non-numeric">Time</th>
+                        <th class="mdl-data-table__cell--non-numeric" style="width: 10%;">
+                            Level
+                            <button id="lucid-logs-filter" class="mdl-button mdl-js-button mdl-button--icon">
+                                <i class="material-icons">@{{levelIcon}}</i>
+                            </button>
+
+                            <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
+                                for="lucid-logs-filter">
+                                <li class="mdl-menu__item mdl-menu__item--full-bleed-divider" @click="chooseFilterLevel('all')">All</li>
+                                <li class="mdl-menu__item" @click="chooseFilterLevel('error')">Errors</li>
+                                <li class="mdl-menu__item" @click="chooseFilterLevel('warning')">Warnings</li>
+                                <li class="mdl-menu__item" @click="chooseFilterLevel('info')">Info</li>
+                            </ul>
+                        </th>
+                        <th class="mdl-data-table__cell--non-numeric" style="width: 60%;">Error</th>
+                        <th class="mdl-data-table__cell--non-numeric" style="width: 20%;">Time</th>
                         <th class="mdl-data-table__cell--non-numeric">Stack</th>
                         <th class="mdl-data-table__cell--non-numeric">Read</th>
                     </tr>
@@ -41,8 +56,8 @@
                             <td class="mdl-data-table__cell--non-numeric">
                                 <i :class="['material-icons', 'text-colour-'+entry.level]">@{{entry.level}}</i>
                             </td>
-                            <td class="mdl-data-table__cell--non-numeric lucid-log-slack">
-                                <b>@{{entry.header | header | trim | truncate 155}}</b>
+                            <td class="mdl-data-table__cell--non-numeric">
+                                <b>@{{entry.header | header | trim }}</b>
                             </td>
                             <td class="mdl-data-table__cell--non-numeric">@{{entry.date}}</td>
                             <td class="mdl-data-table__cell--non-numeric">
@@ -54,7 +69,7 @@
                         </tr>
                         <tr v-if="entry.showStack">
                             <td colspan="5" class="lucid-logs-stack">
-                                <pre>@{{entry.header}}</pre>
+                                <b><pre style="line-height: 70px;">@{{entry.header}}</pre></b>
                                 <hr>
                                 <pre>@{{entry.stack}}</pre>
                             </td>
@@ -64,9 +79,6 @@
             </table>
         </div>
         <div class="mdl-layout-spacer"></div>
-        <div class="mdl-layout-spacer"></div>
-        <div class="mdl-layout-spacer"></div>
-        <div class="mdl-layout-spacer"></div>
     </div>
 </div>
 @stop