Update search results to use smaller tile
Closed, ResolvedPublic3 Story Points

Description

Thumbnail size 70x70 px
Tile height 70px
Space between tiles 5 px
Result tiles text 16px
wikidata descrip text 12 px
Matching letters bolded as user types search term

Rules for text minimizing:

Title should never be taller tan the image (plus top bottom padding)
Title should have compression resistance > wikidata description (meaning that the wikidata description will get reduced to 0 height if needed)
Set minimum scale factor on title - not to be smaller than 2 px less than 16 px starting height
Tail truncate the title if beyond 4 lines

If title is more than 4 lines,

KHammerstein updated the task description. (Show Details)
KHammerstein raised the priority of this task from to Needs Triage.
KHammerstein updated the task description. (Show Details)
KHammerstein set Security to None.
Fjalapeno updated the task description. (Show Details)Aug 28 2015, 7:52 PM
Fjalapeno edited a custom field.

@KHammerstein here's a screencap of my first draft which is going up for code review now. You'll notice these differences from the mock:

  • Bookmark button is center-aligned, which prevents the title from occluding it when too long
  • When title is 2+ lines, the description is shifted downward slightly. This is due to the sizes & margins we're using, plus some weirdness with how iOS lays out the sizes/margins in the mock when multiple lines are involved. Happy to discuss more over hangout
  • Cells have a shadow (like in the other views). This isn't in the mock, but thought you might want it anyway. Let me know if this isn't the case
  • I guessed at the spacing for the cells (currently 10px/5pts). Let me know if that looks right.

@BGerstle-WMF
Looking good! Heres notes,

  • We can remove bookmark button from search results, I think its unnecessary at this point and clutters the screen.
  • Description should be closer to titles - about 5 px away if that works or see mock for spacing.
  • Description text should be #777777
  • Cell spacing looks good
  • Good point to add the shadow - could you make the shadow radius slightly smaller? Actually it would be helpful to see the specs and we can standardize all the shadows. Are these all the specs?
layer.shadowOffset = CGSizeMake(x,x);
layer.shadowColor = [[UIColor x] CGColor];
layer.shadowRadius = x f;
layer.shadowOpacity = x f;

We can remove bookmark button from search results, I think its unnecessary at this point and clutters the screen.

@Fjalapeno @KHammerstein I can remove, just want to be sure we're clear that we don't want people saving search results.

Description should be closer to titles - about 5 px away if that works or see mock for spacing.

Gotchya, I can make sure the description is 5 points away (was using 8).

Description text should be #777777

Will do

Good point to add the shadow - could you make the shadow radius slightly smaller? Actually it would be helpful to see the specs and we can standardize all the shadows. Are these all the specs?

Do we want all the shadows the same? The current parameters are:

self.layer.masksToBounds = NO;
self.layer.shadowColor   = [UIColor blackColor].CGColor;
self.layer.shadowOpacity = 0.2;
self.layer.shadowRadius  = 4.0;
self.layer.shadowOffset  = CGSizeZero;

@KHammerstein @Fjalapeno Sorry, to clarify my question about saving search results: is this something we want to temporarily disable until we find a place for the button, or that we don't want at all?

Also, title is only able to go to 3 lines w/ current spacing & font sizes

MBinder_WMF closed this task as Resolved.Oct 7 2015, 10:07 PM