UX improvements in table editor

pull/35/head
Ondřej Hruška 6 years ago
parent c642774316
commit 1e183f5059
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 38
      app/Http/Controllers/TableEditController.php
  2. 27
      app/Tables/Changeset.php
  3. 5
      app/helpers.php
  4. 241
      public/fonts/fa-dtbl-1-preview.html
  5. 81
      public/fonts/fa-dtbl-1.css
  6. BIN
      public/fonts/fa-dtbl-1.eot
  7. 234
      public/fonts/fa-dtbl-1.svg
  8. BIN
      public/fonts/fa-dtbl-1.ttf
  9. BIN
      public/fonts/fa-dtbl-1.woff
  10. BIN
      public/fonts/fa-dtbl-1.woff2
  11. 18
      resources/assets/fa-config/wanted.ini
  12. 2
      resources/assets/js/components/ColumnEditor.vue
  13. 152
      resources/assets/js/components/RowsEditor.vue
  14. 1
      resources/assets/js/udash.js
  15. 6
      resources/assets/js/vue-init.js
  16. 13
      resources/assets/sass/_fa-utils.scss
  17. 7
      resources/assets/sass/bootstrap-customizations/_nav.scss
  18. 2
      resources/views/table/conf.blade.php
  19. 27
      resources/views/table/propose/add-rows-csv.blade.php
  20. 51
      resources/views/table/propose/add-rows.blade.php
  21. 5
      resources/views/table/propose/edit-rows.blade.php
  22. 18
      resources/views/table/propose/layout-row-pagination.blade.php
  23. 41
      resources/views/table/propose/layout.blade.php
  24. 10
      resources/views/table/propose/review.blade.php

@ -123,20 +123,36 @@ class TableEditController extends Controller
$input = objBag($request->all(), false);
try {
$resp = null;
$code = 200;
try {
switch ($input->action) {
case 'row.update':
$data = (object)$input->data;
$resp = $changeset->rowUpdate($data);
break;
case 'row.update-many':
$newVals = $input->data;
$updated = [];
foreach ($newVals as $rowUpdate) {
$r = $changeset->rowUpdate($rowUpdate);
$updated[$r->_id] = $r;
}
$resp = $updated;
break;
case 'row.remove':
$isNew = $changeset->isNewRow($input->id);
$changeset->rowRemove($input->id);
$resp = $isNew ? null : $changeset->fetchAndTransformRow($input->id);
break;
case 'rows.remove-empty-new':
$changeset->removeEmptyNewRows();
break;
case 'row.restore':
$changeset->rowRestore($input->id);
$resp = $changeset->fetchAndTransformRow($input->id);
@ -144,13 +160,6 @@ class TableEditController extends Controller
case 'rows.add':
$changeset->addBlankRows($input->count);
// rows.add is sent via a form
if ($input->has('redirect')) {
return redirect($input->redirect);
} else {
$resp = null;
}
break;
case 'rows.add-csv':
@ -159,13 +168,6 @@ class TableEditController extends Controller
} catch (\Exception $e) {
return $this->backWithErrors(['data' => $e->getMessage()]);
}
// rows.add-csv is sent via a form
if ($input->has('redirect')) {
return redirect($input->redirect);
} else {
$resp = null;
}
break;
case 'col.update':
@ -190,7 +192,6 @@ class TableEditController extends Controller
case 'col.sort':
$changeset->setColOrder($input->order);
$resp = null;
break;
default:
@ -204,6 +205,11 @@ class TableEditController extends Controller
$this->storeChangeset($changeset);
// Redirect requested via form
if ($code == 200 && $input->has('redirect')) {
return redirect($input->redirect);
}
return $this->jsonResponse($resp, $code);
}
}

@ -191,6 +191,13 @@ class Changeset
if ($this->isNewRow($row->_id)) {
if ($decorate) {
$row->_new = true;
$row->_orig = array_diff((array)$row, []);
// remove junk
unset($row->_orig['_id']);
unset($row->_orig['_new']);
unset($row->_orig['_remove']);
unset($row->_orig['_changed']);
unset($row->_orig['_orig']);
}
return $row;
}
@ -359,7 +366,9 @@ class Changeset
public function fetchRow(int $id)
{
if ($this->isNewRow($id)) {
return (object)$this->newRows[$id];
$nr = (object)$this->newRows[$id];
$nr->_new = true;
return $nr;
}
$r = $this->revision->rowsData($this->fetchColumns(), true, false)
@ -557,7 +566,8 @@ class Changeset
$rows = self::csvToRowsArray($columns, $csvArray, false)
->keyBy('_id');
$this->newRows = array_merge($this->newRows, $rows->all());
// using '+' to avoid renumbering
$this->newRows = $this->newRows + $rows->toArray();
}
public function addBlankCol()
@ -587,4 +597,17 @@ class Changeset
$this->columnOrder = array_merge($order, $missing);
}
public function removeEmptyNewRows()
{
$cols = $this->fetchColumns();
$emptyTpl = collect($cols)->keyBy('id')->map(function(Column $c) {
return $c->cast(null);
})->all();
$this->newRows = array_filter($this->newRows, function ($r) use ($emptyTpl) {
$emptyTpl['_id'] = $r['_id'];
return $emptyTpl != $r;
});
}
}

@ -126,6 +126,11 @@ function collection_paginate($items, $per_page, $mapFn = null)
$page = Request::get('page', 1);
$pageItems = $items->forPage($page, $per_page)->values();
if (count($pageItems) == 0 && $page > 1) {
$page = 1;
Request::replace(['page' => $page]);
$pageItems = $items->forPage($page, $per_page)->values();
}
return new Illuminate\Pagination\LengthAwarePaginator(
$mapFn ? $pageItems->map($mapFn) : $pageItems,

@ -162,6 +162,7 @@
[data-icon]:before,
.fa-address-card-o:before,
.fa-arrow-left:before,
.fa-bars:before,
.fa-calendar:before,
.fa-chevron-down:before,
@ -172,13 +173,13 @@
.fa-exclamation-triangle:before,
.fa-eye:before,
.fa-facebook-square:before,
.fa-file-excel-o:before,
.fa-floppy-o:before,
.fa-github:before,
.fa-globe:before,
.fa-google:before,
.fa-history:before,
.fa-home:before,
.fa-hourglass:before,
.fa-inbox:before,
.fa-key-modern:before,
.fa-link:before,
@ -186,14 +187,15 @@
.fa-pencil:before,
.fa-plus:before,
.fa-question-circle:before,
.fa-reply:before,
.fa-sign-in:before,
.fa-sign-out:before,
.fa-spinner:before,
.fa-star:before,
.fa-star-o:before,
.fa-sun-o:before,
.fa-table:before,
.fa-th-list:before,
.fa-times:before,
.fa-trash-o:before,
.fa-undo:before,
.fa-user:before,
@ -216,45 +218,47 @@
}
.fa-address-card-o:before { content: "\f100"; }
.fa-bars:before { content: "\f101"; }
.fa-calendar:before { content: "\f102"; }
.fa-chevron-down:before { content: "\f103"; }
.fa-chevron-up:before { content: "\f104"; }
.fa-code-fork:before { content: "\f105"; }
.fa-comment:before { content: "\f106"; }
.fa-download:before { content: "\f107"; }
.fa-exclamation-triangle:before { content: "\f108"; }
.fa-eye:before { content: "\f109"; }
.fa-facebook-square:before { content: "\f10a"; }
.fa-floppy-o:before { content: "\f10b"; }
.fa-github:before { content: "\f10c"; }
.fa-globe:before { content: "\f10d"; }
.fa-google:before { content: "\f10e"; }
.fa-history:before { content: "\f10f"; }
.fa-home:before { content: "\f110"; }
.fa-hourglass:before { content: "\f111"; }
.fa-inbox:before { content: "\f112"; }
.fa-key-modern:before { content: "\f113"; }
.fa-link:before { content: "\f114"; }
.fa-moon-o:before { content: "\f115"; }
.fa-pencil:before { content: "\f116"; }
.fa-plus:before { content: "\f117"; }
.fa-question-circle:before { content: "\f118"; }
.fa-sign-in:before { content: "\f119"; }
.fa-sign-out:before { content: "\f11a"; }
.fa-star:before { content: "\f11b"; }
.fa-star-o:before { content: "\f11c"; }
.fa-sun-o:before { content: "\f11d"; }
.fa-table:before { content: "\f11e"; }
.fa-th-list:before { content: "\f11f"; }
.fa-times:before { content: "\f120"; }
.fa-trash-o:before { content: "\f121"; }
.fa-undo:before { content: "\f122"; }
.fa-user:before { content: "\f123"; }
.fa-user-circle-o:before { content: "\f124"; }
.fa-user-plus:before { content: "\f125"; }
.fa-users:before { content: "\f126"; }
.fa-wrench:before { content: "\f127"; }
.fa-arrow-left:before { content: "\f101"; }
.fa-bars:before { content: "\f102"; }
.fa-calendar:before { content: "\f103"; }
.fa-chevron-down:before { content: "\f104"; }
.fa-chevron-up:before { content: "\f105"; }
.fa-code-fork:before { content: "\f106"; }
.fa-comment:before { content: "\f107"; }
.fa-download:before { content: "\f108"; }
.fa-exclamation-triangle:before { content: "\f109"; }
.fa-eye:before { content: "\f10a"; }
.fa-facebook-square:before { content: "\f10b"; }
.fa-file-excel-o:before { content: "\f10c"; }
.fa-floppy-o:before { content: "\f10d"; }
.fa-github:before { content: "\f10e"; }
.fa-globe:before { content: "\f10f"; }
.fa-google:before { content: "\f110"; }
.fa-history:before { content: "\f111"; }
.fa-home:before { content: "\f112"; }
.fa-inbox:before { content: "\f113"; }
.fa-key-modern:before { content: "\f114"; }
.fa-link:before { content: "\f115"; }
.fa-moon-o:before { content: "\f116"; }
.fa-pencil:before { content: "\f117"; }
.fa-plus:before { content: "\f118"; }
.fa-question-circle:before { content: "\f119"; }
.fa-reply:before { content: "\f11a"; }
.fa-sign-in:before { content: "\f11b"; }
.fa-sign-out:before { content: "\f11c"; }
.fa-spinner:before { content: "\f11d"; }
.fa-star:before { content: "\f11e"; }
.fa-star-o:before { content: "\f11f"; }
.fa-sun-o:before { content: "\f120"; }
.fa-table:before { content: "\f121"; }
.fa-th-list:before { content: "\f122"; }
.fa-trash-o:before { content: "\f123"; }
.fa-undo:before { content: "\f124"; }
.fa-user:before { content: "\f125"; }
.fa-user-circle-o:before { content: "\f126"; }
.fa-user-plus:before { content: "\f127"; }
.fa-users:before { content: "\f128"; }
.fa-wrench:before { content: "\f129"; }
</style>
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
@ -270,7 +274,7 @@
<body class="characters-off">
<div id="page" class="container">
<header>
<h1>fa-dtbl-1 contains 40 glyphs:</h1>
<h1>fa-dtbl-1 contains 42 glyphs:</h1>
<a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
</header>
@ -289,6 +293,19 @@
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></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-arrow-left" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span>
@ -298,7 +315,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-bars" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
</div>
</div>
@ -311,7 +328,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-calendar" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
</div>
</div>
@ -324,7 +341,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-chevron-down" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
</div>
</div>
@ -337,7 +354,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-chevron-up" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
</div>
</div>
@ -350,7 +367,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-code-fork" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />
</div>
</div>
@ -363,7 +380,7 @@
</div>
<div class="usage">
<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;#xf106;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
</div>
</div>
@ -376,7 +393,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-download" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
</div>
</div>
@ -390,7 +407,7 @@
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-exclamation-triangle" />
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-warning" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
</div>
</div>
@ -403,7 +420,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-eye" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
</div>
</div>
@ -416,7 +433,20 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-facebook-square" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></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-file-excel-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />
</div>
</div>
@ -430,7 +460,7 @@
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-floppy-o" />
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-save" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />
</div>
</div>
@ -443,7 +473,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-github" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10e;" />
</div>
</div>
@ -456,7 +486,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-globe" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />
</div>
</div>
@ -469,7 +499,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-google" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10e;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
</div>
</div>
@ -482,7 +512,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-history" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
</div>
</div>
@ -495,20 +525,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-home" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></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-hourglass" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />
</div>
</div>
@ -521,7 +538,7 @@
</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;#xf112;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />
</div>
</div>
@ -534,7 +551,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;#xf113;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />
</div>
</div>
@ -547,7 +564,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;#xf114;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
</div>
</div>
@ -560,7 +577,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-moon-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
</div>
</div>
@ -573,7 +590,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;#xf116;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
</div>
</div>
@ -586,7 +603,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-plus" />
<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>
@ -599,7 +616,20 @@
</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;#xf118;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></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-reply" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
</div>
</div>
@ -612,7 +642,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;#xf119;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
</div>
</div>
@ -625,86 +655,85 @@
</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;#xf11a;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span>
<span class="step size-12"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></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-star" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-spinner" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span>
<span class="step size-12"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-star" class="fa-star"></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-star-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
<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;#xf11e;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span>
<span class="step size-12"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-star-o" class="fa-star-o"></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-sun-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
<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;#xf11f;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span>
<span class="step size-12"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-sun-o" class="fa-sun-o"></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-table" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sun-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span>
<span class="step size-12"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-table" class="fa-table"></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-th-list" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
<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;#xf121;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span>
<span class="step size-12"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-th-list" class="fa-th-list"></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-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;#xf120;" />
<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;#xf122;" />
</div>
</div>
@ -717,7 +746,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;#xf121;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
</div>
</div>
@ -730,7 +759,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-undo" />
<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;#xf124;" />
</div>
</div>
@ -743,7 +772,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-user" />
<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;#xf125;" />
</div>
</div>
@ -756,7 +785,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;#xf124;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
</div>
</div>
@ -769,7 +798,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;#xf125;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
</div>
</div>
@ -782,7 +811,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-users" />
<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;#xf128;" />
</div>
</div>
@ -795,7 +824,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;#xf127;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
</div>
</div>

@ -7,7 +7,6 @@
src: url('./fa-dtbl-1.eot?v=1.1.0');
src: url('./fa-dtbl-1.eot?#iefix&v=1.1.0') format('embedded-opentype'),
url('./fa-dtbl-1.woff2?v=1.1.0') format('woff2'),
url('./fa-dtbl-1.woff?v=1.1.0') format('woff'),
url('./fa-dtbl-1.ttf?v=1.1.0') format('truetype'),
url('./fa-dtbl-1.svg?v=1.1.0#fa-dtbl-1') format('svg');
font-weight: normal;
@ -40,42 +39,44 @@
}
.fa-address-card-o::before, .fa-vcard-o::before { content: "\f100"; }
.fa-bars::before { content: "\f101"; }
.fa-calendar::before { content: "\f102"; }
.fa-chevron-down::before { content: "\f103"; }
.fa-chevron-up::before { content: "\f104"; }
.fa-code-fork::before { content: "\f105"; }
.fa-comment::before { content: "\f106"; }
.fa-download::before { content: "\f107"; }
.fa-exclamation-triangle::before, .fa-warning::before { content: "\f108"; }
.fa-eye::before { content: "\f109"; }
.fa-facebook-square::before { content: "\f10a"; }
.fa-floppy-o::before, .fa-save::before { content: "\f10b"; }
.fa-github::before { content: "\f10c"; }
.fa-globe::before { content: "\f10d"; }
.fa-google::before { content: "\f10e"; }
.fa-history::before { content: "\f10f"; }
.fa-home::before { content: "\f110"; }
.fa-hourglass::before { content: "\f111"; }
.fa-inbox::before { content: "\f112"; }
.fa-key-modern::before { content: "\f113"; }
.fa-link::before { content: "\f114"; }
.fa-moon-o::before { content: "\f115"; }
.fa-pencil::before { content: "\f116"; }
.fa-plus::before { content: "\f117"; }
.fa-question-circle::before { content: "\f118"; }
.fa-sign-in::before { content: "\f119"; }
.fa-sign-out::before { content: "\f11a"; }
.fa-star::before { content: "\f11b"; }
.fa-star-o::before { content: "\f11c"; }
.fa-sun-o::before { content: "\f11d"; }
.fa-table::before { content: "\f11e"; }
.fa-th-list::before { content: "\f11f"; }
.fa-times::before, .fa-close::before { content: "\f120"; }
.fa-trash-o::before { content: "\f121"; }
.fa-undo::before { content: "\f122"; }
.fa-user::before { content: "\f123"; }
.fa-user-circle-o::before { content: "\f124"; }
.fa-user-plus::before { content: "\f125"; }
.fa-users::before { content: "\f126"; }
.fa-wrench::before { content: "\f127"; }
.fa-arrow-left::before { content: "\f101"; }
.fa-bars::before { content: "\f102"; }
.fa-calendar::before { content: "\f103"; }
.fa-chevron-down::before { content: "\f104"; }
.fa-chevron-up::before { content: "\f105"; }
.fa-code-fork::before { content: "\f106"; }
.fa-comment::before { content: "\f107"; }
.fa-download::before { content: "\f108"; }
.fa-exclamation-triangle::before, .fa-warning::before { content: "\f109"; }
.fa-eye::before { content: "\f10a"; }
.fa-facebook-square::before { content: "\f10b"; }
.fa-file-excel-o::before { content: "\f10c"; }
.fa-floppy-o::before, .fa-save::before { content: "\f10d"; }
.fa-github::before { content: "\f10e"; }
.fa-globe::before { content: "\f10f"; }
.fa-google::before { content: "\f110"; }
.fa-history::before { content: "\f111"; }
.fa-home::before { content: "\f112"; }
.fa-inbox::before { content: "\f113"; }
.fa-key-modern::before { content: "\f114"; }
.fa-link::before { content: "\f115"; }
.fa-moon-o::before { content: "\f116"; }
.fa-pencil::before { content: "\f117"; }
.fa-plus::before { content: "\f118"; }
.fa-question-circle::before { content: "\f119"; }
.fa-reply::before { content: "\f11a"; }
.fa-sign-in::before { content: "\f11b"; }
.fa-sign-out::before { content: "\f11c"; }
.fa-spinner::before { content: "\f11d"; }
.fa-star::before { content: "\f11e"; }
.fa-star-o::before { content: "\f11f"; }
.fa-sun-o::before { content: "\f120"; }
.fa-table::before { content: "\f121"; }
.fa-th-list::before { content: "\f122"; }
.fa-trash-o::before { content: "\f123"; }
.fa-undo::before { content: "\f124"; }
.fa-user::before { content: "\f125"; }
.fa-user-circle-o::before { content: "\f126"; }
.fa-user-plus::before { content: "\f127"; }
.fa-users::before { content: "\f128"; }
.fa-wrench::before { content: "\f129"; }

Binary file not shown.

@ -1,12 +1,12 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2018-8-8: Created with FontForge (http://fontforge.org)
2018-8-10: Created with FontForge (http://fontforge.org)
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<metadata>
Created by FontForge 20180321 at Wed Aug 8 11:13:46 2018
By cpsd
Created by FontForge 20170805 at Fri Aug 10 18:09:07 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>
<defs>
@ -22,149 +22,157 @@ The Fork Awesome font is licensed under the SIL OFL 1.1 (http://scripts.sil.org/
bbox="-0.14014 -256.168 2048 1536.01"
underline-thickness="89.6"
underline-position="-179.2"
unicode-range="U+0020-F127"
unicode-range="U+0020-F129"
/>
<missing-glyph />
<glyph glyph-name="space" unicode=" " horiz-adv-x="200"
/>
<glyph glyph-name="comment" unicode="&#xf106;" 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="bars" unicode="&#xf101;"
<glyph glyph-name="address-card-o" unicode="&#xf100;" horiz-adv-x="2048"
d="M1024 405c0 -87 -57 -149 -128 -149h-512c-71 0 -128 62 -128 149c0 155 38 327 196 327c49 -28 115 -76 188 -76s139 48 188 76c158 0 196 -172 196 -327zM867 925c0 -126 -102 -227 -227 -227s-227 101 -227 227c0 125 102 227 227 227s227 -102 227 -227zM1792 480
v-64c0 -18 -14 -32 -32 -32h-576c-18 0 -32 14 -32 32v64c0 18 14 32 32 32h576c18 0 32 -14 32 -32zM1792 732v-56c0 -20 -16 -36 -36 -36h-568c-20 0 -36 16 -36 36v56c0 20 16 36 36 36h568c20 0 36 -16 36 -36zM1792 992v-64c0 -18 -14 -32 -32 -32h-576
c-18 0 -32 14 -32 32v64c0 18 14 32 32 32h576c18 0 32 -14 32 -32zM1920 32v1216c0 17 -15 32 -32 32h-1728c-17 0 -32 -15 -32 -32v-1216c0 -17 15 -32 32 -32h352v96c0 18 14 32 32 32h64c18 0 32 -14 32 -32v-96h768v96c0 18 14 32 32 32h64c18 0 32 -14 32 -32v-96h352
c17 0 32 15 32 32zM2048 1248v-1216c0 -88 -72 -160 -160 -160h-1728c-88 0 -160 72 -160 160v1216c0 88 72 160 160 160h1728c88 0 160 -72 160 -160z" />
<glyph glyph-name="arrow-left" unicode="&#xf101;" horiz-adv-x="1472"
d="M1472 640v-128c0 -68 -45 -128 -117 -128h-704l293 -294c24 -23 38 -56 38 -90s-14 -67 -38 -90l-75 -76c-23 -23 -56 -37 -90 -37s-67 14 -91 37l-651 652c-23 23 -37 56 -37 90s14 67 37 91l651 650c24 24 57 38 91 38s66 -14 90 -38l75 -74c24 -24 38 -57 38 -91
s-14 -67 -38 -91l-293 -293h704c72 0 117 -60 117 -128z" />
<glyph glyph-name="bars" unicode="&#xf102;"
d="M1536 192v-128c0 -35 -29 -64 -64 -64h-1408c-35 0 -64 29 -64 64v128c0 35 29 64 64 64h1408c35 0 64 -29 64 -64zM1536 704v-128c0 -35 -29 -64 -64 -64h-1408c-35 0 -64 29 -64 64v128c0 35 29 64 64 64h1408c35 0 64 -29 64 -64zM1536 1216v-128
c0 -35 -29 -64 -64 -64h-1408c-35 0 -64 29 -64 64v128c0 35 29 64 64 64h1408c35 0 64 -29 64 -64z" />
<glyph glyph-name="google" unicode="&#xf10e;" horiz-adv-x="1505"
d="M768 750h725c7 -39 12 -77 12 -128c0 -438 -294 -750 -737 -750c-425 0 -768 343 -768 768s343 768 768 768c207 0 381 -76 515 -201l-209 -201c-57 55 -157 119 -306 119c-262 0 -476 -217 -476 -485s214 -485 476 -485c304 0 418 218 436 331h-436v264z" />
<glyph glyph-name="question-circle" unicode="&#xf118;"
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="globe" unicode="&#xf10d;"
<glyph glyph-name="calendar" unicode="&#xf103;" horiz-adv-x="1664"
d="M128 -128h288v288h-288v-288zM480 -128h320v288h-320v-288zM128 224h288v320h-288v-320zM480 224h320v320h-320v-320zM128 608h288v288h-288v-288zM864 -128h320v288h-320v-288zM480 608h320v288h-320v-288zM1248 -128h288v288h-288v-288zM864 224h320v320h-320v-320z
M512 1088v288c0 17 -15 32 -32 32h-64c-17 0 -32 -15 -32 -32v-288c0 -17 15 -32 32 -32h64c17 0 32 15 32 32zM1248 224h288v320h-288v-320zM864 608h320v288h-320v-288zM1248 608h288v288h-288v-288zM1280 1088v288c0 17 -15 32 -32 32h-64c-17 0 -32 -15 -32 -32v-288
c0 -17 15 -32 32 -32h64c17 0 32 15 32 32zM1664 1152v-1280c0 -70 -58 -128 -128 -128h-1408c-70 0 -128 58 -128 128v1280c0 70 58 128 128 128h128v96c0 88 72 160 160 160h64c88 0 160 -72 160 -160v-96h384v96c0 88 72 160 160 160h64c88 0 160 -72 160 -160v-96h128
c70 0 128 -58 128 -128z" />
<glyph glyph-name="chevron-down" unicode="&#xf104;" horiz-adv-x="1612"
d="M1593 728l-742 -741c-25 -25 -65 -25 -90 0l-742 741c-25 25 -25 66 0 91l166 165c25 25 65 25 90 0l531 -531l531 531c25 25 65 25 90 0l166 -165c25 -25 25 -66 0 -91z" />
<glyph glyph-name="chevron-up" unicode="&#xf105;" horiz-adv-x="1612"
d="M1593 205l-166 -165c-25 -25 -65 -25 -90 0l-531 531l-531 -531c-25 -25 -65 -25 -90 0l-166 165c-25 25 -25 66 0 91l742 741c25 25 65 25 90 0l742 -741c25 -25 25 -66 0 -91z" />
<glyph glyph-name="code-fork" unicode="&#xf106;" horiz-adv-x="1024"
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="comment" unicode="&#xf107;" 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="&#xf108;" 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
c26 0 49 -16 59 -39z" />
<glyph glyph-name="exclamation-triangle" unicode="&#xf109;" horiz-adv-x="1792"
d="M1024 161v190c0 18 -14 33 -32 33h-192c-18 0 -32 -15 -32 -33v-190c0 -18 14 -33 32 -33h192c18 0 32 15 32 33zM1022 535l18 459c0 6 -3 14 -10 19c-6 5 -15 11 -24 11h-220c-9 0 -18 -6 -24 -11c-7 -5 -10 -15 -10 -21l17 -457c0 -13 15 -23 34 -23h185
c18 0 33 10 34 23zM1008 1469l768 -1408c22 -39 21 -87 -2 -126s-65 -63 -110 -63h-1536c-45 0 -87 24 -110 63s-24 87 -2 126l768 1408c22 41 65 67 112 67s90 -26 112 -67z" />
<glyph glyph-name="eye" unicode="&#xf10a;" horiz-adv-x="1792"
d="M1664 576c-95 147 -225 273 -381 353c40 -68 61 -146 61 -225c0 -247 -201 -448 -448 -448s-448 201 -448 448c0 79 21 157 61 225c-156 -80 -286 -206 -381 -353c171 -264 447 -448 768 -448s597 184 768 448zM944 960c0 26 -22 48 -48 48c-167 0 -304 -137 -304 -304
c0 -26 22 -48 48 -48s48 22 48 48c0 114 94 208 208 208c26 0 48 22 48 48zM1792 576c0 -25 -8 -48 -20 -69c-184 -303 -521 -507 -876 -507s-692 205 -876 507c-12 21 -20 44 -20 69s8 48 20 69c184 302 521 507 876 507s692 -205 876 -507c12 -21 20 -44 20 -69z" />
<glyph glyph-name="facebook-square" unicode="&#xf10b;"
d="M1248 1408c159 0 288 -129 288 -288v-960c0 -159 -129 -288 -288 -288h-188v595h199l30 232h-229v148c0 67 18 112 115 112l122 1v207c-21 3 -94 9 -178 9c-177 0 -299 -108 -299 -306v-171h-200v-232h200v-595h-532c-159 0 -288 129 -288 288v960c0 159 129 288 288 288
h960z" />
<glyph glyph-name="file-excel-o" unicode="&#xf10c;"
d="M1468 1156c37 -37 68 -111 68 -164v-1152c0 -53 -43 -96 -96 -96h-1344c-53 0 -96 43 -96 96v1600c0 53 43 96 96 96h896c53 0 127 -31 164 -68zM1024 1400v-376h376c-6 17 -15 34 -22 41l-313 313c-7 7 -24 16 -41 22zM1408 -128v1024h-416c-53 0 -96 43 -96 96v416
h-768v-1536h1280zM429 106h68l194 283l-189 272h-68v107h290v-107h-76l106 -159c8 -9 13 -16 17 -23c2 -3 4 -6 5 -10h2c0 -1 9 14 21 33l103 159h-74v107h279v-107h-67l-195 -282l192 -273h68v-106h-291v106h76l-107 161c-7 10 -13 16 -17 24c-2 3 -4 6 -5 10h-2
c-3 0 -9 -15 -21 -34l-103 -161h75v-106h-281v106z" />
<glyph glyph-name="floppy-o" unicode="&#xf10d;"
d="M384 0h768v384h-768v-384zM1280 0h128v896c0 19 -17 60 -30 73l-281 281c-14 14 -53 30 -73 30v-416c0 -53 -43 -96 -96 -96h-576c-53 0 -96 43 -96 96v416h-128v-1280h128v416c0 53 43 96 96 96h832c53 0 96 -43 96 -96v-416zM896 928v320c0 17 -15 32 -32 32h-192
c-17 0 -32 -15 -32 -32v-320c0 -17 15 -32 32 -32h192c17 0 32 15 32 32zM1536 896v-928c0 -53 -43 -96 -96 -96h-1344c-53 0 -96 43 -96 96v1344c0 53 43 96 96 96h928c53 0 126 -30 164 -68l280 -280c38 -38 68 -111 68 -164z" />
<glyph glyph-name="github" unicode="&#xf10e;"
d="M768 1408c424 0 768 -344 768 -768c0 -339 -220 -627 -525 -729c-39 -7 -53 17 -53 37c0 25 1 108 1 211c0 72 -24 118 -52 142c171 19 351 84 351 379c0 84 -30 152 -79 206c8 20 34 98 -8 204c-64 20 -211 -79 -211 -79c-61 17 -127 26 -192 26s-131 -9 -192 -26
c0 0 -147 99 -211 79c-42 -106 -16 -184 -8 -204c-49 -54 -79 -122 -79 -206c0 -294 179 -360 350 -379c-22 -20 -42 -54 -49 -103c-44 -20 -156 -54 -223 64c-42 73 -118 79 -118 79c-75 1 -5 -47 -5 -47c50 -23 85 -112 85 -112c45 -137 259 -91 259 -91
c0 -64 1 -124 1 -143c0 -20 -14 -44 -53 -37c-305 102 -525 390 -525 729c0 424 344 768 768 768zM291 305c-2 -4 -8 -5 -13 -2c-6 3 -9 8 -7 12c2 3 7 4 13 2c6 -3 9 -8 7 -12zM322 271c-4 -4 -11 -2 -16 3c-5 6 -6 13 -2 16c4 4 11 2 16 -3c5 -6 6 -13 2 -16zM352 226
c-4 -3 -12 0 -17 7s-5 15 0 18c5 4 13 1 17 -6c5 -7 5 -15 0 -19zM394 184c-4 -5 -13 -4 -20 3c-7 6 -9 15 -4 19c4 5 13 4 20 -3c6 -6 8 -15 4 -19zM451 159c-2 -6 -11 -9 -19 -6c-9 2 -15 9 -13 15s11 9 19 7c9 -3 15 -10 13 -16zM514 154c0 -6 -7 -11 -16 -11
c-10 -1 -17 4 -17 11c0 6 7 11 16 11c9 1 17 -4 17 -11zM572 164c1 -6 -5 -12 -14 -14s-17 2 -18 8c-1 7 5 13 14 15c9 1 17 -3 18 -9z" />
<glyph glyph-name="globe" unicode="&#xf10f;"
d="M768 1404c424 0 768 -344 768 -768s-344 -768 -768 -768s-768 344 -768 768s344 768 768 768zM737 1186v0c-18 0 -40 -7 -58 -7c-27 0 -61 12 -81 0s-18 -37 -27 -55s-28 -34 -28 -54s19 -36 28 -54s2 -47 27 -54s54 36 81 54s69 32 81 54s0 36 0 54s16 39 0 55
c-5 5 -14 7 -23 7zM491 1178h-6s-44 -8 -76 -13c-136 -92 -261 -300 -278 -464c23 -12 46 -22 60 -36c27 -27 83 -27 88 -56s-24 -62 -33 -80s-31 -31 -27 -54s36 -36 54 -54s37 -22 54 -54s20 -98 27 -135c9 -47 23 -85 44 -118c27 -19 72 -44 102 -58c10 28 10 93 16 122
c7 37 13 109 27 135s19 19 28 28s18 15 28 28s17 34 26 52s30 31 26 53s-36 37 -54 55s-29 39 -55 54s-73 18 -101 25s-127 12 -129 13c-2 0 -1 -6 -7 2s-2 39 -2 57s11 34 24 66c13 18 5 10 25 24c10 9 43 -44 57 -44s-3 91 6 100c36 36 128 98 128 136s-37 36 -55 54
s-46 -30 -111 -30s76 103 85 112s23 17 27 27s0 18 0 27s12 22 8 25c-2 1 -4 1 -6 1zM1212 1096c-62 -8 -139 -10 -182 -26c-45 -17 -54 -36 -81 -54s-67 -28 -81 -54s0 -54 0 -81s-26 -68 0 -82s55 37 82 55s63 64 81 54s6 -7 0 -27s-51 -41 -52 -81s102 -73 68 -126
s-188 46 -232 17s-19 -54 -28 -81s-37 -52 -27 -81s52 -34 81 -54s81 -56 82 -58s20 -99 27 -135c14 -73 -27 -199 76 -231c31 14 78 41 106 60c13 34 24 72 35 94c22 44 71 123 80 161s0 37 0 55s7 30 0 54s-36 54 -54 81s-34 64 -54 81s-46 18 -54 27s-4 8 -4 13
s-4 7 5 14s34 8 54 0s36 -36 54 -54s25 -51 54 -54s54 36 81 54c25 17 52 56 76 55c-12 131 -98 312 -193 404z" />
<glyph glyph-name="sign-in" unicode="&#xf119;"
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="inbox" unicode="&#xf112;"
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="table" unicode="&#xf11e;" 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="download" unicode="&#xf107;" 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
c26 0 49 -16 59 -39z" />
<glyph glyph-name="home" unicode="&#xf110;" horiz-adv-x="1612"
<glyph glyph-name="google" unicode="&#xf110;" horiz-adv-x="1505"
d="M768 750h725c7 -39 12 -77 12 -128c0 -438 -294 -750 -737 -750c-425 0 -768 343 -768 768s343 768 768 768c207 0 381 -76 515 -201l-209 -201c-57 55 -157 119 -306 119c-262 0 -476 -217 -476 -485s214 -485 476 -485c304 0 418 218 436 331h-436v264z" />
<glyph glyph-name="history" unicode="&#xf111;"
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="home" unicode="&#xf112;" horiz-adv-x="1612"
d="M1382 544v-480c0 -35 -29 -64 -64 -64h-384v384h-256v-384h-384c-35 0 -64 29 -64 64v480c0 2 1 4 1 6l575 474l575 -474c1 -2 1 -4 1 -6zM1605 613l-62 -74c-5 -6 -13 -10 -21 -11h-3c-8 0 -15 2 -21 7l-692 577l-692 -577c-7 -5 -15 -8 -24 -7c-8 1 -16 5 -21 11
l-62 74c-11 13 -9 34 4 45l719 599c42 35 110 35 152 0l244 -204v195c0 18 14 32 32 32h192c18 0 32 -14 32 -32v-408l219 -182c13 -11 15 -32 4 -45z" />
<glyph glyph-name="calendar" unicode="&#xf102;" horiz-adv-x="1664"
d="M128 -128h288v288h-288v-288zM480 -128h320v288h-320v-288zM128 224h288v320h-288v-320zM480 224h320v320h-320v-320zM128 608h288v288h-288v-288zM864 -128h320v288h-320v-288zM480 608h320v288h-320v-288zM1248 -128h288v288h-288v-288zM864 224h320v320h-320v-320z
M512 1088v288c0 17 -15 32 -32 32h-64c-17 0 -32 -15 -32 -32v-288c0 -17 15 -32 32 -32h64c17 0 32 15 32 32zM1248 224h288v320h-288v-320zM864 608h320v288h-320v-288zM1248 608h288v288h-288v-288zM1280 1088v288c0 17 -15 32 -32 32h-64c-17 0 -32 -15 -32 -32v-288
c0 -17 15 -32 32 -32h64c17 0 32 15 32 32zM1664 1152v-1280c0 -70 -58 -128 -128 -128h-1408c-70 0 -128 58 -128 128v1280c0 70 58 128 128 128h128v96c0 88 72 160 160 160h64c88 0 160 -72 160 -160v-96h384v96c0 88 72 160 160 160h64c88 0 160 -72 160 -160v-96h128
c70 0 128 -58 128 -128z" />
<glyph glyph-name="user-circle-o" unicode="&#xf124;" 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="hourglass" unicode="&#xf111;"
d="M1504 -64c18 0 32 -14 32 -32v-128c0 -18 -14 -32 -32 -32h-1472c-18 0 -32 14 -32 32v128c0 18 14 32 32 32h1472zM130 0c19 337 294 518 478 640c-184 122 -459 303 -478 640h1276c-19 -337 -294 -518 -478 -640c184 -122 459 -303 478 -640h-1276zM1504 1536
c18 0 32 -14 32 -32v-128c0 -18 -14 -32 -32 -32h-1472c-18 0 -32 14 -32 32v128c0 18 14 32 32 32h1472z" />
<glyph glyph-name="facebook-square" unicode="&#xf10a;"
d="M1248 1408c159 0 288 -129 288 -288v-960c0 -159 -129 -288 -288 -288h-188v595h199l30 232h-229v148c0 67 18 112 115 112l122 1v207c-21 3 -94 9 -178 9c-177 0 -299 -108 -299 -306v-171h-200v-232h200v-595h-532c-159 0 -288 129 -288 288v960c0 159 129 288 288 288
h960z" />
<glyph glyph-name="eye" unicode="&#xf109;" horiz-adv-x="1792"
d="M1664 576c-95 147 -225 273 -381 353c40 -68 61 -146 61 -225c0 -247 -201 -448 -448 -448s-448 201 -448 448c0 79 21 157 61 225c-156 -80 -286 -206 -381 -353c171 -264 447 -448 768 -448s597 184 768 448zM944 960c0 26 -22 48 -48 48c-167 0 -304 -137 -304 -304
c0 -26 22 -48 48 -48s48 22 48 48c0 114 94 208 208 208c26 0 48 22 48 48zM1792 576c0 -25 -8 -48 -20 -69c-184 -303 -521 -507 -876 -507s-692 205 -876 507c-12 21 -20 44 -20 69s8 48 20 69c184 302 521 507 876 507s692 -205 876 -507c12 -21 20 -44 20 -69z" />
<glyph glyph-name="user" unicode="&#xf123;" horiz-adv-x="1280"
d="M1280 137c0 -146 -96 -265 -213 -265h-854c-117 0 -213 119 -213 265c0 263 65 567 327 567c81 -79 191 -128 313 -128s232 49 313 128c262 0 327 -304 327 -567zM1024 1024c0 -212 -172 -384 -384 -384s-384 172 -384 384s172 384 384 384s384 -172 384 -384z" />
<glyph glyph-name="moon-o" unicode="&#xf115;" horiz-adv-x="1471"
<glyph glyph-name="inbox" unicode="&#xf113;"
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="&#xf114;" 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="&#xf115;" 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="moon-o" unicode="&#xf116;" horiz-adv-x="1471"
d="M1262 233c-36 -6 -73 -9 -110 -9c-371 0 -672 301 -672 672c0 127 37 251 104 357c-266 -79 -456 -323 -456 -613c0 -353 287 -640 640 -640c193 0 374 88 494 233zM1465 318c-125 -271 -399 -446 -697 -446c-423 0 -768 345 -768 768c0 415 325 752 739 767
c28 1 51 -15 61 -39c11 -25 4 -54 -15 -72c-114 -104 -177 -246 -177 -400c0 -300 244 -544 544 -544c79 0 155 17 228 51c25 11 53 6 72 -13s24 -48 13 -72z" />
<glyph glyph-name="sign-out" unicode="&#xf11a;" 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="pencil" unicode="&#xf116;" horiz-adv-x="1515"
<glyph glyph-name="pencil" unicode="&#xf117;" 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="star" unicode="&#xf11b;" horiz-adv-x="1664"
<glyph glyph-name="plus" unicode="&#xf118;" horiz-adv-x="1408"
d="M1408 800v-192c0 -53 -43 -96 -96 -96h-416v-416c0 -53 -43 -96 -96 -96h-192c-53 0 -96 43 -96 96v416h-416c-53 0 -96 43 -96 96v192c0 53 43 96 96 96h416v416c0 53 43 96 96 96h192c53 0 96 -43 96 -96v-416h416c53 0 96 -43 96 -96z" />
<glyph glyph-name="question-circle" unicode="&#xf119;"
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="reply" unicode="&#xf11a;" 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="sign-in" unicode="&#xf11b;"
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="&#xf11c;" 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="spinner" unicode="&#xf11d;" horiz-adv-x="1664"
d="M462 142c0 -70 -57 -128 -128 -128c-70 0 -128 58 -128 128c0 71 58 128 128 128c71 0 128 -57 128 -128zM960 -64c0 -71 -57 -128 -128 -128s-128 57 -128 128s57 128 128 128s128 -57 128 -128zM256 640c0 -71 -57 -128 -128 -128s-128 57 -128 128s57 128 128 128
s128 -57 128 -128zM1458 142c0 -70 -58 -128 -128 -128c-71 0 -128 58 -128 128c0 71 57 128 128 128c70 0 128 -57 128 -128zM494 1138c0 -88 -72 -160 -160 -160s-160 72 -160 160s72 160 160 160s160 -72 160 -160zM1664 640c0 -71 -57 -128 -128 -128s-128 57 -128 128
s57 128 128 128s128 -57 128 -128zM1024 1344c0 -106 -86 -192 -192 -192s-192 86 -192 192s86 192 192 192s192 -86 192 -192zM1554 1138c0 -124 -101 -224 -224 -224c-124 0 -224 100 -224 224c0 123 100 224 224 224c123 0 224 -101 224 -224z" />
<glyph glyph-name="star" unicode="&#xf11e;" 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="users" unicode="&#xf126;" horiz-adv-x="1920"
d="M593 640c-104 -3 -198 -48 -265 -128h-134c-100 0 -194 48 -194 159c0 81 -3 353 124 353c21 0 125 -85 260 -85c46 0 90 8 133 23c-3 -22 -5 -44 -5 -66c0 -91 29 -181 81 -256zM1664 3c0 -162 -107 -259 -267 -259h-874c-160 0 -267 97 -267 259c0 226 53 573 346 573
c34 0 158 -139 358 -139s324 139 358 139c293 0 346 -347 346 -573zM640 1280c0 -141 -115 -256 -256 -256s-256 115 -256 256s115 256 256 256s256 -115 256 -256zM1344 896c0 -212 -172 -384 -384 -384s-384 172 -384 384s172 384 384 384s384 -172 384 -384zM1920 671
c0 -111 -94 -159 -194 -159h-134c-67 80 -161 125 -265 128c52 75 81 165 81 256c0 22 -2 44 -5 66c43 -15 87 -23 133 -23c135 0 239 85 260 85c127 0 124 -272 124 -353zM1792 1280c0 -141 -115 -256 -256 -256s-256 115 -256 256s115 256 256 256s256 -115 256 -256z" />
<glyph glyph-name="key-modern" unicode="&#xf113;" 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="undo" unicode="&#xf122;"
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 -768z" />
<glyph glyph-name="sun-o" unicode="&#xf11d;" horiz-adv-x="1707"
<glyph glyph-name="star-o" unicode="&#xf11f;" 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="sun-o" unicode="&#xf120;" horiz-adv-x="1707"
d="M1430 640c0 318 -258 576 -576 576s-576 -258 -576 -576s258 -576 576 -576s576 258 576 576zM1706 363c-3 -10 -11 -17 -20 -20l-292 -96v-306c0 -10 -5 -20 -13 -26c-9 -6 -19 -8 -29 -4l-292 94l-180 -248c-6 -8 -16 -13 -26 -13s-20 5 -26 13l-180 248l-292 -94
c-10 -4 -20 -2 -29 4c-8 6 -13 16 -13 26v306l-292 96c-9 3 -17 10 -20 20s-2 21 4 29l180 248l-180 248c-6 9 -7 19 -4 29s11 17 20 20l292 96v306c0 10 5 20 13 26c9 6 19 8 29 4l292 -94l180 248c12 16 40 16 52 0l180 -248l292 94c10 4 20 2 29 -4c8 -6 13 -16 13 -26
v-306l292 -96c9 -3 17 -10 20 -20s2 -20 -4 -29l-180 -248l180 -248c6 -8 7 -19 4 -29z" />
<glyph glyph-name="link" unicode="&#xf114;" 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="code-fork" unicode="&#xf105;" horiz-adv-x="1024"
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="th-list" unicode="&#xf11f;" horiz-adv-x="1792"
<glyph glyph-name="table" unicode="&#xf121;" 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="&#xf122;" 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="github" unicode="&#xf10c;"
d="M768 1408c424 0 768 -344 768 -768c0 -339 -220 -627 -525 -729c-39 -7 -53 17 -53 37c0 25 1 108 1 211c0 72 -24 118 -52 142c171 19 351 84 351 379c0 84 -30 152 -79 206c8 20 34 98 -8 204c-64 20 -211 -79 -211 -79c-61 17 -127 26 -192 26s-131 -9 -192 -26
c0 0 -147 99 -211 79c-42 -106 -16 -184 -8 -204c-49 -54 -79 -122 -79 -206c0 -294 179 -360 350 -379c-22 -20 -42 -54 -49 -103c-44 -20 -156 -54 -223 64c-42 73 -118 79 -118 79c-75 1 -5 -47 -5 -47c50 -23 85 -112 85 -112c45 -137 259 -91 259 -91
c0 -64 1 -124 1 -143c0 -20 -14 -44 -53 -37c-305 102 -525 390 -525 729c0 424 344 768 768 768zM291 305c-2 -4 -8 -5 -13 -2c-6 3 -9 8 -7 12c2 3 7 4 13 2c6 -3 9 -8 7 -12zM322 271c-4 -4 -11 -2 -16 3c-5 6 -6 13 -2 16c4 4 11 2 16 -3c5 -6 6 -13 2 -16zM352 226
c-4 -3 -12 0 -17 7s-5 15 0 18c5 4 13 1 17 -6c5 -7 5 -15 0 -19zM394 184c-4 -5 -13 -4 -20 3c-7 6 -9 15 -4 19c4 5 13 4 20 -3c6 -6 8 -15 4 -19zM451 159c-2 -6 -11 -9 -19 -6c-9 2 -15 9 -13 15s11 9 19 7c9 -3 15 -10 13 -16zM514 154c0 -6 -7 -11 -16 -11
c-10 -1 -17 4 -17 11c0 6 7 11 16 11c9 1 17 -4 17 -11zM572 164c1 -6 -5 -12 -14 -14s-17 2 -18 8c-1 7 5 13 14 15c9 1 17 -3 18 -9z" />
<glyph glyph-name="exclamation-triangle" unicode="&#xf108;" horiz-adv-x="1792"
d="M1024 161v190c0 18 -14 33 -32 33h-192c-18 0 -32 -15 -32 -33v-190c0 -18 14 -33 32 -33h192c18 0 32 15 32 33zM1022 535l18 459c0 6 -3 14 -10 19c-6 5 -15 11 -24 11h-220c-9 0 -18 -6 -24 -11c-7 -5 -10 -15 -10 -21l17 -457c0 -13 15 -23 34 -23h185
c18 0 33 10 34 23zM1008 1469l768 -1408c22 -39 21 -87 -2 -126s-65 -63 -110 -63h-1536c-45 0 -87 24 -110 63s-24 87 -2 126l768 1408c22 41 65 67 112 67s90 -26 112 -67z" />
<glyph glyph-name="address-card-o" unicode="&#xf100;" horiz-adv-x="2048"
d="M1024 405c0 -87 -57 -149 -128 -149h-512c-71 0 -128 62 -128 149c0 155 38 327 196 327c49 -28 115 -76 188 -76s139 48 188 76c158 0 196 -172 196 -327zM867 925c0 -126 -102 -227 -227 -227s-227 101 -227 227c0 125 102 227 227 227s227 -102 227 -227zM1792 480
v-64c0 -18 -14 -32 -32 -32h-576c-18 0 -32 14 -32 32v64c0 18 14 32 32 32h576c18 0 32 -14 32 -32zM1792 732v-56c0 -20 -16 -36 -36 -36h-568c-20 0 -36 16 -36 36v56c0 20 16 36 36 36h568c20 0 36 -16 36 -36zM1792 992v-64c0 -18 -14 -32 -32 -32h-576
c-18 0 -32 14 -32 32v64c0 18 14 32 32 32h576c18 0 32 -14 32 -32zM1920 32v1216c0 17 -15 32 -32 32h-1728c-17 0 -32 -15 -32 -32v-1216c0 -17 15 -32 32 -32h352v96c0 18 14 32 32 32h64c18 0 32 -14 32 -32v-96h768v96c0 18 14 32 32 32h64c18 0 32 -14 32 -32v-96h352
c17 0 32 15 32 32zM2048 1248v-1216c0 -88 -72 -160 -160 -160h-1728c-88 0 -160 72 -160 160v1216c0 88 72 160 160 160h1728c88 0 160 -72 160 -160z" />
<glyph glyph-name="trash-o" unicode="&#xf121;" horiz-adv-x="1408"
<glyph glyph-name="trash-o" unicode="&#xf123;" 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="star-o" unicode="&#xf11c;" 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="times" unicode="&#xf120;" 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="floppy-o" unicode="&#xf10b;"
d="M384 0h768v384h-768v-384zM1280 0h128v896c0 19 -17 60 -30 73l-281 281c-14 14 -53 30 -73 30v-416c0 -53 -43 -96 -96 -96h-576c-53 0 -96 43 -96 96v416h-128v-1280h128v416c0 53 43 96 96 96h832c53 0 96 -43 96 -96v-416zM896 928v320c0 17 -15 32 -32 32h-192
c-17 0 -32 -15 -32 -32v-320c0 -17 15 -32 32 -32h192c17 0 32 15 32 32zM1536 896v-928c0 -53 -43 -96 -96 -96h-1344c-53 0 -96 43 -96 96v1344c0 53 43 96 96 96h928c53 0 126 -30 164 -68l280 -280c38 -38 68 -111 68 -164z" />
<glyph glyph-name="user-plus" unicode="&#xf125;" horiz-adv-x="2048"
<glyph glyph-name="undo" unicode="&#xf124;"
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 -768z" />
<glyph glyph-name="user" unicode="&#xf125;" horiz-adv-x="1280"
d="M1280 137c0 -146 -96 -265 -213 -265h-854c-117 0 -213 119 -213 265c0 263 65 567 327 567c81 -79 191 -128 313 -128s232 49 313 128c262 0 327 -304 327 -567zM1024 1024c0 -212 -172 -384 -384 -384s-384 172 -384 384s172 384 384 384s384 -172 384 -384z" />
<glyph glyph-name="user-circle-o" unicode="&#xf126;" 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="&#xf127;" 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="plus" unicode="&#xf117;" horiz-adv-x="1408"
d="M1408 800v-192c0 -53 -43 -96 -96 -96h-416v-416c0 -53 -43 -96 -96 -96h-192c-53 0 -96 43 -96 96v416h-416c-53 0 -96 43 -96 96v192c0 53 43 96 96 96h416v416c0 53 43 96 96 96h192c53 0 96 -43 96 -96v-416h416c53 0 96 -43 96 -96z" />
<glyph glyph-name="wrench" unicode="&#xf127;" horiz-adv-x="1641"
<glyph glyph-name="users" unicode="&#xf128;" horiz-adv-x="1920"
d="M593 640c-104 -3 -198 -48 -265 -128h-134c-100 0 -194 48 -194 159c0 81 -3 353 124 353c21 0 125 -85 260 -85c46 0 90 8 133 23c-3 -22 -5 -44 -5 -66c0 -91 29 -181 81 -256zM1664 3c0 -162 -107 -259 -267 -259h-874c-160 0 -267 97 -267 259c0 226 53 573 346 573
c34 0 158 -139 358 -139s324 139 358 139c293 0 346 -347 346 -573zM640 1280c0 -141 -115 -256 -256 -256s-256 115 -256 256s115 256 256 256s256 -115 256 -256zM1344 896c0 -212 -172 -384 -384 -384s-384 172 -384 384s172 384 384 384s384 -172 384 -384zM1920 671
c0 -111 -94 -159 -194 -159h-134c-67 80 -161 125 -265 128c52 75 81 165 81 256c0 22 -2 44 -5 66c43 -15 87 -23 133 -23c135 0 239 85 260 85c127 0 124 -272 124 -353zM1792 1280c0 -141 -115 -256 -256 -256s-256 115 -256 256s115 256 256 256s256 -115 256 -256z" />
<glyph glyph-name="wrench" unicode="&#xf129;" 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" />
<glyph glyph-name="chevron-up" unicode="&#xf104;" horiz-adv-x="1612"
d="M1593 205l-166 -165c-25 -25 -65 -25 -90 0l-531 531l-531 -531c-25 -25 -65 -25 -90 0l-166 165c-25 25 -25 66 0 91l742 741c25 25 65 25 90 0l742 -741c25 -25 25 -66 0 -91z" />
<glyph glyph-name="chevron-down" unicode="&#xf103;" horiz-adv-x="1612"
d="M1593 728l-742 -741c-25 -25 -65 -25 -90 0l-742 741c-25 25 -25 66 0 91l166 165c25 25 65 25 90 0l531 -531l531 531c25 25 65 25 90 0l166 -165c25 -25 25 -66 0 -91z" />
<glyph glyph-name="history" unicode="&#xf10f;"
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" />
</font>
</defs></svg>

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -38,20 +38,26 @@ download # export buttons
wrench # Table options
trash-o
plus
warning
undo
plus # Add column in table editor
warning # validation fail icon
undo # Used in table editor
close
hourglass
spinner
paper-plane-o # save proposal
# dark mode
sun-o
moon-o
# manual sort buttons
chevron-up
chevron-down
bars
bars # sort icon
file-excel-o # CSV button
reply # reply, or back
arrow-left # back
# Unused
; sliders

@ -5,7 +5,7 @@ Complex animated column editor for the table edit page
<template>
<div>
<input type="hidden" :name="name" :value="JSON.stringify(columns)" v-if="newTable">
<table :class="[{'table': !newTable},{'new-table': newTable},'table-narrow','table-sm','table-fixed','td-va-middle']">
<table :class="[{'table': !newTable}, {'new-table': newTable}, {'mt-3': !newTable}, 'table-narrow', 'table-sm', 'table-fixed', 'td-va-middle']">
<thead>
<tr>
<th v-if="sortable"></th>

@ -10,6 +10,40 @@ Rows are identified by row._id, columns by col.id
-->
<template>
<div>
<div class="col-md-12 d-flex mt-3" v-if="newRows || hasPages">
<div v-if="hasPages" v-html="pager"></div>
<div class="flex-grow-1"></div>
<form :action="route" method="POST" v-if="newRows" class="form-inline mr-2">
<input type="hidden" name="_token" :value="csrf">
<input type="hidden" name="action" value="rows.add">
<input type="hidden" name="redirect" :value="pageUrl">
<input name="count" id="newrow-count" type="number"
min=1 step=1 value=1 class="form-control mr-1" style="width: 10em">
<button class="btn btn-outline-success">Add Rows</button>
</form>
<a href="" class="btn btn-outline-success mr-2" v-if="newRows">
<v-icon class="fa-file-excel-o fa-pr" alt="CSV"></v-icon><!--
-->CSV
</a>
<form :action="route" method="POST" v-if="newRows" class="form-inline mr-2">
<input type="hidden" name="_token" :value="csrf">
<input type="hidden" name="action" value="rows.remove-empty-new">
<input type="hidden" name="redirect" :value="pageUrl">
<button class="btn btn-outline-danger">Remove Empty</button>
</form>
<button @click="saveAllChanges" type="button" v-if="newRows"
:class="['btn', this.dirtyRows ? 'btn-info' : 'btn-outline-secondary']">
Save Rows
</button>
</div>
<div class="col-md-12 mt-3">
<table class="table table-hover table-sm table-fixed td-va-middle">
<thead>
<tr>
@ -19,24 +53,30 @@ Rows are identified by row._id, columns by col.id
</thead>
<tbody>
<tr v-for="row in rows" :style="rowStyle(row)">
<td>
<a href="" :class="['mr-1','btn','btn-outline-danger',{'active': row._remove}]"
<td class="text-nowrap">
<button :class="['mr-1', 'btn', 'btn-outline-danger', {'active': row._remove}]"
@click.prevent="toggleRowDelete(row._id)">
<v-icon :class="row._remove ? 'fa-undo' : 'fa-trash-o'"
:alt="row._remove ? 'Undo Remove' : 'Remove'" />
</a><!--
--><a href="" :class="['btn','btn-outline-secondary',{'disabled': row._remove}]"
</button><!--
--><button v-if="newRows" :class="['mr-1', 'btn', isRowChanged(row) ? 'btn-info' : 'btn-outline-secondary']"
@click.prevent="submitRowChange(row)">
<v-icon class="fa-save" alt="Save" />
</button><!--
--><button v-else :class="['btn', 'btn-outline-secondary', {'disabled': row._remove}]"
@click.prevent="toggleRowEditing(row._id)">
<v-icon :class="row._editing ? 'fa-save' : 'fa-pencil'"
:alt="row._editing ? 'Save' : 'Edit'" />
</a>
</button>
</td>
<template v-if="row._editing">
<template v-if="row._editing || newRows">
<td v-for="col in columns" class="pr-0">
<input v-model="row[col.id]" :class="['form-control', { 'is-invalid': row._errors && row._errors[col.id] }]"
:title="(row._errors && row._errors[col.id]) ? row._errors[col.id][0] : null"
type="text" @keyup.enter="toggleRowEditing(row._id)">
type="text"
@input="markRowDirty(row)"
@keyup.enter="toggleRowEditing(row._id)">
</td>
</template>
@ -53,6 +93,12 @@ Rows are identified by row._id, columns by col.id
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 d-flex" v-if="hasPages">
<div v-if="hasPages" v-html="pager"></div>
</div>
</div>
</template>
<style lang="scss" scoped>
@ -61,7 +107,6 @@ Rows are identified by row._id, columns by col.id
th {
border-top: 0 none;
}
</style>
<script>
@ -69,13 +114,43 @@ Rows are identified by row._id, columns by col.id
export default {
props: {
/** True if pager should be enabled */
hasPages: Boolean,
/** Pager HTML */
pager: String,
/** Update route */
route: String,
/** Row objects */
xRows: Object, // key'd by _id
/** Array of columns */
columns: Array,
/** CSRF token */
csrf: String,
/** Full URL of the current page */
pageUrl: String,
/** Indicate this is the Add Rows page */
newRows: {
type: Boolean,
default: false,
}
},
data () {
return {
/** All rows */
rows: this.xRows,
/** Number of dirty rows */
dirtyRows: 0,
}
},
watch: {
dirtyRows: function (value) {
if (value > 0) {
$(window).on('beforeunload', function () {
return 'Some row changes are not saved.';
});
} else {
$(window).off('beforeunload');
}
}
},
methods: {
@ -86,14 +161,18 @@ Rows are identified by row._id, columns by col.id
/** Toggle row delete status, remove new rows (when using the editor widget for added rows) */
toggleRowDelete (_id) {
if (!_.isDefined(this.rows[_id])) return
let row = this.rows[_id]
if (!_.isDefined(row)) return
let remove = !this.rows[_id]._remove
let remove = !row._remove
let wasDirty = this.isRowChanged(row)
this.query({
action: remove ? 'row.remove' : 'row.restore',
id: _id
}, (resp) => {
if (wasDirty) this.dirtyRows--
// if response is null, this was a New row
// and it was discarded without a way back - hard drop
if (_.isEmpty(resp.data)) {
@ -107,11 +186,14 @@ Rows are identified by row._id, columns by col.id
/** Save a change */
submitRowChange (row) {
let wasDirty = this.isRowChanged(row)
this.query({
action: 'row.update',
data: row
}, (resp) => {
this.$set(this.rows, row._id, resp.data)
if (wasDirty) this.dirtyRows--
}, (er) => {
if (!_.isUndefined(er.errors)) {
this.$set(this.rows[row._id], '_errors', er.errors)
@ -122,9 +204,9 @@ Rows are identified by row._id, columns by col.id
/** Toggle editing state - edit or save */
toggleRowEditing (_id) {
if (this.rows[_id]._remove) return false // can't edit row marked for removal
let editing = !this.rows[_id]._editing
let wasEditing = this.rows[_id]._editing
if (!editing) {
if (wasEditing || this.newRows) {
this.submitRowChange(this.rows[_id])
} else {
this.$set(this.rows[_id], '_editing', true)
@ -155,9 +237,55 @@ Rows are identified by row._id, columns by col.id
return row._changed && row._changed.indexOf(colId) > -1
},
/** Test if any field in the row is changed */
isRowChanged(row) {
return row._changed && row._changed.length
},
/** Revert a value cell */
revertCell (row, colId) {
this.submitRowChange(_.merge({}, row, {[colId]: row._orig[colId]}))
},
markRowDirty(row) {
if (!this.newRows) return
let wasDirty = this.isRowChanged(row)
let changes = []
_.each(row._orig, (v, k) => {
if (row[k] != v) {
changes.push(k)
}
})
this.rows[row._id]._changed = changes;
let isDirty = this.isRowChanged(row)
if (wasDirty && !isDirty) this.dirtyRows--
else if (!wasDirty && isDirty) this.dirtyRows++
},
saveAllChanges() {
let toChange = _.filter(this.rows, (r) => {
return this.isRowChanged(r)
})
this.query({
action: 'row.update-many',
data: toChange
}, (resp) => {
_.each(resp.data, (row) => {
this.$set(this.rows, row._id, row)
})
this.dirtyRows = 0
}, (er) => {
// TODO
console.log(er)
// if (!_.isUndefined(er.errors)) {
// this.$set(this.rows[row._id], '_errors', er.errors)
// }
})
}
}
}

@ -6,6 +6,7 @@ export { default as merge } from 'lodash/merge'
export { default as unset } from 'lodash/unset'
export { default as isEmpty } from 'lodash/isEmpty'
export { default as debounce } from 'lodash/debounce'
export { default as filter } from 'lodash/filter'
function isDefined (x) {
return typeof x !== 'undefined'

@ -10,12 +10,12 @@ const Icon = Vue.component('v-icon', require('./components/Icon.vue'))
window.app = {
ColumnEditor: function (selector, data) {
new ColumnEditor({ propsData: data }).$mount(selector)
return new ColumnEditor({ propsData: data }).$mount(selector)
},
RowsEditor: function (selector, data) {
new RowsEditor({ propsData: data }).$mount(selector)
return new RowsEditor({ propsData: data }).$mount(selector)
},
Icon: function (selector, data) {
new Icon({ propsData: data }).$mount(selector)
return new Icon({ propsData: data }).$mount(selector)
}
}

@ -34,3 +34,16 @@
.fa-huge {
font-size: 2em;
}
.fa-spin::before {
animation: fa-spin 2s infinite linear;
}
@keyframes fa-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

@ -0,0 +1,7 @@
.nav-tabs .nav-link.highlight {
border-color: $nav-tabs-link-hover-border-color;
&:hover, &:focus {
border-color: $nav-tabs-link-hover-border-color;
}
}

@ -18,7 +18,7 @@
<h1 class="mx-3">{{ $table->title }}</h1>
<a href="{{ $table->viewRoute }}" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Back to Table)>
@icon(fa-table, sr:Back to Table)
@icon(fa-reply, sr:Back to Table)
</a>
</div>
</div>

@ -0,0 +1,27 @@
@php
$tab = 'add-rows';
/** @var \App\Tables\Column[] $columns */
/** @var \App\Tables\Changeset $changeset */
/** @var \App\Models\Row[]|Illuminate\Pagination\Paginator $rows */
/** @var \App\Models\Table $table */
@endphp
@extends('table.propose.layout')
@section('tab-content')
<div class="form-inline py-2 px-1">
<form action="{{$table->draftUpdateRoute}}" method="POST" class="form-inline">
@csrf
<input type="hidden" name="action" value="rows.add-csv">
<input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
<label class="pr-2" for="csv-data">Add CSV:</label>
<textarea name="data" id="csv-data"
title="{{$errors->has('data') ? $errors->first('data') : ''}}"
class="form-control mr-1 {{ $errors->has('data')?'is-invalid':'' }}"
style="width:30em; height:10em">{{old('data')}}</textarea>
<button class="btn btn-outline-success">Append</button>
</form>
</div>
@stop
@push('scripts')
@endpush

@ -7,45 +7,36 @@
@endphp
@extends('table.propose.layout-row-pagination')
@section('header')
<div class="form-inline py-2 px-1 border-bottom mb-3">
{{-- TODO improve layout --}}
<form action="{{$table->draftUpdateRoute}}" method="POST" class="form-inline">
@csrf
<input type="hidden" name="action" value="rows.add-csv">
<input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
<label class="pr-2" for="csv-data">Add CSV:</label>
<textarea name="data" id="csv-data"
title="{{$errors->has('data') ? $errors->first('data') : ''}}"
class="form-control mr-1 {{ $errors->has('data')?'is-invalid':'' }}"
style="width:30em; height:10em">{{old('data')}}</textarea>
<button class="btn btn-outline-success">Append</button>
</form>
<div class="flex-grow-1"></div>
<form action="{{$table->draftUpdateRoute}}" method="POST">
@csrf
<input type="hidden" name="action" value="rows.add">
<input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
<label class="form-inline pr-2" for="newrow-count">Add Empty Rows:</label>
<input name="count" id="newrow-count" type="number" min=1 step=1 value=1 class="form-control mr-1" style="width:10em">
<button class="btn btn-outline-success">Add</button>
</form>
</div>
@stop
@section('rows')
<div id="rows-editor"></div>
@stop
@push('scripts')
@php
$xrows = $rows->map(function($r) {
$r['_orig'] = $r;
return $r;
})->keyBy('_id');
@endphp
<script>
ready(function() {
app.RowsEditor('#rows-editor', {
var rows_editor = app.RowsEditor('#rows-editor', {
hasPages: @json($rows->hasPages()),
pager:
'<nav class="text-center" aria-label="Table pages">' +
@json((string)$rows->links(null, ['ulClass' => 'mb-0'])) +
'</nav>',
route: {!! toJSON($table->draftUpdateRoute) !!},
columns: {!! toJSON($columns) !!},
xRows: {!! toJSON($rows->keyBy('_id'), true) !!},
xRows: {!! toJSON($xrows, true) !!},
newRows: true, // indicate all are new
pageUrl: @json(request()->fullUrl()),
csrf: @json(csrf_token()),
})
$('#save-all-rows').on('click', function () {
rows_editor.saveAllChanges()
})
});
</script>

@ -23,6 +23,11 @@
<script>
ready(function() {
app.RowsEditor('#rows-editor', {
hasPages: @json($rows->hasPages()),
pager:
'<nav class="text-center" aria-label="Table pages">' +
@json((string)$rows->links(null, ['ulClass' => 'mb-0'])) +
'</nav>',
route: {!! toJSON($table->draftUpdateRoute) !!},
columns: {!! toJSON($columns) !!},
xRows: {!! toJSON($transformed, true) !!},

@ -9,23 +9,5 @@
@yield('header')
</div>
@if($rows->hasPages())
<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>
@endif
<div class="col-12">
@yield('rows')
</div>
@if($rows->hasPages())
<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>
@endif
@stop

@ -20,36 +20,45 @@ if (!isset($tab) || $tab == '') $tab = 'edit-rows';
<h1 class="mx-3">
<a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->title }}</a>
</h1>
<a href="{{$table->draftDiscardRoute}}" class="btn btn-outline-danger mr-2" @tooltip(Discard changes)>
@icon(fa-trash-o, sr:Discard)
<a href="{{$table->draftDiscardRoute}}" class="btn btn-outline-danger mr-2 py-1 btn-sm">
@icon(fa-trash-o fa-pr, sr:Discard){{--
--}}Discard
</a>
@if(user()->ownsTable($table))
<a href="" class="btn btn-outline-success" @tooltip(Save the changes and apply them as a new table revision)>
@icon(fa-save fa-pr)Commit
</a>
@else
<a href="" class="btn btn-outline-success" @tooltip(Submit your changes for review by the table owner)>
@icon(fa-save fa-pr)Submit
<a href="{{ $table->viewRoute }}" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Back to Table)>
@icon(fa-reply, sr:Back to Table)
</a>
@endif
</div>
</div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link{{ $tab=='edit-rows'?' active':'' }}" href="{{ $table->getDraftRoute('edit-rows') }}">Edit Rows</a>
<a class="nav-link {{ $tab=='edit-rows' ? 'active' : '' }}" href="{{ $table->getDraftRoute('edit-rows') }}">
Edit Rows
</a>
</li>
<li class="nav-item">
<a class="nav-link{{ $tab=='add-rows'?' active':'' }}" href="{{ $table->getDraftRoute('add-rows') }}">Add Rows</a>
<a class="nav-link {{ $tab=='add-rows' ? 'active' : '' }}" href="{{ $table->getDraftRoute('add-rows') }}">
Add Rows
</a>
</li>
<li class="nav-item">
<a class="nav-link{{ $tab=='manage-columns'?' active':'' }}" href="{{ $table->getDraftRoute('manage-columns') }}">Columns</a>
<a class="nav-link {{ $tab=='manage-columns' ? 'active' : '' }}" href="{{ $table->getDraftRoute('manage-columns') }}">
Change Columns
</a>
</li>
<li class="nav-item">
<a class="nav-link{{ $tab=='review'?' active':'' }}" href="{{ $table->getDraftRoute('review') }}">Note & Review</a>
<a class="text-success nav-link {{ $tab=='review' ? 'active' : '' }}" href="{{ $table->getDraftRoute('review') }}">
@if(user()->ownsTable($table))
@icon(fa-save fa-pr){{--
--}}Review & Apply
@else
@icon(fa-paper-plane-o fa-pr){{--
--}}Review & Submit
@endif
</a>
</li>
<li class="nav-item ml-auto pt-2 pr-2 opacity-fade" style="opacity:0" id="draft-busy">
@icon(fa-hourglass, Working...)
<li class="nav-item pt-2 pr-2 opacity-fade ml-auto" style="opacity:0" id="draft-busy">
@icon(fa-spinner fa-spin, Working...)
</li>
</ul>

@ -2,5 +2,13 @@
@extends('table.propose.layout')
@section('tab-content')
...
@if(user()->ownsTable($table))
<a href="" class="btn btn-outline-success" @tooltip(Save the changes and apply them as a new table revision)>
@icon(fa-save fa-pr)Commit
</a>
@else
<a href="" class="btn btn-outline-success" @tooltip(Submit your changes for review by the table owner)>
@icon(fa-save fa-pr)Submit
</a>
@endif
@stop

Loading…
Cancel
Save