Use <button> instead of <a> for mobile settings tabs

pull/602/head
Thibaut Courouble 8 years ago
parent 78213d015c
commit 29b839589c

@ -49,11 +49,11 @@ class app.views.Mobile extends app.View
@forward.removeAttribute('hidden')
$.on @forward, 'click', @onClickForward
@docPickerTab = $('a[data-tab="doc-picker"]')
@docPickerTab = $('button[data-tab="doc-picker"]')
@docPickerTab.removeAttribute('hidden')
$.on @docPickerTab, 'click', @onClickDocPickerTab
@settingsTab = $('a[data-tab="settings"]')
@settingsTab = $('button[data-tab="settings"]')
@settingsTab.removeAttribute('hidden')
$.on @settingsTab, 'click', @onClickSettingsTab

@ -406,7 +406,6 @@
line-height: inherit;
color: $linkColor;
text-decoration: $linkTextDecoration;
cursor: pointer;
&:hover {
color: $linkColorHover;

@ -123,25 +123,18 @@
._settings-tabs {
display: none; // mobile only
margin-right: .5rem;
line-height: $headerHeight;
}
._settings-tab {
position: relative;
display: inline-block;
vertical-align: top;
padding: 0 .75rem;
cursor: pointer;
&, &:hover {
color: $textColorLight;
text-decoration: none;
}
line-height: $headerHeight;
color: $textColorLight;
&.active {
color: $textColor;
font-weight: $boldFontWeight;
text-decoration: none;
box-shadow: inset 0 -2px $linkColor;
}
}

@ -44,7 +44,7 @@
<svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg> Back
</button>
<nav class="_settings-tabs">
<a class="_settings-tab active" data-tab="doc-picker" hidden>Docs</a><a class="_settings-tab" data-tab="settings" hidden>Settings</a>
<button type="button" class="_settings-tab active" data-tab="doc-picker" hidden>Docs</button><button type="button" class="_settings-tab" data-tab="settings" hidden>Settings</button>
</nav>
</div>
<div class="_sidebar">

Loading…
Cancel
Save