diff --git a/composer.json b/composer.json index 4530b57d8..867801a37 100644 --- a/composer.json +++ b/composer.json @@ -65,8 +65,7 @@ "monolog/monolog": "1.23.*", "newerton/jquery-mousewheel": "dev-master", "pamelafox/lscache": "1.0.5", - "malihu/malihu-custom-scrollbar-plugin": "3.1.5", - "grimmlink/qtip2": "3.0.3" + "malihu/malihu-custom-scrollbar-plugin": "3.1.5" }, "require-dev": { "phpunit/phpunit": "9.5.*", diff --git a/resource/css/styles.css b/resource/css/styles.css index 977f251c7..343cb6c15 100644 --- a/resource/css/styles.css +++ b/resource/css/styles.css @@ -103,9 +103,6 @@ h1, .prefLabel, .prefLabelLang, .notation { font-size: 16px; } -.multiselect span, .multiselect a, .dropdown-toggle, #search-all-button, .qtip-skosmos * { -} - .topbar a.navigation-font, .topbar span { color: var(--dark-color); } @@ -855,31 +852,10 @@ ul.dropdown-menu > li:last-child > input { width: 50px; } -.qtip-skosmos { - background-color: var(--tooltip-bg-color); - border-radius: 0; - border: 3px solid var(--tooltip-border-color); - margin-top: 12px; - margin-left: 9px; - min-width: 400px; -} - -.qtip-skosmos *, .reified-tooltip > p > span { - color: var(--white-color); - font-size: var(--font-size); - font-weight: 400; -} - -.qtip-skosmos a { - color: var(--tooltip-text-color) !important; - width: 100%; -} - .reified-tooltip { display: none; margin-top: 5px; width: 100%; - } .reified-property-value > img { @@ -2267,14 +2243,6 @@ body, .versal, h1, h2, h3, p, .versal-bold { display: none; } - .qtip-skosmos:not(#qtip-0) { - left: 0 !important; - } - - .qtip-skosmos:not(#qtip-0) canvas { - display: none !important; - } - .content { margin: 0 auto; } @@ -2321,14 +2289,6 @@ body, .versal, h1, h2, h3, p, .versal-bold { margin-left: 10px; margin-top: 20px; } - - .qtip-skosmos { - min-width: auto; - left: 0 !important; - } - .qtip-skosmos canvas { - display: none !important; - } } @media (max-width: 530px) { @@ -2755,3 +2715,139 @@ body, .versal, h1, h2, h3, p, .versal-bold { border: 2px dashed #62729f !important; } + +/* + * Skosmos tooltips. + * + * Created to replace https://github.com/qTip2/qTip2/ as that library is not maintained anymore, + * and creates issues when trying to update JQuery versions. + */ +.skosmos-tooltip-wrapper { + width: fit-content; +} + +.skosmos-tooltip { + position: relative; +} + +.skosmos-tooltip a { + color: var(--tooltip-text-color) !important; + width: 100%; +} + +.skosmos-tooltip::before { + position: absolute; + content: ' '; + background-color: var(--tooltip-border-color); + border: 3px solid var(--tooltip-border-color); + width: 15px; + height: 15px; + z-index: 500; + opacity: 0; + transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; + pointer-events: none; +} + +.skosmos-tooltip::after { + content: attr(data-title); + /* https://www.digitalocean.com/community/tutorials/css-line-break-content-property */ + white-space: pre-wrap; + max-width: 400px; + width: max-content; + display: inline-block; + border-radius: 0; + font-size: var(--font-size); + font-weight: 400; + color: var(--white-color); + background-color: var(--tooltip-bg-color); + border: 3px solid var(--tooltip-border-color); + position: absolute; + z-index: 555; + opacity: 0; + transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; + pointer-events: none; + margin: 12px 0 0 9px; + padding: 0.25rem 0.5rem; +} + +.skosmos-tooltip:hover::before, .skosmos-tooltip:hover::after { + opacity: 1; +} + +.skosmos-tooltip.t-top::before { + top: 0; + left: 50%; + transform: translate(-50%, 0) rotate(45deg); +} + +.skosmos-tooltip.t-top::after { + top: 0; + left: 50%; + transform: translate(-50%, 0); +} + +.skosmos-tooltip.t-top:hover::before { + transform: translate(-50%, calc(-100% - 5px)) rotate(45deg); +} + +.skosmos-tooltip.t-top:hover::after { + transform: translate(-50%, calc(-100% - 10px)); +} + +.skosmos-tooltip.t-left::before { + top: 25%; + left: 0; + transform: translate(0, 0%) rotate(45deg); +} + +.skosmos-tooltip.t-left::after { + top: 0; + left: 0; +} + +.skosmos-tooltip.t-left:hover::before { + transform: translate(calc(-100% - 5px)) rotate(45deg); +} + +.skosmos-tooltip.t-left:hover::after { + transform: translate(calc(-100% - 10px)); +} + +.skosmos-tooltip.t-right::before { + top: 25%; + right: 0; + transform: translate(0, 0%) rotate(45deg); +} + +.skosmos-tooltip.t-right::after { + top: 0; + right: 0; +} + +.skosmos-tooltip.t-right:hover::before { + transform: translate(calc(100% + 5px)) rotate(45deg); +} + +.skosmos-tooltip.t-right:hover::after { + transform: translate(calc(100% + 10px)); +} + +.skosmos-tooltip.t-bottom::before { + bottom: 0; + left: 50%; + transform: translate(-50%, 0) rotate(45deg); +} + +.skosmos-tooltip.t-bottom::after { + bottom: 0; + left: 50%; + transform: translate(-50%, 0); +} + +.skosmos-tooltip.t-bottom:hover::before { + transform: translate(-50%, calc(100% + 5px)) rotate(45deg); +} + +.skosmos-tooltip.t-bottom:hover::after { + transform: translate(-50%, calc(100% + 10px)); +} diff --git a/resource/js/docready.js b/resource/js/docready.js index 6632cac19..3b583e689 100644 --- a/resource/js/docready.js +++ b/resource/js/docready.js @@ -524,8 +524,6 @@ $(function() { // DOCUMENT READY style: { classes: 'qtip-tipsy qtip-skosmos' } }; - $('#navi4').qtip(qtip_skosmos); - $('.property-click').qtip(qtip_skosmos); $('.redirected-vocab-id').qtip(qtip_skosmos); diff --git a/view/topbar.twig b/view/topbar.twig index f3e62abbe..5c91630fc 100644 --- a/view/topbar.twig +++ b/view/topbar.twig @@ -49,7 +49,7 @@ {% trans "Feedback" %} -
{% trans "search_example_text" %}"> + {% trans "Help" %}