Design/UX #8290
closedProblems with Commons profile on mobile view
0%
Description
Hi All,
I noticed some responsiveness issues when viewing my Commons profile on my mobile phone (an iPhone). Here is what I noted:
-- areas of overlapping content
-- when one starts to scroll and the header snaps up, there are two issues -- 1. it snaps up before one can view all of the text in the header; and 2. In the snapped-up state (sorry -- that's probably not that right term, but I don't know what is), the header takes up more room than it should.
Please see attached screenshots. I know we are hoping to do a redesign, but I'm hoping that we can address at least a few of these issues in the short term before then.
Files
Related issues
Updated by Boone Gorges over 7 years ago
- Assignee changed from Boone Gorges to Daniel Jones
- Target version set to 1.11.4
Thanks for the ticket and the screenshots, Matt. We can definitely fix these items.
Dan, can I ask you to take a look? You may need to touch the JS to fix the "snap" point - see https://github.com/cuny-academic-commons/cac-advanced-profiles/blob/master/assets/js/cacap.js#L55 You should feel free to be liberal in making changes to the appearance of the header in narrow viewers; font size and padding look like they could use some adjustment as well.
Looks like you've already got push access to the repo - feel free to make your changes in a separate branch and then do a PR to master if you'd like a review from me before merging.
Updated by Boone Gorges over 7 years ago
- Target version changed from 1.11.4 to 1.11.5
Updated by Boone Gorges over 7 years ago
- Target version changed from 1.11.5 to 1.11.6
Updated by Daniel Jones over 7 years ago
I've made some changed that I think should improve the styling and behavior here: https://github.com/cuny-academic-commons/cac-advanced-profiles/commit/0621b10857a79a2eff6c79ad735323f721c6d0f6
It's hard to tell what CSS changed I made because I un-minified the file, but almost all of them are down at the very bottom in the media queries. Mostly I just reduced some spaces and sizes. I also fixed what I think was a bug, where on screens smaller than 940px you weren't able to see the buttons for saving or canceling your changes. That change was higher up in the sheet - let me know if you have trouble finding it.
The JS change was just to an option passed to a JS plugin to give more scroll-room before the sticky header starts to stick.
I also removed some styling from the bp-nelo stylesheet, in favor of keeping everything in the plugin itself. That change is here: https://github.com/cuny-academic-commons/cac/commit/0c7b3572a7c564d4de91be1c0a0fd6f837c88652
Let me know if all of this look alright!
Updated by Boone Gorges over 7 years ago
Thanks, Dan! I've applied the changes and they're looking pretty good in my testing.
The minified stylesheet in the plugin is due to the fact that the .css file is generated from the corresponding file in the /assets/sass directory. Do you mind porting your changes to the SASS stylesheet so that they're not lost? (I usually use Compass for SASS processing, but whatever tool you have is OK.)
Updated by Daniel Jones over 7 years ago
Well that's embarrassing - sorry about that. I've actually never really used any of the CSS pre-processors, so I had to get that set and up and configured. I think I've moved all the changes over and recompiled with this commit: https://github.com/cuny-academic-commons/cac-advanced-profiles/commit/3e65b57dfe92480812c61a85b891adea8ab8c921
Updated by Boone Gorges over 7 years ago
- Status changed from Assigned to Resolved
No embarrassment or apologies necessary! Thanks so much for making the changes. I'll mark this resolved.
Updated by Matt Gold over 7 years ago
- Related to Bug #8463: Continued issues with portfolio view on mobile device added