Refactor annotation templates

app/server/templates/annotation/annotation_base.html

@@ -1,87 +1,89 @@
 {% extends "base.html" %}
 {% load static %}
 {% block header %}
-<link rel="stylesheet" type="text/css" href="{% static 'css/annotation.css' %}">
+<link rel="stylesheet" href="{% static 'css/annotation.css' %}">
 {% endblock %}
 {% block content %}
 <div class="columns" id="mail-app">
-    <aside class="column is-3 aside hero is-fullheight">
-        <div>
+  <aside class="column is-3 aside hero is-fullheight">
+    <div>
 
-            <div class="main" style="padding: 20px 20px">
-                <div class="field has-addons">
-                    <div class="control is-expanded">
-                        <input class="input" type="text" placeholder="Search document" v-model="searchQuery" @keyup.enter="submit" style="border-right:none;box-shadow: none;-webkit-box-shadow: none;">
-                    </div>
+      <div class="main" style="padding: 20px 20px">
+        <div class="field has-addons">
+          <div class="control is-expanded">
+            <input class="input" type="text" placeholder="Search document" v-model="searchQuery" @keyup.enter="submit" style="border-right:none;box-shadow: none;-webkit-box-shadow: none;">
+          </div>
 
-                    <div class="control">
-                        <div class="dropdown is-hoverable is-right">
-                            <div class="dropdown-trigger">
-                                <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" style="border-left:none">
-                                    <span class="icon has-text-grey" style="padding-right:0;">
-                                        <i class="fas fa-angle-down" aria-hidden="true"></i>
-                                    </span>
-                                </button>
-                            </div>
-                            <div class="dropdown-menu" id="dropdown-menu" role="menu" style="padding-top:0">
-                                <div class="dropdown-content">
-                                    <a class="dropdown-item">
-                                        <label class="radio">
-                                            <input type="radio" value="all" v-model="picked" checked> All
-                                        </label>
-                                    </a>
-                                    <a class="dropdown-item">
-                                        <label class="radio">
-                                            <input type="radio" value="active" v-model="picked"> Active
-                                        </label>
-                                    </a>
-                                    <a class="dropdown-item">
-                                        <label class="radio">
-                                            <input type="radio" value="completed" v-model="picked"> Completed
-                                        </label>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+          <div class="control">
+            <div class="dropdown is-hoverable is-right">
+              <div class="dropdown-trigger">
+                <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" style="border-left:none">
+                  <span class="icon has-text-grey" style="padding-right:0;">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  </span>
+                </button>
+              </div>
+              <div class="dropdown-menu" id="dropdown-menu" role="menu" style="padding-top:0">
+                <div class="dropdown-content">
+                  <a class="dropdown-item">
+                    <label class="radio">
+                      <input type="radio" value="all" v-model="picked" checked> All
+                    </label>
+                  </a>
+                  <a class="dropdown-item">
+                    <label class="radio">
+                      <input type="radio" value="active" v-model="picked"> Active
+                    </label>
+                  </a>
+                  <a class="dropdown-item">
+                    <label class="radio">
+                      <input type="radio" value="completed" v-model="picked"> Completed
+                    </label>
+                  </a>
                 </div>
+              </div>
             </div>
-
-            <div class="main">
-                <a href="#" class="item" v-for="(doc, index) in docs" v-bind:class="{ active: index == pageNumber }" v-on:click="pageNumber = index"
-                    v-bind:data-preview-id="index">
-                    <span class="icon">
-                        <i class="fa fa-check" v-show="annotations[index] && annotations[index].length"></i>
-                    </span>
-                    <span class="name">[[ doc.text.slice(0, 40) ]]...</span>
-                </a>
-            </div>
+          </div>
         </div>
-    </aside>
-    <div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane">
+      </div>
 
-        <div class="progress-bar">
-            <progress class="progress" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
-        </div>
+      <div class="main">
+        <a href="#" class="item" v-for="(doc, index) in docs" v-bind:class="{ active: index == pageNumber }" v-on:click="pageNumber = index"
+          v-bind:data-preview-id="index">
+          <span class="icon">
+            <i class="fa fa-check" v-show="annotations[index] && annotations[index].length"></i>
+          </span>
+          <span class="name">[[ doc.text.slice(0, 40) ]]...</span>
+        </a>
+      </div>
+    </div>
+  </aside>
+  <div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane">
 
-        {% block annotation-area %} {% endblock %}
+    <div class="progress-bar">
+      <progress class="progress" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
+    </div>
 
-        <div class="level" style="margin-top:30px;">
-            <a class="button level-left" v-on:click="prevPage" v-shortkey="{prev1: ['ctrl', 'p'], prev2: ['arrowup'], prev3: ['arrowleft']}" @shortkey="prevPage">
-                <span class="icon">
-                    <i class="fas fa-chevron-left"></i>
-                </span>
-                <span>Prev</span>
-            </a>
+    {% block annotation-area %} {% endblock %}
 
-            <a class="button level-right" v-on:click="nextPage" v-shortkey="{next1: ['ctrl', 'n'], next2: ['arrowdown'], next3: ['arrowright']}" @shortkey="nextPage">
-                <span>Next</span>
-                <span class="icon">
-                    <i class="fas fa-chevron-right"></i>
-                </span>
-            </a>
-        </div>
+    <div class="level" style="margin-top:30px;">
+      <a class="button level-left" v-on:click="prevPage" v-shortkey="{prev1: ['ctrl', 'p'], prev2: ['arrowup'], prev3: ['arrowleft']}"
+        @shortkey="prevPage">
+        <span class="icon">
+          <i class="fas fa-chevron-left"></i>
+        </span>
+        <span>Prev</span>
+      </a>
 
+      <a class="button level-right" v-on:click="nextPage" v-shortkey="{next1: ['ctrl', 'n'], next2: ['arrowdown'], next3: ['arrowright']}"
+        @shortkey="nextPage">
+        <span>Next</span>
+        <span class="icon">
+          <i class="fas fa-chevron-right"></i>
+        </span>
+      </a>
     </div>
+
+  </div>
 </div>
 {% endblock %}

app/server/templates/annotation/document_classification.html

@@ -1,47 +1,41 @@
 {% extends "annotation/annotation_base.html" %}
 {% load static %}
-
 {% block annotation-area %}
 <div class="card">
-    <header class="card-header">
-        <div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
-            <div class="field is-grouped is-grouped-multiline">
-                <div class="control" v-for="(label, item) in labels">
-                    <div class="tags has-addons">
-                        <a class="tag is-medium"
-                        v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }"
-                        v-on:click="addLabel(label)"
-                        v-shortkey.once="[ label.shortcut ]"
-                        @shortkey="addLabel(label)">
-                        [[ label.text ]]
-                        </a>
-                        <span class="tag is-medium">[[ label.shortcut ]]</span>
-                    </div>
-                </div>
-            </div>
+  <header class="card-header">
+    <div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
+      <div class="field is-grouped is-grouped-multiline">
+        <div class="control" v-for="(label, item) in labels">
+          <div class="tags has-addons">
+            <a class="tag is-medium" v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }" v-on:click="addLabel(label)"
+              v-shortkey.once="[ label.shortcut ]" @shortkey="addLabel(label)">
+              [[ label.text ]]
+            </a>
+            <span class="tag is-medium">[[ label.shortcut ]]</span>
+          </div>
         </div>
-    </header>
+      </div>
+    </div>
+  </header>
 
-    <div class="card-content">
-        <div class="field is-grouped is-grouped-multiline">
-            <div class="control" v-for="(annotation, index) in annotations[pageNumber]">
-                <div class="tags has-addons">
-                    <span class="tag is-medium"
-                          v-bind:style="{ color: id2label[annotation.label].text_color, 'background-color': id2label[annotation.label].background_color }">
-                        [[ id2label[annotation.label].text ]]
-                        <button class="delete is-small" v-on:click="removeLabel(annotation)"></button>
-                    </span>
-                </div>
-            </div>
-        </div>
-        <hr>
-        <div class="content" v-if="docs[pageNumber]">
-            [[ docs[pageNumber].text ]]
+  <div class="card-content">
+    <div class="field is-grouped is-grouped-multiline">
+      <div class="control" v-for="(annotation, index) in annotations[pageNumber]">
+        <div class="tags has-addons">
+          <span class="tag is-medium" v-bind:style="{ color: id2label[annotation.label].text_color, 'background-color': id2label[annotation.label].background_color }">
+            [[ id2label[annotation.label].text ]]
+            <button class="delete is-small" v-on:click="removeLabel(annotation)"></button>
+          </span>
         </div>
+      </div>
     </div>
+    <hr>
+    <div class="content" v-if="docs[pageNumber]">
+      [[ docs[pageNumber].text ]]
+    </div>
+  </div>
 </div>
 {% endblock %}
-
 {% block footer %}
-<script type="text/javascript" src="{% static 'bundle/document_classification.js' %}"></script>
+<script src="{% static 'bundle/document_classification.js' %}"></script>
 {% endblock %}

app/server/templates/annotation/seq2seq.html

@@ -1,38 +1,32 @@
-{% extends "annotation/annotation_base.html" %} {% load static %} {% block annotation-area %}
+{% extends "annotation/annotation_base.html" %}
+{% load static %}
+{% block annotation-area %}
 <div class="card" style="background-color:royalblue;color:white;font-weight:bold;">
-    <div class="card-content">
-        <div class="content" v-if="docs[pageNumber]">
-            [[ docs[pageNumber].text ]]
-        </div>
+  <div class="card-content">
+    <div class="content" v-if="docs[pageNumber]">
+      [[ docs[pageNumber].text ]]
     </div>
+  </div>
 </div>
 
 <section class="todoapp">
-    <header class="header">
-        <input class="textarea new-todo"
-               type="text"
-               placeholder="What is your response?"
-               v-model="newTodo"
-               @keyup.enter="addTodo">
-    </header>
-    <section class="main" v-cloak>
-        <ul class="todo-list">
-            <li v-for="todo in annotations[pageNumber]" class="todo" :key="todo.id" :class="{ editing: todo == editedTodo }">
-                <div class="view">
-                    <label @dblclick="editTodo(todo)">[[ todo.text ]]</label>
-                    <button class="delete destroy is-large" @click="removeTodo(todo)"></button>
-                </div>
-                <input class="textarea edit"
-                       type="text"
-                       v-model="todo.text"
-                       v-todo-focus="todo == editedTodo"
-                       @blur="doneEdit(todo)"
-                       @keyup.enter="doneEdit(todo)"
-                       @keyup.esc="cancelEdit(todo)">
-            </li>
-        </ul>
-    </section>
+  <header class="header">
+    <input class="textarea new-todo" type="text" placeholder="What is your response?" v-model="newTodo" @keyup.enter="addTodo">
+  </header>
+  <section class="main" v-cloak>
+    <ul class="todo-list">
+      <li v-for="todo in annotations[pageNumber]" class="todo" :key="todo.id" :class="{ editing: todo == editedTodo }">
+        <div class="view">
+          <label @dblclick="editTodo(todo)">[[ todo.text ]]</label>
+          <button class="delete destroy is-large" @click="removeTodo(todo)"></button>
+        </div>
+        <input class="textarea edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)"
+          @keyup.esc="cancelEdit(todo)">
+      </li>
+    </ul>
+  </section>
 </section>
-{% endblock %} {% block footer %}
-<script type="text/javascript" src="{% static 'bundle/seq2seq.js' %}"></script>
+{% endblock %}
+{% block footer %}
+<script src="{% static 'bundle/seq2seq.js' %}"></script>
 {% endblock %}

app/server/templates/annotation/sequence_labeling.html

@@ -1,39 +1,30 @@
 {% extends "annotation/annotation_base.html" %}
 {% load static %}
-
 {% block annotation-area %}
 <div class="card">
-    <header class="card-header">
-        <div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
-            <div class="field is-grouped is-grouped-multiline">
-                <div class="control" v-for="label in labels">
-                    <div class="tags has-addons">
-                        <a class="tag is-medium"
-                        v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }"
-                        v-on:click="annotate(label.id)"
-                        v-shortkey.once="[ label.shortcut ]"
-                        @shortkey="annotate(label.id)">
-                        [[ label.text ]]
-                        </a>
-                        <span class="tag is-medium">[[ label.shortcut ]]</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </header>
-    <div class="card-content">
-        <div class="content" v-if="docs[pageNumber] && annotations[pageNumber]">
-            <annotator ref="annotator"
-                       v-bind:labels="labels"
-                       v-bind:entity-positions="annotations[pageNumber]"
-                       v-bind:text="docs[pageNumber].text"
-                       @remove-label="removeLabel"
-                       @add-label="addLabel"></annotator>
+  <header class="card-header">
+    <div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
+      <div class="field is-grouped is-grouped-multiline">
+        <div class="control" v-for="label in labels">
+          <div class="tags has-addons">
+            <a class="tag is-medium" v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }" v-on:click="annotate(label.id)"
+              v-shortkey.once="[ label.shortcut ]" @shortkey="annotate(label.id)">
+              [[ label.text ]]
+            </a>
+            <span class="tag is-medium">[[ label.shortcut ]]</span>
+          </div>
         </div>
+      </div>
+    </div>
+  </header>
+  <div class="card-content">
+    <div class="content" v-if="docs[pageNumber] && annotations[pageNumber]">
+      <annotator ref="annotator" v-bind:labels="labels" v-bind:entity-positions="annotations[pageNumber]" v-bind:text="docs[pageNumber].text"
+        @remove-label="removeLabel" @add-label="addLabel"></annotator>
     </div>
+  </div>
 </div>
 {% endblock %}
-
 {% block footer %}
-<script type="text/javascript" src="{% static 'bundle/sequence_labeling.js' %}"></script>
+<script src="{% static 'bundle/sequence_labeling.js' %}"></script>
 {% endblock %}