From 98cf145270881567805b17652527a3c3bde2ac53 Mon Sep 17 00:00:00 2001 From: Eric Cornelissen Date: Thu, 21 Dec 2017 22:32:01 +0100 Subject: [PATCH 1/5] Order icons alphabetically --- index.html | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index fda092f5..0ccc1be6 100644 --- a/index.html +++ b/index.html @@ -36,11 +36,13 @@ {% endcase %} {% unless forloop.last %}{% assign rgbString = rgbString | append: "," %}{% endunless %} {% endfor %} + {% assign rgbArray = rgbString | split: "," %} {% assign rgbRed = rgbArray[0] | times: 16 | plus: rgbArray[1] | divided_by: 255.0 | round: 2 %} {% assign rgbGreen = rgbArray[2] | times: 16 | plus: rgbArray[3] | divided_by: 255.0 | round: 2 %} {% assign rgbBlue = rgbArray[4] | times: 16 | plus: rgbArray[5] | divided_by: 255.0 | round: 2 %} {% assign rgbMax = 0.0 %} + {% if rgbRed > rgbMax %} {% assign rgbMax = rgbRed %} {% endif %} @@ -105,18 +107,17 @@ {% endif %} {% assign hslHue = hslHue | plus: 90.0 | modulo: 360.0 %} {% endif %} + {% if hslSaturation < 10 %} {% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %} - {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %} + {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% else %} {% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %} - {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %} + {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% endif %} {% endfor %} -{% assign iconsArray = iconsUnsortedString | split: ";" %} -{% assign iconsArray = iconsArray | sort %} -{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" %} -{% assign greyscaleIconsArray = greyscaleIconsArray | sort | reverse %} +{% assign iconsArray = iconsUnsortedString | split: ";" | sort %} +{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" | sort | reverse %} @@ -498,24 +499,24 @@ {% for icon in iconsArray %} {% assign iconArray = icon | split: "," %} -
  • +
  • {% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %} {% include_relative {{ filePath }} %}

    {{ iconArray[5] }}

     -

    #{{ iconArray[4] }}

    +

    #{{ iconArray[4] }} - {{ iconArray[7] }}

    • {% endfor %} {% for icon in greyscaleIconsArray %} {% assign iconArray = icon | split: "," %} -
  • +
  • {% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %} {% include_relative {{ filePath }} %}

    {{ iconArray[5] }}

     -

    #{{ iconArray[4] }}

    +

    #{{ iconArray[4] }} - {{ iconArray[7] }}

    • {% endfor %} From 75bd74ff6cbf51e13396540e38ff1e003cdf2021 Mon Sep 17 00:00:00 2001 From: Eric Cornelissen Date: Thu, 21 Dec 2017 22:54:11 +0100 Subject: [PATCH 2/5] Add buttons to sort either on color or alphabet As suggested by @rosslh, add buttons to choose how you want to sort the icons. --- index.html | 45 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 0ccc1be6..3f77232d 100644 --- a/index.html +++ b/index.html @@ -276,6 +276,8 @@ } .search { + display: flex; + align-items: center; margin: 1rem 1.5rem; text-align: center; } @@ -320,6 +322,21 @@ padding-right: 32px; } + .sort-btn { + cursor: pointer; + margin-left: .5rem; + opacity: .5; + } + .sort-btn.active { + opacity: 1; + } + .sort-btn:hover { + opacity: .8; + } + .sort-btn:first-of-type { + margin-left: 1rem; + } + .grid { display: flex; flex-wrap: wrap; @@ -492,6 +509,9 @@
    ×
    + + Sort colors + Sort alphabetically @@ -543,7 +563,9 @@ $icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'), $search = document.querySelector('.search'), $searchClose = $search.querySelector('.search__close'), - $searchInput = $search.querySelector('input'); + $searchInput = $search.querySelector('input'), + $sortColor = document.getElementById('test-color'), + $sortAlpha = document.getElementById('test-alphabetically'); // Remove the "disabled" attribute from the search input $searchInput.setAttribute('title', 'Search Simple Icons'); @@ -681,6 +703,19 @@ window.history.replaceState(null, '', '/'); search(''); }, false); + + $sortColor.addEventListener('click', function() { + $icons.forEach(icon => { icon.style.order = null; }); + + $sortColor.classList.add('active'); + $sortAlpha.classList.remove('active'); + }); + $sortAlpha.addEventListener('click', function() { + $icons.forEach(icon => { icon.style.order = icon.getAttribute('order'); }); + + $sortAlpha.classList.add('active'); + $sortColor.classList.remove('active'); + }); })( document ); From 5cb1ffdef07bd147e4a9e8a3b18a70c517384949 Mon Sep 17 00:00:00 2001 From: Eric Cornelissen Date: Fri, 22 Dec 2017 22:53:02 +0100 Subject: [PATCH 3/5] Remove "temp-" ID prefixes --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 3f77232d..ed45712c 100644 --- a/index.html +++ b/index.html @@ -510,8 +510,8 @@ - Sort colors - Sort alphabetically + Sort on colors + Sort alphabetically
    • @@ -564,8 +564,8 @@ $search = document.querySelector('.search'), $searchClose = $search.querySelector('.search__close'), $searchInput = $search.querySelector('input'), - $sortColor = document.getElementById('test-color'), - $sortAlpha = document.getElementById('test-alphabetically'); + $sortColor = document.getElementById('sort-color'), + $sortAlpha = document.getElementById('sort-alphabetically'); // Remove the "disabled" attribute from the search input $searchInput.setAttribute('title', 'Search Simple Icons'); From 31dbee22bf6a85ff6122597673d8277888c070b6 Mon Sep 17 00:00:00 2001 From: Eric Cornelissen Date: Fri, 22 Dec 2017 23:20:01 +0100 Subject: [PATCH 4/5] Update hover animation for sort buttons The sort button for colors now shows a range of reds when hovered, whereas the sort button for alphabetic sorting just highlights the letters when hovered. --- index.html | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index ed45712c..3777ab60 100644 --- a/index.html +++ b/index.html @@ -330,13 +330,35 @@ .sort-btn.active { opacity: 1; } - .sort-btn:hover { - opacity: .8; - } .sort-btn:first-of-type { margin-left: 1rem; } + .sort-btn:hover { + opacity: 1; + } + .sort-btn:hover path:first-of-type { + opacity: 0.8; + } + + #sort-color:hover path:nth-of-type(2) { + fill: #E57373; + } + #sort-color:hover path:nth-of-type(3) { + fill: #F44336; + } + #sort-color:hover path:nth-of-type(4) { + fill: #D32F2F; + } + #sort-color:hover path:nth-of-type(5) { + fill: #B71C1C; + } + + #sort-alphabetically:hover path:nth-of-type(2), + #sort-alphabetically:hover path:nth-of-type(3) { + opacity: 1; + } + .grid { display: flex; flex-wrap: wrap; @@ -510,8 +532,8 @@ - Sort on colors - Sort alphabetically + Sort on colors + Sort alphabetically
      • From 23e3aab6ca81ca84c11c9cb2b0114ad0c9d0c989 Mon Sep 17 00:00:00 2001 From: Eric Cornelissen Date: Sat, 23 Dec 2017 10:44:29 +0100 Subject: [PATCH 5/5] Change "Sort on colors" to "Sort by color" --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 3777ab60..f5cf9e6e 100644 --- a/index.html +++ b/index.html @@ -532,7 +532,7 @@ - Sort on colors + Sort by color Sort alphabetically