New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sort alphabetically #726

Merged
merged 5 commits into from Dec 23, 2017

Conversation

3 participants
@ericcornelissen
Copy link
Contributor

ericcornelissen commented Dec 21, 2017

Related to #708, implemented an alphatical sorting function as suggested by @rosslh, for a quick example see the image ⬇️.

You can click either of the buttons to select the respective sorting mode (couldn't really find a fitting icon for sorting based on the color...). Currently the buttons do not work consistent with the search feature, I want to know some opinions before I get started on that 😄

image

image

ericcornelissen added some commits Dec 21, 2017

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 Outdated
@@ -491,14 +509,17 @@
<div class="search__close"><span>&times;</span></div>
<input type="text" placeholder="Search by brand …" title="Search not available when JavaScript is disabled" disabled />
</div>

<svg id="test-color" class="sort-btn active" aria-labelledby="sort-color" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-color">Sort colors</title><path d="M12.22 10.286h6c.125 0 .228-.04.308-.12a.416.416 0 0 0 .121-.308V7.286a.416.416 0 0 0-.121-.308.417.417 0 0 0-.308-.12h-6a.417.417 0 0 0-.308.12.42.42 0 0 0-.12.308v2.572c0 .125.04.228.12.308.08.08.183.12.308.12zM12.22 3.428h3.429c.125 0 .229-.04.308-.12a.414.414 0 0 0 .12-.308V.429A.414.414 0 0 0 15.648 0H12.22a.418.418 0 0 0-.308.121.42.42 0 0 0-.121.308V3c0 .125.04.228.121.308.08.08.183.12.308.12zM9.22 18.856H6.648V.429a.417.417 0 0 0-.12-.308A.418.418 0 0 0 6.22 0H3.648a.416.416 0 0 0-.428.428v18.428H.648a.398.398 0 0 0-.402.269c-.071.169-.04.326.094.469l4.285 4.285a.482.482 0 0 0 .309.121c.116 0 .219-.04.309-.121l4.271-4.271a.5.5 0 0 0 .134-.321.424.424 0 0 0-.12-.31.418.418 0 0 0-.308-.121zM23.671 20.692a.421.421 0 0 0-.308-.121H12.22c-.125 0-.228.041-.308.121s-.12.183-.12.308v2.571a.413.413 0 0 0 .428.429h11.144a.412.412 0 0 0 .428-.429V21a.414.414 0 0 0-.121-.308zM12.22 17.144h8.571a.422.422 0 0 0 .309-.121.422.422 0 0 0 .121-.309v-2.571a.418.418 0 0 0-.121-.308.421.421 0 0 0-.309-.12H12.22a.417.417 0 0 0-.308.12.417.417 0 0 0-.12.308v2.571c0 .125.04.229.12.309.08.08.183.121.308.121z"/></g></svg>

This comment has been minimized.

@davidklebanoff

davidklebanoff Dec 21, 2017

Member

test-color and test-alphabetically?

This comment has been minimized.

@ericcornelissen

ericcornelissen Dec 22, 2017

Author Contributor

Placeholder IDs, forgot about them 😅

index.html Outdated
@@ -491,14 +509,17 @@
<div class="search__close"><span>&times;</span></div>
<input type="text" placeholder="Search by brand …" title="Search not available when JavaScript is disabled" disabled />
</div>

<svg id="test-color" class="sort-btn active" aria-labelledby="sort-color" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-color">Sort colors</title><path d="M12.22 10.286h6c.125 0 .228-.04.308-.12a.416.416 0 0 0 .121-.308V7.286a.416.416 0 0 0-.121-.308.417.417 0 0 0-.308-.12h-6a.417.417 0 0 0-.308.12.42.42 0 0 0-.12.308v2.572c0 .125.04.228.12.308.08.08.183.12.308.12zM12.22 3.428h3.429c.125 0 .229-.04.308-.12a.414.414 0 0 0 .12-.308V.429A.414.414 0 0 0 15.648 0H12.22a.418.418 0 0 0-.308.121.42.42 0 0 0-.121.308V3c0 .125.04.228.121.308.08.08.183.12.308.12zM9.22 18.856H6.648V.429a.417.417 0 0 0-.12-.308A.418.418 0 0 0 6.22 0H3.648a.416.416 0 0 0-.428.428v18.428H.648a.398.398 0 0 0-.402.269c-.071.169-.04.326.094.469l4.285 4.285a.482.482 0 0 0 .309.121c.116 0 .219-.04.309-.121l4.271-4.271a.5.5 0 0 0 .134-.321.424.424 0 0 0-.12-.31.418.418 0 0 0-.308-.121zM23.671 20.692a.421.421 0 0 0-.308-.121H12.22c-.125 0-.228.041-.308.121s-.12.183-.12.308v2.571a.413.413 0 0 0 .428.429h11.144a.412.412 0 0 0 .428-.429V21a.414.414 0 0 0-.121-.308zM12.22 17.144h8.571a.422.422 0 0 0 .309-.121.422.422 0 0 0 .121-.309v-2.571a.418.418 0 0 0-.121-.308.421.421 0 0 0-.309-.12H12.22a.417.417 0 0 0-.308.12.417.417 0 0 0-.12.308v2.571c0 .125.04.229.12.309.08.08.183.121.308.121z"/></g></svg>

This comment has been minimized.

@davidklebanoff

davidklebanoff Dec 21, 2017

Member

What if, for the sort by color icon, we add a different color to each block in the sorted pyramid. So, for example, each block in the icon has a color associated with in a sorted order. Something like purple, red, orange, and yellow. This would make it more clear what that sort does.

This comment has been minimized.

@davidklebanoff

davidklebanoff Dec 21, 2017

Member

A crude example to convey what I mean. We would want to pick better colors:

color_sort

ericcornelissen added some commits Dec 22, 2017

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.
@ericcornelissen

This comment has been minimized.

Copy link
Contributor Author

ericcornelissen commented Dec 22, 2017

I played around a bit with the sort on color button to get to something I liked @davidklebanoff. This is what I ended up with ⬇️ Let me know what you think.

preview

index.html Outdated
@@ -491,14 +531,17 @@
<div class="search__close"><span>&times;</span></div>
<input type="text" placeholder="Search by brand …" title="Search not available when JavaScript is disabled" disabled />
</div>

<svg id="sort-color" class="sort-btn active" aria-labelledby="sort-color" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-color">Sort on colors</title><path d="M9.219 18.857H6.648V.429A.414.414 0 0 0 6.219 0H3.648a.418.418 0 0 0-.308.121.418.418 0 0 0-.121.308v18.428H.648a.4.4 0 0 0-.402.268c-.071.17-.04.326.094.469l4.286 4.287c.098.08.2.119.308.119a.447.447 0 0 0 .308-.119l4.272-4.273a.506.506 0 0 0 .134-.32.417.417 0 0 0-.429-.431z"/><path d="M12.219 3.429h3.429A.412.412 0 0 0 16.076 3V.429A.416.416 0 0 0 15.648 0h-3.429a.414.414 0 0 0-.429.429V3a.414.414 0 0 0 .429.429z"/><path d="M12.219 10.286h6a.42.42 0 0 0 .309-.12.42.42 0 0 0 .121-.308V7.286a.418.418 0 0 0-.121-.308.417.417 0 0 0-.309-.121h-6a.414.414 0 0 0-.308.121.417.417 0 0 0-.12.308v2.572c0 .125.04.228.12.308a.42.42 0 0 0 .308.12z"/><path d="M12.219 17.143h8.572c.125 0 .229-.039.309-.119s.119-.184.119-.309v-2.572c0-.125-.039-.227-.119-.307s-.184-.121-.309-.121h-8.572a.418.418 0 0 0-.308.121.415.415 0 0 0-.12.307v2.572c0 .125.04.229.12.309.081.08.183.119.308.119z"/><path d="M23.67 20.693a.408.408 0 0 0-.307-.121H12.219a.416.416 0 0 0-.429.428v2.572c0 .125.04.227.121.309a.42.42 0 0 0 .308.119h11.144a.414.414 0 0 0 .307-.119.424.424 0 0 0 .121-.309V21a.416.416 0 0 0-.121-.307z"/></svg>

This comment has been minimized.

@davidklebanoff

davidklebanoff Dec 22, 2017

Member

I'd change the title to "Sort color", just so it's consistent with "Sort Alphabetically".

This comment has been minimized.

@birjolaxew

birjolaxew Dec 22, 2017

Member

Or "Sort by color", which is more used (and grammatically correct?).

This comment has been minimized.

@ericcornelissen

ericcornelissen Dec 23, 2017

Author Contributor

You're right, my bad 😅

@davidklebanoff

This comment has been minimized.

Copy link
Member

davidklebanoff commented Dec 23, 2017

@ericcornelissen That looks awesome!

@birjolaxew birjolaxew merged commit 5effe9f into simple-icons:develop Dec 23, 2017

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@birjolaxew

This comment has been minimized.

Copy link
Member

birjolaxew commented Dec 23, 2017

👍 Merging this since all comments seem to have been resolved. Nice work @ericcornelissen !

@birjolaxew birjolaxew referenced this pull request Dec 23, 2017

Merged

Publish changes #728

@ericcornelissen ericcornelissen deleted the ericcornelissen:sort-alphabetically branch Dec 23, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment