CSS Fixes to Remove Dynamic Styling and <h2> tags

rwjblue / pivot.js

Build Pivot Tables from CSV/JSON Data

http://rwjblue.github.com/pivot.js/

Other

783 stars 134 forks source link

CSS Fixes to Remove Dynamic Styling and <h2> tags #24

Closed alexhgreen07 closed 10 years ago

alexhgreen07 commented 11 years ago

Please review this change for updating the styling of the jquery_pivot object. A summary of the reasons for the changes is below:

I had issues specifically with the <h2> headers as my application does not support this type of styling.
The updates to the dynamic styling in the <div> tag was so I can create more flexible styling for this UI object.

I hope you find these useful. If you think any further changes should be made before submitting this, just let me know.

NOTE: This change should not affect the default appearance of the widget. If the stylesheet is included, the appearance will be identical to before the change. This allows any user to include their own style sheets for these elements in case they want a different look.

alexhgreen07 commented 11 years ago

Note that this is directly related to the issue: https://github.com/rjackson/pivot.js/issues/23. If this change is accepted we can close both of these.

rwjblue commented 11 years ago

This looks awesome! Can you confirm that the demo pages still render properly with the changes?

alexhgreen07 commented 11 years ago

I've done a few updates to make it match as closely as possible its previous appearance. The last two commits were small updates. The only noticeable difference is the space between the text and the top of the window. Please see the screenshots below.

Old Demo Page: old_styling_screenshot

Updated CSS Demo Page: css_styling_screenshot

Note that this was tested in Firefox, Opera, and Safari on Mac OS X. If you have Windows Explorer, you may want to test on that. I would expect the appearance to be relatively similar to these other three (hopefully).

alexhgreen07 commented 10 years ago

Any updates on this item?

rwjblue commented 10 years ago

Sorry for the delay. Can you test the main demo page also? Specifically the two main demo pages are:

index.html - source - Screenshots

https://www.monosnap.com/image/8hcemzVnF0YNZTbHo3Cy9IfAr https://www.monosnap.com/image/FFwSUlqbIaVS8I0Lu8M7INPRy https://www.monosnap.com/image/4DD2hiEiwPMVxvTpiEBZd8bSo

simple_example.html - source - Screenshots

https://www.monosnap.com/image/pRccaFWyoiYIWEUIkNbN4Ytdb https://www.monosnap.com/image/1bYWUxhR9ZnPkuJMCZfw0M1AK

Looks to me like the screenshot that you included was of the simple_example.html page. How do these changes affect the more detailed example?

alexhgreen07 commented 10 years ago

The appearance is identical on the more complex demo. I've attached some screenshots for you to take a look at. I can't see any differences.

Original code: original_css

Update css: updated_css

rwjblue commented 10 years ago

Awesome, thank you!