Styling of LiveSearch results

Bug #335059 reported by Paul Everitt
2
Affects Status Importance Assigned to Milestone
KARL3
Fix Released
High
Mike Naberezny

Bug Description

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.

Revision history for this message
Paul Everitt (paul-agendaless) wrote :

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

Changed in karl3:
assignee: nobody → ree
importance: Undecided → Medium
Revision history for this message
Paul Everitt (paul-agendaless) wrote :

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

Changed in karl3:
assignee: ree → mike-n
importance: Medium → High
milestone: none → m9
Revision history for this message
Paul Everitt (paul-agendaless) wrote :

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>

Revision history for this message
Mike Naberezny (mnaberez) wrote :

Fix committed in rev. 2064.

Changed in karl3:
status: New → Fix Committed
Changed in karl3:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.