From d355d8973205afc970945aab7da4c8d0d43a38a1 Mon Sep 17 00:00:00 2001
From: kalpitk <kkothari1999@gmail.com>
Date: Fri, 7 Jun 2019 15:16:45 +0530
Subject: [PATCH] Improve metadata popover on xs screens Related T1786
---
swh/web/assets/src/bundles/browse/browse-utils.js | 8 ++++++++
swh/web/assets/src/bundles/browse/browse.css | 7 ++++++-
swh/web/assets/src/bundles/webapp/webapp.css | 4 ++--
3 files changed, 16 insertions(+), 3 deletions(-)
diff --git a/swh/web/assets/src/bundles/browse/browse-utils.js b/swh/web/assets/src/bundles/browse/browse-utils.js
index e720b1666..d7be7839b 100644
--- a/swh/web/assets/src/bundles/browse/browse-utils.js
+++ b/swh/web/assets/src/bundles/browse/browse-utils.js
@@ -22,6 +22,14 @@ $(document).ready(() => {
boundary: 'viewport',
container: 'body',
html: true,
+ placement: function() {
+ const width = $(window).width();
+ if (width < 768) {
+ return 'top';
+ } else {
+ return 'right';
+ }
+ },
template: `<div class="popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-header"></h3>
diff --git a/swh/web/assets/src/bundles/browse/browse.css b/swh/web/assets/src/bundles/browse/browse.css
index bc8b623e1..5ee06ff41 100644
--- a/swh/web/assets/src/bundles/browse/browse.css
+++ b/swh/web/assets/src/bundles/browse/browse.css
@@ -80,13 +80,18 @@
.swh-popover {
max-height: 50vh;
- max-width: 80vw;
overflow-y: auto;
overflow-x: auto;
padding: 0;
padding-right: 1.4em;
}
+@media screen and (min-width: 768px) {
+ .swh-popover {
+ max-width: 80vh;
+ }
+}
+
.swh-search-pagination {
margin-top: 5px;
}
diff --git a/swh/web/assets/src/bundles/webapp/webapp.css b/swh/web/assets/src/bundles/webapp/webapp.css
index de7170cc1..76cf4a686 100644
--- a/swh/web/assets/src/bundles/webapp/webapp.css
+++ b/swh/web/assets/src/bundles/webapp/webapp.css
@@ -168,8 +168,8 @@ pre {
}
.popover {
- max-width: 100%;
- z-index: 2000;
+ max-width: 97%;
+ z-index: 40000;
}
.modal {
--
GitLab