Design mock ups for Vanilla docs search improvements

matthewpaulthomas commented 4 years ago

Nothing particularly novel here, I hope:

vanilla-site-search

If+when search is expanded to cover the whole site (not just “Docs”), then the search field should move to the end of the header.
Whenever the search field is focused and non-empty, an auto-complete menu should appear below it. It should always have at least one item, ‘Search for “{string}”’, highlighted by default. If there are any matching page titles, next should come a separator and items for those page titles, with the matching substring highlighted. Titles that start with the search string should come first, followed by titles that don’t.
Because the first item is highlighted by default, you should then be able to use Down/Up arrow keys to change the selection. This should not change the contents of the field itself.
Clicking the search icon should close the menu (to clarify that it’s not being used on this occasion) and then search the site for the field contents, just like ‘Search for “{string}”’ would.

bartaz commented 4 years ago

Do we want to do anything specific with search results page (after clicking on "Search for 'st'", or should simply be consistent with our other docs search pages, like on snapcraft?

matthewpaulthomas commented 4 years ago

There are several things I’d change about how we present search results generally — use real quote marks, use real ellipses, use an ellipsis when the extract omits the start of a sentence (not just the end of one), reduce the paragraph spacing, drop the separators (no longer necessary with less paragraph spacing), and make the whole of each result clickable rather than just the top and bottom.

However, at the moment I don’t see there would be any benefit in Vanilla site search results being different from how we present search results generally.

lyubomir-popov commented 4 years ago

@bartaz @matthewpaulthomas so is the first version of the search (the one that will be in place at the completion of the flask conversion) going to cover the whole site? Or does this design apply for when that happens. In case of the latter, do we need an "in the meantime" mockup?

bartaz commented 4 years ago

@lyubomir-popov

Once we move the docs to use Flask we will be able to use existing search module to have a full text search. This (in the first implementation) would be simply a search results page. So we can have a "global" search box in the navigation (without autocomplete), and when user click search or hits Enter a search results page will be shown. As far as I understand that's what "Search for 'xqy'" part of the autocomplete dropdown represents.

When we have that (a search results page), we can improve the search experience by adding a proposed autocomplete dropdown. This is a bigger piece of work, as it's a component that we don't have yet anywhere. It will require a bit of visual design work, implementation as Vanilla CSS pattern, implementation of backend endpoint to provide the list of results via JSON (for JavaScript) and JavaScript implementation of the functionality (getting search results, updating autocomplete contents, keyboard navigation, etc).

lyubomir-popov commented 4 years ago

@bartaz I've made an issue for the autocomplete part of this. I was thinking of doing something now, but considering that the juju version of this is currently in progress and the proposed dropdown here is not going to be implemented immediately, maybe it's best to postpone the work until the juju search is finalised?

lyubomir-popov commented 4 years ago

@bartaz I would propose a slightly simplified version of the snapcrat search results:

headings in h4
no need for horizontal rules
link same font size as description

BTW just discovered a bug with .row > .u-fixed-width that happens on the snapcraft search page (won't happen with the markup bellow).

<div class="u-fixed-width">
  <div class="p-strip is-shallow">
    <h1 class="p-heading--two">We've found these results for your search <strong>"snapd"</strong>
    </h1>
  </div>
  <div class="p-strip is-shallow u-no-padding--top">
    <h4><a href="https://snapcraft.io/docs/installing-snapd" class="title-main">Installing <b>snapd</b> | Snapcraft
        documentation</a></h4>
    <p>
      Installing <b>snapd</b>. Snaps can be used on all major Linux distributions, including Ubuntu, Linux Mint,
      Debian and Fedora. Snap is pre-installed and ready to go on&nbsp;...
    </p>
    <p><a href="https://snapcraft.io/docs/installing-snapd">https://snapcraft.io/docs/installing-<b>snapd</b></a>
    </p>
    <h4><a href="https://snapcraft.io/docs/installing-snap-on-ubuntu" class="title-main">Installing snap on Ubuntu
        | Snapcraft documentation</a></h4>
    <p>
      ubuntu1404-software-centre. Alternatively, <b>snapd</b> can be installed from the command line: $ sudo apt
      update $ sudo apt install <b>snapd</b>. Either log out and back in&nbsp;...
    </p>
    <p><a
        href="https://snapcraft.io/docs/installing-snap-on-ubuntu">https://snapcraft.io/docs/installing-snap-on-ubuntu</a>
    </p>
    <h4><a href="https://snapcraft.io/docs/getting-started" class="title-main">Getting started | Snapcraft
        documentation</a></h4>
    <p>
      The <b>snapd</b> daemon manages the snap environment on the local system. Its installation will include the
      snap tool for interacting with snaps. You can check both&nbsp;...
    </p>
    <p><a href="https://snapcraft.io/docs/getting-started">https://snapcraft.io/docs/getting-started</a></p>
    <h4><a href="https://snapcraft.io/docs/installing-snap-on-fedora" class="title-main">Installing snap on Fedora |
        Snapcraft documentation</a></h4>
    <p>
      Installing snap on Fedora. Snap can be installed on Fedora from the command line: $ sudo dnf install
      <b>snapd</b>. Either log out and back in again, or restart your&nbsp;...
    </p>
    <p><a
        href="https://snapcraft.io/docs/installing-snap-on-fedora">https://snapcraft.io/docs/installing-snap-on-fedora</a>
    </p>
    <h4><a href="https://snapcraft.io/docs/installing-snap-on-centos" class="title-main">Installing snap on CentOS |
        Snapcraft documentation</a></h4>
    <p>
      Occasionally, however, the exact version of a specific package used to build the <b>snapd</b> RPM has yet to be
      imported into the base CentOS repositories. This can&nbsp;...
    </p>
    <p><a
        href="https://snapcraft.io/docs/installing-snap-on-centos">https://snapcraft.io/docs/installing-snap-on-centos</a>
    </p>
  </div>
  <div class="p-strip p-pagination">
    <a class="p-pagination__link--next" href="/docs/search?q=snapd&amp;start=11">
      <span class="p-pagination__label">Next</span>
    </a>
  </div>
</div>

spencerbygraves commented 4 years ago

@lyubomir-popov ok, let's try it with the new type sizes. It may be something we can propose elsewhere, such as ubuntu.com

cristinadresch commented 4 years ago

Closing as a design approval. Ready for build @bartaz

canonical / design-vanilla-framework

Design mock ups for Vanilla docs search improvements #445