Slimmmo / Slimmmo.github.io

AdVenture Capitalist calculator
http://slimmmo.github.io/
35 stars 42 forks source link

Multiple glyphs show in sortable column headers. #110

Closed NicholasRBowers closed 7 years ago

NicholasRBowers commented 7 years ago

When clicking on the sortable column headers in the recommendations table quickly, up to five arrow glyphs are shown before they slowly disappear.

Not sure why this glyph switch is somehow tied to time instead of click events.

Slimmmo commented 7 years ago

The code is <th class="clickable" data-ng-click="clickSort(ref, 2)">Upgrade Score (higher = better)* <span data-ng-if="2 == sortIndex && reverse" class="pull-right fa fa-chevron-down"></span> <span data-ng-if="2 == sortIndex && !reverse" class="pull-right fa fa-chevron-up"></span> </th>

It's not timed at all and they're coded in such that they should never both be shown at the same time. I'm not sure why this is happening for you. It's probably got something to do with the inner workings of AngularJS.

dr-ishmael commented 7 years ago

Browser/OS? It's not doing this to me in Chrome in Windows 10 or Chrome on iOS. [edit to add] Not in Microsoft Edge, either.

Slimmmo commented 7 years ago

^ Good point, I should've asked that XD. Not happening in Mac Firefox or Chrome either.

NicholasRBowers commented 7 years ago

Got it! This issue is actually with my PR https://github.com/Slimmmo/Slimmmo.github.io/pull/112. After you mentioned that it wasn't happening for you guys, I realized that it was only happening on my branch. One of the things I did in the PR was add a transition to all hover effects to make everything much less jarring on the eye. This resulted in these glyphs animating out instead of disappearing. I'll address this issue in a commit.

NicholasRBowers commented 7 years ago

Fixed by https://github.com/Slimmmo/Slimmmo.github.io/pull/112/commits/d06be3aa442ca0218a5d301fbc2fbf4bd41c9b88.