harvard-lil / h2o

H2O is a web app for creating and reading open educational resources, primarily in the legal field
https://opencasebook.org
GNU Affero General Public License v3.0
35 stars 30 forks source link

Re-order casebook contents via a handle #2031

Closed rebeccacremona closed 11 months ago

rebeccacremona commented 11 months ago

See ENG-336.

You can currently re-order the contents of (draft) casebooks you own by dragging around the entries in the table of contents. The entire entry (that is, the entire white or black rectangle) is the target: you can click/touch anywhere to drag.

That works out fine on desktop, but breaks things on mobile: the touch event to drag takes over any attempts to click the links and buttons inside the entry. So, you cannot take any actions, or navigate the casebook contents.

A person might be able to fix that by handling touch events on all the links and buttons, and doing something like https://github.com/harvard-lil/h2o/compare/develop...rebeccacremona:touch-events-example?expand=1, but I thought it would be simpler to change things, so that you have to drag a handle to reorder.

This PR makes an attempt. I am a) not sure it looks very good, and b) a little anxious that I could have subtly broken something.... but as best I can tell, I have not....

I would definitely appreciate feedback on the appearance, and another person giving the TOC some exercise to see if -they- can find anything I broke.

image

I also tidied the editable view of the table of contents a bit while I was in there, so that things align a little better. image

codecov-commenter commented 11 months ago

Codecov Report

All modified lines are covered by tests :white_check_mark:

Comparison is base (2cc783f) 76.59% compared to head (3dec823) 76.59%. Report is 5 commits behind head on develop.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## develop #2031 +/- ## ======================================== Coverage 76.59% 76.59% ======================================== Files 64 64 Lines 7066 7066 ======================================== Hits 5412 5412 Misses 1654 1654 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.