rhodecode/templates/debug_style/index.html

## -*- coding: utf-8 -*-
<%inherit file="/base/base.mako"/>

<%def name="title()">
    ${_('Debug Style')}
    %if c.rhodecode_name:
        &middot; ${h.branding(c.rhodecode_name)}
    %endif
</%def>

<%def name="breadcrumbs_links()">
    ${_('Style')}
</%def>

<%def name="menu_bar_nav()">
    ${self.menu_items(active='debug_style')}
</%def>


<%def name="main()">
  <div id="style-page">
      ${self.real_main()}
  </div>
</%def>

<%def name="real_main()">
<div class="box">
    <div class="title">
        ${self.breadcrumbs()}
    </div>

    <div class='sidebar-col-wrapper'>
      ##main
      ${self.sidebar()}

      <div class="main-content">
          <h2>Examples of styled elements</h2>
          <p>Taken based on the examples from Bootstrap, form elements based
             on our current markup.</p>
          <p>
            The objective of this section is to have a comprehensive style guide which out
            lines any and all elements used throughout the application, as a reference for 
            both existing developers and as a training tool for future hires.
          </p>
      </div>
    </div>
</div>
</%def>


<%def name="sidebar()">
    <div class="sidebar">
      <ul class="nav nav-pills nav-stacked">
          <li class="${'active' if c.active=='index' else ''}"><a href="${h.url('debug_style_home')}">${_('Index')}</a></li>
          <li class="${'active' if c.active=='typography' else ''}"><a href="${h.url('debug_style_template', t_path='typography.html')}">${_('Typography')}</a></li>
          <li class="${'active' if c.active=='forms' else ''}"><a href="${h.url('debug_style_template', t_path='forms.html')}">${_('Forms')}</a></li>
          <li class="${'active' if c.active=='buttons' else ''}"><a href="${h.url('debug_style_template', t_path='buttons.html')}">${_('Buttons')}</a></li>
          <li class="${'active' if c.active=='labels' else ''}"><a href="${h.url('debug_style_template', t_path='labels.html')}">${_('Labels')}</a></li>
          <li class="${'active' if c.active=='alerts' else ''}"><a href="${h.url('debug_style_template', t_path='alerts.html')}">${_('Alerts')}</a></li>
          <li class="${'active' if c.active=='tables' else ''}"><a href="${h.url('debug_style_template', t_path='tables.html')}">${_('Tables')}</a></li>
          <li class="${'active' if c.active=='tables-wide' else ''}"><a href="${h.url('debug_style_template', t_path='tables-wide.html')}">${_('Tables wide')}</a></li>
          <li class="${'active' if c.active=='collapsable-content' else ''}"><a href="${h.url('debug_style_template', t_path='collapsable-content.html')}">${_('Collapsable Content')}</a></li>
          <li class="${'active' if c.active=='icons' else ''}"><a href="${h.url('debug_style_template', t_path='icons.html')}">${_('Icons')}</a></li>
          <li class="${'active' if c.active=='layout-form-sidebar' else ''}"><a href="${h.url('debug_style_template', t_path='layout-form-sidebar.html')}">${_('Layout form with sidebar')}</a></li>
          <li class="${'active' if c.active=='login' else ''}"><a href="${h.url('debug_style_template', t_path='login.html')}">${_('Login')}</a></li>
          <li class="${'active' if c.active=='login2' else ''}"><a href="${h.url('debug_style_template', t_path='login2.html')}">${_('Login 2')}</a></li>
          <li class="${'active' if c.active=='code-block' else ''}"><a href="${h.url('debug_style_template', t_path='code-block.html')}">${_('Code blocks')}</a></li>

          <li class="divider"><strong>Experimental</strong></li>
          <li class="${'active' if c.active=='panels' else ''}"><a href="${h.url('debug_style_template', t_path='panels.html')}">${_('Panels')}</a></li>

          <li class="divider"><strong>Depreciated</strong></li>
          <li class="${'active' if c.active=='form-elements' else ''}"><a href="${h.url('debug_style_template', t_path='form-elements.html')}">${_('Form elements')}</a></li>
          <li class="${'active' if c.active=='form-elements-small' else ''}"><a href="${h.url('debug_style_template', t_path='form-elements-small.html')}">${_('Form elements small')}</a></li>
          <li class="${'active' if c.active=='form-inline' else ''}"><a href="${h.url('debug_style_template', t_path='form-inline.html')}">${_('Form inline elements')}</a></li>
          <li class="${'active' if c.active=='form-vertical' else ''}"><a href="${h.url('debug_style_template', t_path='form-vertical.html')}">${_('Form vertical')}</a></li>
        </ul>
    </div>
</%def>