diff --git a/css/80_app.css b/css/80_app.css index 6201a8fcf..a0ebcd792 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -4890,30 +4890,30 @@ img.tile-debug { } .modal-shortcuts .tabs-bar { - text-align: center; padding-bottom: 5px; - font-size: 16px; - font-weight: bold; + text-align: center; } -.modal-shortcuts .tab { +.modal-shortcuts a.tab { display: inline-block; padding: 5px 10px; margin: 0 5px; cursor: pointer; color: #666; + font-size: 16px; + font-weight: bold; } -.modal-shortcuts .tab.active { +.modal-shortcuts a.tab.active { color: #7092ff; border-bottom: 2px solid; } -.modal-shortcuts .tab:focus, -.modal-shortcuts .tab:active { +.modal-shortcuts a.tab:focus, +.modal-shortcuts a.tab:active { color: #597be7; background-color: #efefef; } @media (hover: hover) { - .modal-shortcuts .tab:hover { + .modal-shortcuts a.tab:hover { color: #597be7; background-color: #efefef; } diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js index 559dac57c..e6a0ca17c 100644 --- a/modules/ui/panes/help.js +++ b/modules/ui/panes/help.js @@ -1,4 +1,6 @@ +import { event as d3_event } from 'd3-selection'; + import marked from 'marked'; import { svgIcon } from '../../svg/icon'; import { uiIntro } from '../intro/intro'; @@ -263,6 +265,7 @@ export function uiPaneHelp(context) { helpPane.renderContent = function(content) { function clickHelp(d, i) { + if (d3_event) d3_event.preventDefault(); var rtl = (localizer.textDirection() === 'rtl'); content.property('scrollTop', 0); helpPane.selection().select('.pane-heading h2').html(d.title); @@ -289,6 +292,7 @@ export function uiPaneHelp(context) { .attr('href', '#') .attr('class', 'next') .on('click', function() { + d3_event.preventDefault(); clickHelp(docs[i + 1], i + 1); }); @@ -307,6 +311,7 @@ export function uiPaneHelp(context) { .attr('href', '#') .attr('class', 'previous') .on('click', function() { + d3_event.preventDefault(); clickHelp(docs[i - 1], i - 1); }); @@ -320,6 +325,7 @@ export function uiPaneHelp(context) { function clickWalkthrough() { + d3_event.preventDefault(); if (context.inIntro()) return; context.container().call(uiIntro(context)); context.ui().togglePanes(); @@ -327,6 +333,7 @@ export function uiPaneHelp(context) { function clickShortcuts() { + d3_event.preventDefault(); context.container().call(uiShortcuts(context), true); } diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js index 461268280..cde602c52 100644 --- a/modules/ui/shortcuts.js +++ b/modules/ui/shortcuts.js @@ -1,4 +1,4 @@ -import { select as d3_select } from 'd3-selection'; +import { event as d3_event, select as d3_select } from 'd3-selection'; import { fileFetcher } from '../core/file_fetcher'; import { t } from '../core/localizer'; @@ -74,9 +74,11 @@ export function uiShortcuts(context) { var tabsEnter = tabs .enter() - .append('div') + .append('a') .attr('class', 'tab') + .attr('href', '#') .on('click', function (d, i) { + d3_event.preventDefault(); _activeTab = i; render(selection, dataShortcuts); });