mirror of
https://github.com/ryanoasis/nerd-fonts.git
synced 2025-01-31 12:27:22 +02:00
Reworks cheat sheet page to function better
This commit is contained in:
Ryan L McIntyre
parent
fb920fc0fd
commit
f406ae3bf8
@ -213,19 +213,19 @@
|
||||
input[type="email"],
|
||||
textarea,
|
||||
select {
|
||||
border: 1px solid #ccc;
|
||||
// border: 1px solid #ccc;
|
||||
padding: 6px 4px;
|
||||
outline: none;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #777;
|
||||
// -moz-border-radius: 2px;
|
||||
// -webkit-border-radius: 2px;
|
||||
// border-radius: 2px;
|
||||
// font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
// color: #777;
|
||||
margin: 0;
|
||||
width: 210px;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
// margin-bottom: 20px;
|
||||
background: #fff; }
|
||||
select {
|
||||
padding: 0; }
|
||||
@ -233,8 +233,8 @@
|
||||
input[type="password"]:focus,
|
||||
input[type="email"]:focus,
|
||||
textarea:focus {
|
||||
border: 1px solid #aaa;
|
||||
color: #444;
|
||||
// border: 1px solid #aaa;
|
||||
// color: #444;
|
||||
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
|
||||
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
|
||||
box-shadow: 0 0 3px rgba(0,0,0,.2); }
|
||||
|
||||
@ -107,7 +107,6 @@ hr {
|
||||
display:-moz-inline-stack;
|
||||
display:inline-block;
|
||||
zoom:1;
|
||||
*display:inline;
|
||||
}
|
||||
|
||||
/* ---------------------------*/
|
||||
|
||||
@ -7,7 +7,49 @@ p {
|
||||
margin: 0px;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
padding: 8px 18px;
|
||||
padding: 8px 18px;
|
||||
}
|
||||
|
||||
input.nerd-font-input {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 0pt auto;
|
||||
}
|
||||
|
||||
.nerd-font-button, .nerd-font-input {
|
||||
cursor: pointer;
|
||||
border-width: 2px;
|
||||
font-size: 21px;
|
||||
border-style: solid;
|
||||
border-color: #f8f8f8;
|
||||
color: #f8f8f8;
|
||||
&input {
|
||||
cursor: inherit;
|
||||
border-radius: unset;
|
||||
}
|
||||
&.primary {
|
||||
background: #1E5D8A;
|
||||
}
|
||||
&.secondary {
|
||||
background: #BA45AE;
|
||||
}
|
||||
&.tertiary {
|
||||
background: #565346;
|
||||
border-color: #0fbfcf;
|
||||
color: #0fbfcf;
|
||||
}
|
||||
&.tertiary--inverse {
|
||||
background: #0fbfcf;
|
||||
border-color: #565346;
|
||||
color: #565346;
|
||||
}
|
||||
&.download {
|
||||
background: #0C640C;
|
||||
}
|
||||
}
|
||||
|
||||
#main .nerd-font-button a {
|
||||
@ -55,10 +97,9 @@ a.nerd-font-button:before {
|
||||
line-height: 4em;
|
||||
}
|
||||
|
||||
#main .nerd-font-cheat-sheet-search {
|
||||
#main input.nerd-font-cheat-sheet-search {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
font-size: 1.25em;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
@ -71,6 +112,7 @@ a.nerd-font-button:before {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
#glyphCheatSheet .column {
|
||||
@ -260,6 +302,7 @@ a.nerd-font-button:before {
|
||||
|
||||
.nerd-fonts-example-usage {
|
||||
font-size: 2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Release Changelog section */
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: "Cheat Sheet"
|
||||
short_title: "Icons"
|
||||
bg: gray
|
||||
color: white
|
||||
color: "#0fbfcf"
|
||||
fa-icon: search
|
||||
page: cheat-sheet
|
||||
style: container
|
||||
@ -10,7 +10,17 @@ style: container
|
||||
|
||||
<h1 class="center">Cheat Sheet</h1>
|
||||
|
||||
<input type="text" id="glyphSearch" placeholder="Search for glyphs/icons..." title="Type in a glyph name or hex codepoint" class="nerd-font-cheat-sheet-search" />
|
||||
<input type="text" id="glyphSearch" placeholder="Search for glyphs/icons..." title="Type in a glyph name or hex codepoint" class="nerd-font-cheat-sheet-search nerd-font-input tertiary sanity-test" />
|
||||
|
||||
<div class="center">
|
||||
<h5 class="inlineblock nerd-font-button tertiary" id="glyphSearchButton">
|
||||
<i class="nf nf-fa-search"></i> Search
|
||||
</h5>
|
||||
|
||||
<h5 class="inlineblock nerd-font-button tertiary" id="glyphSearchAllButton">
|
||||
<i class="nf nf-mdi-select_all"></i> Show All Icons
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div id="glyphCheatSheet" class="nerd-font-cheat-sheet">
|
||||
<div class="column">
|
||||
@ -15255,13 +15265,16 @@ style: container
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Example Usage
|
||||
<h3>Example Usages</h3>
|
||||
|
||||
<h4>CSS</h4>
|
||||
|
||||
<div class="center">
|
||||
{% highlight html %}
|
||||
I really <i class="nf nf-fa-heart"></i> <i class="nf nf-custom-vim"></i>
|
||||
I really <i class="nf nf-fa-heart"></i> <i class="nf nf-custom-vim"></i>
|
||||
{% endhighlight %}
|
||||
<span class="nerd-fonts-example-usage">
|
||||
I really <i class="nf nf-fa-heart ow"></i> <i class="nf nf-custom-vim nfunc"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
35
site.js
35
site.js
@ -1,6 +1,8 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
const elementGlyphSearch = document.getElementById('glyphSearch');
|
||||
const elementGlyphSearchButton = document.getElementById('glyphSearchButton');
|
||||
const elementGlyphSearchAllButton = document.getElementById('glyphSearchAllButton');
|
||||
const elementGlyphCheatSheet = document.getElementById('glyphCheatSheet');
|
||||
|
||||
// nice scrolling
|
||||
@ -95,7 +97,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
scroll();
|
||||
}
|
||||
|
||||
// extremely basic search
|
||||
// search via typing in input (debounced)
|
||||
elementGlyphSearch && elementGlyphSearch.addEventListener(
|
||||
'keyup',
|
||||
debounce(function (e) {
|
||||
@ -108,6 +110,32 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}, 500)
|
||||
);
|
||||
|
||||
// search via search button
|
||||
elementGlyphSearchButton && elementGlyphSearchButton.addEventListener(
|
||||
'click',
|
||||
() => {
|
||||
gtag('event', 'search-via-button', {
|
||||
event_category: 'glyph-search',
|
||||
event_label: 'Cheat Sheet : ' + (e.target && e.target.value),
|
||||
value: e.target && e.target.value
|
||||
});
|
||||
searchGlyphs();
|
||||
}
|
||||
)
|
||||
|
||||
// search all via search all button
|
||||
elementGlyphSearchAllButton && elementGlyphSearchAllButton.addEventListener(
|
||||
'click',
|
||||
() => {
|
||||
gtag('event', 'search-all-via-button', {
|
||||
event_category: 'glyph-search',
|
||||
event_label: 'Cheat Sheet : all',
|
||||
value: 'all'
|
||||
});
|
||||
searchAllGlyphs();
|
||||
}
|
||||
);
|
||||
|
||||
// Credit David Walsh (https://davidwalsh.name/javascript-debounce-function)
|
||||
// Returns a function, that, as long as it continues to be invoked, will not
|
||||
// be triggered. The function will be called after it stops being called for
|
||||
@ -135,6 +163,11 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
};
|
||||
}
|
||||
|
||||
function searchAllGlyphs() {
|
||||
elementGlyphSearch.value = '';
|
||||
searchGlyphs();
|
||||
}
|
||||
|
||||
function searchGlyphs() {
|
||||
var filter = elementGlyphSearch.value.toLowerCase();
|
||||
var i = 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user