Permalink
Browse files

fix(docs): Side bar navigation not accessible on small screens (#946)

* [search.vue] change to nav-toggle button

* [nav-toggle] add default slot

* [collapse] Add tag prop

* Update sidebar.vue

* Update docs.min.css

Sync with latest bootstrap docs CSS

* Update docs.vue

Add spaced DIV visible only on XS screens

* merge in tether removal (#948)

* fix(mixins): remove tether popover mixin

* delete popover mixin

* Update search.vue

* Disable search box

* Switch badding div breakpoint to md
  • Loading branch information...
tmorehouse committed Aug 29, 2017
1 parent e500836 commit 4666b372019d2c739c797bb8e0dbfb701aba4feb

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -2,18 +2,19 @@
<form class="bd-search d-flex align-items-center">
<span class="algolia-autocomplete">

<input type="search" class="form-control ds-input" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-labelledby="search-input" aria-owns="algolia-autocomplete-listbox-0" dir="auto">
<input type="search" disabled class="form-control ds-input" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-labelledby="search-input" aria-owns="algolia-autocomplete-listbox-0" dir="auto">

<pre aria-hidden="true"></pre>

<span class="ds-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-0">
<div class="ds-dataset-1"></div>
</span>
</span>

<b-nav-toggle target="bd-docs-nav" class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" aria-label="Toggle docs avigation">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg>
</b-nav-toggle>

<button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs avigation">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg>
</button>
</form>
</template>

@@ -54,4 +55,4 @@
text-rendering: auto;
text-transform: none;
}
</style>
</style>
@@ -1,5 +1,5 @@
<template>
<nav class="collapse bd-links" id="bd-docs-nav">
<b-collapse tag="nav" is-nav class="bd-links" id="bd-docs-nav">
<div class="bd-toc-item active" v-for="group in site.nav" :key="group.slug">
<router-link class="bd-toc-link" :to="'/docs/'+group.slug">
{{ group.title }}
@@ -18,7 +18,7 @@
</b-nav>

</div>
</nav>
</b-collapse>
</template>

<style>
@@ -5,6 +5,7 @@
<div class="container-fluid">
<div class="row flex-xl-nowrap2">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<div class="d-block d-md-none py-4 mt-3"></div>
<m-search/>
<m-sidebar></m-sidebar>
</div>
@@ -11,11 +11,12 @@
@leave="onLeave"
@after-leave="onAfterLeave"
>
<div v-show="show"
:id="id || null"
:class="classObject"
@click="clickHandler"
><slot></slot></div>
<component v-show="show"
:id="id || null"
:is="tag"
:class="classObject"
@click="clickHandler"
><slot></slot></component>
</transition>
</template>

@@ -50,6 +51,10 @@
visible: {
type: Boolean,
default: false
},
tag: {
type: String,
default: 'div'
}
},
watch: {
@@ -6,7 +6,7 @@
:aria-expanded="toggleState ? 'true' : 'false'"
@click="onclick"
>
<span class="navbar-toggler-icon"></span>
<slot><span class="navbar-toggler-icon"></span></slot>
</button>
</template>

0 comments on commit 4666b37

Please sign in to comment.