From 8198b4d5637324ac7424499a19b444d1473d28ae Mon Sep 17 00:00:00 2001 From: benjamin wil Date: Sat, 6 Mar 2021 16:50:20 -0800 Subject: [PATCH] Fix tabnav styles on #create and #edit views The Primer CSS-provided `tabnav` styles were not being used on the Edit and Preview tabs on the create and edit pages. After following Primer's documentation [1], it looks like we were using the `aria-current` attribute incorrectly. Dynamically adding/removing this attribute on the selected tab fixes the issue. [1]: https://primer-css-git-next-inputs.primer.now.sh/css/components/navigation#tabnav --- .../public/gollum/javascript/gollum.js.erb | 4 ++++ lib/gollum/templates/create.mustache | 16 +++++++++------- lib/gollum/templates/edit.mustache | 6 ++++-- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/lib/gollum/public/gollum/javascript/gollum.js.erb b/lib/gollum/public/gollum/javascript/gollum.js.erb index 2cfbb1f9..417bb6a9 100755 --- a/lib/gollum/public/gollum/javascript/gollum.js.erb +++ b/lib/gollum/public/gollum/javascript/gollum.js.erb @@ -380,8 +380,12 @@ $(document).ready(function() { active_tab = '#edit.tabnav-tab'; } + $('.tabnav-tab.selected').removeAttr('aria-current'); $('.tabnav-tab.selected').removeClass('selected'); + + $(active_tab).attr('aria-current', 'page'); $(active_tab).addClass('selected'); + $('.tabnav-div').hide(); $(active_div).show(); } diff --git a/lib/gollum/templates/create.mustache b/lib/gollum/templates/create.mustache index 4c4dae7e..53793b29 100644 --- a/lib/gollum/templates/create.mustache +++ b/lib/gollum/templates/create.mustache @@ -4,13 +4,15 @@

Create New Page

-
- -
- +
+ +
+
{{>editor}}
diff --git a/lib/gollum/templates/edit.mustache b/lib/gollum/templates/edit.mustache index b7b0be2b..c85b2800 100644 --- a/lib/gollum/templates/edit.mustache +++ b/lib/gollum/templates/edit.mustache @@ -5,8 +5,10 @@
{{>editor}}