Address issues discovered in February 2020 design QA

[eddieantonio]

We had a design QA session with Diane a few days ago. Here's a laundry list of issues to address:

• "search for Cree or English" — placeholder text too big
• Search icon seems to be missing on production site Search icon is missing on production site #279
• Search icon on mobile should be left-aligned: offers affordance of "I can use this to search"
• Search icon on tablet/desktop should be right-aligned: offers affordance of "I can click this to begin my search!"
• prefix search should work (future feature!)
• ℹ️ icon overflows its box
  • Use a   between it and the (general) word class?
  • needs margin
  • make (general) word class smaller?
• <cite> should be dark blue: #182457
• Paradigm: fix issue with headings vs. column labels; headings should be left-aligned (blocked by Develop and switch to multi-pane layouts #167) (see also: Both column headings for the basic mobile layouts should have the same formatting (bold etc.) #193)
• Paradigm table is misaligned in several places (blocked by Develop and switch to multi-pane layouts #167)
• there should be icons to explain the paradigm labels (obsoleted by Provide more information with pop-ups for row/column labels in paradigms #363)
• row label & wordform should be vertical-align: top
• "show more" doesn't work — disable until we have the full paradigms
• .paradigm-label--col { overflow-x: hidden }
• More margin between head and its definitions.
• There should be a circle around the ℹ️ icon when it's hovered/activated
• There should be a shadow under the box for the linguistic breakdown
• "Enable linguist mode" button should use <button> markup, but look like the "about" link
• update the copyright year — make it dynamic
• About page: margin between headings should be tighter to create a stronger visual hierarchy
• About page: links should have font-weight: 700
• logos should be laid out more carefully, using a 2x3 grid (Add SSHRC logo #300)
• Search does not work on About page (crashing JavaScript) Search doesn't occur on 'About' page #280
• Search: preverbs should all display under a common heading
• decrease margin when there is no explicit definition
• change the colour of the 🔊 icon: #286995 — shift in hue from the ℹ️ icon
• Tablet & desktop: the footer should use more horizontal space than vertical space
• There needs to be a clearer indication that a page is loading
• less margin between head and "form of {lemma}" text
• more margin between head and definition
• increase margin between <hr> and the content above
• Change from Zeplin mockup: recordings "bar" will be placed in same place as tablet/mobile, rather than appear on the same line as the head.
• Desktop: ℹ️ icon should be smaller
• vertically centre the 🔊icon

[eddieantonio]

I will do a handful of these and make a new PR, hopefully by this afternoon!

[eddieantonio]

Okay, I've picked all the low-hanging fruit in #293. What's left are things that we'll require more effort! I'm unassigning myself for now.

[aarppe]

@eddieantonio Is there still something crucial here that should be done? (We might separate that into an issue or few of their own.)

[eddieantonio]

@aarppe I've gone through the open tasks here and most of them are obsoleted by #862 and #363.

There is one bullet-point left, however:

• Search: preverbs should all display under a common heading

This is referring to the mockups in which preverbs and reduplication were all grouped together, rather than having one line per preverb as we currently have; see:

Should we group all prefixal elements on one line? Or is our current multi-line approach more favourable?

[aarppe]

@eddieantonio With the current approach, we want to keep the order of the prefixal elements, and reduplication and lexical preverbs can be interspersed (as reduplication will apply on the immediately following element but not generally over the whole wordform). So, the current solution is more faithful to the lexical meaning than the original UI proposal, and this one remaining subitem can be considered closed, and along with that, this entire issue.