I suggest an incremental approach: 1) change the CSS schema used by BOINC to match bootstrap where this is possible (e.g. button/btn). This could include using <p> instead of <span>.
1a) simplify/reduce the CSS classes used by BOINC. The people who wrote the forum code tended to make lots of classes; many of these can be merged and given more descriptive names. 1b) document these changes, so that projects who have developed their own color schemes can update their CSS files. 1c) refactor the PHP code (e.g. news.inc) where useful. 2) figure out how to do the rest. I personally don't have much time to spend on this, and I'm resistant to changes that make the PHP code more complex, or that create work for existing projects. -- David On 19-Aug-2014 7:15 AM, Christian Beer wrote:
Hello all, I want to resurrect the bootstrap integration into BOINC. With the goal of supporting an optional bootstrap theme besides the current website implementation I will outline some problematic areas in this email. Besides the obvious solution to separate the php code from html presentation I'm not sure how to integrate bootstrap (which somehow needs this separation) into BOINC. So this is open for discussion. If it helps I can upload my changes to a github repository to see alongside current code. I ended up using a lot ofif (defined('USE_BOOTSTRAP')) {constructs that handle some of the problems described below. Bootstrap has some standard css classes that a theme can use. This is needed so a project can choose between already available themes. There are some classes that could be easily renamed within BOINC with minimal impact to existing projects. But there are also other classes and constructs that are not so easily emulated with current BOINC code. Here are some examples I found by comparing the changes I made to integrate bootstrap into the RNA World BOINC project. - clickable buttons must have "btn" as css class. The current BOINC class is "button". This is an easy rename in *.css and the util.inc function show_button() - tables must have the css class "table" and may have an additional class that defines what kind of table it is (bordered, striped, ...). The current BOINC default class for tables is "bordered". This could be changed to "table table-bordered" by renaming in *.css and the util.inc function start_table(). With this function it should also be possible to define other Bootstrap table classes (like table-striped or table-condensed, see: http://getbootstrap.com/css/#tables) I have a working version of this function that is backwards compatible - table headers must use the "th" tag instead of the current "td class=heading". This can be done by changing row1() and *.css - a lot of places in current code have "<span class="">" elements to show notices or warnings. Bootstrap uses normal paragraphs "<p>" for this (see: http://getbootstrap.com/css/#helper-classes). I have written a new utility function format_text($content, $class) that maps the BOINC classes to Bootstrap classes and returns the correct tag depending if Bootstrap is enabled for the project or not. - bootstrap supports nice pagers instead of simple previous/next links. This is done with <ul><li> constructs that the current code doesn't use. Maybe we should also use the constructs and add some classes to the stock *.css - bootstrap also supports modern navigation bars which current code doesn't have. This was the most difficult thing to achieve and still be able to upgrade our project. I ended with a lot of utility function for the menubar that are bootstrap specific and slightly modified header and footer functions. - the news section was also difficult at first but then I managed to separate the application code from the presentation code in news.inc which is also backwards compatible with the current code and a very clean solution.
_______________________________________________ boinc_dev mailing list [email protected] http://lists.ssl.berkeley.edu/mailman/listinfo/boinc_dev To unsubscribe, visit the above URL and (near bottom of page) enter your email address.
