search

kalamuna / kss-bootstrap

:b: A KSS Template and Styleguide for Bootstrap.
http://kalamuna.github.io/kss-bootstrap
Other
13 stars 2 forks source link

Sidebar markup #12

Closed soniktrooth closed 9 years ago

soniktrooth commented 9 years ago 
<div class="list-group" data-spy="affix" id="sidebar">
  {{#if homepage}}
    {{!-- Nothing --}}
  {{else}}
    {{#eachSection rootName}}
      {{#ifDepth 1}}
        <a href="#" class="list-group-item disabled">
          <h4 class="list-group-item-heading">{{ header }}</h4>
        </a>
      {{else}}
        {{#ifDepth 2}}
          <a href="#{{referenceURI}}" class="list-group-item"><span class="kss-ref badge" >{{ referenceURI }}</span> {{ header }}</a>
        {{else}}
          {{!-- <a href="#{{referenceURI}}" class="list-group-item"><span class="kss-ref badge">{{ referenceURI }}</span> - {{ header }}</a>--}}
        {{/ifDepth}}
      {{/ifDepth}}
    {{/eachSection}}
  {{/if}}
</div>

This should use an unordered list instead of just links inside a div. If we do this it will layout nicely without any extra css.

I would do it but I don't really understand this templating language. Ideally the <h4 class="list-group-item-heading"> would be outside the <ul> so we'd end up with something like this: 

<div class="list-group" data-spy="affix" id="sidebar">
  <h4 class="list-group-item-heading">{{ header }}</h4>
  <ul>
    {{foreach blahThings}}
    <li>
      <a href="#{{referenceURI}}" class="list-group-item"><span class="kss-ref badge" >{{ referenceURI }}</span> {{ header }}</a>
    </li>
    {{endforeach}}
  </ul>
</div>

Excuse the pseudo-code.

RobLoach commented 9 years ago

@soniktrooth @madeofpeople Got something working on this: http://robloach.github.io/kss-bootstrap/section-1.html