Bootstrap3 package - help to test

[Paolo Caruccio]

I just completed a package that applies the bootstrap3 style to some web2py elements - the current version covers the navigation menus, the auth navbar and SQLFORMs (via formstyle) - but I need your help for testing it.

The package includes the following files:

 - bootstrap3.py

 - web2py-bootstrap3.css

 - web2py-bootstrap3.js

 - example of layout.html

 - a readme file containing the istallation and usage instructions

 - license (please report if the license is right for a future inclusion in web2py)

Here attached some screenshots and a web2py app with examples. 

Thank you in advance for your feedbacks, suggestions for optimizing the code and any additions and everything else useful to improve the package.

Marry Christmas. 

[LightDot]

Hm. I expected a flurry of responses by now. I haven't been able to work on this since Christmas, but... come on, anyone?? :) I would think a possibility of Bootstrap 3 and Zorb Foundation 5 welcome apps would draw crowds...

Anyway, layout.html:
- web2py.css needs minor adjustments as there are no .main, .footer, .footer-content and .header in layout anymore (btw, .push is also obsolete, it disappeared almost 2 years ago, when skeleton.css was replaced by bootstrap)
- I did not test this part, but changes in regards to modernizr.custom.js and respond.js seem appropriate. I would suggest a free CDN instead of maxcdn.com, though. How about cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js ? We could suggest the same for Modernizr (cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js) and remove it from static/js

web2py-bootstrap3.css, web2py-bootstrap3.js, bootstrap3.py:
- I see no issues so far, admittedly my tests were in no way extensive

licenses:
- IANAL, so this being my personal and layman opinion, chosen licenses seem correct for all intended purposes.

I'll try and do more tests soon.

Regards

[Richard Vézina]

Seems pretty clean... I would need to use it to find issue though and I am still with w2p 2.4.7 for now waiting for the new rname feature to be available (and stable)... Also I build many autocompleting around bootstrap typeahead that is no longer part of bootstrap... So I have to refactor and use Typeahead.js that seems the new way to go... So, can't help testing now... If I make pet project at home I will definitly use this welcome as a starting point...

Thanks for this contribution Paolo!

Richard

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Dmitry Rodetsky]

Just set it up on my system. Found that the web2py logo was not showing up correctly in the corner.
It had wrong top padding and a blue instead of white color when loading the default page.

To fix this problem - you can go to the models/menu.py, and change the following from:

response.logo = A(B('web',SPAN(2),'py'),XML('™ '), _class="brand",_href="http://www.web2py.com/")

to this:

response.logo = A(B('web',SPAN(2),'py'),XML('™ '), _class="navbar-brand",_href="http://www.web2py.com/")

[Dmitry Rodetsky]

Found an issue when trying to use bs3.form() and have a placeholder

In the following scenario if you have something like this in your db.py to modify your field to use an HTML5 placeholder:

db.table_name.row_name.widget = lambda field, value: SQLFORM.widgets.string.widget(field, value, _placeholder=T('Placeholder text'))

If this field in set with requires=IS_NOT_EMPTY(), then once you try to submit this - it will try and use old formatting for the text field.
To counter this problem - use the following to adjust the widget and keep styling consistent with Bootstrap 3:

db.table_name.row_name.widget = lambda field, value: SQLFORM.widgets.string.widget(field, value, _class='form-control string', _placeholder=T('Placeholder text'))

[Brando]

Just found this Post.  Thanks Paolo.  I'll move my app over to this template and report any issues I find.

[Brando]

Paolo, I got everything moved over.  So far no problems.  I'm trying to figure out the best way to style a SQLFORM.grid without using custom js. What is the easiest way to style the SQLFORM.grid with bootstrap3?

[LightDot]

Are you looking for ways to set the required css class for the table itself or anything more?

For example, you can manipulate the DOM for the table class. It's not a perfect approach, but should do for the time being:

grid = SQLFORM.grid (...code...)
grid.element('table', replace=lambda el: el.add_class(
               'table table-striped table-condensed'))

Regards

[Dmitry Rodetsky]

Problems with reCaptcha. Using the following code:

In db.py:
def captcha_field(request=request):
    from gluon.tools import Recaptcha
    w = lambda x,y: Recaptcha(request,
        'proper public key here ',
        'proper private key here ',
        error_message='Invalid statement')
    return Field('captcha', 'string', label='verify', widget=w, default='ok')

In controller:
def contactus():
form = SQLFORM.factory(
    Field('name', requires=IS_NOT_EMPTY()),
    Field('email', requires =[IS_EMAIL(error_message='invalid email!'), IS_NOT_EMPTY()]),
    Field('subject', requires=IS_NOT_EMPTY()),
    Field('message', requires=IS_NOT_EMPTY(), type='text'),
    captcha_field(), submit_button='Send', formstyle=bs3.form())
    form.custom.widget.email['_placeholder'] = 'email placeholder'

    return dict(form=form)

In view:
{{extend 'layout.html'}}
{{=form}}

Get the following error when formstyle=bs3.form()

<type 'exceptions.IndexError'> list index out of range

If I remove the bs3.form() - everything works. I did not find solution to this yet. Anyone any ideas?

[Dmitry Rodetsky]

Ok it seems I got this thing fixed up. The problem was in the bootstrap3.py module. I am including an updated version
as an attachment. Line changes: 203, 440-442.

[Paolo Caruccio]

Hi Dmitry,

reCaptcha was not included in the package. I will use your code in the next version of the package.

Thank you.

[Dmitry Rodetsky]

Actually there is still a problem. Although the index out of range fault went away and
reCaptcha displays now - it does not test and simply continues with submission.

I've been trying to find where the problem is for a few hours so far, but no luck for now.

[Ian W. Scott]

Although I'm replying late, I just want to say a huge "thanks" for tackling this. It's something I've wanted to get to for a few months, and it's great to see that I don't have to start from scratch. If there was an initial lack of response I suspect it's just that many people like me happened to miss the thread.

Kudos.

[Luiz Felipe Pedone]

Hi Paolo!

This package is available on GitHub? I think I can help you out with the development.

[Rob Goldsmith]

Hi - I'm very late to this thread but just wanted to say thank you to Paolo ... your package massively helped me get up and running quickly on a new project without having to hack away at the old code. I'd also be happy to contribute via Github if there are areas that need work?

[pjryan126]

I'm using this in a project now and I even have it working on IE 8. Thanks, Paolo!

The only thing I have had to do so far is to add "li_active='active' to bs3.menu():

menu = MENU(current_menu,
                _class='nav %s' % menu_class,
                li_active='active',
                li_class='dropdown',
                ul_class='dropdown-menu')

[mweissen]

Hi. I have just this thread - looks very good. I want to test and to use it. Could you please tell me: where is the last version for download?