diff options
author | George Tsiolis <tsiolis.g@gmail.com> | 2018-10-19 11:35:33 +0000 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.m.gray@gmail.com> | 2018-10-19 11:35:33 +0000 |
commit | 1af6ddffed5028b9e1f63e2d5760982a7b2ca473 (patch) | |
tree | 162d4ca9bf20993d99c692cf40b75c9d26d0069f /app/assets | |
parent | cdfc2378e5e30ac87479ef839dbc20f3bdaf1af0 (diff) | |
download | gitlab-ce-1af6ddffed5028b9e1f63e2d5760982a7b2ca473.tar.gz |
Change markdown header tab anchor links to buttons
Diffstat (limited to 'app/assets')
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; + } } } |