Page MenuHomeSoftware Heritage

Improve mobile popovers

Authored by kalpitk on Jun 6 2019, 1:35 PM.


  • Set width of metadata popover to 100% in mobiles (xs screens)

Related T1786

Diff Detail

rDWAPPS Web applications
Automatic diff as part of commit; lint not applicable.
Automatic diff as part of commit; unit tests not applicable.

Event Timeline

kalpitk created this revision.Jun 6 2019, 1:35 PM
anlambert requested changes to this revision.Jun 6 2019, 4:23 PM
anlambert added a subscriber: anlambert.

Just a couple of nitpicks for small screens (see screenshot below):

  • Can you slightly move the popover to the right in order to see its borders ?
  • The Permalinks button should not overlap the popover


I think you can increase that threshold to 992 (next responsive breakpoint).

For a screen with a width of 800px, the popover will look better if it is anchored to the top, see screenshot below:


Can you keep this rule for large screen ? Sometimes some metadata associated to the objects in the archive contains text with really long lines and the popover gets oversized because of that.

This revision now requires changes to proceed.Jun 6 2019, 4:23 PM
kalpitk added inline comments.Jun 6 2019, 7:40 PM

At 800px, it looks fine originally.

This is how it shows in my Firefox

anlambert added inline comments.Jun 6 2019, 7:47 PM

I think that in my example, the popover got oversized due to its content (long lines in a metadata field surely). If you reinstate the max-width css rule for screens width greater than 768 pixels, this should be OK for all metadata.

kalpitk updated this revision to Diff 5123.Jun 6 2019, 9:01 PM
  • increase z-index and move popover left
anlambert accepted this revision.Jun 7 2019, 11:10 AM

Looks good, thanks !

This revision is now accepted and ready to land.Jun 7 2019, 11:10 AM
kalpitk updated this revision to Diff 5128.Jun 7 2019, 12:22 PM

amend commit messages and rebase

This revision was automatically updated to reflect the committed changes.