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 6092
Build 8391: tox-on-jenkinsJenkins
Build 8390: arc lint + arc unit

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

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

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
kalpitk added inline comments.Jun 6 2019, 7:40 PM
swh/web/assets/src/bundles/browse/browse-utils.js
27

At 800px, it looks fine originally.

This is how it shows in my Firefox

anlambert added inline comments.Jun 6 2019, 7:47 PM
swh/web/assets/src/bundles/browse/browse-utils.js
27

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.