More formatting for topics
{% block extra_css %}
{{ block.super }}
-{# <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.3.0.2.css">#}
<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-select-1.6.3.min.css"/>{% endblock %}
-
{% block main %}
-{# <!DOCTYPE html>#}
-{# <html lang="en">#}
-{# <head>#}
-{# <meta charset="UTF-8">#}
-{# <title>Topics Editor</title>#}
-{# <link rel="shortcut icon" href="/">#}
-{# </head>#}
-{# <body>#}
- <a href="{{ request.META.HTTP_REFERER }}">back to resource</a>
<div id="topics-app">
- <h2>Edit Topics</h2>
+ <div style="margin-left: 2em">
+ <a href="{{ request.META.HTTP_REFERER }}">back to resource</a></p>
+ <h3>Inline Topic Edit</h3>
<input id="add-topic" type="text" v-model="newTopic"/>
- <button v-on:click="addTopic('{{ csrf_token }}', )">Add Topic</button>
+ <button v-on:click="addTopic('{{ csrf_token }}', )" style="margin-bottom: 1em;">Add Topic</button>
+ </div>
+ <hr/>
<template>
- <ul>
+ <ul style="list-style: none;">
<li v-for="number in numbers">
+ <span style="cursor:pointer; padding-right: 2em"
+ v-on:click="deleteTopic('{{ csrf_token }}', number.val[0])" data-toggle="tooltip" title="Delete item"
+ class="glyphicon glyphicon-remove-circle icon-remove"></span>
<span v-show="!number.edit" v-on:click="toggleEdit(this, number)">{% templatetag openvariable %} number.val[1] {% templatetag closevariable %}</span>
<input type="text" v-model="number.val[1]" v-show="number.edit"
v-on:blur="saveEdit('{{ csrf_token }}', this, number)"/>
- <span style="cursor:pointer" v-on:click="deleteTopic('{{ csrf_token }}', number.val[0])">X</span>
</li>
</ul>
</template>
</div>
-{# <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-3.4.1.min.js"></script>#}
<script type="text/javascript" src="{{ STATIC_URL }}js/vue-2.6.10-dev.js"></script>
<script type="application/javascript">
// contents here are required by topics.js
</script>
<script type="text/javascript" src="{{ STATIC_URL }}js/topics.js"></script>
-{# </body>#}
-{# </html>#}
{% endblock main %}
{#{% block extra_js %}#}
