Problems with Commons profile on mobile view
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.
#1 Updated by Boone Gorges about 4 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.
#4 Updated by Daniel Jones about 4 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!
#5 Updated by Boone Gorges about 4 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.)
#6 Updated by Daniel Jones about 4 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