Page MenuHomeSoftware Heritage

Improve mobile popovers
ClosedPublic

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

Details

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

Related T1786

Diff Detail

Repository
rDWAPPS Web applications
Branch
metadataPopover
Lint
No Linters Available
Unit
No Unit Test Coverage
Build Status
Buildable 6077
Build 8363: tox-on-jenkinsJenkins
Build 8362: arc lint + arc unit

Event Timeline

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

swh/web/assets/src/bundles/browse/browse-utils.js
26

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:

swh/web/assets/src/bundles/browse/browse.css
83

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
swh/web/assets/src/bundles/browse/browse-utils.js
26

At 800px, it looks fine originally.

This is how it shows in my Firefox

swh/web/assets/src/bundles/browse/browse-utils.js
26

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.

  • increase z-index and move popover left
This revision is now accepted and ready to land.Jun 7 2019, 11:10 AM

amend commit messages and rebase

This revision was automatically updated to reflect the committed changes.