closed livingstoneonline/livingstoneonline#24

MS Viewer: Top Strip Spacing of Items

awisnicki

screen shot 2016-05-09 at 17 20 02

The horizontal spacing of items on the top strip needs slight modification. See the attached mockup. Specifically, I've:

  1. Put the main menu farther to the left.
  2. Replaced the home icon with our standard home icon.
  3. Replaced the other icons with our standard icons (and added Pintrest) plus spaced out all icons evenly.
  4. Placed the magnifying glasses evenly on either side of the slider.
  5. Place the rotate icon closer to the magnifier.
  6. Move the page number next in line and increased the size of it slightly to match the size of "Transcription" and "Item Details"
  7. Better spaced out the "Transcription" and "Item Details" buttons.
  8. Elongated the search bar to match the other pages of the site.
  9. Put the X further right.
  10. Grouped the various items on the top strip and better distributed them horizontally.
awisnicki

Since you've done some of this work, I'm updating this ticket:

The horizontal spacing of items on the top strip needs slight modification. See the attached mockup. Specifically, I've:

  1. The menu on the left should be the same distance from the left edge as the X on the right is from the right edge.
  2. Placed the magnifying glasses evenly on either side of the slider.
  3. Place the rotate icon closer to the magnifier.
  4. Move the page number next in line and increased the size of it slightly to match the size of "Transcription" and "Item Details"
  5. Better spaced out the "Transcription" and "Item Details" buttons.
  6. Elongated the search bar to match the other pages of the site.
  7. Put the X further right.
  8. Group the various items on the top strip and better distribute them horizontally.
nigelgbanks

Have a look and see if it looks good. One caveat though is that the close icon can't be lined up with the others as it needs to float such that it stays in the right hand corner even when the toolbar breaks across multiple lines.

awisnicki

This is definitely close. Here are my suggestions for Desktop:

  1. Move menu at left (and the other icons) slightly over to the left. In short, the menu should be closer to the edge, and the menu on left should be same distance from left edge as X box is from right edge.
  2. Spacing between icons at left does not appear even. In particular, the home icon needs a little more space around it, the facebook icon a little less.
  3. The left magnifying glass is much closer to the slider than the right. I like the distance of the right, so use that on both side.
  4. The distance of the right magnifying glass to the slider should be the same as from the magnifying glass to the rotate button.
  5. Lower the page number button so that the bottom of it is even with the bottoms of the "Item details" & "Transcription" buttons. Also the page number is right now too big. The size of the font should be the same size as that of "Item Details" and "Transcription"
  6. The Item Details and Transcription buttons could each be a bit wider (particularly Item details). Right now the text looks squashed in there.
  7. Item Details and Transcription buttons are too close together. Move the transcription button over to the right.
  8. Move the search bar farther over to the right.
  9. The X button should be the same height and at the same level (vertically) as the search bar, Item Details and Transcription buttons etc.

Let's see how these changes look. After this, we may need to have quick Skype session to finalize and/or to discuss break points for mobile.

Btw, for some odd reason, it's not letting me switch pages either via the dropdown or the arrows. Perhaps this is a temporary bug?

awisnicki

Please let me know when this one is up on stage, and I can do one last review before closing this issue out.

nigelgbanks

Still working on it, the changes along with breaking at mid-points requires reworking so that it remains responsive and looks good on all levels. Might not be up on stage for another day or so.

nigelgbanks

Closing this ticket to combined mobile feedback to a single ticket => #55