kanji-koohii icon indicating copy to clipboard operation
kanji-koohii copied to clipboard

Improve the pagers used with the tables across the site

Open fabd opened this issue 8 years ago • 4 comments

The pagers UX need to be simplified and made better for touch. They're also tiny nowadays on desktop so a common solution can be found.

untitled-1

Thoughts

  • "Previous " and "Next" may be replaced with some FontAwesome icons like < and >
  • I'm tempted to remove the Row selection altogether and just settile for a sensible default of 20 rows

Solutions

  • First workable solution would be to just style everything larger, and/or use Bootstrap styles
  • Not sure it's worth using VueJS here if I can make the existing php template work (if it's working, don't fix it...)

fabd avatar Jan 17 '17 19:01 fabd

What do people think of removing the rows option and just using 20-25 rows as a default?

ANy complexity I don't need, I'd rather remove. This would simplify mobile views.

fabd avatar Jan 25 '17 17:01 fabd

It wouldn't bother me I think, would prefer 25 to 20 if it is the only, default option. ;-)

rinre avatar Feb 01 '17 00:02 rinre

By the way, was just browsing through my kanji list (on my Android phone). I noticed I switched to 50 kanji/page (to get through them faster, was looking for something in the first 400 or so), and I started thinking would be kinda nice to be able to "swipe" to the next page (which I think would also decrease the “need”(=increased convenience) of seeing many per page). Don't know if that is hell to code, but it is an idea if you would want to try something new ;-) (otherwise the current functionality is absolutely fine with me, either with 50 or 25/page)

rinre avatar Feb 03 '17 23:02 rinre

@rinre Swiping seems too complicated. It creates a special case for mobile. There are libraries out there but a solution I would prefer for both desktop and mobile is the "infinite loading" thingy. So instead of paging you always get more rows...

It's still quite complicated though with sorting and the like. Something I can look at someday if / when I convert tables to a VueJS component but until then it will be a mess in the Javascript so it is better left as is.

But that got me thinking about using a higher sensible default, like 30-40 rows per page?

May as well make a return trip to server and SQL database worth the wait, increasing rows also decreases requests. On mobile I figure that it is easy enough to flick and scroll, so perhaps 50 rows is good too, and I think desktop users won't mind at all.

fabd avatar Feb 09 '17 16:02 fabd