rocket-pinboard/templates/index.html.tera
Paul van Tilburg 95e217a84d Add a Markdown edit help popover for the textarea
Also add an edit help button during editing to toggle the popover.
The popover is placed next to the textarea and is removed when
exiting edit mode.
2017-12-30 16:16:59 +01:00

75 lines
1.9 KiB
Plaintext

{% extends "_layout" %}
{% block navbar %}
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
{% for list in lists %}
<li class="nav-item">
<a class="nav-link list-select" data-list-id="{{ list.id }}" href="#{{ list.id }}">{{ list.name }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endblock navbar %}
{% block content %}
<div class="card-columns">
{% for list in lists %}
<div class="card list mb-3" style="display:none"; data-list-id="{{ list.id }}">
<div class="card-header">
<h1 class= "mb-0">
<span id="list-name">{{ list.name }}</span>
<button class="btn btn-dark btn-sm float-right mt-2 list-edit-button">
Bewerk
</button>
<div class="btn-group mt-2 float-right" role="group" aria-label="Edit buttons">
<button class="btn btn-light btn-sm list-cancel-button">
Annuleren
</button>
<button class="btn btn-dark btn-sm list-save-button">
Opslaan
</button>
</div>
<button class="btn btn-light btn-sm float-right mr-2 mt-2 list-edit-help">?</button>
</h1>
</div>
<div class="card-body">
<div class="card-text list-html"></div>
<div class="card-text">
<textarea class="form-control list-data" rows="16"
data-title="Opmaakhulp"
data-content="<pre class='mb-0'>
## Kop 2
### Kop 3
#### Kop 4
_Schuingedrukt_
*Vetgedruk*
~Doorgestreept~
* Item 1
* Item 2
* [ ] Wil ik graag
* [ ] Wil ik ook graag
* [x] Heb ik al!
[Linktekst](http://google.nl)
---
Horizontale lijn<pre>"></textarea>
</div>
</div>
<div class="card-footer">
<p class="card-text"><i><small class="list-updated-at"></small></i></p>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
{% block script %}
<script src="/js/wishlists.js"></script>
{% endblock script %}