Fix tab navigation styles (#1696)
* 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 * Recompile static assets
This commit is contained in:
+1
-1
@@ -1 +1 @@
|
||||
{"files":{"app-7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2.js":{"logical_path":"app.js","mtime":"2021-03-23T13:37:58+05:00","size":135925,"digest":"7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2","integrity":"sha256-ekvRFfS8fs45vIBzyg/618XlXMWDexRkoS3q1JBc77I="},"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js":{"logical_path":"editor.js","mtime":"2021-01-05T19:44:49+05:00","size":744866,"digest":"db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf","integrity":"sha256-2xDINRMG6S8ZJroiXQzZyOiGSCs7mCCoWCXsOrq18c8="},"app-ad43ca64b295d8444b10f22ee868f18429268af498f1bc515434878b690e37a2.css":{"logical_path":"app.css","mtime":"2021-03-23T13:38:56+05:00","size":396615,"digest":"ad43ca64b295d8444b10f22ee868f18429268af498f1bc515434878b690e37a2","integrity":"sha256-rUPKZLKV2ERLEPIu6GjxhCkmivSY8bxRVDSHi2kON6I="},"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css":{"logical_path":"criticmarkup.css","mtime":"2021-01-05T19:44:49+05:00","size":646,"digest":"31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4","integrity":"sha256-Ma5dMoK7uOe3w8mRfp+2jjMVprSnXabOxI0huIRpBcQ="},"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css":{"logical_path":"print.css","mtime":"2021-01-05T19:44:49+05:00","size":75,"digest":"512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb","integrity":"sha256-USSYw2i+DT+xuhBd+oQomuSDgOyfy++Ui9TiOwsJW/s="}},"assets":{"app.js":"app-7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2.js","editor.js":"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js","app.css":"app-ad43ca64b295d8444b10f22ee868f18429268af498f1bc515434878b690e37a2.css","criticmarkup.css":"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css","print.css":"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css"}}
|
||||
{"files":{"app-0fd228e26bfbe6fe31a2da268eb0e98e780c1191c1a918adf383377946e9c838.js":{"logical_path":"app.js","mtime":"2021-03-23T08:40:11-07:00","size":136020,"digest":"0fd228e26bfbe6fe31a2da268eb0e98e780c1191c1a918adf383377946e9c838","integrity":"sha256-D9Io4mv75v4xotomjrDpjngMEZHBqRit84M3eUbpyDg="},"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js":{"logical_path":"editor.js","mtime":"2021-02-24T23:16:14-08:00","size":744866,"digest":"db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf","integrity":"sha256-2xDINRMG6S8ZJroiXQzZyOiGSCs7mCCoWCXsOrq18c8="},"app-ad43ca64b295d8444b10f22ee868f18429268af498f1bc515434878b690e37a2.css":{"logical_path":"app.css","mtime":"2021-03-23T08:40:11-07:00","size":396615,"digest":"ad43ca64b295d8444b10f22ee868f18429268af498f1bc515434878b690e37a2","integrity":"sha256-rUPKZLKV2ERLEPIu6GjxhCkmivSY8bxRVDSHi2kON6I="},"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css":{"logical_path":"criticmarkup.css","mtime":"2021-02-24T23:16:14-08:00","size":646,"digest":"31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4","integrity":"sha256-Ma5dMoK7uOe3w8mRfp+2jjMVprSnXabOxI0huIRpBcQ="},"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css":{"logical_path":"print.css","mtime":"2021-02-24T23:16:14-08:00","size":75,"digest":"512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb","integrity":"sha256-USSYw2i+DT+xuhBd+oQomuSDgOyfy++Ui9TiOwsJW/s="}},"assets":{"app.js":"app-0fd228e26bfbe6fe31a2da268eb0e98e780c1191c1a918adf383377946e9c838.js","editor.js":"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js","app.css":"app-ad43ca64b295d8444b10f22ee868f18429268af498f1bc515434878b690e37a2.css","criticmarkup.css":"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css","print.css":"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css"}}
|
||||
+2
-2
File diff suppressed because one or more lines are too long
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
@@ -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();
|
||||
}
|
||||
|
||||
@@ -4,13 +4,15 @@
|
||||
<h1 class="py-4">Create New Page</h1>
|
||||
</div>
|
||||
<div id="wiki-content" class="create edit">
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#" id="edit" class="tabnav-tab selected" aria-current="edit">Edit</a>
|
||||
<a href="#" id="preview" class="tabnav-tab" aria-current="preview">Preview</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Toggle edit or preview mode">
|
||||
<a href="#" id="edit" class="tabnav-tab selected" aria-current="page">
|
||||
Edit
|
||||
</a>
|
||||
<a href="#" id="preview" class="tabnav-tab">Preview</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="has-sidebar tabnav-div" id="edit-content">
|
||||
{{>editor}}
|
||||
</div>
|
||||
|
||||
@@ -5,8 +5,10 @@
|
||||
</div>
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs">
|
||||
<a href="#" id="edit" class="tabnav-tab selected" aria-current="edit">Edit</a>
|
||||
<a href="#" id="preview" class="tabnav-tab" aria-current="preview">Preview</a>
|
||||
<a href="#" id="edit" class="tabnav-tab selected" aria-current="page">
|
||||
Edit
|
||||
</a>
|
||||
<a href="#" id="preview" class="tabnav-tab">Preview</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="tabnav-div" id="edit-content">{{>editor}}</div>
|
||||
|
||||
Reference in New Issue
Block a user