diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 59 |
1 files changed, 42 insertions, 17 deletions
@@ -10,14 +10,21 @@ <link rel="stylesheet" href="{{ site.baseurl }}/assets/style.css"> <title>Tabler Icons</title> + + <style> + body { + display: none; + } + </style> </head> <body> <div class="container"> <div class="box"> - {% assign last-icon = site.icons | sort: date | reverse | first %} - {% capture last-icon %} - {% include icon.html name=last-icon.slug %} + {% assign first-icon = site.icons | reverse | first %} + {% assign slug = first-icon.slug %} + {% capture first-icon %} + {% include icon.html name=slug %} {% endcapture %} <div class="row mb js-icon-manager"> @@ -25,47 +32,49 @@ <div class="icon-preview-wrap"> <div class="icon-preview"> - {{ last-icon }} + {{ first-icon }} </div> </div> </div> <div class="col-aside"> + <h1 class="icon-title js-icon-name">{{ slug }}</h1> + <div class="mb"> <button class="btn"> - {{ last-icon }} Button + {{ first-icon }} Button </button> <button class="btn btn-icon"> - {{ last-icon }} + {{ first-icon }} </button> <button class="btn btn-link"> - {{ last-icon }} Button + {{ first-icon }} Button </button> </div> <div class="input-icon mb"> <input type="text" class="input" value="Input value"> - {{ last-icon }} + {{ first-icon }} </div> <div class="input-icon icon-left mb"> - {{ last-icon }} + {{ first-icon }} <input type="text" class="input" placeholder="Input placeholder"> </div> <div class="mb"> - <div class="avatar">{{ last-icon }}</div> - <div class="avatar avatar-sm">{{ last-icon }}</div> + <div class="avatar">{{ first-icon }}</div> + <div class="avatar avatar-sm">{{ first-icon }}</div> </div> <div class="tabs mb"> - <a class="tab active">{{ last-icon }} Tab 1</a> + <a class="tab active">{{ first-icon }} Tab 1</a> <a class="tab">Tab 2</a> <a class="tab">Tab 3</a> </div> <div class="mb"> - <a href="#">{{ last-icon }} Link</a> + <a href="#">{{ first-icon }} Link</a> </div> </div> </div> @@ -74,8 +83,8 @@ <div> <div class="icons-list"> {% for icon in site.icons %} - <a href="#" class="icons-list-icon js-icon" title="{{ icon.slug }}"> - {% assign name = icon.slug %} + {% assign name = icon.slug %} + <a href="#" class="icons-list-icon js-icon" title="{{ icon.slug }}" data-icon="{{ name }}"> {% include icon.html name=name %} </a> {% endfor %} @@ -86,10 +95,26 @@ <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script> - $(document).ready(function(){ - $('body').on('click', '.js-icon', function(){ + + $(document).ready(function () { + $('body').on('click', '.js-icon', function (e) { + var icon = $(this).attr('data-icon'); + + $('.js-icon-name').html(icon); + localStorage.setItem('icon', icon); + $('.js-icon-manager svg').replaceWith($(this).find('>svg:eq(0)').clone()); + + e.preventDefault(); + return false; }); + + var icon = localStorage.getItem('icon'); + if (icon) { + $('.js-icon[data-icon="' + icon + '"]').click(); + } + + document.body.style.display = "block" }); </script> </body> |