Commits

Anonymous committed b8f5ad3

Do not render the formnavigation as right aligned tabs as these tabs are
deprecated in BS3. Instead of using tabs render a small outline with a form
navigation on the light side.

  • Participants
  • Parent commits fdff0d1

Comments (0)

Files changed (4)

File formbar/renderer.py

 
     def _render_form_buttons(self):
         html = []
-        html.append('<div class="row-fluid">')
-        html.append('<div class="span12 button-pane well-small">')
+        html.append('<div class="row row-fluid">')
+        if len(self._form._config.get_pages()) > 0:
+            html.append('<div class="col-md-9 col-md-offset-3 offset3 span9 button-pane well-small">')
+        else:
+            html.append('<div class="col-md-12 span12 button-pane well-small">')
         html.append('<button type="submit" '
-                    'class="btn btn-primary">%s</button>' % 'Submit')
+                    'class="btn btn-default">%s</button>' % 'Submit')
         html.append('<button type="reset" '
-                    'class="btn btn-warning">%s</button>' % 'Reset')
+                    'class="btn btn-default">%s</button>' % 'Reset')
         html.append('</div>')
         html.append('</div>')
         return "".join(html)

File formbar/templates/form.mako

 ## Render pages
+<div class="row">
 % if len(form._config.get_pages()) > 0:
-  ## Render tabs
-  <div class="tabbable tabs-right">
-    <ul class="nav nav-tabs">
-    % for num, page in enumerate(form._config.get_pages()):
-      <li class="${num==form.current_page-1 and 'active'}"><a href="#${page.attrib.get('id')}" data-toggle="tab" formbar-item="${form.change_page_callback.get('item')}" formbar-itemid="${form.change_page_callback.get('itemid')}">${page.attrib.get('label')}</a></li>
-    % endfor
-    </ul>
-    ## Render tabs-content 
-    <div class="tab-content">
-    % for num, page in enumerate(form._config.get_pages()):
-      <div class="tab-pane ${num==form.current_page-1 and 'active'}" id="${page.attrib.get('id')}">
-        ${self.render_recursive(page)}
+  <div class="col-sm-3">
+    <div>
+      <div class="panel panel-default formbar-outline">
+        <!-- Default panel contents -->
+        <div class="panel-heading">${_('Outline')}</div>
+        <!-- List group -->
+        <ul class="list-group">
+          % for num, page in enumerate(form._config.get_pages()):
+            <a href="#${page.attrib.get('id')}" class="list-group-item" formbar-item="${form.change_page_callback.get('item')}" formbar-itemid="${form.change_page_callback.get('itemid')}">${page.attrib.get('label')}</a>
+          % endfor
+        </ul>
       </div>
-    % endfor
     </div>
   </div>
+  <div class="col-sm-9">
+  % for num, page in enumerate(form._config.get_pages()):
+    <div class="formbar-page ${num==form.current_page-1 and 'active'}" id="formbar-page-${num+1}">
+      <h2>${page.attrib.get('label')}</h2>
+      ${self.render_recursive(page)}
+    </div>
+  % endfor
+  </div>
 % else:
+  <div class="col-sm-12">
     ${self.render_recursive(form._config._tree)}
+  </div>
 % endif
+</div>
 
 <%def name="render_recursive(elem)">
   % for child in elem:
     % if len(child) > 0:
       % if child.tag == "row":
-        <div class="row-fluid">
+        <div class="row row-fluid">
       % elif child.tag == "col":
         <% width = child.attrib.get('width', (12/len(elem))) %>
-        <div class="span${width}">
+        <div class="col-md-${width} span${width}">
       % elif child.tag == "fieldset":
         <fieldset>
         <legend>${child.attrib.get('label')}</legend>

File formbar/templates/formbar.css

   margin-top: 20px;
   background-color: #e0e0e0;
 }
+
+.formbar-outline {
+  margin-top: 25px;
+}
+
+.formbar-page {
+  display: none;
+}
+
+.active {
+  display: block;
+}
+
+// Media depended affix CSS.
+@media(max-width:767px){
+  .formbar-outline.affix {
+    position: relative;
+    width: 100%;
+    top: 0;
+    z-index:10;
+  }
+}
+@media(min-width:768px){
+  .formbar-outline.affix {
+    position: fixed;
+    top: 0;
+    z-index:10;
+    width: 126px;
+  }
+}
+@media(min-width:992px){
+  .formbar-outline.affix {
+    width: 213px;
+}
+@media(min-width:1200px){
+  .formbar-outline.affix {
+    width: 290px;
+}

File formbar/templates/formbar.js

         function(data, status) {});
 });
 
+$('div.formbar-outline a').click(function() {
+  var page = $(this).attr('href').split('#p')[1];
+  var item = $(this).attr('formbar-item');
+  var itemid = $(this).attr('formbar-itemid');
+  $.get('/set_current_form_page', 
+        {
+            page: page,
+            item: item,
+            itemid: itemid
+        },
+        function(data, status) {});
+  $('.formbar-page').hide();
+  $('#formbar-page-'+page).show();
+});
 /*
  * Evaluate when values in the form changes 
 */