Change markdown header tab anchor links to buttons

4 files changed, 29 insertions, 16 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 704adf7864f..3ddb39730c4 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,16 +1,16 @@
 <script>
 import $ from 'jquery';
-import tooltip from '../../directives/tooltip';
-import toolbarButton from './toolbar_button.vue';
-import icon from '../icon.vue';
+import Tooltip from '../../directives/tooltip';
+import ToolbarButton from './toolbar_button.vue';
+import Icon from '../icon.vue';
 
 export default {
   directives: {
-    tooltip,
+    Tooltip,
   },
   components: {
-    toolbarButton,
-    icon,
+    ToolbarButton,
+    Icon,
   },
   props: {
     previewMarkdown: {
@@ -68,27 +68,27 @@ export default {
         :class="{ active: !previewMarkdown }"
         class="md-header-tab"
       >
-        <a
+        <button
           class="js-write-link"
-          href="#md-write-holder"
           tabindex="-1"
-          @click.prevent="writeMarkdownTab($event)"
+          type="button"
+          @click="writeMarkdownTab($event)"
         >
           Write
-        </a>
+        </button>
       </li>
       <li
         :class="{ active: previewMarkdown }"
         class="md-header-tab"
       >
-        <a
+        <button
           class="js-preview-link js-md-preview-button"
-          href="#md-preview-holder"
           tabindex="-1"
-          @click.prevent="previewMarkdownTab($event)"
+          type="button"
+          @click="previewMarkdownTab($event)"
         >
           Preview
-        </a>
+        </button>
       </li>
       <li
         :class="{ active: !previewMarkdown }"
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index 50ebc6d0dd1..b8bb9e1e07b 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -161,6 +161,7 @@
 
   .nav-links li {
     &.active a,
+    &.md-header-tab.active button,
     a.active {
       border-bottom: 2px solid $active-tab-border;
 
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 554e2b6720a..3142f94b192 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -72,6 +72,7 @@
 .md-header-tab {
   @include media-breakpoint-down(xs) {
     flex: 1;
+    flex-direction: column;
     width: 100%;
     border-bottom: 1px solid $border-color;
     text-align: center;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 8bab8cf36b1..bf6f66d30ff 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -8,15 +8,17 @@
   height: auto;
   border-bottom: 1px solid $border-color;
 
-  li {
+  li:not(.md-header-toolbar) {
     display: flex;
 
-    a {
+    a,
+    button {
       padding: $gl-btn-padding;
       padding-bottom: 11px;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;
+      border: 0;
       border-bottom: 2px solid transparent;
       white-space: nowrap;
 
@@ -33,7 +35,12 @@
       }
     }
 
+    button {
+      padding-top: 0;
+    }
+
     &.active a,
+    &.active button,
     a.active {
       color: $black;
       font-weight: $gl-font-weight-bold;
@@ -42,6 +49,10 @@
         color: $black;
       }
     }
+
+    &.md-header-tab button {
+      line-height: 19px;
+    }
   }
 }