Styling of LiveSearch results

[Paul Everitt]

We currently have rather plainly-styled results in LiveSearch as a placeholder for better formatting later.

The attached screenshot shows styling from Safari 4. Of note: it looks less like Spotlight (and thus KARL2) and more like our headings-based approach in KARL3.

We should make the results look somewhat like the screenshot:

- Headings in a lighter gray

- Results indented a bit

- Decent padding between hits

- A light, gray, but thick border between groups

Of course we have some requirements that can't be met by the screenshot:

- A link that opens search results for a certain group.

- A link that opens search results for all groups.

I'm not convinced these two are worth the UI clutter, so I'll start a dialog elsewhere about it.

[Paul Everitt (paul-agendaless)]

Balazs, we'll pick this up later when we have the specs nailed down.

[Paul Everitt (paul-agendaless)]

Hi Mike, re-arranging the list a bit. I see I forgot to make a screenshot attachment. I'll do so next.

[Paul Everitt (paul-agendaless)]

Example of formatting (padding, font size, font weight, font color, etc.) of how our Livesearch results could be improved. Don't need the right column of URLs.

To play around with the HTML and CSS without the JS involved, paste this HTML into a ZPT and prototype the CSS:

<ul class="livesearch-list"
    style="top: 60.3667px; left: 522.5px; width: 448px;">
  <li class="hasheader">
    <div class="header">People</div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
  </li>
  <li class="hasheader">
    <div class="header">Places</div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
  </li>
  <li class="hasheader">
    <div class="header">Things</div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
    <div class="item">
      <a href="">Some Item</a>
    </div>
  </li>
</ul>

[Mike Naberezny (mnaberez)]

Fix committed in rev. 2064.