simpleinvoices/simpleinvoices — pull request #13 by soif (2012-12-11 12:59:59+00:00)
Title: Huge CSS + Html Cleanup

This is a huge PR. Here is what I've done.

1) I merged all CSS files into only ONE main.css file , moved the jquery-ui images to the image folder and stagged the old css files in a "to delete" folder, ready to be trashed, ones we are sure everything is still fine.
While this helps to speed up SI pages loading (about 7 less hits for the server) , this mainly eliminates the total mess of previous css files spread everywhere, most unused, and with overlapping css declarations.
Any people wanting to now enhance or change the SI look, should now find a solid place to start from:

2) I've made a huge cleanup in the HTML and in the CSS:
- removed ugly BR or nbsp;
- removed all harcoded styles (replacing them with css classes where absolutely needed).
- converted all un-needed tables to div (ie buttons, or layout tables)
- removed nested tables
- replaced all details_screen TDs, by clean TH tags
- added THEAD where needed
- re-indented some html templates
- fixed some missing or unneeded HTML tags
- standardized use of css classes everywhere (si_message, si_message_ok, si_message_error, si_form, si_help_div)
BTW: all new (clean) CSS classes are now prefixed by si_ (allowing us to easily know which classes to use from now). Non si_ classes are either old classes that i've still not converted,
either some classes local to a page , usually needed by a js code.
- fixed some small JS bugs
- moved {input type=hidden} tags outside the toolbar, and grouped them just before the /form tag.
- cleaned all phpReport xml files to allow easy CSS addressing
- re-indented the CSS file
- Most DOM elements are now individually changeable using ONLY the CSS.
- removed some unused CSS classes
- massively reordered the CSS declarations, grouping new classes, commenting old no-longer used classes, deleting unused classes
- used the @group block syntax in the css file, which allow nice folding views in the amazing Expresso (CSSEdit) mac app
- fixed most of the 'floating' bugs in the CSS (ie in the TabMenu bar), adding (the magic) overflow:hidden where needed
- integrated login in the main template, using the main.css
- fixed some JS syntax bugs, which prevented the CustomFields manage page to be displayed
- deleted some (certainly un-needed) comments containing old piece of deprecated code

.... yes, you owe me a beer ;-)

3) I've started some light design enhancements (this part is a matter of taste)
- all reports are now more sexy (it was not too hard...)
- changed the button look, (but I can NOW easily change it to another design, or revert back to the original look if you'd prefer)
- enhanced the filters, that are now activated
- lightly changed the login window
- enhanced the invoice view (WIP), which is now more readable . IMHO we should also reorder some fields to make it even more pretty
- simplified and enhanced the Client view
- standardized the help sentences in a botom help div
- removed some (IMHO un-needed) ClueTip images in the View pages, while keeping them in the Add and Edit pages
- Designed the si_message_ok and si_message_error as a big message window (could also be enhanced)
- slightly changed some margin, padding, etc....
- some minor align changes.

-------

The main goal, was to be able to start from a fresh, clean (the hardiest work is done) CSS / HTML layout.
Most DOM elements are now CSS addressable, the HTML is more simplified and pleasant to read, without anymore ugly BR, nbsp; , layout TABLE or hard-coded styles.
By also adding the new global CSS classes (si_toolbar, si_filters, si_message, si_form, si_message_ok), It should ease any further developpment in the templates.
Please notice that the CSS Stylesheet still contents all the old css declarations (mostly) commented, waiting to be trashed, when we are sure all is alright.

I've tried to apply theses change absolutely everywhere. I hope I did not forgot anything.
I've tested all pages on Safari/chrome but also most pages on Internet Explorer and Firefox, and it seems to stay compatible.
BTW I did not checked all "extensions" , some tests (and maybe some css fixes) may have to be performed.
Also I did not done extensive tests of each forms, after the cleanup, but it seems to work as expected.

The Design part of the changes is obviously discutable (I'm not a designer): but now, If you wish to modify some of my design changes (buttons, filter, form layout), thanks to the hard work done, it's now really a breeze to open the main.css file to fastly and easily change anything globally. IE changing the buttons toolbar look should take you/me less than 2 min.

Please take look at this PR and tell me you thoughts !

Happy Christmas