TrumpTracker/trumptracker.github.io

Help for mobile responsiveness

VirenMohindra opened this issue · 5 comments

Description of your issue, suggested solution and other information

Mobile site of TrumpTracker looks terrible, mainly because of the category and status columns taking up unnecessary space.

One option would be to remove both of these with CSS breakpoints or remove them altogether from the site, even the desktop version.


Make sure you are using the latest version: pull latest commits before reporting any issues.

  • I've verified and I assure that I'm looking at the latest version of Trump Tracker.

Before submitting an issue make sure you have:

  • At least skimmed through README and most notably the To Do List section.
  • Searched the bugtracker for similar issues including closed ones

What is the purpose of your issue?

  • Bug report (encountered problems with the trumptracker website)
  • Site support request (request for adding support)
  • Feature request (request for a new functionality)
  • Question
  • Other

And as always, thank you for your contribution.

@illepic any ideas on how to remove category and status without breaking search and filtering?

Also is there any way we can change back to the previous way of filtering where, when we clicked on say First 100 Days tab, it only showed that option, and the user doesn't have to deselect it to check other sections?

Can't seem to wrap my head around the Js at the moment...

Thank you!

Bootstrap has a responsive table class that makes tables horizontally scroll, so that's one possible approach.

However in my experience tables aren't the best layout for mobile friendliness. I would advocate moving toward a list based approach, which would make responsive design a lot easier.

I played around with a list based approach, but as far as I know bootstraps lists aren't technical enough for headers and listing content horizontally aligned, and will involve some CSS to accomplish it.

The site looks comfortable when you drop the category and status tags from the site, but right now it is linked with the JavaScript search and filtering capabilities.

Maybe that can be a temporary solution once we figure out a better way to display the data?

To further improve responsiveness, we should probably:

  • Change the selection buttons to just the icons, and remove the text
  • Add a margin to the 'On Tuesday November 8th' text
  • Make the days and promises counter more compact