-
Notifications
You must be signed in to change notification settings - Fork 127
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Replace Qtip Library with Bootstrap Tooltip #3937
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works well with Wilma, excellent! I'm seeing an error with tenderfoot, however.
org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) at java.base/java.lang.Thread.run(Thread.java:840) Caused by: freemarker.core.ParseException: Syntax error in template "individual--foaf-person.ftl" in line 184, column 1: Encountered ")", but was expecting one of: <STRING_LITERAL> <RAW_STRING> "false" "true" <INTEGER> <DECIMAL> "." "+" "-" "!" "[" "(" "{" <ID> at
Seems there's an extra comma in that file. If I remove the comma the page loads, but it then complains about missing methods in the console, which I can resolve by adding tooltip-utils.js and popper.min.js to headscripts.ftl... but then it complains about bootstrap missing, which is as deep as I got :)
Seems like we should not break tenderfoot if we intend to continue distributing it with VIVO (are we...?)
I'm also not seeing any tooltips with nemo, but they seem broken without the changes, as well, so not worried about fixing that theme with this PR.
@@ -181,19 +181,17 @@ ${stylesheets.add( | |||
'<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />', | |||
'<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />', | |||
'<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />', | |||
'<link rel="stylesheet" type="text/css" href="${urls.base}/css/jquery_plugins/qtip/jquery.qtip.min.css" />' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The comma before needs removed as well or the freemarker template complains.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for catching that! I've fixed it up, so please take a look when you get a chance. Appreciate it!
Completely overlooked testing on other themes since the decision to prioritize Wilma and phase out the others in the future. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some suggestions after looking at the code. Didn't test the PR yet.
Did I get it right that this pull request break popups for other themes (in case user installed VIVO 1.13 and copied wilma/tenerfoot with new name to create custom theme for his instance)?
/* TOOLTIP ----------------------------------------> */ | ||
/* -------------------------------------------------> */ | ||
.vivoTooltip { | ||
opacity: 1 !important; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think !important is the last resort and should be avoided everywhere if possible.
/* -------------------------------------------------> */ | ||
/* TOOLTIP ----------------------------------------> */ | ||
/* -------------------------------------------------> */ | ||
.vivoTooltip { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would try to avoid style duplication, maybe it would be better to define styles once and include in all themes.
},{ | ||
querySelector: "#exploreInfoIcon", | ||
data: { | ||
title: "<div style='padding: 16px 22px; max-width: 400px;'>" + $('#exploreTooltipText').html() + "</div>", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The same in-lined styles defined multiple times. It would be better avoid inline styles, instead define in a css file
VIVO GitHub issue: 3931
Linked Vitro PR
What does this pull request do?
This pull request focuses on the removal of the Qtip library from the project, substituting it with Bootstrap's tooltip that utilizes Popper 2 as its underlying mechanism. The design has been configured to maintain similarity with the previous implementation using Qtip.
What's new?
The Bootstrap tooltip automatically identifies available screen space for display but is limited to top, bottom, left, and right orientations, excluding corners.
Before:
After:
How should this be tested?
On the Individual profile page:
On the Search results page:
On the MapOfScience page:
Additional Notes:
Interested parties
@VIVO-project/vivo-committers