Vokuro / Invo with Bootstrap 3

Question

Vokuro / Invo with Bootstrap 3

Amal Oct '15

Created Oct '15	Last Reply Nov '15	Replies 5	Views 753	Votes 0

Amal 16.3k

Oct '15

Hello,

Is there a version of Vokuro and Invo sample applications for Bootstrap 3 available. I couldn't find it.

Amal

Zach · Answer 1 · 2015-10-29T21:30:31-07:00

I don't base my projects off of invo or vokuro, but I'm pretty sure you can simply replace the css and js files for bootstrap with version 3 and you probably won't see much of a difference. Have you done that? I'm curious to hear if anything blows up... I suspect it won't.

Amal · Answer 2 · 2015-10-30T06:59:15-07:00

@Zach lot of it blows up, primarly navbar and spacing in forms. Buttons & footer seem to be ok but the important things are badly formatted - the menu is totally gone for a toss and in data entry forms the look and feel gets majorly distorted.

Zach · Answer 3 · 2015-10-30T08:44:19-07:00

Zach
17.5k

Oct '15

Can you post the menu code? I can prob figure it out with a little time.

Amal · Answer 4 · 2015-10-30T18:55:48-07:00

Here is app\views\index.volt. I have also tried to attach a screenshot image. The top navbar has become vertical instead of original horizontal and form fields are all sticking together.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Release Order Management</title>
{#      <link href="//localhost/relord/css/bootstrap232.min.css" rel="stylesheet" type="text/css" /> #}
        <link href="//localhost/relord/css/bootstrap335.min.css" rel="stylesheet" type="text/css" />
        <link href="//localhost/relord/css/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="//localhost/relord/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

{#      <script src="//localhost/relord/js/bootstrap232.min.js" type="text/javascript"></script> #}
        <script src="//localhost/relord/js/bootstrap335.min.js" type="text/javascript"></script>
        <script src="//localhost/relord/js/jquery-1.11.0.min.js" type="text/javascript"></script>
        <script src="//localhost/relord/js/jquery-ui.min.js" type="text/javascript"></script>

        <script src="//localhost/relord/js/i18n/grid.locale-en.js" type="text/javascript"></script>
        <script src="//localhost/relord/js/jquery.jqGrid.src.js" type="text/javascript"></script>

        {{ stylesheet_link('css/style.css') }}

    </head>
    <body>

        {{ content() }}

    </body>
</html>

File app\views\partials\master.volt

<div class="container" style="width: auto;">   
<div class="navbar navbar-inverse navbar-static">
  <div class="navbar-inner">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      {{ link_to(null, 'class': 'brand', 'Release Order')}}
        <div class="nav-collapse">

          <ul class="nav">

            {%- set menus = [
              'Home': null,
              'Users': 'users',
              'Profiles': 'profiles',
              'Permissions': 'permissions',
              'Clients': 'ro_client_m',
              'ReleaseOrder': 'ro_relorder_t',
              'ReleaseOrderItems': 'ro_relorder_item_d'
            ] -%}

            {%- for key, value in menus %}
              {% if value == dispatcher.getControllerName() %}
              <li class="active">{{ link_to(value, key) }}</li>
              {% else %}
              <li>{{ link_to(value, key) }}</li>
              {% endif %}
            {%- endfor -%}

          </ul>

        <ul class="nav pull-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ auth.getName() }} <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>{{ link_to('users/changePassword', 'Change Password') }}</li>
            </ul>
          </li>
          <li>{{ link_to('session/logout', 'Logout') }}</li>
        </ul>
      </div>
    </div>
  </div>

<div class="navbar navbar-default navbar-static">
        <div class="collapse navbar-collapse collapse-buttons">
            <ul class="nav navbar-nav">
                <li>Test</li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-open"></span> ' . 'Retrieve'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-save"></span> ' . 'Save'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-fast-backward"></span> ' . 'First'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-step-backward"></span> ' . 'Prev'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-step-forward"></span> ' . 'Next'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-fast-forward"></span> ' . 'Last'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-filter"></span> ' . 'Filter'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-sort"></span> ' . 'Sort'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-remove"></span> ' . 'Close'); ?></li>
            </ul>
        </div>

</div>
</div>

<div class="container">
  {{ content() }}
</div>

I am trying out a few things so this code might not look clean. If you need anything else, pls let me know.

Zach · Answer 5 · 2015-10-31T10:41:37-07:00

Something like this:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarcollapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="navbarcollapse">
      <ul class="nav navbar-nav">
            {%- set menus = [
              'Home': null,
              'Users': 'users',
              'Profiles': 'profiles',
              'Permissions': 'permissions',
              'Clients': 'ro_client_m',
              'ReleaseOrder': 'ro_relorder_t',
              'ReleaseOrderItems': 'ro_relorder_item_d'
            ] -%}

            {%- for key, value in menus %}
              {% if value == dispatcher.getControllerName() %}
              <li class="active">{{ link_to(value, key) }}</li>
              {% else %}
              <li>{{ link_to(value, key) }}</li>
              {% endif %}
            {%- endfor -%}
      </ul>
      <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ auth.getName() }} <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>{{ link_to('users/changePassword', 'Change Password') }}</li>
            </ul>
          </li>
          <li>{{ link_to('session/logout', 'Logout') }}</li>
      </ul>
    </div><!-- /.navbar-collapse -->
    <div class="navbar navbar-default">
        <div class="collapse navbar-collapse collapse-buttons">
            <ul class="nav navbar-nav">
                <li>Test</li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-open"></span> ' . 'Retrieve'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-save"></span> ' . 'Save'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-fast-backward"></span> ' . 'First'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-step-backward"></span> ' . 'Prev'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-step-forward"></span> ' . 'Next'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-fast-forward"></span> ' . 'Last'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-filter"></span> ' . 'Filter'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-sort"></span> ' . 'Sort'); ?></li>
                <li><?php echo $this->tag->linkto("#", '<span class="glyphicon glyphicon-remove"></span> ' . 'Close'); ?></li>
            </ul>
        </div>
    </div>
  </div><!-- /.container-fluid -->
</nav>

With a fixed navbar you'll also need to set a padding of 70px on your body after the bootstrap css is loaded:

    body { padding-top: 70px; }

Amal · Answer 6 · 2015-11-01T01:13:33-07:00

@Zach thanks. The primary changes, gathered from your post, which resulted in things getting better were:

Change class brand to navbar-brand
Change <ul class="nav pull-right"> to <ul class="nav navbar-nav navbar-right">
Change <ul class="nav"> to <ul class="nav navbar-nav">

Only if I comment out below navbar shows up properly otherwise the top navbar's height is more than usual and there is no alighnment between brand the rest of the menu.

<div class="navbar">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarcollapse" aria-expanded="false">

Removed navbar-inner and changed to navbar as above. Not sure what the above achieves. Still not able to get two navbars to show up properly which has been a bit of a struggle. Glyphicons also don't show up.

I am still strugglging with bootsstrap, Phalcon & Javascript. I would like to request you to upgrade the original Vokuro app, it might help a lot of users, if not thousands, at least hundreds. Bootstrap 4.x is around the corner and Phalcon samples are still languishing at 2.3.

Amal

le51 · Answer 7 · 2015-11-01T12:53:58-07:00

Hi,

imho, these apps (as found on phalcon's github) are here to show us how to use the phalcon framework, not the bootstrap css/js framework.

Amal · Answer 8 · 2015-11-01T22:13:10-07:00

@le51, I think upgrading it doesn't mean bootstrap is the focus. How will you encourage beginners to take up Phlacon if the sample apps fail at the first step with current versions of base software or beginners have to use them to build up more complex applications.

iMHO, it might take you experts just 30min-1hr to upgrade.them but it would take a beginner hours, if not days, to get it working with the current versions. I hope you understand how important these examples are to encourage people to take up Phalcon in the absence of - books, formal trainings and comprehensive videos.

le51 · Answer 9 · 2015-11-02T00:40:18-07:00

Hi,

I think that these applications works out of the box (but with an old version ot bootstrap)