Lightbox/modal multi image improvements #381

Closed
opened 2019-02-20 00:24:04 +00:00 by feld · 7 comments
Owner
  • Navigation arrows do not appear until you move your mouse. This is really bad, especially on mobile as it requires you touch the screen but it's difficult to do this without exiting the lightbox

  • Possible to allow swipe gestures or click/drag to navigate between the items? This would be a huge improvement for mobile

  • Visible button on the screen/image to exit the lightbox. On mobile with large portrait images you have to touch the thin area in the background (status/timeline) to exit the image.

- Navigation arrows do not appear until you move your mouse. This is really bad, especially on mobile as it requires you touch the screen but it's difficult to do this without exiting the lightbox - Possible to allow swipe gestures or click/drag to navigate between the items? This would be a huge improvement for mobile - Visible button on the screen/image to exit the lightbox. On mobile with large portrait images you have to touch the thin area in the background (status/timeline) to exit the image.
Member

@feld , would it be better to use a npm like vue-slick for this feature?

@feld , would it be better to use a npm like [vue-slick](https://github.com/staskjs/vue-slick) for this feature?
Author
Owner

That looks really nice, but is it overkill? I don't have experience in this area. I think @hj or @shpuld can advise.

That looks really nice, but is it overkill? I don't have experience in this area. I think @hj or @shpuld can advise.
Member

@feld , it's not big effort, should be fast to implement than hard-coding 🚀

@feld , it's not big effort, should be fast to implement than hard-coding :rocket:
Member

No. No jquery please.

No. No jquery please.
Member

For our purposes we don't even need a full-blown carousel so don't need any extra dependencies for it.

For our purposes we don't even need a full-blown carousel so don't need any extra dependencies for it.
Member

Some things have been improved / added since this was open.
@feld @hj

Navigation arrows do not appear until you move your mouse.

This is just a small css change. I did this.

Possible to allow swipe gestures or click/drag to navigate between the items? This would be a huge improvement for mobile

Used the GestureService for mobile swipes. You can now swipe the images on mobile to go next or back.

Visible button on the screen/image to exit the lightbox. On mobile with large portrait images you have to touch the thin area in the background (status/timeline) to exit the image.

Do not think this is an issue anymore. You should be able to tap anywhere and the modal will close.

Some things have been improved / added since this was open. @feld @hj > Navigation arrows do not appear until you move your mouse. This is just a small css change. I did this. > Possible to allow swipe gestures or click/drag to navigate between the items? This would be a huge improvement for mobile Used the `GestureService` for mobile swipes. You can now swipe the images on mobile to go next or back. > Visible button on the screen/image to exit the lightbox. On mobile with large portrait images you have to touch the thin area in the background (status/timeline) to exit the image. Do not think this is an issue anymore. You should be able to tap anywhere and the modal will close.

This was merged.

This was merged.
Sign in to join this conversation.
No milestone
No project
No assignees
5 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
pleroma/pleroma-fe#381
No description provided.