Anyone using BootSwatch with new web2py layout

[Andrew]

Hello,

I'm trying a few bootswatch themes over a new "welcome" app.    see http://bootswatch.com/

The first thing I noticed is that the menus don't display correctly.  

Is anyone playing with this ?  Seeing that web2py uses bootstrap, it would be great to drop in a bootswatch theme.

[Massimo Di Pierro]

That is the problem that is holding up web2py 2.0.

web2py uses bootstrap but superfish for menus. Therefore it tweaks the slyle of menus. How can we avoid it, use bootstrap and still have submenus?

[Anthony]

Here are a couple options:

http://jsfiddle.net/2Smgv/

http://jsfiddle.net/4nMkh/4/

Anthony

[Andrew]

Looks Good.  Are they "swatchable" ?

[Anthony]

Not sure, haven't tried them. They're based on the standard Bootstrap menu, so hopefully they're easily swatchable.

Anthony

[Massimo Di Pierro]

They both look good to me. If you send me a patch for welcome I will take it.

[Paolo Caruccio]

Andrew, I played a bit on this subject. Please replace the below files (before backup them) with attached ones:

1. welcome > models > menu.py (check the changes in response.menu)

2. welcome > views > layout.html (heavily changed)

3. welcome > static > css > web2py.css (find the comment "bootswatch" to see the changes)

Now, if you download a css from bootswatch.com or built it from  http://stylebootstrap.info, replacing default one you shouldn't have problems. For the menu I used one of solutions that Anthony proposed.

In attachement also some images to show how several themes are rendered in several modern browsers.

Last notes:

a) this is an experiment. You have to obtain official changes from web2py developers

b) my enviroment: windows 7, python 2.7.2, web2py version 2.0.00 (2012-05-23 09:27:57) dev

[Andrew]

Impressive Paolo, 
Looks like you're a web2py developer yourself !

I'm not adept in the art of css , but it this the solution we've been looking for ?

Regards
Andrew W

[Massimo Di Pierro]

This is fantastic and we may be able to post web2py 2.0 out very soon because of this.

I cannot commit now but I opened an issue linking your post:

http://code.google.com/p/web2py/issues/detail?id=819&thanks=819&ts=1337918893

I will try review and commit your code tomorrow. Thanks Paolo.

Massimo

[Omi Chiba]

Great work, Paolo ! I can't wait for the web2py 2.0 !!

[Massimo Di Pierro]

I added this trunk but with one change. Instead of the attached menu.py (which is not backward compatible), I added some jQuery code layout.html that attempts to reproduce the same effect. It works something is wrong with alignment and I cannot figure out what. Can you take a look?

Massimo

On Thursday, 24 May 2012 18:16:37 UTC-5, Paolo Caruccio wrote:

[Massimo Di Pierro]

I managed to fix it. Now the carets and class are added automatically via JS and there is no need to tweak menus.

Cons: nested menus break if JS disabled.

Anyway, I feel this is a big step closer to web2py 2.0.

massimo

[Niphlod]

I may be a little late....I implemented it for my app but never used because my menu has only 4 items :-P
include bootstrap.css and add to css this (took from https://github.com/twitter/bootstrap/issues/424)

.nav li.dropdown ul.dropdown-menu li:HOVER ul {
        display:block;
        position:absolute;
        left:100%;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    .nav li.dropdown ul.dropdown-menu ul {
        display: none;
        float:right;
        position: relative;
        top: auto;
        margin-top: -30px;
    }

    .nav li.dropdown ul.dropdown-menu .dropdown-menu::before {
        content: '';
        display: inline-block;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right:7px solid #CCC;
        border-right-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 9px;
        left: -14px;
    }

    .nav li.dropdown ul.dropdown-menu .dropdown-menu::after {
        content: '';
        display: inline-block;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right:6px solid white;
        position: absolute;
        top: 10px;
        left: -12px;
    }


def twitter_menu(menu, level=0):
    """
    Generates twitter bootstrap's compliant menu
    """
    lis = []
    for li in menu:
        (text, active, href) = li[:3]
        sub =  len(li) > 3 and li[3] or []
        if len(sub) == 0:
            li_class = None
            el = LI(A(text, _href=href), _class=li_class)
        else:
            li_class = 'dropdown'
            caret = level == 0 and B(_class='caret') or I(_class='icon-chevron-right')
            sub_ul = twitter_menu(sub, level=level+1)
            el = LI(A(text, caret, _href=href, _class="dropdown-toggle", **{'_data-toggle' : 'dropdown'}), sub_ul, _class=li_class)
        lis.append(el)

    if level == 0:
        return UL(*lis, _class='nav')
    else:
        return UL(*lis, _class="dropdown-menu")

[Massimo Di Pierro]

We can include this in MENU and eliminate the JS. What do you think?

[Paolo Caruccio]

Do you mean to add a new MENU attribute (i.e. 'bootstrap_menu') like 'mobile' and to switch by menu types?

I think that's a good option.

[Niphlod]

me too.
@Massimo: please feel free to use it, edit, ask, etc.

here's a small variation with mobile parameter:

def twitter_menu(menu, level=0, mobile=False):

    """
    Generates twitter bootstrap's compliant menu
    """
    lis = []
    for li in menu:
        (text, active, href) = li[:3]
        sub =  len(li) > 3 and li[3] or []
        if len(sub) == 0:
            li_class = None
            el = LI(A(text, _href=href), _class=li_class)

            lis.append(el)

        else:
            li_class = 'dropdown'
            caret = level == 0 and B(_class='caret') or I(_class='icon-chevron-right')

            if mobile:
                li_class = None
                caret = B(_class='caret')
                sub_ul = twitter_menu(sub, level=level)
                el = LI(A(text, caret, _href=href, _class="dropdown-toggle", **{'_data-toggle' : 'dropdown'}), _class=li_class)
                lis.append(el)
                lis.extend(sub_ul)
            else:

                sub_ul = twitter_menu(sub, level=level+1)
                el = LI(A(text, caret, _href=href, _class="dropdown-toggle", **{'_data-toggle' : 'dropdown'}), sub_ul, _class=li_class)
                lis.append(el)
    if level == 0:
        return UL(*lis, _class='nav')
    else:

        if mobile:
            return lis

        return UL(*lis, _class="dropdown-menu")

[Paolo Caruccio]

Here attached the html.py with modified class MENU.

This is only a draft not deeply tested. 

Il giorno sabato 26 maggio 2012 03:40:26 UTC+2, Massimo Di Pierro ha scritto:

[Massimo Di Pierro]

For now this is in trunk. Your implementation looks good.

For me the problem whether we want to do this or not. Most of the conventions implemented in web2py core are web2py own conventions or standard protocol.  Bootstrap is a css library. very popular today but will disappear tomorrow as a better one comes out. Now everybody will use it. Is it a good idea to include code which is designed exclusively for bootstap conventions and specifically refers to bootstrap css classes? Or is it better to handle it from the layout only using js?

So we need to think about this some more. I cannot promise this will stay in web2py 2.0 in this form.

Massimo

[Paolo Caruccio]

Massimo,

from my point of view - a simple user - the web2py core must remain tied to its conventions and use standard protocols.

As you say, "bootstrap twitter" is one of the possible choices and then we will do? we will have so many switches as are the web frameworks?

For my little experience in web framework - above all those having javascript plugin - the html layout and css style are indispensable to each other.

We are discussing about the menu, but there are also the grids, forms and so on:should, therefore, change the code for sqlform.grid, sqlform.smartgrid, sqlform, or also apply a javascript function to fit this elements to the conventions of the preferred framework?

For me, the best choice is to have a "welcome app" as a basis for introducing own web2py features with its own css and layout 

and, if deemed appropriate, make an entry in the welcome app menu that link to different layouts inspired from several web framework (bootstrap, skeleton and so on) wich the user can choose to apply and adapt for his/her application.

[Niphlod]

Until some time ago web2py mantained the "burden" of it's own template, it's own css, it's own javascript functions based on jquery.
I think I started using web2py when it contained only ez.css's classes.
Having to be a CSS/JS coder better than all peoples around the world can be hard ;-)

Then superfish was added, css3 buttons were included, skeleton was adopted, grids can be serialized in a friendly jquery-ui style, etc. etc. etc. Let's be real: css frameworks and ui js are included in every application someone is starting coding out there. You're not forced to be an HTML guru to be a web programmer, and still have some nice user interface.

From where I am standing, both as a simple and a long time web2py user, I'm happy to "infiltrate" in all code that web2py generates and explore practically every flexibility it has to offer, but "sane defaults" are provided right now and maybe are ok for ultra-small apps.

Now, I'm not saying to follow every css and js library out there, but bootstrap is 160K of css (counting images and some nice js), largely adopted and very well supported, probably not going "under" within the year, mobile-friendly and in general easily understandable and to work with.

web2py should leave defaults as always, but it's nice to see it "ready" to integrate with the major players out there.

I think that a "style" argument can be added to every bit of code will need to change in the code regarding serialization without much problems. web2py 2.0 will be bootstrap-menu ready, if users want to start with welcome and edit that, it'll be ready. Maybe 2.1 will be bootstrap-forms ready, and so on.......
Backward compatibility is not broken, old behaviour is maintained. If someone wants bootstrap's form he'll set a style parameter and voila.

[Paolo Caruccio]

Attached a toy application to demonstrate what I said in my previous post.

I used web2py version 2.0.00 (2012-05-23 09:27:57) dev not last trunk.

[Massimo Di Pierro]

These no record boostrap and the new menu logic is staying in trunk. The only issue is whether the weird menu structure should be generated by MENU helper or by the JS in layout.html.

[LightDot]

I actually like having the code in html.py, but I'd vote for keeping this as JS in layout.html. It's simple, it's practical, easily changed, leaves less things to be kept backwards compatible in the web2py itself.

The day Bootstrap stops looking so good will come, sooner or later. Another popular solution will arise, as good or better as Bootstrap and web2py users will want it as default. I'd say adding "serialize_someother_menu" in the future is a sure thing, if you go this way. Don't get me wrong, it's not a bad thing... It's great actually, just more work when it comes to maintaining backwards compatibility.

Regards

[Annet]

I've been working on an application using Bootstrap for a couple of weeks now, and eventually dropped all the extra js plugins I was using, except the jQuery UI datepicker (which I style using JQuery UI Bootstrap: http://addyosmani.github.com/jquery-ui-bootstrap/). My menus are entirely Bootstrap based, I don't see what Superfish offers that bootstrap-dropdown.js doesn't offer.

Why not just use Bootstrap and Bootswatch?


Annet

[Massimo Di Pierro]

That's exactly what we have in trunk since yesterday. superfish is gone.

[Paolo Caruccio]

JS. After all, we are replacing superfish.

[Paolo Caruccio]

Small patch - not deeply tested - to make the menu working when javascript is disabled.

[Paolo Caruccio]

A small look improvement . Please replace code for  .icon-chevron-right in bootswatch.css with

.icon-chevron-right {

  border-left: 4px solid #000;

  border-right: 4px solid transparent;

  border-bottom: 4px solid transparent;

  border-top: 4px solid transparent;

  content: "";

  display: inline-block;

  height: 0;

  opacity: 0.7;

  vertical-align: top;

  width: 0;

  margin-right:-13px;

  margin-top: 7px;

  float:right;

[Massimo Di Pierro]

Grazie. In trunk. In futuro ti prego di uploadare i files in google code issues. Sono molto disorganizzato. Cosi' non si perdono. ;-)

[Andrew]

Testing the "United" Bootswatch at the moment.  ( I can test it but unfortunately I can't really offer suggested fixes -> CSS Rookie )

The Login | Register | Lst Password text is not visible. 

My Left sidebar now comes first, and the Welcome App's Admin button is now at the bottom.

Does Bootstrap mean that the left_sidebar_enabled type techniques no longer work, or do we need to get this fixed ?

[Andrew]

I spoke to soon.
It is fine in Firefox.  
IE7 has the issue.

[Paolo Caruccio]

Andrew,

a solution for sidebar issue is to add "span12" class to the section#main of layout.html in views folder

About the auth nav bar a first solution is to set a specific color because IE7 ignore "inherit". Please add the below two lines at the bottom of bootswatch.css file in static/css folder

[Paolo Caruccio]

Andrew,

I, just now, proposed a patch through issue tracker (http://code.google.com/p/web2py/issues/detail?id=824) that should resolve the problems with IE7 noted by you. Moreover the auth_navbar is more compliant with bootstrap (check the image). I tested the new welcome layout replacing the default web2py bootstrap.min.css with some from bootswatch and it seems work good now. 

[Omi Chiba]

I downloaded the latest this morning and found some icons cannot be displayed. Maybe we're not using the latest bootstrap ?

<ul>

   <li><i class="icon-glass"></i> icon-glass</li> => OK 

  <li><i class="icon-wrench"></i> icon-wrench</li> => Not displayed

</ul>

[Paolo Caruccio]

I'm afraid so. Web2py are using 2.0.2 while the last botstrap release is 2.0.3

Fast patch waiting the official web2py release:

download the last bootstrap release and replace below files:

static/images/glyphicons-halflings.png

static/images/glyphicons-halflings-white.png

static/js/bootstrap.min.js

Replace, instead, static/css/bootstrap.min.css with mine (here attached). I only changed the folder of images: web2py use "images" folder, bootstrap "img".

[Omi Chiba]

Thanks, Paolo.

[Andrew]

Thanks Paolo,
The layout is back to normal.  However the Login set of links are looking like buttons, rather than the background being the same as the navbar.  This is the same in the two browsers I'm looking at (IE7 and Firefox).

I prefer the way it looked in firefox.  Does it need to be a set background to work ?

[LightDot]

I believe this is an unrelated change, a case of "it's not a bug, it's a feature"... It defaults to look like buttons in all browsers now.

You could change this back, of course, or even propose to web2py to have the old defaults back...

Regards

[Paolo Caruccio]

Andrew,

it's simple go back to old auth_navbar.

In views/layout.html comment this jquery code:

            jQuery('.auth_navbar').each(function(){        
                jQuery(this)
 .addClass('btn-group')
 .children('a').addClass('btn')
            });

and change the <div id="navbar"> in this way (note separators):

<div id="navbar">{{='auth' in globals() and auth.navbar(separators=(' ',' | ',''))}}</div>

At least add below 2 rows to bottom of static/css/bootswatch.css:

#navbar{
padding-top:9px;
}
#navbar .auth_navbar, #navbar .auth_navbar a{
 color:inherit;
 //color:expression(this.parentNode.currentStyle['color']); /* ie7 doesn't support inherit */
}

Please, let me know if it works.

[Richard Vézina]

Hey Paolo!

Funny I was on this thread because a search in gmail and I am just workin to improve your multiupload app.

I am creating the update form actually I have been able to insert the values of the record for the f_trip table, but I struggle for the data from the f_photo table that need to be formated correctly for the jquery plugins...

I think I am doing a kind of monkey patch actually just to make it works like this :

def trip_update():

    # only SQLFORM.factory tested

    form=SQLFORM.factory(db.t_trip, db.t_photos)

    for row in db(db.t_trip.id == request.args(0)).select(db.t_trip.ALL):

        for f in db.t_trip.fields:

            form.vars[f]=row[f]

    i = 0

    for row in db(db.t_photos.f_trip_ref == request.args(0)).select(db.t_photos.ALL):

        #for f in db.t_photos.fields:

        #f_photo_0:CONTENT_OF_f_title

        #form.vars['f_photo_'+str(i)+':'+row.f_title]=row # don't works need data under this form :

        #<li title="couleurs (1).png"><a class="mw_delItem" href="javascript:void(0);" title="remove this file">x</a><i><b><em class="mw_file-ext-png"></em></b></i><span>test1</span></li>

        # So here trying to return to the view the jQuery code that will append the multiple LI required 

        response.js="jQuery('ul.mw_list').append()"

        #LI(_title='couleurs (1).png', A('x', _href='javascript:void(0);', _class='mw_delItem', _title='remove this file'), I(B(EM(_class='mw_file-ext-png'))), SPAN('test1')) 

        # I and B helpers don't exist I think.

        #LI(A('x', _href='javascript:void(0);', _class='mw_delItem', _title='remove this file'), '<i><b>'+EM(_class='mw_file-ext-png')+'</b></i>', SPAN('test1'), _title='couleurs (1).png') # Don't work...

        

    if form.accepts(request, session, onvalidation=lambda form:check(form)): # Is it possible to use onvalidation with form.process() syntax ?

        trip_id = db.t_trip.update_record(**db.t_trip._filter_fields(form.vars))

        nfiles = 0

        for var in request.vars:

            if var.startswith('f_photo') and request.vars[var] != '':

                uploaded = request.vars[var]

                if isinstance(uploaded,list):

                    # files uploaded through input with "multiple" attribute set on true

                    counter=0

                    for element in uploaded:

                        counter += 1

                        nfiles += 1

                        file_title = element.name.split(":")[-1] # TODO: could this be made better?

                                                                 # I mean, the title must be appended to element's name

                                                                 # or is there another way?

                        db.t_photos.insert(

                            f_trip_ref=trip_id,

                            f_title=file_title+" ("+str(counter)+")" if file_title!="" else file_title,

                            f_photo=db.t_photos.f_photo.store(element.file,element.filename))

                else:

                    # only one file uploaded

                    element = request.vars[var]

                    nfiles += 1

                    db.t_photos.insert(

                        f_trip_ref=trip_id,

                        f_title=element.name.split(":")[-1],

                        f_photo=db.t_photos.f_photo.store(element.file,element.filename))

        session.flash = T('%s photo%s uploaded'%(nfiles, 's' if nfiles>1 else ''))

        redirect(URL('trip_read'))

    if isinstance(form,FORM):

        # hide f_title form's row. Is there a better way to accomplish it?

        del form[0][3]

    return dict(form=form)

So almost realtime coding here... Do you have a better idea than returning the f_photo entries under the format used by the javascript plugins ??

Richard

[Andrew]

Thanks LightDot,
I thought it may have been a feature, so just my opinion, I think the non button look was better.   It looks more consistent with the other links in the navbar, and other Bootstrap menus.

So, do we keep the buttons, or change it back ? 

With regards to Paolo's reply below, I don't mind changing the layout file, but we shouldn't change the bootstrap.css (in my opinion).  You then lose the ability to simply swap it out for another bootswatch's css file.

Keep up the good work, it's looking great and I can't wait for 2.0 !

[Paolo Caruccio]

Andrew,

we aren't changing bootstrap.css, but only bootswatch.css. This last file is necessary to override some css rules from web2py.css incompatible with bootstrap.css

Please, try a bootswatch theme and let me know if you see any error.

[Omi Chiba]

+1 

I don't like the buttons for navbar.

[Omi Chiba]

Comment out the jquery code will also disable the sub-menus somehow. The sub-menus doesn't appear after the change.

[Derek]

I don't get why Javascript would be needed for nested menus.

http://www.grc.com/menudemo.htm 

GRC's pure CSS menus work great without javascripts.

[Anthony]

I don't get why Javascript would be needed for nested menus.

http://www.grc.com/menudemo.htm 

GRC's pure CSS menus work great without javascripts.

Javascript isn't required but can be used to improve the user experience. For example, Superfish has a mouseout delay, incorporates hoverIntent, and optionally includes Supersubs for variable menu width. hoverIntent is particularly helpful with multi-level menus, as it allows you to jump diagonally down to an item in the expanded submenu rather than having to make a horizontal move followed by a vertical move (try that on the GRC menu and you'll see what I mean).

Anthony

[Paolo Caruccio]

Morover, in this case javascript is necessary to make the menu compatible with the css rules of bootstrap.

[Paolo Caruccio]

Omi,

please try attached files and let me know if you have the same problem.

[Omi Chiba]

Tested. It's perfect !

[Andrew]

Paolo, 
I agree,  Perfect !

Great work.

[Andrew]

Just noticed that layout.html has:
response.files.append(URL('static','css/bootstrap-responsive.css'))

but the file is not in static/css in the welcome app.

[Paolo Caruccio]

I was hasty. I posted a dev file. I'm testing responsive layout of welcome app.

Andrew, you have several solutions:

1. to leave everything as it is;

2. to find and delete the detected row in layout.html

3. to download bootstrap-responsive.css from web and put it in "static/css" folder

[Andrew]

Hi Paolo, I can leave it for now. Are your changes in trunk yet?

Also, I tried updating an existing app with the latest CSS and layout updates (so that I could apply bootstrap / bootswatch). I can't get the drop down menus little "down triangle" to appear. I've updated evrything in the static folder, layout.html, and web2py_ajax.html, and they still don't appear. I'm sure it has something to do with the CSS files, but I have updated them all. What have I missed? I could easily just start from a new app (from welcome).but I would like to understand how this is happening.

[Paolo Caruccio]

The CSS rules for the drop down menus little "down triangle" are in bootstrap.min.css itself. Please search this row

  .navbar .nav .dropdown-toggle .caret,.navbar .nav .open.dropdown .caret{border-top-color:#ffffff;border-bottom-color:#ffffff;} 

and more in general ".caret" class in bootstrap.min.css 

Maybe the issue is due to a bad contrast, between background-color of navbar and border color of caret.

[LightDot]

Just a heads up to everybody, Bootstrap 2.0.4 has been released a few days ago.

[Andrew]

And here, in layout.html where it gets the class.

      jQuery(function(){
             jQuery('.nav>li>a').each(function(){           
                if(jQuery(this).parent().find('ul').length)
                   jQuery(this).attr({'class':'dropdown-toggle','data-toggle':'dropdown'}).append('<b class="caret"></b>');

I hope I can now figure it out ...

[Andrew]

Funny ?   I've copied welcome's layout.html, and the whole welcome static folder to my old app ( I hadn't modified them in my old app, except for Paolo's files above).  I imagine others do this to get their existing basic apps updated with the UI changes in trunk.  The jQuery selector above '.nav>li>a' doesn't fire so I don't get the extra caret class or data-toggle attribute in the Yellow "web2py" menu item's <a> tag .  (Confirmed in chrome's Element viewer), and the auth menu item formats don't match welcome's format.

Not a big issue as I know the welcome clone works properly,  but I cannot fathom it, particularly annoying when trying to learn how the whole css / js stuff hangs together.

P.S.  Are your changes above in trunk ?

[szimszon]

I have issue with dropdown menu when the main menu is a link too.

If I click on the main menu than that menu is activated and I can't access the items below it with any means :(

[Paolo Caruccio]

Andrew,

if it's possible, could you post the raw html source of not working page?

Moreover, try to put in static/js folder the "web2py_ajax.js" from old application: sometimes the dropdown doesn't fire if this file is missing, I don't know why.

[Paolo Caruccio]

Szimszon,

is it a new application or have you replaced an old layout with that new one?

Il giorno mercoledì 6 giugno 2012 13:42:22 UTC+2, szimszon ha scritto:

I have issue with dropdown menu when the main menu is a link too.

If I click on the main menu than that menu is activated and I can't access the items below it with any means :(

[LightDot]

I can confirm this, using fresh welcome application and Bootstrap upgraded to 2.0.4.

If a menu item has both an URL specified and also additional submenus, these don't get displayed. Regardless if this is a first or a second level menu item. If the URL is set as None, additional submenus display properly.

Regards

[Paolo Caruccio]

I'm afraid you can not do it. The first item in the dropdown menu (having class="dropdown") can not contain an URL. The structure of the dropdown menu is as follows (taken from this page http://twitter.github.com/bootstrap/components.html#navbar):

Adding dropdown menus

Adding dropdowns and dropups to the nav is super simple, but does require the use of our javascript plugin.

<ul class="nav">
  <li class="dropdown">
    <a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          Account
          <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

[LightDot]

Yes, I thought it might be a feature, not a bug :)

I was just testing the bootstrap integration and capabilities, so no great harm. Thanks for clarifying.

[Andrew]

Hi Paolo,

I'm afraid I can't reproduce it anymore.  The caret is there and I now see buttons on the nav menu.   I updated to the latest layout.html, and reverted back and it's still fixed !?  Sorry for the time waster but I swear I tried everything yesterday ?   

I've just put your two files above back on my old app and it still works like a charm.

After that small diversion,   I'm still looking forward to seeing your changes in the source.

Regards

Andrew W

[Andrew]

Hi Paolo,

Are you able to send a patch to Massimo for your layout and bootswatch files.  The bootstrap menu issue is holdnig up 2.0 and I think your changes have addressed this.   Would love to see it in trunk.

If you can't I can have a go at working out what you did.

Thanks

Andrew W

[Paolo Caruccio]

Andrew, do you mean the code for old auth_navbar style? If yes, I think it's better if you open a new thread for asking to the web2py users what style they prefer and after we will send a patch to Massimo. It's possible that most of w2p users loves the current style (bootstrap buttons group).

[LightDot]

Changes in dev in the last week or so have effect on Bootstrap. 2nd level submenus don't work anymore if using Bootstrap 2.0.4, while bundled 2.0.2 works.

- clean welcome app from latest dev, Bootstrap css and js upgraded to 2.0.4
- clicking over the yellow "web2py" opens the first submenu level
- clicking or hovering over e.g. Documentation, does nothing.

Tested in Firefox 13 and Opera 12... Are there plans to update Bootstrap to 2.0.4 in web2py itself?

Regards

[Paolo Caruccio]

LightDot,

 try to append in static/css/bootswatch.css this rule:

.dropdown-menu ul{display:block;}

I spotted the issue some days ago, but I didn't propose a patch because web2py still has bs 2.0.2

Let me know if the fix works for you also.

[Andrew]

Good Idea. 

Done.

Either way, thanks for making the updates.

[Massimo Di Pierro]

Clicking on the top-level menu items now open submenus this the associated links are silently ignored. This is a change of behavior that needs to be addressed. Suggestions?

[LightDot]

I have tried your updated bootswatch.css from another thread here, which also incorporates this fix. I confirm that BS 2.0.4 works now.

Thanks!

On Sunday, June 17, 2012 12:33:52 AM UTC+2, Paolo Caruccio wrote:

LightDot,

 try to append in static/css/bootswatch.css this rule:

.dropdown-menu ul{display:block;}

I spotted the issue some days ago, but I didn't propose a patch because web2py still has bs 2.0.2

Let me know if the fix works for you also.

Il giorno domenica 17 giugno 2012 00:27:18 UTC+2, LightDot ha scritto:

[Massimo Di Pierro]

Can you coordinate with Andrew and Paolo and send me a single fix that applies to latest trunk and addresses the outstanding issues?

[Paolo Caruccio]

If Andrew and LightDot agree, I will prepare a patch and I'll sumbit it in google issue tracker in next two hours.

[Paolo Caruccio]

Patch submitted http://code.google.com/p/web2py/issues/detail?id=856

Il giorno domenica 17 giugno 2012 17:32:53 UTC+2, Massimo Di Pierro ha scritto:

[Andrew]

Yes please Paolo

[LightDot]

I have tested the V2 versions attached with Issue 856 and they seem to address the issues perfectly.

Regards

[Massimo Di Pierro]

I included your patch but not version V2. That is because we do not want to mantain our own modified bootswatch. People should be able to download a theme and use it without editing. Can this be addressed in web2py.css?

[Andrew]

My understanding is that the themes are all contained in a new bootstrap.css, or bootstrap.min.css file.   These are the ones we don't want to touch.  I've downloaded a few to have a look.

I thought the bootswatch.css is just some extra styling to get the bootswatch themes (the different bootstrap.css files) to work with web2py.  

I think we're good.

Maybe it could be contained in web2py.css, but it sounds like bootstrap specific styling has been put in there.   Not a bad idea if someone does not want to use bootstrap -keep the necessary web2py stuff and leave out the bootstrap specifics.

[Paolo Caruccio]

Massimo,

actually files with prefix V2_ allow this: download and apply in w2p a bootswacth theme without other actions by user.

[Massimo Di Pierro]

How is that possible? You edited bootswatch.css?

[Paolo Caruccio]

Massimo,

"bootswatch.css" overwrites some css rules of "bootstrap.min.css" and "web2py.css" to allow layout to comply with bootstrap twitter theme (and consequently with bootswatch themes derived from it).

"bootswatch.css" is a web2py file like "web2py.css", therefore we can edit it. Maybe we should change its name in "bootswatch4w2p.css" to remove any doubt.

Having two file "bootswatch.css" and "web2py.css" is useful: if someone doesn't like bootstrap and he want apply its own theme, he has only to remove "bootstrap.min.css" and "bootswatch.css" to obtain basic web2py css theme

Instead "bootstrap.min.css" (twitter and bootswatch have the same name) contains the original bootstrap css theme (from twitter site) or modified one (from bootswatch site).

[Massimo Di Pierro]

ok. I applied the V2.

Massimo

On Monday, 18 June 2012 16:41:34 UTC-5, Paolo Caruccio wrote:

Massimo,

"bootswatch.css" overwrites some css rules of "bootstrap.min.css" and "web2py.css" to allow layout to comply with bootstrap twitter theme (and consequently with bootswatch themes derived from it).

"bootswatch.css" is a web2py file like "web2py.css", therefore we can edit it. Maybe we should change its name in "bootswatch4w2p.css" to remove any doubt.

Having two file "bootswatch.css" and "web2py.css" is useful: if someone doesn't like bootstrap and he want apply its own theme, he has only to remove "bootstrap.min.css" and "bootswatch.css" to obtain basic web2py css theme

Instead "bootstrap.min.css" (twitter and bootswatch have the same name) contains the original bootstrap css theme (from twitter site) or modified one (from bootswatch site).

[Massimo Di Pierro]

But I assume when a new version of bootswatch comes out, we will not be able to apply it without "remembering" the changes from the previous version. I am still worried about maintenance issues.

Massimo

[Paolo Caruccio]

The bootswatch themes are based on bootstrap css files. Your doubt must refer to the latter one: for example, the passage from "bootstrap 2.0.2" to "bootstrap 2.0.4" caused the issue in web2py menu fixed with ".open > .dropdown-menu  ul { display: block;}". In other words, we should worry about new version of bootstrap theme (http://twitter.github.com/bootstrap/ ).

The bootswatch themes (http://bootswatch.com/) are only free customized bootstrap themes.

Indeed, on the web, several bootstrap theme generators exist with which you can create your own customized theme, alternative to bootswatch themes:

   1) http://twitter.github.com/bootstrap/download.html (original one)

   2) http://stylebootstrap.info/ (simple one)

At last we don't forget that "bootstrap.min.css" included in web2py comes from twitter.github.com and not from bootswatch.com

[LightDot]

Using "bootswatch.css" file name by web2py is a bit confusing, as can clearly be seen :)

1+ to renaming it in order to clearly distinguish that it's entirely provided by web2py project and doesn't come from Bootswatch. Either "bootswatch4w2p.css" or perhaps "web2py_bootstrap.css" or "web2py_bootswatch.css" or anything similar...

As to maintenance concerns - true, there might be further needs to adjust it as new versions of Bootstrap or Bootswatch become available. It's a moving target. But there are some of us using Bootstrap/Bootswatch with web2py now and even more will use it as web2py 2.0.0 becomes available. We are bound to spot and fix the problems as they arise.

Regards

[Andrew]

I think the file content relates more to bootstrap specifically. Bootswatch is a website with lots of different bootstrap.css files. Rename makes sense, it sort of is a "web2py_bootstrap_adaptor" , but that's a bit long.