Update application style/branding about scope

[jraddaoui]

Hi @stefanabreitwieser, about the grey banner (S1-001), this element appears in a lot of pages, usually to shown the hierarchy in the resources (Collection / Folder / File). Do you want it removed from all pages or just from some of them where it looks repetitive? I'd appreciate a list of pages for the later. Thanks!

[stefanabreitwieser]

Hey @jraddaoui -- I think just where it looks repetitive makes the most sense. For me this is the Collections, Search, and FAQ pages (where the bar is immediately followed by the title of the page), but if you see any other ones that jump out at you feel free to remove those as well. Thanks!

[jraddaoui]

Thanks @stefanabreitwieser!

Remaining things to do in here:

• Replace current title by CCA black logo and other header changes (#64).
• Text changes in home and FAQ pages (assuming no layout modifications).
• Change current blue (Bootstrap default) in buttons to #001489 (any preference for the hover color?).
• Change font to Roboto (https://github.com/google/roboto).

Estimate: 3h + 8h from #64.

[jraddaoui]

Hi @bunekcca and @stefanabreitwieser,

Pull request #100 has been merged and deployed into the test site. It addresses the feedback provided in #52, #64, #87, #88, #89 and #90, alongside this issue requirements.

First of all, great feedback on those issues, I think this is starting to look great and that I've been able to complete off all of it plus a few more minor changes I could do along the way. Some notes about it:

• The only thing I don't like is the gray background behind the collections table at the home page. On one hand, that gray background was not used anywhere else. Therefore, I've changed the breadcrumbs, the preservation metadata header and the file input button backgrounds to match that gray. One the second han, and more important, it reduces the accessibility of the application. With the current application style, the color contrast is great for it, and I have also been developing using "aria" attributes and labeling correctly in most of the cases, so the application is not far to meet accessibility standards. However, this gray section reduces the visibility of some elements in those sections. I'd suggest to remove that background and only use the lighter gray already used in the tables for all backgrounds of this kind. Maybe we could use an horizontal separator (similar to the ones in the user drop-down) or perhaps the increased margin could be enough to differentiate the homepage sections. Please, let me know what do you think, it can be easily changed back.

• I have kept the full page width in the Digital File preservation metadata section for a few reasons:

  • The Folder view page has a similar layout and the content bellow (Digital Files table) takes the full page width.
  • The right column only contains the attachments section at this point and it leaves a lot of empty content if the bottom section doesn't take the full width.
  • The content in the PREMIS event may contain large strings.
  • We'll probably use the full accordion in the settings page, to have expandable sections with different forms in the future, and also to add some consistency to the application. I'll try to style it properly for both places if we have time in #7.

• Improved forms style:

  • To allow translation over the file upload input, it's now styled using Bootstrap custom inputs.
  • To fix and style the check-boxes, they're also using Bootstrap custom inputs.

• Hide non actionable header elements for not logged in users (search form and home and collections links).

• Changed login page layout.

  • The login form was huge, it now takes half the page width in wide widths.
  • The home page was the only page with centered content, and with the half size login form, I thought it would be better to have this page with centered content too.

• Changed and removed breadcrumbs:

  • They are now only used in resource pages (Collection, Folder, Digital File pages).
  • To match the UXPin, they don't have intermediate elements like "Folders" or "Digital Files" that are not links.

• Improved margins and responsive design for mobile view and small window widths. The application is fully responsive and the most noticeable responsive changes for small resolutions that should be tested are:

  • Header navigation bar will show an expandable menu button to the left and move the logo the right.
  • Login form will take the full width.
  • Home page search bar will take the full width.
  • Attachments section will be moved in between the Digital file description and the PREMIS metadata section on the Digital file page and in between the Folder description and the Digital Files table.
  • Tables will show a scroll bar bellow and will be "draggable" in mobile, without breaking the application layout because they need more width. This may happen sooner than expected (I mean in higher window widths) due to the recent changes in the tables (avoiding two lines table headers).

Please, let me know if you have any questions.

[bunekcca]

Hi @jraddaoui
It looks great now ! Thanks for everything.

#1 I agree with your comment, we should replace the grey layer by an horizontal separator. Can we double the space between the sections and add the separator ?

#2 Understand your point. Can we just add a down arrow or a "+"? I still think it lacks a bit of affordance, I have no clue of what I can do there. It could be "+ Preservation metadata" and it gives a clear indication of what will happen when clicking.

#3 OK

#4 Can we just constraint the width of the text
and add a mailto: link on [email protected]

#5 OK

#6 OK

[jraddaoui]

Thanks @bunekcca!

1 - I have tried with different gray tones for the separator, but they all looked too dark to me so I ended leaving the default Bootstrap style for the <hr> tag.

2 - Done, I'll try to improve it in #7.

4 - This is not easy to make it look right in all browsers, as it depends on the window width and the browser default zoom. I have reduced the first paragraph width al a little in high resolutions and kept the full width for all the rest. I think it looks better that way, but it doesn't look perfect on every resolution/zoom.

It's all deployed in the test site.

[bunekcca]

Thanks @jraddaoui
It's almost OK for #2, when it's active "+" should change to "-"

Can we also align it with the text below ?

After that we'll be all good.

[jraddaoui]

Hi @bunekcca,

To achieve that it will require custom Javascript code, and that's the main reason of having two estimates in #62.

[jraddaoui]

Hi again @bunekcca,

I have been able to tweak this with CSS while working on #7, it's not perfect, but we can move from there in round 2. I have added only this fix to the test server.

[bunekcca]

Hi @jraddaoui
That's OK for me. I'll move that one to "Done".
Thanks