improve log view table for mobile width using display:grid

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index a31a690aa7b9a9ef68bcce28d08e3f63faa5984a..9007cb5e54c26599915038c91d2596bd882cf982 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -3324,10 +3324,25 @@ li.addon {
 #adminpage .addon .desc {
        padding-left: 10px;
 }
+#adminpage h2 {
+       word-break: break-all;
+}
+#adminpage .table-logs-grid thead tr {
+       display: grid;
+       grid-auto-flow: row;
+}
+@media (min-width: 600px) {
+       #adminpage .table-logs-grid thead tr {
+               grid-auto-flow: column;
+       }
+}
+#adminpage .table-logs-grid tbody {
+       display: grid;
+}
 #adminpage td.log-message,
 #logdetail td.log-message {
        width: 80%;
-       word-break: break-all;
+       word-break: break-word;
 }
 #admin-users #users tr.blocked {
        background-color: #f8efc0;

diff --git a/view/theme/frio/templates/admin/logs/view.tpl b/view/theme/frio/templates/admin/logs/view.tpl
index 2b0a8c7204415c2cc548f2a3a09d97367942c26a..ffeb1671ca2cd500e8b9956ac911691d74692b2a 100644 (file)
--- a/view/theme/frio/templates/admin/logs/view.tpl
+++ b/view/theme/frio/templates/admin/logs/view.tpl
@@ -22,7 +22,7 @@
                        </div>
                </form>
 
-               <table class="table table-hover">
+               <table class="table table-hover table-logs-grid">
                        <thead>
                                <tr>
                                        <th>{{$l10n.Date}}</th>