richard
/
doccano
mirror of https://github.com/doccano/doccano.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add guideline button to annotation page

pull/10/head
Hironsan 6 years ago
parent
20e50ea18c
commit
f604f683da
6 changed files with 48 additions and 5 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app/server/static/bundle/document_classification.js
  2. 2
      app/server/static/bundle/seq2seq.js
  3. 2
      app/server/static/bundle/sequence_labeling.js
  4. 10
      app/server/static/css/annotation.css
  5. 10
      app/server/static/js/mixin.js
  6. 27
      app/server/templates/annotation/annotation_base.html

2
app/server/static/bundle/document_classification.js
View File

@ -495,7 +495,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var axio
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n data() {\n return {\n pageNumber: 0,\n docs: [],\n annotations: [],\n labels: [],\n guideline: '',\n total: 0,\n remaining: 0,\n searchQuery: '',\n url: '',\n picked: 'all',\n count: 0,\n };\n },\n\n methods: {\n async nextPage() {\n this.pageNumber += 1;\n if (this.pageNumber === this.docs.length) {\n if (this.next) {\n this.url = this.next;\n await this.search();\n this.pageNumber = 0;\n } else {\n this.pageNumber = this.docs.length - 1;\n }\n }\n },\n\n async prevPage() {\n this.pageNumber -= 1;\n if (this.pageNumber === -1) {\n if (this.prev) {\n this.url = this.prev;\n await this.search();\n this.pageNumber = this.docs.length - 1;\n } else {\n this.pageNumber = 0;\n }\n }\n },\n\n async search() {\n await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n this.docs = response.data.results;\n this.next = response.data.next;\n this.prev = response.data.previous;\n this.count = response.data.count;\n this.annotations = [];\n for (let i = 0; i < this.docs.length; i++) {\n const doc = this.docs[i];\n this.annotations.push(doc.annotations);\n }\n });\n },\n\n getState() {\n if (this.picked === 'all') {\n return '';\n }\n if (this.picked === 'active') {\n return 'true';\n }\n return 'false';\n },\n\n async submit() {\n const state = this.getState();\n this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n await this.search();\n this.pageNumber = 0;\n },\n\n removeLabel(annotation) {\n const docId = this.docs[this.pageNumber].id;\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${annotation.id}`).then((response) => {\n const index = this.annotations[this.pageNumber].indexOf(annotation);\n this.annotations[this.pageNumber].splice(index, 1);\n });\n },\n },\n\n watch: {\n picked() {\n this.submit();\n },\n\n annotations() {\n // fetch progress info.\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n this.total = response.data.total;\n this.remaining = response.data.remaining;\n });\n },\n },\n\n created() {\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n this.labels = response.data;\n });\n this.submit();\n },\n\n computed: {\n achievement() {\n const done = this.total - this.remaining;\n const percentage = Math.round(done / this.total * 100);\n return this.total > 0 ? percentage : 0;\n },\n\n id2label() {\n let id2label = {};\n for (let i = 0; i < this.labels.length; i++) {\n const label = this.labels[i];\n id2label[label.id] = label;\n }\n return id2label;\n },\n\n progressColor() {\n if (this.achievement < 30) {\n return 'is-danger';\n }\n if (this.achievement < 70) {\n return 'is-warning';\n }\n return 'is-primary';\n },\n },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n data() {\n return {\n pageNumber: 0,\n docs: [],\n annotations: [],\n labels: [],\n guideline: '',\n total: 0,\n remaining: 0,\n searchQuery: '',\n url: '',\n picked: 'all',\n count: 0,\n isActive: false,\n };\n },\n\n methods: {\n async nextPage() {\n this.pageNumber += 1;\n if (this.pageNumber === this.docs.length) {\n if (this.next) {\n this.url = this.next;\n await this.search();\n this.pageNumber = 0;\n } else {\n this.pageNumber = this.docs.length - 1;\n }\n }\n },\n\n async prevPage() {\n this.pageNumber -= 1;\n if (this.pageNumber === -1) {\n if (this.prev) {\n this.url = this.prev;\n await this.search();\n this.pageNumber = this.docs.length - 1;\n } else {\n this.pageNumber = 0;\n }\n }\n },\n\n async search() {\n await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n this.docs = response.data.results;\n this.next = response.data.next;\n this.prev = response.data.previous;\n this.count = response.data.count;\n this.annotations = [];\n for (let i = 0; i < this.docs.length; i++) {\n const doc = this.docs[i];\n this.annotations.push(doc.annotations);\n }\n });\n },\n\n getState() {\n if (this.picked === 'all') {\n return '';\n }\n if (this.picked === 'active') {\n return 'true';\n }\n return 'false';\n },\n\n async submit() {\n const state = this.getState();\n this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n await this.search();\n this.pageNumber = 0;\n },\n\n removeLabel(annotation) {\n const docId = this.docs[this.pageNumber].id;\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${annotation.id}`).then((response) => {\n const index = this.annotations[this.pageNumber].indexOf(annotation);\n this.annotations[this.pageNumber].splice(index, 1);\n });\n },\n },\n\n watch: {\n picked() {\n this.submit();\n },\n\n annotations() {\n // fetch progress info.\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n this.total = response.data.total;\n this.remaining = response.data.remaining;\n });\n },\n },\n\n created() {\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n this.labels = response.data;\n });\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get().then((response) => {\n this.guideline = response.data.guideline;\n });\n this.submit();\n },\n\n computed: {\n achievement() {\n const done = this.total - this.remaining;\n const percentage = Math.round(done / this.total * 100);\n return this.total > 0 ? percentage : 0;\n },\n\n compiledMarkdown() {\n return marked(this.guideline, {\n sanitize: true,\n });\n },\n\n id2label() {\n let id2label = {};\n for (let i = 0; i < this.labels.length; i++) {\n const label = this.labels[i];\n id2label[label.id] = label;\n }\n return id2label;\n },\n\n progressColor() {\n if (this.achievement < 30) {\n return 'is-danger';\n }\n if (this.achievement < 70) {\n return 'is-warning';\n }\n return 'is-primary';\n },\n },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
/***/ })

2
app/server/static/bundle/seq2seq.js
View File

@ -483,7 +483,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var axio
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n data() {\n return {\n pageNumber: 0,\n docs: [],\n annotations: [],\n labels: [],\n guideline: '',\n total: 0,\n remaining: 0,\n searchQuery: '',\n url: '',\n picked: 'all',\n count: 0,\n };\n },\n\n methods: {\n async nextPage() {\n this.pageNumber += 1;\n if (this.pageNumber === this.docs.length) {\n if (this.next) {\n this.url = this.next;\n await this.search();\n this.pageNumber = 0;\n } else {\n this.pageNumber = this.docs.length - 1;\n }\n }\n },\n\n async prevPage() {\n this.pageNumber -= 1;\n if (this.pageNumber === -1) {\n if (this.prev) {\n this.url = this.prev;\n await this.search();\n this.pageNumber = this.docs.length - 1;\n } else {\n this.pageNumber = 0;\n }\n }\n },\n\n async search() {\n await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n this.docs = response.data.results;\n this.next = response.data.next;\n this.prev = response.data.previous;\n this.count = response.data.count;\n this.annotations = [];\n for (let i = 0; i < this.docs.length; i++) {\n const doc = this.docs[i];\n this.annotations.push(doc.annotations);\n }\n });\n },\n\n getState() {\n if (this.picked === 'all') {\n return '';\n }\n if (this.picked === 'active') {\n return 'true';\n }\n return 'false';\n },\n\n async submit() {\n const state = this.getState();\n this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n await this.search();\n this.pageNumber = 0;\n },\n\n removeLabel(annotation) {\n const docId = this.docs[this.pageNumber].id;\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${annotation.id}`).then((response) => {\n const index = this.annotations[this.pageNumber].indexOf(annotation);\n this.annotations[this.pageNumber].splice(index, 1);\n });\n },\n },\n\n watch: {\n picked() {\n this.submit();\n },\n\n annotations() {\n // fetch progress info.\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n this.total = response.data.total;\n this.remaining = response.data.remaining;\n });\n },\n },\n\n created() {\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n this.labels = response.data;\n });\n this.submit();\n },\n\n computed: {\n achievement() {\n const done = this.total - this.remaining;\n const percentage = Math.round(done / this.total * 100);\n return this.total > 0 ? percentage : 0;\n },\n\n id2label() {\n let id2label = {};\n for (let i = 0; i < this.labels.length; i++) {\n const label = this.labels[i];\n id2label[label.id] = label;\n }\n return id2label;\n },\n\n progressColor() {\n if (this.achievement < 30) {\n return 'is-danger';\n }\n if (this.achievement < 70) {\n return 'is-warning';\n }\n return 'is-primary';\n },\n },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n data() {\n return {\n pageNumber: 0,\n docs: [],\n annotations: [],\n labels: [],\n guideline: '',\n total: 0,\n remaining: 0,\n searchQuery: '',\n url: '',\n picked: 'all',\n count: 0,\n isActive: false,\n };\n },\n\n methods: {\n async nextPage() {\n this.pageNumber += 1;\n if (this.pageNumber === this.docs.length) {\n if (this.next) {\n this.url = this.next;\n await this.search();\n this.pageNumber = 0;\n } else {\n this.pageNumber = this.docs.length - 1;\n }\n }\n },\n\n async prevPage() {\n this.pageNumber -= 1;\n if (this.pageNumber === -1) {\n if (this.prev) {\n this.url = this.prev;\n await this.search();\n this.pageNumber = this.docs.length - 1;\n } else {\n this.pageNumber = 0;\n }\n }\n },\n\n async search() {\n await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n this.docs = response.data.results;\n this.next = response.data.next;\n this.prev = response.data.previous;\n this.count = response.data.count;\n this.annotations = [];\n for (let i = 0; i < this.docs.length; i++) {\n const doc = this.docs[i];\n this.annotations.push(doc.annotations);\n }\n });\n },\n\n getState() {\n if (this.picked === 'all') {\n return '';\n }\n if (this.picked === 'active') {\n return 'true';\n }\n return 'false';\n },\n\n async submit() {\n const state = this.getState();\n this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n await this.search();\n this.pageNumber = 0;\n },\n\n removeLabel(annotation) {\n const docId = this.docs[this.pageNumber].id;\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${annotation.id}`).then((response) => {\n const index = this.annotations[this.pageNumber].indexOf(annotation);\n this.annotations[this.pageNumber].splice(index, 1);\n });\n },\n },\n\n watch: {\n picked() {\n this.submit();\n },\n\n annotations() {\n // fetch progress info.\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n this.total = response.data.total;\n this.remaining = response.data.remaining;\n });\n },\n },\n\n created() {\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n this.labels = response.data;\n });\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get().then((response) => {\n this.guideline = response.data.guideline;\n });\n this.submit();\n },\n\n computed: {\n achievement() {\n const done = this.total - this.remaining;\n const percentage = Math.round(done / this.total * 100);\n return this.total > 0 ? percentage : 0;\n },\n\n compiledMarkdown() {\n return marked(this.guideline, {\n sanitize: true,\n });\n },\n\n id2label() {\n let id2label = {};\n for (let i = 0; i < this.labels.length; i++) {\n const label = this.labels[i];\n id2label[label.id] = label;\n }\n return id2label;\n },\n\n progressColor() {\n if (this.achievement < 30) {\n return 'is-danger';\n }\n if (this.achievement < 70) {\n return 'is-warning';\n }\n return 'is-primary';\n },\n },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
/***/ }),

2
app/server/static/bundle/sequence_labeling.js
View File

@ -483,7 +483,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var axio
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n data() {\n return {\n pageNumber: 0,\n docs: [],\n annotations: [],\n labels: [],\n guideline: '',\n total: 0,\n remaining: 0,\n searchQuery: '',\n url: '',\n picked: 'all',\n count: 0,\n };\n },\n\n methods: {\n async nextPage() {\n this.pageNumber += 1;\n if (this.pageNumber === this.docs.length) {\n if (this.next) {\n this.url = this.next;\n await this.search();\n this.pageNumber = 0;\n } else {\n this.pageNumber = this.docs.length - 1;\n }\n }\n },\n\n async prevPage() {\n this.pageNumber -= 1;\n if (this.pageNumber === -1) {\n if (this.prev) {\n this.url = this.prev;\n await this.search();\n this.pageNumber = this.docs.length - 1;\n } else {\n this.pageNumber = 0;\n }\n }\n },\n\n async search() {\n await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n this.docs = response.data.results;\n this.next = response.data.next;\n this.prev = response.data.previous;\n this.count = response.data.count;\n this.annotations = [];\n for (let i = 0; i < this.docs.length; i++) {\n const doc = this.docs[i];\n this.annotations.push(doc.annotations);\n }\n });\n },\n\n getState() {\n if (this.picked === 'all') {\n return '';\n }\n if (this.picked === 'active') {\n return 'true';\n }\n return 'false';\n },\n\n async submit() {\n const state = this.getState();\n this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n await this.search();\n this.pageNumber = 0;\n },\n\n removeLabel(annotation) {\n const docId = this.docs[this.pageNumber].id;\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${annotation.id}`).then((response) => {\n const index = this.annotations[this.pageNumber].indexOf(annotation);\n this.annotations[this.pageNumber].splice(index, 1);\n });\n },\n },\n\n watch: {\n picked() {\n this.submit();\n },\n\n annotations() {\n // fetch progress info.\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n this.total = response.data.total;\n this.remaining = response.data.remaining;\n });\n },\n },\n\n created() {\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n this.labels = response.data;\n });\n this.submit();\n },\n\n computed: {\n achievement() {\n const done = this.total - this.remaining;\n const percentage = Math.round(done / this.total * 100);\n return this.total > 0 ? percentage : 0;\n },\n\n id2label() {\n let id2label = {};\n for (let i = 0; i < this.labels.length; i++) {\n const label = this.labels[i];\n id2label[label.id] = label;\n }\n return id2label;\n },\n\n progressColor() {\n if (this.achievement < 30) {\n return 'is-danger';\n }\n if (this.achievement < 70) {\n return 'is-warning';\n }\n return 'is-primary';\n },\n },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n data() {\n return {\n pageNumber: 0,\n docs: [],\n annotations: [],\n labels: [],\n guideline: '',\n total: 0,\n remaining: 0,\n searchQuery: '',\n url: '',\n picked: 'all',\n count: 0,\n isActive: false,\n };\n },\n\n methods: {\n async nextPage() {\n this.pageNumber += 1;\n if (this.pageNumber === this.docs.length) {\n if (this.next) {\n this.url = this.next;\n await this.search();\n this.pageNumber = 0;\n } else {\n this.pageNumber = this.docs.length - 1;\n }\n }\n },\n\n async prevPage() {\n this.pageNumber -= 1;\n if (this.pageNumber === -1) {\n if (this.prev) {\n this.url = this.prev;\n await this.search();\n this.pageNumber = this.docs.length - 1;\n } else {\n this.pageNumber = 0;\n }\n }\n },\n\n async search() {\n await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n this.docs = response.data.results;\n this.next = response.data.next;\n this.prev = response.data.previous;\n this.count = response.data.count;\n this.annotations = [];\n for (let i = 0; i < this.docs.length; i++) {\n const doc = this.docs[i];\n this.annotations.push(doc.annotations);\n }\n });\n },\n\n getState() {\n if (this.picked === 'all') {\n return '';\n }\n if (this.picked === 'active') {\n return 'true';\n }\n return 'false';\n },\n\n async submit() {\n const state = this.getState();\n this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n await this.search();\n this.pageNumber = 0;\n },\n\n removeLabel(annotation) {\n const docId = this.docs[this.pageNumber].id;\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${annotation.id}`).then((response) => {\n const index = this.annotations[this.pageNumber].indexOf(annotation);\n this.annotations[this.pageNumber].splice(index, 1);\n });\n },\n },\n\n watch: {\n picked() {\n this.submit();\n },\n\n annotations() {\n // fetch progress info.\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n this.total = response.data.total;\n this.remaining = response.data.remaining;\n });\n },\n },\n\n created() {\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n this.labels = response.data;\n });\n _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get().then((response) => {\n this.guideline = response.data.guideline;\n });\n this.submit();\n },\n\n computed: {\n achievement() {\n const done = this.total - this.remaining;\n const percentage = Math.round(done / this.total * 100);\n return this.total > 0 ? percentage : 0;\n },\n\n compiledMarkdown() {\n return marked(this.guideline, {\n sanitize: true,\n });\n },\n\n id2label() {\n let id2label = {};\n for (let i = 0; i < this.labels.length; i++) {\n const label = this.labels[i];\n id2label[label.id] = label;\n }\n return id2label;\n },\n\n progressColor() {\n if (this.achievement < 30) {\n return 'is-danger';\n }\n if (this.achievement < 70) {\n return 'is-warning';\n }\n return 'is-primary';\n },\n },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
/***/ }),

10
app/server/static/css/annotation.css
View File

@ -264,4 +264,14 @@ body {
margin-bottom: -1px;
}
.modal-card-body-footer {
border-bottom: 1px solid #dbdbdb;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.is-vertical-center {
align-items: center;
}
[v-cloak] { display: none; }

10
app/server/static/js/mixin.js
View File

@ -14,6 +14,7 @@ const annotationMixin = {
url: '',
picked: 'all',
count: 0,
isActive: false,
};
},
@ -102,6 +103,9 @@ const annotationMixin = {
HTTP.get('labels').then((response) => {
this.labels = response.data;
});
HTTP.get().then((response) => {
this.guideline = response.data.guideline;
});
this.submit();
},
@ -112,6 +116,12 @@ const annotationMixin = {
return this.total > 0 ? percentage : 0;
},
compiledMarkdown() {
return marked(this.guideline, {
sanitize: true,
});
},
id2label() {
let id2label = {};
for (let i = 0; i < this.labels.length; i++) {

27
app/server/templates/annotation/annotation_base.html
View File

@ -2,6 +2,8 @@
{% load static %}
{% block header %}
<link rel="stylesheet" href="{% static 'css/annotation.css' %}">
<script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>
{% endblock %}
{% block content %}
<div class="columns" id="mail-app" v-cloak>
@ -64,13 +66,34 @@
</aside>
<div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane">
<div class="columns is-multiline is-gapless is-mobile">
<!-- Modal card for creating project. -->
<div class="modal" :class="{ 'is-active': isActive }">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Annotation Guideline</p>
<button class="delete" aria-label="close" @click="isActive=!isActive"></button>
</header>
<section class="modal-card-body modal-card-body-footer content"
style="line-height:150%"
v-html="compiledMarkdown"></section>
</div>
</div>
<div class="columns is-multiline is-gapless is-mobile is-vertical-center">
<div class="column is-3">
<progress class="progress is-inline-block" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
</div>
<div class="column is-9">
<div class="column is-8">
<span style="margin-left:10px;"><strong>[[ total - remaining ]]</strong></span>/<span>[[ total ]]</span>
</div>
<div class="column is-1 has-text-right">
<a class="button" @click="isActive=!isActive">
<span class="icon">
<i class="fas fa-book"></i>
</span>
</a>
</div>
</div>
{% block annotation-area %} {% endblock %}

Write Preview
Loading…
Cancel
Save