~cypheon/idris2-quickdocs

1a76e9e6838fc9ddfa44012d42115166c8da87f2 — Johann Rudloff 1 year, 4 months ago b6fef6a
Enable TAB to focus search field from anywhere on the page, document the behaviour
4 files changed, 39 insertions(+), 3 deletions(-)

M app.js
M index.html
M style.css
M templates/home.md.j2
M app.js => app.js +9 -0
@@ 264,6 264,15 @@ function init () {
  iframe.addEventListener('load', (evt) => {
    console.log('iframe loaded', evt);
    document.title = iframe.contentWindow.document.title;

    iframe.contentWindow.document.addEventListener('keydown', (evt) => {
      if (evt.key === 'Tab') {
        searchBox.focus();
        searchBox.select();
        evt.preventDefault();
        return false;
      }
    });
  });
}


M index.html => index.html +1 -0
@@ 11,6 11,7 @@
    <div id="sidebar">
      <div class="searchbox-container">
        <input type=text class="searchbox" id="i2d_searchbox" placeholder="Type to begin searching">
        <span class="key-shortcut">Tab ⇥</span>
      </div>
      <ul id="i2d_search_results">
      </ul>

M style.css => style.css +27 -1
@@ 18,12 18,38 @@
  /*border-bottom: 3px solid rgb(101, 159, 219);*/
  display: flex;
  flex-direction: row;
  position: relative;
}

.searchbox {
  width: 100%;
}

.searchbox-container input:focus + .key-shortcut {
  opacity: 0;
}

.searchbox-container:hover .key-shortcut {
  opacity: 0;
}

.searchbox-container .key-shortcut {
  opacity: 1;
  color: rgb(101, 159, 219);
  position: absolute;
  right: 6px;
  top: 6px;
  border: 1px solid rgb(101, 159, 219);
  border-radius: 5px;
  padding: 1px 4px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  transition: ease-out;
  transition-duration: 0.1s;
  font-size: 12px;
  background-color: white;
  pointer-events: none;
}

#i2d_search_results {
  position: relative;
  overflow-y: scroll;


@@ 97,7 123,7 @@ article.copy {
  margin: 3em auto;
  width: 680px;
}
 article.copy code {
article.copy code {
   background-color: #eeeeee;
   border: 1px solid #dddddd;
   border-radius: 2px;

M templates/home.md.j2 => templates/home.md.j2 +2 -2
@@ 1,7 1,7 @@
# Idris2 Documentation
# Idris2 Documentation Browser

Use the search field on the left to perform a search, results will update as
you type.
you type. You can press `Tab ⇥` anywhere on the page to focus the search field.

### Fuzzy Search Patterns