Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor UX things to address #13

Closed
16 of 17 tasks
fredhohman opened this issue Jul 29, 2020 · 2 comments
Closed
16 of 17 tasks

Minor UX things to address #13

fredhohman opened this issue Jul 29, 2020 · 2 comments
Assignees

Comments

@fredhohman
Copy link
Collaborator

fredhohman commented Jul 29, 2020

On submission:

  • toc on mobile should be full width (grid layout update)
  • Make "reset" on your draw it use figcaption styles
  • sliders on boids bleeding horizontal on mobile
  • click to toggle between video length is weird on mobile because no autoplay? solution: separate logic for mobile view to only show long video in player UI, need to add muted and playsInline attributes to all <video>
    • Note: added the video attributes so autoplay now works on mobile. @mathisonian can you play with it on mobile to see if tapping controls (which then toggles new video) is still weird? it still feels a little off to me.
  • no author in bibtex shows empty period on hover tooltip (Distill template problem, our PR/fix: Update hover citations when there no authors  template#123)

Extra polish:

  • visual toc design
  • text details graphic: try (1) padding on slider button to make hit target bigger for mobile, if that doesn't work then (2) convert slider to 3 buttons on mobile
  • horse main graphic on mobile bleeding on right edge
    • Note: @mathisonian this appears to be something with the grid-column but I cant figure out what is happening since this works on iPhone X mobile screen but not iPhone SE size.
  • add event handler to entire image of machine generated people so mobile users can tap off after selecting callout
    • Note: added this but have to test on device since it worked in Chrome mobile view
  • example table break "Publication or (author)" into 2 lines and drop parentheses
  • you draw y-axis label font size should be bigger and match x-axis label size
  • in prompting self reflection, under you draw figure, did we leave a video there? looks to be an empty div that has line break on desktop and weirdness on mobile
  • equation buttons should always be left and right (stacking on smaller mobile screens)
  • stacked parametric images on mobile, or add a 4th image?
  • standardize venue/publication names (e.g., the or The New York Times), check on Distill style for if these should be italicized or not
  • parametric reference in bibtex+table should have author as "Parametric Press" and article title should be "Issue 01: Science + Society"
  • italicize publication names
@fredhohman
Copy link
Collaborator Author

Also: e6a7d81

mathisonian pushed a commit that referenced this issue Aug 16, 2020
@mathisonian
Copy link
Collaborator

Alright, I've checked the major remaining boxes (TOC styles and bib bug still remaining). For the videos I just took off autoplay and made it so clicking play on mobile will always give the full video. While the teasers are nice, I think the UX weirdness combined with the heavy usage of bandwidth made it seem more reasonable to go with this simplified approach for mobile

mathisonian added a commit that referenced this issue Aug 28, 2020
Teaser video on mobile, video poster frame on mobile, details illustration compression #13
mathisonian pushed a commit that referenced this issue Sep 11, 2020
mathisonian pushed a commit that referenced this issue Sep 11, 2020
mathisonian pushed a commit that referenced this issue Sep 11, 2020
mathisonian pushed a commit that referenced this issue Sep 11, 2020
mathisonian pushed a commit that referenced this issue Sep 11, 2020
mathisonian pushed a commit that referenced this issue Sep 11, 2020
mathisonian pushed a commit that referenced this issue Sep 11, 2020
mathisonian added a commit that referenced this issue Sep 11, 2020
Teaser video on mobile, video poster frame on mobile, details illustration compression #13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants