Browse Source

Update sequence labeling template

pull/10/head
Hironsan 6 years ago
parent
commit
d4d0171e8f
6 changed files with 75 additions and 189 deletions
  1. BIN
      app/db.sqlite3
  2. 2
      app/server/static/css/annotation.css
  3. 6
      app/server/static/forum.css
  4. 141
      app/server/templates/annotation/annotation_base.html
  5. 112
      app/server/templates/annotation/sequence_labeling.html
  6. 3
      app/server/templates/base.html

BIN
app/db.sqlite3

2
app/server/static/css/annotation.css

@ -97,7 +97,7 @@ body {
}
.aside .main .item.active {
background-color: #F1F1F1;
background-color: #5a5e5f;
margin: 0 -50px;
padding-left: 50px;
}

6
app/server/static/forum.css

@ -5,6 +5,12 @@ html,body {
footer {
background-color: #F2F6FA !important;
}
.navbar {
background-color: #2a2e2f;
}
.navbar.has-shadow {
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.topNav {
border-top: 5px solid #3498DB;
}

141
app/server/templates/annotation/annotation_base.html

@ -1,103 +1,60 @@
<!DOCTYPE html>
<html>
{% extends "base.html" %}
{% load static %}
{% block header %}
<link rel="stylesheet" type="text/css" href="{% static 'css/annotation.css' %}">
{% endblock %}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inbox - Free Bulma template</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<!-- Bulma Version 0.7.1-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
<link rel="stylesheet" type="text/css" href="../../static/css/annotation.css">
</head>
<body>
<nav class="navbar has-shadow"></nav>
<div class="columns" id="mail-app">
<aside class="column is-3 aside hero is-fullheight">
<div>
<div class="main">
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Search document">
</div>
{% block content %}
<div class="columns" id="mail-app">
<aside class="column is-3 aside hero is-fullheight">
<div>
<div class="main">
<div class="field">
<div class="control">
<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>
<div class="main">
<a href="#" class="item">
<span class="icon">
<i class="fa fa-check"></i>
</span>
<span class="name">We must respect the will of the individual...</span>
</a>
<a href="#" class="item">
<span class="icon">
<i class="fa fa-check"></i>
</span>
<span class="name">Starred</span>
</a>
<a href="#" class="item">
<span class="icon">
<i class="fa fa-check"></i>
</span>
<span class="name">Sent Mail</span>
</a>
<a href="#" class="item">
<span class="icon">
<i class="fa"></i>
</span>
<span class="name">Folders</span>
</a>
</div>
</div>
</aside>
<div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane">
<div class="progress-bar">
<progress class="progress is-primary" value="15" max="100">15%</progress>
</div>
<div class="card">
<header class="card-header">
<div class="card-header-title tags" style="padding:1.5rem;">
<span class="tag is-info">Person</span>
<span class="tag is-warning">Location</span>
<span class="tag is-black">Organization</span>
<span class="tag is-primary">Date</span>
</div>
</header>
<div class="card-content">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
<div class="level" style="margin-top:30px;">
<a class="button level-left">
<div class="main">
<a href="#" class="item"
v-for="(msg, index) in items"
v-bind:class="{ active: index == cur }"
v-on:click="showMessage(index)"
v-bind:data-preview-id="index">
<span class="icon">
<i class="fas fa-chevron-left"></i>
</span>
<span>Prev</span>
</a>
<a class="button level-right">
<span>Next</span>
<span class="icon">
<i class="fas fa-chevron-right"></i>
<i class="fa fa-check" v-if="msg.labels.length"></i>
</span>
<span class="name">[[ msg.text.slice(0, 40) ]]...</span>
</a>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
</body>
</aside>
<div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane">
<div class="progress-bar">
<progress class="progress" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
</div>
</html>
{% block annotation-area %}
{% endblock %}
<div class="level" style="margin-top:30px;">
<a class="button level-left" v-on:click="prevPage" v-shortkey="['ctrl', 'p']" @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="['ctrl', 'n']" @shortkey="nextPage">
<span>Next</span>
<span class="icon">
<i class="fas fa-chevron-right"></i>
</span>
</a>
</div>
</div>
</div>
{% endblock %}

112
app/server/templates/annotation/sequence_labeling.html

@ -1,102 +1,26 @@
{% extends "base.html" %} {% load static %} {% block header %}
<link rel="stylesheet" type="text/css" href="{% static 'inbox.css' %}"> {% endblock %} {% block content %}
<div class="columns" id="mail-app">
<aside class="column is-2 aside hero is-fullheight">
<div>
<aside class="menu">
<p class="menu-label" style="color:#f2f2f2;">
Progress
</p>
<ul class="menu-list">
<li class="has-text-grey-light level" style="padding-left:10px;margin-bottom:0;font-size:14px">
<span class="level-left">Achievement</span>
<span class="level-right">[[ achievement ]]%</span>
</li>
<li>
<progress class="progress" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
</li>
</ul>
</aside>
<aside class="menu">
{% extends "annotation/annotation_base.html" %}
{% load static %}
<p class="menu-label" style="color:#f2f2f2;">
Labels
</p>
<ul class="menu-list">
<div class="control" v-for="(label, label_id) in labels">
<li class="tags has-addons">
<span class="tag is-primary">[[label.shortcut]]</span>
<a class="tag is-grey" v-on:click="addLabel(label.id)" v-shortkey.once="['ctrl', [[ label.shortcut ]]]" @shortkey="addLabel(label.id)">[[label.text]]</a>
</li>
</div>
</ul>
</aside>
{% block annotation-area %}
<div class="card">
<header class="card-header">
<div class="card-header-title tags" style="padding:1.5rem;">
<a class="tag"
v-for="label in labels"
v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }"
v-on:click="annotate(label.id)">
[[ label.text ]]
</a>
</div>
</aside>
<div class="column is-3 messages hero is-fullheight" id="message-feed">
<div class="field has-addons" style="margin:0 10px;">
<div class="control is-expanded">
<input class="input" type="text" placeholder="Find a 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">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" style="border-left:none">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Default
</a>
<a class="dropdown-item">
Active
</a>
<a href="#" class="dropdown-item">
Complete
</a>
<a href="#" class="dropdown-item">
Probability
</a>
</div>
</div>
</div>
</div>
</div>
<div class="inbox-messages" id="inbox-messages" v-if="items.length">
<div v-for="(msg, index) in items" class="card" v-bind:class="{ active: index == cur }" v-on:click="showMessage(index)" v-bind:data-preview-id="index">
<div class="card-content" style="padding:1.2rem;">
<div class="msg-snippet">
<p>[[ msg.text.slice(0, 100) ]]</p>
</div>
</div>
</div>
</div>
</div>
<div class="column is-7 message hero is-fullheight" id="message-pane">
<div class="action-buttons">
<div class="control is-grouped">
<a class="button is-small" v-on:click="prevPage" v-shortkey="['ctrl', 'p']" @shortkey="prevPage">
<i class="fa fa-chevron-left"></i>
</a>
<a class="button is-small" v-on:click="nextPage" v-shortkey="['ctrl', 'n']" @shortkey="nextPage">
<i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
<div class="box message-preview">
<div class="tags">
<a v-for="label in labels" class="tag" v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }" v-on:click="annotate(label.id)">[[ label.text ]]</a>
</div>
<hr>
</header>
<div class="card-content">
<div class="content">
<annotator ref="annotator" v-bind:labels="labels" v-bind:entity-positions="items[cur].labels.slice()" v-bind:text="items[cur].text" @delete-label="deleteLabel"></annotator>
</div>
</div>
</div>
{% endblock %}
{% block footer %}
<script type="text/javascript" src="{% static 'sequence_labeling.js' %}"></script>
{% endblock %}

3
app/server/templates/base.html

@ -70,8 +70,7 @@
{% block content %} {% endblock %}
{% block footer %}{% endblock %}
</body>
</html>
Loading…
Cancel
Save