Redesign the site with Bootstrap 3

[drusepth]

Currently on Bootstrap 2 with a card CSS library that only supports Bootstrap 2. A lot has changed, this might be pretty extensive, so we might as well make it fun by bundling in a redesign.

The changes associated with this issue are living on branch fix-bootplus.

[drusepth]

Changes made thus far:

• Bootstrap 3 does away with non-fluid layouts, so I have redesigned the main content area to take advantage of a fluid design and scale properly
• Navbar now collapses properly (bugged on live, #228)
• Icons are no longer bugged (as per #222)
• Bootplus (Bootstrap 2.x only) has been scrapped and the relevant card stylings have been rewritten in CSS
• Content now properly scales down into a single column on small screens (#99)

Changes thus far are on branch fix-bootplus

[drusepth]

Each content type's form and edit_form have been merged (loool, code length cut in half) and redesigned to use fluid-width cards (BS3) rather than a single card with tabs at the top (live).

Pickers are now cleaned up and in a new HtmlHelper. Content for the current user is now grabbed from a new MyContentHelper (rather than continuously calling ContentType.where(user_id: session[:user_id]) everywhere). Probably going to write code to generate forms from a small DSL, because even with half of it, this HTML is still pretty unwieldy.

generate_character_form(fields)

where fields is an array of objects (fields) that look like

[
  {
    key: string,
    type: string (either "textbox" or "textarea"),
    linked_content_type: object (nil by default)
  },
  ...
]

Need to figure out how to logically fit the generators in though.

[Cantido]

I'd like to mention that LESS has some dependencies that make running this app on Windows very awkward. I have to develop on a Linux virtual machine to get anything done. If you don't think it would be terribly difficult, switching to the SASS version of Bootstrap causes fewer problems. I think developer preferences is leaning toward SASS as well but since you've already got a codebase the effort of the change might outweigh the minor benefits.

[drusepth]

SASS and LESS are pretty similar in syntax, right? I think I just went with LESS originally because that is just the bootstrap I grabbed. I don't have a preference one way or the other, but if development preferences are leaning towards SASS I'd be more than happy to pursue migrating from one to the other.

[Cantido]

I don't have much experience with either so I can't judge how easy it would be to migrate.

[drusepth]

Todo list for blockers on fix-bootstrap branch

• [x] Hook up picker buttons to backend
• [x] Hook up generator buttons to backend
• [x] Hook up Expand All link in facet list
• [x] Make sure _form and _edit_form duplicates are removed
• [x] Make sure map upload js still functions
• [x] Resize map placeholder (with css) to fit in card
• [x] Flash message styling

Issues to create for future branches

• [x] Migrate from sass to less
• [x] Fix all the whitespace-at-end-of-line errors
• [x] Normalize tabs/spaces everywhere
• [x] Apply and show active classes on page and facet tabs
• [x] Clever quips should be sprinkled liberally throughout content pages (e.g. language#new could have something more clever than "Create language" -- it's a pretty rad thing to do; deleting characters should have something other than a generic "Are you sure?")
• [x] Don't show facet tabs if there's nothing on the page they point to
• [x] Refactor generate_form_row_for to use text_areas when applicable
• [x] Have content new/edit/show pages autogenerate and inherit from base Content class
• [x] Change card title when switching facet tabs
• [x] Switch from using and/or to &&/||
• [x] Selecting an option from picker takes user to the top of the page
• [x] Show active tab page on page load

Small changes to append to existing issues

• [ ] Equipment appearance tab should have more fields
• [ ] Magic (and equipment) should have rpgmxp-like iconsets

[drusepth]

Wowsers, I think this massive branch is about done. I'll do my best to merge it into master, and hope it causes minimal conflicts when we merge #360 in.

[drusepth]

Live.