Applying Custom Navigation to web2py

468 views
Skip to first unread message

Ron Chatterjee

unread,
May 12, 2016, 5:36:20 PM5/12/16
to web...@googlegroups.com
Trying to create a custom navigation using menu.py intact. 

Leveraging from this link:


I modified the layout.html as it comes from the welcome app to following. Result is a horrible looking navbar. Why?

 

  # using sidebars need to know what sidebar you want to use

    mc0 = 'col-md-12'

    mc1 = 'col-md-9'

    mc2 = 'col-md-6'

    left_sidebar_enabled = globals().get('left_sidebar_enabled', False)

    right_sidebar_enabled = globals().get('right_sidebar_enabled', False)

    middle_column = {0: mc0, 1: mc1, 2: mc2}[

    (left_sidebar_enabled and 1 or 0)+(right_sidebar_enabled and 1 or 0)]

    }}

     

      {{ response.files.append(URL('static','css/bootsnipp.css'))

    response.files.append(URL('static','js/bootsnipp.js'))}}

     

  </head>

  <body>

    <!--[if lt IE 8]><p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->

    <div class="w2p_flash alert alert-dismissable">{{=response.flash or ''}}</div>

    <!-- Navbar ======================================= -->

     

       <div id="wrapper">

        <div class="overlay"></div>

        <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">

            <ul class="nav sidebar-nav">

                <li class="sidebar-brand">

                             {{='auth' in globals() and auth.navbar('Welcome',mode='dropdown') or ''}}

                 </li>

            </ul>

                           <div class="navbar-header">

                                   {{=response.logo or ''}}

                            </div>

          {{if response.menu:}}

          {{=MENU(response.menu, _class='nav navbar-nav',li_class='dropdown',ul_class='dropdown-menu')}}

          {{pass}}

        </nav>

     </div>

 

    <!-- Masthead ===================================== -->   

    {{block header}}

    {{end}}

Ron Chatterjee

unread,
May 13, 2016, 11:02:18 PM5/13/16
to web2py-users
So this is my poor mans, navbar.


If I apply this to web2py layout where the  navbar call is, I somehow don't get the wrapper2 class to work. It seems it conflicts with something internally. In other words, if you take the wrapper2 out of the jsfiddle code, that is what I get out of the navbar using web2py(see picture). Doesn't anyone ever ran into anything similar? 



 <!-- Navbar ======================================= -->

<div id="wrapper2">
    <!-- Modified navbar: Animating from right to left (off canvas) -->
    <nav id="navbar2" class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header2">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
              </ul>
            </li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

</div><!-- /#wrapper -->
js_fiddle_navbar.png

Ron Chatterjee

unread,
May 14, 2016, 11:20:49 AM5/14/16
to web2py-users
Here is the w2p if someone wants to take a stab at it. Something seems wrong with the bootstrap that kills the wrapper I am guessing.
web2py.app.sidebar_navigation.w2p
Reply all
Reply to author
Forward
0 new messages