1
0
Эх сурвалжийг харах

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

Thibaut Courouble 8 жил өмнө
parent
commit
29b839589c

+ 2 - 2
assets/javascripts/views/layout/mobile.coffee

@@ -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
 

+ 0 - 1
assets/stylesheets/components/_content.scss

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

+ 2 - 9
assets/stylesheets/components/_settings.scss

@@ -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;
   }
 }

+ 1 - 1
views/app.erb

@@ -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">