placeholder table action buttons

app/Http/Controllers/TableController.php

@@ -22,9 +22,10 @@ class TableController extends Controller
         /** @var Table $tableModel */
         $tableModel = $user->tables()->where('name', $table)->first();
 
+        // make it possible to show other revisions
         if ($input->has('rev')) {
             $rev = (int)$input->rev;
-            $revision = $tableModel->revisions()->orderBy('created_at')->skip($rev)->first();
+            $revision = $tableModel->revisions()->orderBy('created_at')->skip($rev - 1)->first();
             if ($revision === null) abort(404, "No such revision");
         } else {
             $revision = $tableModel->revision;

app/Models/User.php

@@ -177,4 +177,9 @@ class User extends Authenticatable
 
         return parent::__get($name);
     }
+
+    public function ownsTable(Table $table)
+    {
+        return $table->owner_id == $this->id;
+    }
 }

app/Providers/AppServiceProvider.php

@@ -49,11 +49,20 @@ class AppServiceProvider extends ServiceProvider
                 $classes = trim($classes);
                 $title = trim($title);
 
+                $notooltip = false;
+
+                if (strpos($title, 'sr:') === 0) {
+                    $notooltip = true;
+                    $title = substr($title, 3);
+                }
+
                 $sr = str_replace('~', ' ', e($title));
-                $tit = str_replace('~', '', e(trim($title, ' \r\n\t:,')));
+                $tit = str_replace('~', '', e(trim($title, " \r\n\t:,")));
 
                 return '<span class="sr-only">' . $sr . '</span>' .
-                    '<i class="' . e($classes) . '" title="' . $tit . '" aria-hidden=true></i>';
+                    '<i class="' . e($classes) . '" '.
+                    ($notooltip ? '' : 'title="' . $tit . '"') .
+                    ' aria-hidden=true></i>';
             } else {
                 return '<i class="' . e(trim($arg)) . '" aria-hidden=true></i>';
             }

public/fonts/fa-dtbl-1-preview.html

@@ -170,7 +170,7 @@
 .fa-clock-o:before,
 .fa-cloud-upload:before,
 .fa-code-fork:before,
-.fa-comments:before,
+.fa-comment:before,
 .fa-download:before,
 .fa-eye:before,
 .fa-eye-slash:before,
@@ -183,6 +183,7 @@
 .fa-globe:before,
 .fa-google:before,
 .fa-history:before,
+.fa-inbox:before,
 .fa-key-modern:before,
 .fa-link:before,
 .fa-pencil:before,
@@ -232,7 +233,7 @@
 .fa-clock-o:before { content: "\f106"; }
 .fa-cloud-upload:before { content: "\f107"; }
 .fa-code-fork:before { content: "\f108"; }
-.fa-comments:before { content: "\f109"; }
+.fa-comment:before { content: "\f109"; }
 .fa-download:before { content: "\f10a"; }
 .fa-eye:before { content: "\f10b"; }
 .fa-eye-slash:before { content: "\f10c"; }
@@ -245,32 +246,33 @@
 .fa-globe:before { content: "\f113"; }
 .fa-google:before { content: "\f114"; }
 .fa-history:before { content: "\f115"; }
-.fa-key-modern:before { content: "\f116"; }
-.fa-link:before { content: "\f117"; }
-.fa-pencil:before { content: "\f118"; }
-.fa-pencil-square-o:before { content: "\f119"; }
-.fa-question-circle:before { content: "\f11a"; }
-.fa-quote-left:before { content: "\f11b"; }
-.fa-reply:before { content: "\f11c"; }
-.fa-rss:before { content: "\f11d"; }
-.fa-search:before { content: "\f11e"; }
-.fa-share-alt:before { content: "\f11f"; }
-.fa-sign-in:before { content: "\f120"; }
-.fa-sign-out:before { content: "\f121"; }
-.fa-sliders:before { content: "\f122"; }
-.fa-sort:before { content: "\f123"; }
-.fa-sort-asc:before { content: "\f124"; }
-.fa-sort-desc:before { content: "\f125"; }
-.fa-star:before { content: "\f126"; }
-.fa-star-o:before { content: "\f127"; }
-.fa-table:before { content: "\f128"; }
-.fa-th-list:before { content: "\f129"; }
-.fa-times:before { content: "\f12a"; }
-.fa-trash:before { content: "\f12b"; }
-.fa-trash-o:before { content: "\f12c"; }
-.fa-user-circle-o:before { content: "\f12d"; }
-.fa-user-plus:before { content: "\f12e"; }
-.fa-wrench:before { content: "\f12f"; }
+.fa-inbox:before { content: "\f116"; }
+.fa-key-modern:before { content: "\f117"; }
+.fa-link:before { content: "\f118"; }
+.fa-pencil:before { content: "\f119"; }
+.fa-pencil-square-o:before { content: "\f11a"; }
+.fa-question-circle:before { content: "\f11b"; }
+.fa-quote-left:before { content: "\f11c"; }
+.fa-reply:before { content: "\f11d"; }
+.fa-rss:before { content: "\f11e"; }
+.fa-search:before { content: "\f11f"; }
+.fa-share-alt:before { content: "\f120"; }
+.fa-sign-in:before { content: "\f121"; }
+.fa-sign-out:before { content: "\f122"; }
+.fa-sliders:before { content: "\f123"; }
+.fa-sort:before { content: "\f124"; }
+.fa-sort-asc:before { content: "\f125"; }
+.fa-sort-desc:before { content: "\f126"; }
+.fa-star:before { content: "\f127"; }
+.fa-star-o:before { content: "\f128"; }
+.fa-table:before { content: "\f129"; }
+.fa-th-list:before { content: "\f12a"; }
+.fa-times:before { content: "\f12b"; }
+.fa-trash:before { content: "\f12c"; }
+.fa-trash-o:before { content: "\f12d"; }
+.fa-user-circle-o:before { content: "\f12e"; }
+.fa-user-plus:before { content: "\f12f"; }
+.fa-wrench:before { content: "\f130"; }
     </style>
 
     <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
@@ -286,7 +288,7 @@
   <body class="characters-off">
     <div id="page" class="container">
       <header>
-        <h1>fa-dtbl-1 contains 48 glyphs:</h1>
+        <h1>fa-dtbl-1 contains 49 glyphs:</h1>
         <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
       </header>
 
@@ -411,13 +413,13 @@
       
       <div class="glyph">
         <div class="preview-glyphs">
-          <span class="step size-12"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span>
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span>
         </div>
         <div class="preview-scale">
           <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
         </div>
         <div class="usage">
-          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-comments" />
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-comment" />
           <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
         </div>
       </div>
@@ -580,6 +582,19 @@
         </div>
       </div>
       
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-inbox" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
+        </div>
+      </div>
+      
       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span>
@@ -589,7 +604,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-key-modern" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
         </div>
       </div>
       
@@ -602,7 +617,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-link" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
         </div>
       </div>
       
@@ -615,7 +630,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-pencil" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
         </div>
       </div>
       
@@ -629,7 +644,7 @@
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-pencil-square-o" />
        <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-edit" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
         </div>
       </div>
       
@@ -642,7 +657,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-question-circle" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
         </div>
       </div>
       
@@ -655,7 +670,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-quote-left" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
         </div>
       </div>
       
@@ -668,7 +683,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-reply" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
         </div>
       </div>
       
@@ -681,7 +696,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-rss" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
         </div>
       </div>
       
@@ -694,7 +709,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-search" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
         </div>
       </div>
       
@@ -707,7 +722,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-share-alt" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
         </div>
       </div>
       
@@ -720,7 +735,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sign-in" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
         </div>
       </div>
       
@@ -733,7 +748,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sign-out" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
         </div>
       </div>
       
@@ -746,7 +761,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sliders" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
         </div>
       </div>
       
@@ -759,7 +774,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sort" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
         </div>
       </div>
       
@@ -772,7 +787,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sort-asc" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
         </div>
       </div>
       
@@ -785,7 +800,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sort-desc" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
         </div>
       </div>
       
@@ -798,7 +813,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-star" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
         </div>
       </div>
       
@@ -811,7 +826,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-star-o" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
         </div>
       </div>
       
@@ -824,7 +839,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-table" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
         </div>
       </div>
       
@@ -837,7 +852,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-th-list" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12a;" />
         </div>
       </div>
       
@@ -851,7 +866,7 @@
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-times" />
        <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-close" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12a;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12b;" />
         </div>
       </div>
       
@@ -864,7 +879,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-trash" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12b;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12c;" />
         </div>
       </div>
       
@@ -877,7 +892,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-trash-o" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12c;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12d;" />
         </div>
       </div>
       
@@ -890,7 +905,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-user-circle-o" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12d;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12e;" />
         </div>
       </div>
       
@@ -903,7 +918,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-user-plus" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12e;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12f;" />
         </div>
       </div>
       
@@ -916,7 +931,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-wrench" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12f;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf130;" />
         </div>
       </div>
       

public/fonts/fa-dtbl-1.css

@@ -47,7 +47,7 @@
 .fa-clock-o::before { content: "\f106"; }
 .fa-cloud-upload::before { content: "\f107"; }
 .fa-code-fork::before { content: "\f108"; }
-.fa-comments::before { content: "\f109"; }
+.fa-comment::before { content: "\f109"; }
 .fa-download::before { content: "\f10a"; }
 .fa-eye::before { content: "\f10b"; }
 .fa-eye-slash::before { content: "\f10c"; }
@@ -60,29 +60,30 @@
 .fa-globe::before { content: "\f113"; }
 .fa-google::before { content: "\f114"; }
 .fa-history::before { content: "\f115"; }
-.fa-key-modern::before { content: "\f116"; }
-.fa-link::before { content: "\f117"; }
-.fa-pencil::before { content: "\f118"; }
-.fa-pencil-square-o::before, .fa-edit::before { content: "\f119"; }
-.fa-question-circle::before { content: "\f11a"; }
-.fa-quote-left::before { content: "\f11b"; }
-.fa-reply::before { content: "\f11c"; }
-.fa-rss::before { content: "\f11d"; }
-.fa-search::before { content: "\f11e"; }
-.fa-share-alt::before { content: "\f11f"; }
-.fa-sign-in::before { content: "\f120"; }
-.fa-sign-out::before { content: "\f121"; }
-.fa-sliders::before { content: "\f122"; }
-.fa-sort::before { content: "\f123"; }
-.fa-sort-asc::before { content: "\f124"; }
-.fa-sort-desc::before { content: "\f125"; }
-.fa-star::before { content: "\f126"; }
-.fa-star-o::before { content: "\f127"; }
-.fa-table::before { content: "\f128"; }
-.fa-th-list::before { content: "\f129"; }
-.fa-times::before, .fa-close::before { content: "\f12a"; }
-.fa-trash::before { content: "\f12b"; }
-.fa-trash-o::before { content: "\f12c"; }
-.fa-user-circle-o::before { content: "\f12d"; }
-.fa-user-plus::before { content: "\f12e"; }
-.fa-wrench::before { content: "\f12f"; }
+.fa-inbox::before { content: "\f116"; }
+.fa-key-modern::before { content: "\f117"; }
+.fa-link::before { content: "\f118"; }
+.fa-pencil::before { content: "\f119"; }
+.fa-pencil-square-o::before, .fa-edit::before { content: "\f11a"; }
+.fa-question-circle::before { content: "\f11b"; }
+.fa-quote-left::before { content: "\f11c"; }
+.fa-reply::before { content: "\f11d"; }
+.fa-rss::before { content: "\f11e"; }
+.fa-search::before { content: "\f11f"; }
+.fa-share-alt::before { content: "\f120"; }
+.fa-sign-in::before { content: "\f121"; }
+.fa-sign-out::before { content: "\f122"; }
+.fa-sliders::before { content: "\f123"; }
+.fa-sort::before { content: "\f124"; }
+.fa-sort-asc::before { content: "\f125"; }
+.fa-sort-desc::before { content: "\f126"; }
+.fa-star::before { content: "\f127"; }
+.fa-star-o::before { content: "\f128"; }
+.fa-table::before { content: "\f129"; }
+.fa-th-list::before { content: "\f12a"; }
+.fa-times::before, .fa-close::before { content: "\f12b"; }
+.fa-trash::before { content: "\f12c"; }
+.fa-trash-o::before { content: "\f12d"; }
+.fa-user-circle-o::before { content: "\f12e"; }
+.fa-user-plus::before { content: "\f12f"; }
+.fa-wrench::before { content: "\f130"; }

public/fonts/fa-dtbl-1.svg

@@ -5,7 +5,7 @@
 -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <metadata>
-Created by FontForge 20170805 at Sat Jul 28 09:08:34 2018
+Created by FontForge 20170805 at Sat Jul 28 18:34:22 2018
  By ondra
 The Fork Awesome font is licensed under the SIL OFL 1.1 (http://scripts.sil.org/OFL). Fork Awesome is a fork based of off Font Awesome 4.7.0 by Dave Gandy. More info on licenses at https://forkawesome.github.io
 </metadata>
@@ -19,10 +19,10 @@ The Fork Awesome font is licensed under the SIL OFL 1.1 (http://scripts.sil.org/
     panose-1="2 0 5 3 0 0 0 0 0 0"
     ascent="1536"
     descent="-256"
-    bbox="-0.0376684 -256 2048 1536.01"
+    bbox="-0.0376684 -256.168 2048 1536.01"
     underline-thickness="89.6"
     underline-position="-179.2"
-    unicode-range="U+0020-F12F"
+    unicode-range="U+0020-F130"
   />
     <missing-glyph />
     <glyph glyph-name="space" unicode=" " horiz-adv-x="200" 
@@ -61,10 +61,8 @@ c-247 0 -448 201 -448 448c0 174 101 332 258 405c-1 15 -2 29 -2 43c0 283 229 512
 d="M288 64c0 53 -43 96 -96 96s-96 -43 -96 -96s43 -96 96 -96s96 43 96 96zM288 1216c0 53 -43 96 -96 96s-96 -43 -96 -96s43 -96 96 -96s96 43 96 96zM928 1088c0 53 -43 96 -96 96s-96 -43 -96 -96s43 -96 96 -96s96 43 96 96zM1024 1088c0 -71 -39 -133 -96 -166
 c-3 -361 -259 -441 -429 -495c-159 -50 -211 -74 -211 -171v-26c57 -33 96 -95 96 -166c0 -106 -86 -192 -192 -192s-192 86 -192 192c0 71 39 133 96 166v820c-57 33 -96 95 -96 166c0 106 86 192 192 192s192 -86 192 -192c0 -71 -39 -133 -96 -166v-497
 c51 25 105 42 154 57c186 59 292 103 294 312c-57 33 -96 95 -96 166c0 106 86 192 192 192s192 -86 192 -192z" />
-    <glyph glyph-name="comments" unicode="&#xf109;" horiz-adv-x="1792" 
-d="M1408 768c0 -283 -315 -512 -704 -512c-61 0 -120 6 -176 16c-83 -59 -177 -102 -278 -128c-27 -7 -56 -12 -86 -16h-3c-15 0 -29 12 -32 29c-4 19 9 31 20 44c39 44 83 83 117 166c-162 94 -266 239 -266 401c0 283 315 512 704 512s704 -229 704 -512zM1792 512
-c0 -163 -104 -307 -266 -401c34 -83 78 -122 117 -166c11 -13 24 -25 20 -44c-4 -18 -19 -31 -35 -29c-30 4 -59 9 -86 16c-101 26 -195 69 -278 128c-56 -10 -115 -16 -176 -16c-181 0 -347 50 -472 132c29 -2 59 -4 88 -4c215 0 418 62 573 174c167 122 259 287 259 466
-c0 52 -8 103 -23 152c169 -93 279 -241 279 -408z" />
+    <glyph glyph-name="comment" unicode="&#xf109;" horiz-adv-x="1792" 
+d="M1792 640c0 -354 -401 -640 -896 -640c-49 0 -98 3 -145 8c-131 -116 -287 -198 -460 -242c-36 -10 -75 -17 -114 -22c-22 -2 -43 14 -48 38v1c-5 25 12 40 27 58c63 71 135 131 182 298c-206 117 -338 298 -338 501c0 353 401 640 896 640s896 -286 896 -640z" />
     <glyph glyph-name="download" unicode="&#xf10a;" horiz-adv-x="1664" 
 d="M1280 192c0 35 -29 64 -64 64s-64 -29 -64 -64s29 -64 64 -64s64 29 64 64zM1536 192c0 35 -29 64 -64 64s-64 -29 -64 -64s29 -64 64 -64s64 29 64 64zM1664 416v-320c0 -53 -43 -96 -96 -96h-1472c-53 0 -96 43 -96 96v320c0 53 43 96 96 96h465l135 -136
 c37 -36 85 -56 136 -56s99 20 136 56l136 136h464c53 0 96 -43 96 -96zM1339 985c10 -24 5 -52 -14 -70l-448 -448c-12 -13 -29 -19 -45 -19s-33 6 -45 19l-448 448c-19 18 -24 46 -14 70c10 23 33 39 59 39h256v448c0 35 29 64 64 64h256c35 0 64 -29 64 -64v-448h256
@@ -111,92 +109,95 @@ d="M768 750h725c7 -39 12 -77 12 -128c0 -438 -294 -750 -737 -750c-425 0 -768 343
 d="M1536 640c0 -423 -345 -768 -768 -768c-229 0 -445 101 -591 277c-10 13 -9 32 2 43l137 138c7 6 16 9 25 9c9 -1 18 -5 23 -12c98 -127 245 -199 404 -199c282 0 512 230 512 512s-230 512 -512 512c-131 0 -255 -50 -348 -137l137 -138c19 -18 24 -46 14 -69
 c-10 -24 -33 -40 -59 -40h-448c-35 0 -64 29 -64 64v448c0 26 16 49 40 59c23 10 51 5 69 -14l130 -129c141 133 332 212 529 212c423 0 768 -345 768 -768zM896 928v-448c0 -18 -14 -32 -32 -32h-320c-18 0 -32 14 -32 32v64c0 18 14 32 32 32h224v352c0 18 14 32 32 32h64
 c18 0 32 -14 32 -32z" />
-    <glyph glyph-name="key-modern" unicode="&#xf116;" horiz-adv-x="1792" 
+    <glyph glyph-name="inbox" unicode="&#xf116;" 
+d="M1023 576h316c-2 5 -3 11 -5 16l-212 496h-708l-212 -496c-2 -5 -3 -11 -5 -16h316l95 -192h320zM1536 546v-482c0 -35 -29 -64 -64 -64h-1408c-35 0 -64 29 -64 64v482c0 36 11 89 25 123l238 552c14 33 54 59 89 59h832c35 0 75 -26 89 -59l238 -552
+c14 -34 25 -87 25 -123z" />
+    <glyph glyph-name="key-modern" unicode="&#xf117;" horiz-adv-x="1792" 
 d="M546 1536v0c139 1 278 -52 383 -158c142 -141 187 -343 137 -525l726 -726v-319c0 -35 -29 -64 -64 -64h-300l-45 45l135 226l-46 45l-225 -135l-45 46l134 225l-45 45l-225 -134l-46 45l135 225l-45 46l-243 -139l-186 186c-182 -50 -382 -5 -524 136
 c-211 212 -209 556 4 770c107 106 246 159 385 160zM405 1290v0c-41 0 -82 -16 -113 -47c-63 -63 -63 -163 0 -226s164 -63 227 0s63 163 0 226c-31 31 -73 47 -114 47z" />
-    <glyph glyph-name="link" unicode="&#xf117;" horiz-adv-x="1632" 
+    <glyph glyph-name="link" unicode="&#xf118;" horiz-adv-x="1632" 
 d="M1440 320c0 26 -10 50 -28 68l-208 208c-18 18 -43 28 -68 28c-29 0 -52 -11 -72 -32c33 -33 72 -61 72 -112c0 -53 -43 -96 -96 -96c-51 0 -79 39 -112 72c-21 -20 -33 -43 -33 -73c0 -25 10 -50 28 -68l206 -207c18 -18 43 -27 68 -27s50 9 68 26l147 146
 c18 18 28 42 28 67zM737 1025c0 25 -10 50 -28 68l-206 207c-18 18 -43 28 -68 28s-50 -10 -68 -27l-147 -146c-18 -18 -28 -42 -28 -67c0 -26 10 -50 28 -68l208 -208c18 -18 43 -27 68 -27c29 0 52 10 72 31c-33 33 -72 61 -72 112c0 53 43 96 96 96c51 0 79 -39 112 -72
 c21 20 33 43 33 73zM1632 320c0 -76 -31 -150 -85 -203l-147 -146c-54 -54 -127 -83 -203 -83c-77 0 -150 30 -204 85l-206 207c-54 54 -83 127 -83 203c0 79 32 154 88 209l-88 88c-55 -56 -129 -88 -208 -88c-76 0 -150 30 -204 84l-208 208c-55 55 -84 127 -84 204
 c0 76 31 150 85 203l147 146c54 54 127 83 203 83c77 0 150 -30 204 -85l206 -207c54 -54 83 -127 83 -203c0 -79 -32 -154 -88 -209l88 -88c55 56 129 88 208 88c76 0 150 -30 204 -84l208 -208c55 -55 84 -127 84 -204z" />
-    <glyph glyph-name="pencil" unicode="&#xf118;" horiz-adv-x="1515" 
+    <glyph glyph-name="pencil" unicode="&#xf119;" horiz-adv-x="1515" 
 d="M363 0l91 91l-235 235l-91 -91v-107h128v-128h107zM886 928c0 13 -9 22 -22 22c-6 0 -12 -2 -17 -7l-542 -542c-5 -5 -7 -11 -7 -17c0 -13 9 -22 22 -22c6 0 12 2 17 7l542 542c5 5 7 11 7 17zM832 1120l416 -416l-832 -832h-416v416zM1515 1024c0 -34 -14 -67 -37 -90
 l-166 -166l-416 416l166 165c23 24 56 38 90 38s67 -14 91 -38l235 -234c23 -24 37 -57 37 -91z" />
-    <glyph glyph-name="pencil-square-o" unicode="&#xf119;" horiz-adv-x="1784" 
+    <glyph glyph-name="pencil-square-o" unicode="&#xf11a;" horiz-adv-x="1784" 
 d="M888 352l116 116l-152 152l-116 -116v-56h96v-96h56zM1328 1072c-9 9 -24 8 -33 -1l-350 -350c-9 -9 -10 -24 -1 -33s24 -8 33 1l350 350c9 9 10 24 1 33zM1408 478v-190c0 -159 -129 -288 -288 -288h-832c-159 0 -288 129 -288 288v832c0 159 129 288 288 288h832
 c40 0 80 -8 117 -25c9 -4 16 -13 18 -23c2 -11 -1 -21 -9 -29l-49 -49c-9 -9 -21 -12 -32 -8c-15 4 -30 6 -45 6h-832c-88 0 -160 -72 -160 -160v-832c0 -88 72 -160 160 -160h832c88 0 160 72 160 160v126c0 8 3 16 9 22l64 64c10 10 23 12 35 7s20 -16 20 -29zM1312 1216
 l288 -288l-672 -672h-288v288zM1756 1084l-92 -92l-288 288l92 92c37 37 99 37 136 0l152 -152c37 -37 37 -99 0 -136z" />
-    <glyph glyph-name="question-circle" unicode="&#xf11a;" 
+    <glyph glyph-name="question-circle" unicode="&#xf11b;" 
 d="M896 160v192c0 18 -14 32 -32 32h-192c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h192c18 0 32 14 32 32zM1152 832c0 183 -192 320 -364 320c-163 0 -285 -70 -371 -213c-9 -14 -5 -32 8 -42l132 -100c5 -4 12 -6 19 -6c9 0 19 4 25 12c47 60 67 78 86 92
 c17 12 50 24 86 24c64 0 123 -41 123 -85c0 -52 -27 -78 -88 -106c-71 -32 -168 -115 -168 -212v-36c0 -18 14 -32 32 -32h192c18 0 32 14 32 32c0 23 29 72 76 99c76 43 180 101 180 253zM1536 640c0 -424 -344 -768 -768 -768s-768 344 -768 768s344 768 768 768
 s768 -344 768 -768z" />
-    <glyph glyph-name="quote-left" unicode="&#xf11b;" horiz-adv-x="1664" 
+    <glyph glyph-name="quote-left" unicode="&#xf11c;" horiz-adv-x="1664" 
 d="M768 576v-384c0 -106 -86 -192 -192 -192h-384c-106 0 -192 86 -192 192v704c0 282 230 512 512 512h64c35 0 64 -29 64 -64v-128c0 -35 -29 -64 -64 -64h-64c-141 0 -256 -115 -256 -256v-32c0 -53 43 -96 96 -96h224c106 0 192 -86 192 -192zM1664 576v-384
 c0 -106 -86 -192 -192 -192h-384c-106 0 -192 86 -192 192v704c0 282 230 512 512 512h64c35 0 64 -29 64 -64v-128c0 -35 -29 -64 -64 -64h-64c-141 0 -256 -115 -256 -256v-32c0 -53 43 -96 96 -96h224c106 0 192 -86 192 -192z" />
-    <glyph glyph-name="reply" unicode="&#xf11c;" horiz-adv-x="1792" 
+    <glyph glyph-name="reply" unicode="&#xf11d;" horiz-adv-x="1792" 
 d="M1792 416c0 -140 -70 -323 -127 -451c-11 -23 -22 -55 -37 -76c-7 -10 -14 -17 -28 -17c-20 0 -32 16 -32 35c0 16 4 34 5 50c3 41 5 82 5 123c0 477 -283 560 -714 560h-224v-256c0 -35 -29 -64 -64 -64c-17 0 -33 7 -45 19l-512 512c-12 12 -19 28 -19 45s7 33 19 45
 l512 512c12 12 28 19 45 19c35 0 64 -29 64 -64v-256h224c328 0 736 -58 875 -403c42 -106 53 -221 53 -333z" />
-    <glyph glyph-name="rss" unicode="&#xf11d;" horiz-adv-x="1408" 
+    <glyph glyph-name="rss" unicode="&#xf11e;" horiz-adv-x="1408" 
 d="M384 192c0 -106 -86 -192 -192 -192s-192 86 -192 192s86 192 192 192s192 -86 192 -192zM896 69c1 -18 -5 -35 -17 -48c-12 -14 -29 -21 -47 -21h-135c-33 0 -60 25 -63 58c-29 305 -271 547 -576 576c-33 3 -58 30 -58 63v135c0 18 7 35 21 47c11 11 27 17 43 17h5
 c213 -17 414 -110 565 -262c152 -151 245 -352 262 -565zM1408 67c1 -17 -5 -34 -18 -47c-12 -13 -28 -20 -46 -20h-143c-34 0 -62 26 -64 60c-33 581 -496 1044 -1077 1078c-34 2 -60 30 -60 63v143c0 18 7 34 20 46c12 12 28 18 44 18h3c350 -18 679 -165 927 -414
 c249 -248 396 -577 414 -927z" />
-    <glyph glyph-name="search" unicode="&#xf11e;" horiz-adv-x="1664" 
+    <glyph glyph-name="search" unicode="&#xf11f;" horiz-adv-x="1664" 
 d="M1152 704c0 247 -201 448 -448 448s-448 -201 -448 -448s201 -448 448 -448s448 201 448 448zM1664 -128c0 -70 -58 -128 -128 -128c-34 0 -67 14 -90 38l-343 342c-117 -81 -257 -124 -399 -124c-389 0 -704 315 -704 704s315 704 704 704s704 -315 704 -704
 c0 -142 -43 -282 -124 -399l343 -343c23 -23 37 -56 37 -90z" />
-    <glyph glyph-name="share-alt" unicode="&#xf11f;" 
+    <glyph glyph-name="share-alt" unicode="&#xf120;" 
 d="M1216 512c177 0 320 -143 320 -320s-143 -320 -320 -320s-320 143 -320 320c0 11 1 23 2 34l-360 180c-57 -53 -134 -86 -218 -86c-177 0 -320 143 -320 320s143 320 320 320c84 0 161 -33 218 -86l360 180c-1 11 -2 23 -2 34c0 177 143 320 320 320s320 -143 320 -320
 s-143 -320 -320 -320c-84 0 -161 33 -218 86l-360 -180c1 -11 2 -23 2 -34s-1 -23 -2 -34l360 -180c57 53 134 86 218 86z" />
-    <glyph glyph-name="sign-in" unicode="&#xf120;" 
+    <glyph glyph-name="sign-in" unicode="&#xf121;" 
 d="M1184 640c0 -17 -7 -33 -19 -45l-544 -544c-12 -12 -28 -19 -45 -19c-35 0 -64 29 -64 64v288h-448c-35 0 -64 29 -64 64v384c0 35 29 64 64 64h448v288c0 35 29 64 64 64c17 0 33 -7 45 -19l544 -544c12 -12 19 -28 19 -45zM1536 992v-704c0 -159 -129 -288 -288 -288
 h-320c-17 0 -32 15 -32 32c0 28 -13 96 32 96h320c88 0 160 72 160 160v704c0 88 -72 160 -160 160h-288c-25 0 -64 -5 -64 32c0 28 -13 96 32 96h320c159 0 288 -129 288 -288z" />
-    <glyph glyph-name="sign-out" unicode="&#xf121;" horiz-adv-x="1568" 
+    <glyph glyph-name="sign-out" unicode="&#xf122;" horiz-adv-x="1568" 
 d="M640 96c0 -28 13 -96 -32 -96h-320c-159 0 -288 129 -288 288v704c0 159 129 288 288 288h320c17 0 32 -15 32 -32c0 -28 13 -96 -32 -96h-320c-88 0 -160 -72 -160 -160v-704c0 -88 72 -160 160 -160h288c25 0 64 5 64 -32zM1568 640c0 -17 -7 -33 -19 -45l-544 -544
 c-12 -12 -28 -19 -45 -19c-35 0 -64 29 -64 64v288h-448c-35 0 -64 29 -64 64v384c0 35 29 64 64 64h448v288c0 35 29 64 64 64c17 0 33 -7 45 -19l544 -544c12 -12 19 -28 19 -45z" />
-    <glyph glyph-name="sliders" unicode="&#xf122;" 
+    <glyph glyph-name="sliders" unicode="&#xf123;" 
 d="M352 128v-128h-352v128h352zM704 256c35 0 64 -29 64 -64v-256c0 -35 -29 -64 -64 -64h-256c-35 0 -64 29 -64 64v256c0 35 29 64 64 64h256zM864 640v-128h-864v128h864zM224 1152v-128h-224v128h224zM1536 128v-128h-736v128h736zM576 1280c35 0 64 -29 64 -64v-256
 c0 -35 -29 -64 -64 -64h-256c-35 0 -64 29 -64 64v256c0 35 29 64 64 64h256zM1216 768c35 0 64 -29 64 -64v-256c0 -35 -29 -64 -64 -64h-256c-35 0 -64 29 -64 64v256c0 35 29 64 64 64h256zM1536 640v-128h-224v128h224zM1536 1152v-128h-864v128h864z" />
-    <glyph glyph-name="sort" unicode="&#xf123;" horiz-adv-x="1024" 
+    <glyph glyph-name="sort" unicode="&#xf124;" horiz-adv-x="1024" 
 d="M1024 448c0 -17 -7 -33 -19 -45l-448 -448c-12 -12 -28 -19 -45 -19s-33 7 -45 19l-448 448c-12 12 -19 28 -19 45c0 35 29 64 64 64h896c35 0 64 -29 64 -64zM1024 832c0 -35 -29 -64 -64 -64h-896c-35 0 -64 29 -64 64c0 17 7 33 19 45l448 448c12 12 28 19 45 19
 s33 -7 45 -19l448 -448c12 -12 19 -28 19 -45z" />
-    <glyph glyph-name="sort-asc" unicode="&#xf124;" horiz-adv-x="1024" 
+    <glyph glyph-name="sort-asc" unicode="&#xf125;" horiz-adv-x="1024" 
 d="M1024 832c0 -35 -29 -64 -64 -64h-896c-35 0 -64 29 -64 64c0 17 7 33 19 45l448 448c12 12 28 19 45 19s33 -7 45 -19l448 -448c12 -12 19 -28 19 -45z" />
-    <glyph glyph-name="sort-desc" unicode="&#xf125;" horiz-adv-x="1024" 
+    <glyph glyph-name="sort-desc" unicode="&#xf126;" horiz-adv-x="1024" 
 d="M1024 448c0 -17 -7 -33 -19 -45l-448 -448c-12 -12 -28 -19 -45 -19s-33 7 -45 19l-448 448c-12 12 -19 28 -19 45c0 35 29 64 64 64h896c35 0 64 -29 64 -64z" />
-    <glyph glyph-name="star" unicode="&#xf126;" horiz-adv-x="1664" 
+    <glyph glyph-name="star" unicode="&#xf127;" horiz-adv-x="1664" 
 d="M1664 889c0 -18 -13 -35 -26 -48l-363 -354l86 -500c1 -7 1 -13 1 -20c0 -26 -12 -50 -41 -50c-14 0 -28 5 -40 12l-449 236l-449 -236c-13 -7 -26 -12 -40 -12c-29 0 -42 24 -42 50c0 7 1 13 2 20l86 500l-364 354c-12 13 -25 30 -25 48c0 30 31 42 56 46l502 73
 l225 455c9 19 26 41 49 41s40 -22 49 -41l225 -455l502 -73c24 -4 56 -16 56 -46z" />
-    <glyph glyph-name="star-o" unicode="&#xf127;" horiz-adv-x="1664" 
+    <glyph glyph-name="star-o" unicode="&#xf128;" horiz-adv-x="1664" 
 d="M1137 532l306 297l-422 62l-189 382l-189 -382l-422 -62l306 -297l-73 -421l378 199l377 -199zM1664 889c0 -18 -13 -35 -26 -48l-363 -354l86 -500c1 -7 1 -13 1 -20c0 -27 -12 -50 -41 -50c-14 0 -28 5 -40 12l-449 236l-449 -236c-13 -7 -26 -12 -40 -12
 c-29 0 -42 24 -42 50c0 7 1 13 2 20l86 500l-364 354c-12 13 -25 30 -25 48c0 30 31 42 56 46l502 73l225 455c9 19 26 41 49 41s40 -22 49 -41l225 -455l502 -73c24 -4 56 -16 56 -46z" />
-    <glyph glyph-name="table" unicode="&#xf128;" horiz-adv-x="1664" 
+    <glyph glyph-name="table" unicode="&#xf129;" horiz-adv-x="1664" 
 d="M512 160v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM512 544v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1024 160v192c0 18 -14 32 -32 32h-320
 c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM512 928v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1024 544v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192
 c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1536 160v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1024 928v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32z
 M1536 544v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1536 928v192c0 18 -14 32 -32 32h-320c-18 0 -32 -14 -32 -32v-192c0 -18 14 -32 32 -32h320c18 0 32 14 32 32zM1664 1248v-1088c0 -88 -72 -160 -160 -160
 h-1344c-88 0 -160 72 -160 160v1088c0 88 72 160 160 160h1344c88 0 160 -72 160 -160z" />
-    <glyph glyph-name="th-list" unicode="&#xf129;" horiz-adv-x="1792" 
+    <glyph glyph-name="th-list" unicode="&#xf12a;" horiz-adv-x="1792" 
 d="M512 288v-192c0 -53 -43 -96 -96 -96h-320c-53 0 -96 43 -96 96v192c0 53 43 96 96 96h320c53 0 96 -43 96 -96zM512 800v-192c0 -53 -43 -96 -96 -96h-320c-53 0 -96 43 -96 96v192c0 53 43 96 96 96h320c53 0 96 -43 96 -96zM1792 288v-192c0 -53 -43 -96 -96 -96h-960
 c-53 0 -96 43 -96 96v192c0 53 43 96 96 96h960c53 0 96 -43 96 -96zM512 1312v-192c0 -53 -43 -96 -96 -96h-320c-53 0 -96 43 -96 96v192c0 53 43 96 96 96h320c53 0 96 -43 96 -96zM1792 800v-192c0 -53 -43 -96 -96 -96h-960c-53 0 -96 43 -96 96v192c0 53 43 96 96 96
 h960c53 0 96 -43 96 -96zM1792 1312v-192c0 -53 -43 -96 -96 -96h-960c-53 0 -96 43 -96 96v192c0 53 43 96 96 96h960c53 0 96 -43 96 -96z" />
-    <glyph glyph-name="times" unicode="&#xf12a;" horiz-adv-x="1188" 
+    <glyph glyph-name="times" unicode="&#xf12b;" horiz-adv-x="1188" 
 d="M1188 214c0 -25 -10 -50 -28 -68l-136 -136c-18 -18 -43 -28 -68 -28s-50 10 -68 28l-294 294l-294 -294c-18 -18 -43 -28 -68 -28s-50 10 -68 28l-136 136c-18 18 -28 43 -28 68s10 50 28 68l294 294l-294 294c-18 18 -28 43 -28 68s10 50 28 68l136 136
 c18 18 43 28 68 28s50 -10 68 -28l294 -294l294 294c18 18 43 28 68 28s50 -10 68 -28l136 -136c18 -18 28 -43 28 -68s-10 -50 -28 -68l-294 -294l294 -294c18 -18 28 -43 28 -68z" />
-    <glyph glyph-name="trash" unicode="&#xf12b;" horiz-adv-x="1408" 
+    <glyph glyph-name="trash" unicode="&#xf12c;" horiz-adv-x="1408" 
 d="M512 160v704c0 18 -14 32 -32 32h-64c-18 0 -32 -14 -32 -32v-704c0 -18 14 -32 32 -32h64c18 0 32 14 32 32zM768 160v704c0 18 -14 32 -32 32h-64c-18 0 -32 -14 -32 -32v-704c0 -18 14 -32 32 -32h64c18 0 32 14 32 32zM1024 160v704c0 18 -14 32 -32 32h-64
 c-18 0 -32 -14 -32 -32v-704c0 -18 14 -32 32 -32h64c18 0 32 14 32 32zM480 1152h448l-48 117c-3 4 -12 10 -17 11h-317c-6 -1 -14 -7 -17 -11zM1408 1120v-64c0 -18 -14 -32 -32 -32h-96v-948c0 -110 -72 -204 -160 -204h-832c-88 0 -160 90 -160 200v952h-96
 c-18 0 -32 14 -32 32v64c0 18 14 32 32 32h309l70 167c20 49 80 89 133 89h320c53 0 113 -40 133 -89l70 -167h309c18 0 32 -14 32 -32z" />
-    <glyph glyph-name="trash-o" unicode="&#xf12c;" horiz-adv-x="1408" 
+    <glyph glyph-name="trash-o" unicode="&#xf12d;" horiz-adv-x="1408" 
 d="M512 800v-576c0 -18 -14 -32 -32 -32h-64c-18 0 -32 14 -32 32v576c0 18 14 32 32 32h64c18 0 32 -14 32 -32zM768 800v-576c0 -18 -14 -32 -32 -32h-64c-18 0 -32 14 -32 32v576c0 18 14 32 32 32h64c18 0 32 -14 32 -32zM1024 800v-576c0 -18 -14 -32 -32 -32h-64
 c-18 0 -32 14 -32 32v576c0 18 14 32 32 32h64c18 0 32 -14 32 -32zM1152 76v948h-896v-948c0 -48 27 -76 32 -76h832c5 0 32 28 32 76zM480 1152h448l-48 117c-3 4 -12 10 -17 11h-317c-6 -1 -14 -7 -17 -11zM1408 1120v-64c0 -18 -14 -32 -32 -32h-96v-948
 c0 -110 -72 -204 -160 -204h-832c-88 0 -160 90 -160 200v952h-96c-18 0 -32 14 -32 32v64c0 18 14 32 32 32h309l70 167c20 49 80 89 133 89h320c53 0 113 -40 133 -89l70 -167h309c18 0 32 -14 32 -32z" />
-    <glyph glyph-name="user-circle-o" unicode="&#xf12d;" horiz-adv-x="1792" 
+    <glyph glyph-name="user-circle-o" unicode="&#xf12e;" horiz-adv-x="1792" 
 d="M896 1536c495 0 896 -401 896 -896c0 -492 -399 -896 -896 -896c-496 0 -896 403 -896 896c0 495 401 896 896 896zM1515 185c93 128 149 285 149 455c0 423 -345 768 -768 768s-768 -345 -768 -768c0 -170 56 -327 149 -455c36 179 123 327 306 327
 c81 -79 191 -128 313 -128s232 49 313 128c183 0 270 -148 306 -327zM1280 832c0 -212 -172 -384 -384 -384s-384 172 -384 384s172 384 384 384s384 -172 384 -384z" />
-    <glyph glyph-name="user-plus" unicode="&#xf12e;" horiz-adv-x="2048" 
+    <glyph glyph-name="user-plus" unicode="&#xf12f;" horiz-adv-x="2048" 
 d="M704 640c-212 0 -384 172 -384 384s172 384 384 384s384 -172 384 -384s-172 -384 -384 -384zM1664 512h352c17 0 32 -15 32 -32v-192c0 -17 -15 -32 -32 -32h-352v-352c0 -17 -15 -32 -32 -32h-192c-17 0 -32 15 -32 32v352h-352c-17 0 -32 15 -32 32v192
 c0 17 15 32 32 32h352v352c0 17 15 32 32 32h192c17 0 32 -15 32 -32v-352zM928 288c0 -70 58 -128 128 -128h256v-238c-49 -36 -111 -50 -171 -50h-874c-160 0 -267 96 -267 259c0 226 53 573 346 573c16 0 27 -7 39 -17c98 -75 193 -122 319 -122s221 47 319 122
 c12 10 23 17 39 17c85 0 160 -32 217 -96h-223c-70 0 -128 -58 -128 -128v-192z" />
-    <glyph glyph-name="wrench" unicode="&#xf12f;" horiz-adv-x="1641" 
+    <glyph glyph-name="wrench" unicode="&#xf130;" horiz-adv-x="1641" 
 d="M363 64c0 35 -29 64 -64 64s-64 -29 -64 -64s29 -64 64 -64s64 29 64 64zM1007 484l-682 -682c-23 -23 -56 -37 -90 -37s-67 14 -91 37l-106 108c-24 23 -38 56 -38 90s14 67 38 91l681 681c52 -131 157 -236 288 -288zM1641 919c0 -33 -12 -74 -23 -106
 c-63 -178 -234 -301 -423 -301c-247 0 -448 201 -448 448s201 448 448 448c73 0 168 -22 229 -63c10 -7 16 -16 16 -28c0 -11 -7 -22 -16 -28l-293 -169v-224l193 -107c33 19 265 165 285 165s32 -15 32 -35z" />
   </font>

resources/assets/js/app.js

@@ -5,6 +5,7 @@
  */
 
 require('./bootstrap')
+
 let url_slug = require('./url-slug')
 
 $(function () {

resources/assets/js/bootstrap.js

@@ -1,6 +1,6 @@
 
 // window._ = require('lodash');
-// window.Popper = require('popper.js').default;
+window.Popper = require('popper.js').default;
 
 /**
  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
@@ -10,7 +10,6 @@
 
 try {
     window.$ = window.jQuery = require('jquery');
-
     require('bootstrap');
 } catch (e) {}
 

resources/assets/sass/_bootstrap.scss

@@ -19,7 +19,7 @@
 @import "~bootstrap/scss/button-group";
 @import "~bootstrap/scss/input-group";
 @import "~bootstrap/scss/custom-forms";
-//@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/nav";
 @import "~bootstrap/scss/navbar";
 @import "~bootstrap/scss/card";
 @import "~bootstrap/scss/breadcrumb";
@@ -36,4 +36,4 @@
 @import "~bootstrap/scss/popover";
 //@import "~bootstrap/scss/carousel";
 @import "~bootstrap/scss/utilities";
-//@import "~bootstrap/scss/print";
+@import "~bootstrap/scss/print";

resources/assets/sass/_helpers.scss

@@ -17,6 +17,10 @@
 	.mobile-only {
 		display: none;
 	}
+
+	.mobile-no-border {
+		border: 0 none !important;
+	}
 }
 
 .border-dashed {

resources/views/table/view.blade.php

@@ -8,100 +8,200 @@
 
 @section('content')
   <div class="row justify-content-start px-3">
-    <h2 class="d-flex w-100 align-items-baseline">
-      <small class="small2 flex-grow-1">
+    <div class="d-flex w-100 align-items-center">
+      <small class="flex-grow-1" style="font-size: 120%;">
         <a href="{{route('profile.view', $table->owner->name)}}" class="link-no-color">{{ $table->owner->handle }}</a>{{--
         --}}<span class="px-1">/</span>{{--
         --}}{{ $table->name }}
       </small>
 
-      <span class="">{{ $table->title }}</span>
-    </h2>
-  </div>
-
-  <div class="row mx-auto col-md-12 justify-content-center mb-1 border rounded px-0 py-2 box-shadow mb-3">
-    <div class="col-md-6">
-      @if($table->description)
-        <b>Description</b>
-        {!! Widget::collapsible($table->description, 400, '8em') !!}
-      @endif
-
-      @if($table->origin)
-        <p class="last-p-mb-0">
-          <b>Source</b><br>
-          @icon(fa-link){!! Widget::tryLink($table->origin) !!}
-        </p>
-      @endif
-    </div>
-    <div class="col-md-4 border-left">
-      <table>
-        <tbody>
-
-        <tr>
-          <th class="text-right pr-2">Author</th>
-          <td>
-            {{ $table->owner->title }}
-            (<a href="{{route('profile.view', $table->owner->name)}}">{{ $table->owner->handle }}</a>)
-          </td>
-        </tr>
-
-        <tr>
-          <th class="text-right pr-2">License</th>
-          <td>{{ $table->license ?: 'CC0' }}</td>
-        </tr>
-
-        <tr>
-          <th class="text-right pr-2">Created</th>
-          <td>{{ $table->created_at->format("M j, Y") }}</td>
-        </tr>
-
-        <tr>
-          <th class="text-right pr-2">Updated</th>
-          <td>{{ $table->updated_at->format("M j, Y") }}</td>
-        </tr>
-
-        <tr>
-          <th class="text-right pr-2">Revisions</th>
-          <td>{{ $table->revisions()->count() }}</td>
-        </tr>
-
-        </tbody>
-      </table>
+      <h1 class="mx-3">{{ $table->title }}</h1>
+
+      <nav>
+        @sr(Table actions){{--
+        --}}<ul class="sr-list">
+
+          <li>
+            <div class="btn-group" role="group" aria-label="Table Actions">
+              @if(!guest() && !user()->ownsTable($table))
+                <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Fork"
+                   data-toggle="tooltip" data-placement="top">
+                  {{ $table->forks()->count() ?: '–' }}&nbsp;
+                  @icon(fa-code-fork, sr:Fork)
+                </a>
+              @endif
+
+              @if($table->favouritingUsers()->where('id', user()->getKey())->exists())
+                <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Un-favourite"
+                   data-toggle="tooltip" data-placement="top">
+                  {{ $table->favouritingUsers()->count() ?: '–' }}&nbsp;
+                  @icon(fa-star, sr:Un-favourite)
+                </a>
+              @else
+                <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Favourite"
+                   data-toggle="tooltip" data-placement="top">
+                  {{ $table->favouritingUsers()->count() ?: '–' }}&nbsp;
+                  @icon(fa-star-o, sr:Favourite)
+                </a>
+              @endif
+
+              <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Comments"
+                 data-toggle="tooltip" data-placement="top">
+                {{ $table->comments()->count() ?: '–' }}&nbsp;
+                @icon(fa-comment, sr:Comments)
+              </a>
+            </div>
+
+          @if(!guest())
+            <li>
+              <div class="btn-group" role="group" aria-label="Change Proposals">
+                <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Change Proposals"
+                   data-toggle="tooltip" data-placement="top">
+                  {{ $table->proposals()->count() ?: '–' }}&nbsp;
+                  @icon(fa-inbox, sr:Change Proposals)
+                </a>
+                <a href="" class="btn btn-outline-primary py-1 btn-sm" title="Draft Change"
+                   data-toggle="tooltip" data-placement="top">
+                  @icon(fa-pencil, sr:Propose Change)
+                </a>
+              </div>
+          @endif
+          </ul>
+        </nav>
+      </div>
     </div>
-    <div class="col-md-2 border-left">
-      Right Column with buttons etc, maybe
+
+    <div class="row mx-auto col-md-12 justify-content-center mb-1 border rounded px-0 py-2 box-shadow mb-3">
+      <div class="col-md-10 tab-content order-1" id="infobox-tabContent">
+
+        {{-- Tab pane --}}
+        <div class="tab-pane show active container" id="infobox-home" role="tabpanel" aria-labelledby="infobox-home-tab">
+          <div class="row">
+
+            {{-- Description field --}}
+            <div class="col-md-8 pl-md-0">
+              @if($table->description)
+                <b>Description</b>
+                {!! Widget::collapsible($table->description, 400, '8em') !!}
+                @if($table->origin)
+                  <div class="mt-2"></div>{{-- spacer --}}
+                @endif
+              @endif
+
+              @if($table->origin)
+                <p class="last-p-mb-0">
+                  <b>Adapted From</b><br>
+                  {!! Widget::tryLink($table->origin) !!}
+                </p>
+              @endif
+            </div>
+
+            {{-- Info table --}}
+            <div class="col-md-4 border-left my-md-0 my-2 pr-md-0 mobile-no-border">
+              <table>
+                <tbody>
+
+                <tr>
+                  <th class="text-right pr-2">Author</th>
+                  <td>
+                    {{ $table->owner->title }}
+                    (<a href="{{route('profile.view', $table->owner->name)}}">{{ $table->owner->handle }}</a>)
+                  </td>
+                </tr>
+
+                <tr>
+                  <th class="text-right pr-2">License</th>
+                  <td>{{ $table->license ?: 'CC0' }}</td>
+                </tr>
+
+                <tr>
+                  <th class="text-right pr-2">Created</th>
+                  <td>{{ $table->created_at->format("M j, Y") }}</td>
+                </tr>
+
+                <tr>
+                  <th class="text-right pr-2">Updated</th>
+                  <td>{{ $table->updated_at->format("M j, Y") }}</td>
+                </tr>
+
+                <tr>
+                  <th class="text-right pr-2">Revisions</th>
+                  <td>{{ $table->revisions()->count() }}</td>
+                </tr>
+
+                </tbody>
+              </table>
+            </div>
+
+          </div>{{-- inner row --}}
+        </div>{{-- Tab container --}}
+
+        <div class="tab-pane container" id="infobox-columns" role="tabpanel" aria-labelledby="infobox-columns-tab">
+          Column toggles, sort, filtering … coming soon
+        </div>
+
+        <div class="tab-pane container" id="infobox-export" role="tabpanel" aria-labelledby="infobox-export-tab">
+          Export … coming soon
+        </div>
+
+      </div>{{-- Tab panel --}}
+
+      {{-- Right column with menu --}}
+      <div class="col-md-2 border-left order-md-2 order-0 mb-md-0 mb-2">
+
+        <div class="nav flex-md-column flex-row nav-pills" id="infobox-tab" role="tablist" aria-orientation="vertical">
+          <a class="nav-link active"
+             id="infobox-home-tab"
+             data-toggle="pill" href="#infobox-home"
+             role="tab" aria-controls="infobox-home"
+             aria-selected="true">Table Info</a>
+
+          <a class="nav-link"
+             id="infobox-columns-tab"
+             data-toggle="pill" href="#infobox-columns"
+             role="tab" aria-controls="infobox-columns"
+             aria-selected="false">Columns</a>
+
+          <a class="nav-link"
+             id="infobox-export-tab"
+             data-toggle="pill" href="#infobox-export"
+             role="tab" aria-controls="infobox-export"
+             aria-selected="false">Export</a>
+        </div>
+
+      </div>
+
     </div>
-  </div>
 
-  <div class="row justify-content-center mb-2">
-    <div class="col-md-12 d-flex">
-      <nav class="text-center ml-auto" aria-label="Pages of the table">
-        {{ $rows->links(null, ['ulClass' => 'mb-0']) }}
-      </nav>
+    <div class="row justify-content-center mb-2">
+      <div class="col-md-12 d-flex">
+        <nav class="text-center" aria-label="Pages of the table">
+          {{ $rows->links(null, ['ulClass' => 'mb-0']) }}
+        </nav>
+      </div>
     </div>
-  </div>
-
-  <div class="row justify-content-center">
-    <div class="col-12">
-      <table class="table table-hover table-sm">
-        <thead>
-        <tr>
-          @foreach($columns as $col)
-            <th>{{ $col->title }}</th>
-          @endforeach
-        </tr>
-        </thead>
-        <tbody>
-          @foreach($rows as $row)
-            <tr>
-              @php($rdata = json_decode($row['data'], true))
-              @foreach($columns as $col)
-                <td data-id="{{ $row->id }}">{{ $rdata[$col->name] }}</td>
-              @endforeach
-            </tr>
-          @endforeach
-        </tbody>
-      </table>
+
+    <div class="row justify-content-center">
+      <div class="col-12">
+        <table class="table table-hover table-sm">
+          <thead>
+          <tr>
+            @foreach($columns as $col)
+              <th>{{ $col->title }}</th>
+            @endforeach
+          </tr>
+          </thead>
+          <tbody>
+            @foreach($rows as $row)
+              <tr>
+                @php($rdata = json_decode($row['data'], true))
+                @foreach($columns as $col)
+                  <td data-id="{{ $row->id }}">{{ $rdata[$col->name] }}</td>
+                @endforeach
+              </tr>
+            @endforeach
+          </tbody>
+        </table>
+      </div>
     </div>
-  </div>
-@endsection
+  @endsection