Frontend Changes from Kimmy Wireframes

[avkoehl]

Motivation

Kimmy proposed many changes to make the front end more intuitive, cohesive, and informative. She shared her wireframes and comments with us. We should implement as many of her proposals as possible to improve the site before giving it to reviewers.

Link to Kimmy's proposed changes: https://drive.google.com/drive/folders/1xGo_gR4VWrwRsbxg_TJurCBidfYqaWhg

Task

Implement the various features from the wireframes, including:

• [x] new navigation bar structure and margins
• [x] better footer styling and circular up arrow button
• [x] changes to the index page
• [x] changes to the about page
• [x] changes to text topics page
• [x] changes to top documents results (on multiple pages)
• [x] changes to word meanings page
• [x] changes to word frequencies page

[avkoehl]

Navigation bar changes

• [x] change page names and order to - Quintessence, Text Topics, Word Meanings, Word Frequency and About
• [x] change margin-bottom to 34px
• [x] increase overall height
• [x] change unselected color to #BCBCBC
• [x] font to Libre Baskerville 14

FInished: https://github.com/datalab-dev/quintessence_web_app/commit/de2d11e650ee35add3f74f1841c516e38087611a

[avkoehl]

Index page changes

• [x] change text blocks to have a width of 560px
• [x] change text blocks to have Helvetica size 16 font with bigger line spacing and color f #333333
• [x] add preview bar with previews of the graphs for each page
• [x] change style for block quote and the reference
• [x] add link to full intro

FInished: https://github.com/datalab-dev/quintessence_web_app/commit/4db9cdec0e577dccda5f66113c70bfbece28e4da

Note that icons have not been added and the background color of the topic plot should be updated to grey!

[avkoehl]

Footer changes

• [x] move footer to footer.html and include client side like with the header
• [x] remove webapp version
• [x] remove link to github
• [x] replace "return to top" button with a circular button

FInished: https://github.com/datalab-dev/quintessence_web_app/commit/3c45ca02f5f1b12fdf43baf60022b0b13b9ca587

Note that icon needs to be added to button and the links int eh footer should be better.

[avkoehl]

About changes

• [x] remove indentation stuff
• [x] text block width
• [x] Team and Reference Headers are Baskerville Bold 20
• [x] General Editors, Developers, EEBO, Digital Projects, Software, Journal Articles are all Helvetica Bold 18

Finished: https://github.com/datalab-dev/quintessence_web_app/commit/4866417a6e56a197e3a3ef29021600dbe223df32

Note that Kimmy, Jessie etc have not been added to team as their is still some confusion about the categories for the credits.

[avkoehl]

Topic Model page changes

• [x] move controls back to the page
• [x] use ion slider (http://ionden.com/a/plugins/ion.rangeSlider/start.html)
• [x] color change on bubble select (use code from update-plots branch)
• [x] word histogram match bubble select color
• [x] remove plot title
• [x] remove plot controls (update-plots-branch)
• [x] add "apply filter" button with number of results right next to it
• [x] change plot background to grey
• [x] make it clear the plot is reloading
• [x] expandable height on keyword/location/author selectors
• [x] disable select zoom and scroll zoom
• [x] remove axis for histogram
• [x] remove numbers (the topic numbers are arbitrary)
• [x] default bubble selected
• [x] take a screenshot of plot with grey background (with a selected bubble too) and update text-topics.png
• [x] better hover info

Finished: https://github.com/datalab-dev/quintessence_web_app/commit/ddad747985ecf8b38d227f4ee5e04b2af4756710

Things that need to be done later:

• ndocs shouldn't be hard coded as it currently is
• we need to add a table with the top tens words for each topic so that its easy to incorporate in the hover
• we should also include something like this https://plot.ly/javascript/text-and-annotations/#styling-and-formatting-annotations in addition to the hover
• we should add a popup button that shows more information about the subset

[avkoehl]

top docs changes

• [x] add title with margin bottom 34px, 16px Libre Baskerville (will be h3) Document Results (XX)
• [x] redo meta table style: names Helvetica bold 14px #707070 and values Helvetica 16 #333333
• [x] create three buttons: Reference IDs, Sample Text, Full Document, same style as 'Apply Filters' with 26px margins on top and bottom
• [x] move reference behind reference ids button as popup with same style as meta table
• [x] move lemma behind sample, remove the rest
• [x] full doc just links to xml

Finished: https://github.com/datalab-dev/quintessence_web_app/commit/4a96581a2b4ce7885d8170621646a729ae6e1801

Things that need to be done later:

• add pages to doc results
• adding the title in the modal divs requires new php to get title based on qid (or some async wizardry)

[avkoehl]

word frequency changes

• [x] add h2 title (Word Frequency)
• [x] add description from Kimmy's input
• [x] change tab style to three buttons with hr above and below
• [x] center "Plot a Word"
• [x] put search bar and button on newline also centered, 560 width
• [x] change search button style

Finished: https://github.com/datalab-dev/quintessence_web_app/commit/cc8babb5802511bf28fbee12d9ff486d644e1147

Things to be done later:

• fix the x on buttons for the words so that the plot is actually updated
• better word search/select system in general, this is really not intuitive

[avkoehl]

Word meanings changes

• [x] add h2 title (Word meanings)
• [x] update description
• [x] change tab style
• [x] match word frequency search bar
• [x] update the top docs
• [x] increase plot width to 1024

Finished: https://github.com/datalab-dev/quintessence_web_app/commit/4808a1ff4c1a314a1a7c3e381f9b8edebd25c6a2

Things to be done later:

• incorporate Chandni's changes from update embeddings issue (#20)

[avkoehl]

Wrap Up

For this issue:

• [x] add icons to home page
• [x] add icons to up button in footer
• [x] update total docs count for full corpus on the text topics page (loaded full subset seems to be 25318, will hard code that number for now)

Decided to use font-awesome as they had a cnd. All the docs for iron icons was in LESS except one example which seemed super slow.

New issues:

• better term search interface (for Word Meanings and Word Frequency Page) #33
• be able to remove individual terms from the plots #34
• add titles to modal divs #35
• add pages to the top_docs results #36
• update about page team to include newer titles and Kimmy #37
• add annotations to plots #31
• add subset info modal #38