cancionero-web/res/templates/song_fragment.html

<div class="song" id="song{{song.number}}">
<h2 style="display: inline-block;">{{song.number}}. {{ song.name}}</h2>
{% if song.author %}
<span>por <strong>{{ song.author }}</strong></span>
{% endif %}
{% if song.origin %}
<span>basada en: <strong>{{ song.origin }}</strong></span>
{% endif %}
{% if song.chorded %}
<div class="showChords chordControls">
    <label for="transposeSelect{{ song.number }}">Tono {% spaceless %}
        {% with chord=song.first_chord %}
        {% if chord %}
            <span class="chord">{% for c in chord.items_t %}
                {% if c.chord %}
                    <span class="c">{{ c.text|safe }}</span>
                {% else %}
                    <span>{{ c.text|safe }}</span>
                {% endif %}
            {% endfor %}</span>
        {% endif %}{% endwith %}{% endspaceless %}</label>
    <button class="small" onclick="transposeAdd(-1, {{song.number}})">-1</button>
    <select id="transposeSelect{{ song.number }}" class="transposeSelect" disabled>
        <option>-6</option>
        <option>-5</option>
        <option>-4</option>
        <option>-3</option>
        <option>-2</option>
        <option>-1</option>
        <option selected="selected">0</option>
        <option>+1</option>
        <option>+2</option>
        <option>+3</option>
        <option>+4</option>
        <option>+5</option>
        <option>+6</option>
    </select>
    <button class="small" onclick="transposeAdd(1, {{song.number}})">+1</button>
    <button onclick="transpose(0, {{song.number}})">Reset</button>
</div>
{% if song.capo != 0 %}
<div class="showChords">
    <span class="capo">Tono original: Cejilla {{ song.capo }}</span>
    <button style="margin-left: 0.5em;" onclick="transpose({{ song.capo}}, {{song.number}})">Transponer para quitarla</button>
</div>
{% endif %}
{% endif %}
<div class="fullsong">
    <div class="showLyrics" style="display: none;">
        {% for verse in song.verses %}
        <p class="{{ verse.kind }}">
            {% for line in verse.lines %}
            {{ line }}<br/>
            {% endfor %}
        </p>
        {% endfor %}
    </div>
    <div class="showChords">
        {% for verse in song.verses %}
        <div class="{{ verse.kind }}">
            {% for line in verse.lines %}
            {% spaceless %}
            {% for chord, lyric in line.zipped_arr %}
            <table class="chordedline">
                <tr class="chord">
                    <td rowspan="{{ chord.rowspan|default:'1' }}">
                        {% if chord.class %}
                        <span class="{{ chord.class }}"></span>
                        {% endif %}
                        {% if chord.chord.trfmt == "normal" %}
                        {% for c in chord.chord.items_t %}
                        {% if c.chord %}
                        <span class="c">{{ c.text|safe }}</span>
                        {% else %}
                        <span>{{ c.text|safe }}</span>
                        {% endif %}
                        {% endfor %}
                        {% endif %}
                        {% if chord.chord.trfmt == "double" %}
                        <span>
                {% for c in chord.chord.items_n %}
                  {% if c.chord %}
                    <span class="c">{{ c.text|safe }}</span>
                  {% else %}
                    <span>{{ c.text|safe }}</span>
                  {% endif %}
                {% endfor %}
                <br/>
                {% for c in chord.chord.items_t %}
                  {% if c.chord %}
                    <span class="c">{{ c.text|safe }}</span>
                  {% else %}
                    <span>{{ c.text|safe }}</span>
                  {% endif %}
                {% endfor %}
              <span/>
            {% endif %}
            {% if chord.chord.trfmt == "hover" %}
              <span>
              {% for c in chord.chord.items_n %}
                {% if c.chord %}
                  <span class="c">{{ c.text|safe }}</span>
                {% else %}
                  <span>{{ c.text|safe }}</span>
                {% endif %}
              {% endfor %}
              <br/>&nbsp;</span>
            {% endif %}
                    </td>
                </tr>
                <tr class="lyric">
                    <td>
                        {% if 'rowspan' not in chord %}
                        <span>{{ lyric|safe }}</span>
                        {% endif %}
                    </td>
                </tr>
            </table>
            {% endfor %}
            {% if not forloop.last %} <br/> {% endif %}
            {% endspaceless %}
            {% endfor %}
        </div>
        {% endfor %}
    </div>
</div>