As I wrote before, I am developing a version 2.0 of Planning Portal app, with responsive design.
My goal was to try get everything a bootstrap UI, last blog was about the File Upload control.
At last the File Download Control was remaining. The display is not that bad, but I doesn’t like the remove icon.
[dropshadowbox align=”none” effect=”lifted-both” width=”100%” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]
Style the table
First step was to style the table to a more Bootstrap UI. It turned out to be pretty easy, like I did at the ViewPanel.
I added to my theme the following code, to tell my file download control which css class should be used
[dropshadowbox align=”none” effect=”lifted-both” width=”450px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]
Style the remove button
I noticed via Firebug, that the link tag around the remove icon has a role attribute, role=”button”. So I added some JQuery code , who will add specific css classes to the link tag, to tell the link to be a button.
Second line of JQuery code replaced the remove icon by tag with font awesome classes, to display a nice icon on the button.
[dropshadowbox align=”none” effect=”lifted-both” width=”450px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]
Final result
[dropshadowbox align=”none” effect=”lifted-both” width=”100%” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]