Refactor/colorbox design

[tabshaikh]

Description

Subtask of #659

Technical

The OL colorbox modal has been resized and redesigned

Evidence

[tabshaikh]

The next steps to refactor the modal will be to change the close arrow to something smaller and its color to black/red as it suits the modal

[mekarpeles]

This lgtm so far, let's fix the X before merging into master

[mekarpeles]

@koderjoker may be able to propose advice on the best way to replace the clunky "X" graphic in our modal.

Right now the modal uses a.floaterShut { background-image: url(/images/icons/icon_close-pop.png); }

Which is implemented here:
<a class="floaterShut" href="javascript:;" onclick="$.fn.colorbox.close();"><span class="shift">Close</span></a>

We may want to instead use:
https://fontawesome.com/v4.7.0/icon/times

Or just a simple x (to avoid loading any new font dependencies)

Thoughts?

[koderjoker]

I agree that it would be best to avoid loading any new font dependencies.

How about using the unicode for multiplication × × as a symbol, since it's centred and symmetric, and include it as a button with an aria-label?
<button aria-label="Close Modal">&times;</button>

[mekarpeles]

Yeah, I like @koderjoker's solution, here's what I think we should do:

1. set floaterHead to display: flex so we don't need floats
2. set div.floaterHead h2 to flex: 1 so it takes up all the space (other than the ×)
3. remove background-image, position: absolute, and top: 0 and right: 0 from a.floaterShut
4. change the contents of <a class="floaterShut" href="javascript:;" onclick="$.fn.colorbox.close();">...</a> to be <a class="floaterShut" href="javascript:;" onclick="$.fn.colorbox.close();">×</a>
5. add text-decoration: none; on a.floaterShut and make font-size: 1.1em; and color: @grey or some sort of grey which is close to #666

[tabshaikh]

The last commit probably needs more testing from your side @mekarpeles :)

[mekarpeles]

:(

1. a grep -rli "icon_close" reveals that icon_close-pop.pngis still referenced inui-dialog.less`.
2. Edit Book Covers, click "Manage". The parent container is not large enough

Let's see if/where #1 is used and come up with a solution to #2.

[mekarpeles]

The size/clipping issue was related to the declared size of the iframe. I've fixed this and will push

[mekarpeles]

Here's an example of where things break! :) No ×

[mekarpeles]

There are the files affected by the × change. We should go down the list and make sure each works correctly before merging:

templates/covers/change.html
templates/covers/author_photo.html
templates/covers/book_cover_single_edition.html
templates/covers/book_cover.html
templates/covers/book_cover_work.html
templates/type/edition/view.html
templates/lists/widget.html
templates/books/edit/addcover.html
templates/books/edit/addfield.html
templates/lib/markdown.html
macros/databarAuthor.html

[mekarpeles]

All issues seem resolved + paths working.

[tabshaikh]

Great then let's merge that

[mekarpeles]

Merged into master as well.