Skip to content
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
Merged

Conversation

@ericcornelissen
Copy link
Member

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

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
Contributor

test-color and test-alphabetically?

This comment has been minimized.

@ericcornelissen

ericcornelissen Dec 22, 2017
Author Member

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
Contributor

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
Contributor

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

color_sort

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
Copy link
Member Author

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

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
Contributor

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

This comment has been minimized.

@ericcornelissen

ericcornelissen Dec 23, 2017
Author Member

You're right, my bad 😅

@davidklebanoff
Copy link
Contributor

@davidklebanoff davidklebanoff commented Dec 23, 2017

@ericcornelissen That looks awesome!

@birjolaxew birjolaxew merged commit 5effe9f into simple-icons:develop Dec 23, 2017
1 check passed
1 check passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@birjolaxew
Copy link
Contributor

@birjolaxew birjolaxew commented Dec 23, 2017

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

@birjolaxew birjolaxew mentioned this pull request Dec 23, 2017
@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
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants