caresetjournal / batea_consent

Angular based rewrite of the SageBioNetworks Participant-Centered Consent Toolkit for web-apps
MIT License
3 stars 1 forks source link

Make the look and feel compatible with the Bootstrap theme #1

Closed ftrotter closed 8 years ago

ftrotter commented 8 years ago

It is not really important that you actually use the theme... but the colors should be similarish...

Please use a bootstrap them builder like these

https://pikock.github.io/bootstrap-magic/ or you can just use the original here: http://getbootstrap.com/customize/

To create a bootstrap theme for batea specifically...

As much as possible there should be only bootstrap form elements so that changing out the bootstrap theme will change the look and feel of the theme completely.

ftrotter commented 8 years ago

I want to clarify for Fred about what he means in the below comment..

We mean that the title within the top left of the box frame should look the same in chrome as it does in firefox... also the same as it does in the mock-up.

The error is the unnecessary square that pops up underneath the status bar in chrome.

Alma


This is partly done. I removed some of the cruft from the menu.

However, now the content does not fit into its container... http://screencast.com/t/YRs9gfMgD5

I think you must be testing in firefox (where it works), but it fails in chrome and safari.

-FT

almatrotter commented 8 years ago

List of aesthetic fixes:

  1. Make any black on the page (text, borders, etc) a dark gray. #333333 is fine..
  2. Make box corners (containers, buttons, borders..) just slightly rounded
  3. Make box corners (containers, buttons, borders..) flat. No shadows needed.
  4. If possible, add some space between major elements (see attached image)
  5. The Batea blue color is #1971c3. Please make the header and links (links in paragraphs and links at bottom - "consent privacy contact researchers credits" ) this color.
  6. Make the hover-over color for the "Next" buttons the same hover-over color you use for the regular links (light gray).

consent_space