5 {% include nav.html search=true %} |
5 {% include nav.html search=true %} |
6 |
6 |
7 <div class="container"> |
7 <div class="container"> |
8 <div class="row justify-content-center"> |
8 <div class="row justify-content-center"> |
9 <div class="col col-6"> |
9 <div class="col col-6"> |
10 |
|
11 <h2>Lorem ipsum</h2> |
|
12 |
|
13 <p class="lead">Nostrud esse amet deserunt exercitation proident in cupidatat ipsum reprehenderit adipisicing do ipsum aute. Dolor est elit voluptate voluptate velit cillum laborum eiusmod nisi.</p> |
|
14 |
|
15 <form> |
|
16 <div class="form-group"> |
|
17 <label for="formGroupExampleInput">Nom du groupe</label> |
|
18 <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> |
|
19 </div> |
|
20 <div class="form-group"> |
|
21 <label for="formGroupExampleInput2">Description</label> |
|
22 <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> |
|
23 </div> |
|
24 |
|
25 <button type="submit" class="btn btn-primary">Enregistrer</button> |
|
26 </form> |
|
27 |
10 |
28 <h3 class="mt-5"> |
11 <h3 class="mt-5"> |
29 Protocole d'annotations |
12 Protocole d'annotation |
30 </h3> |
13 </h3> |
31 |
14 |
32 <p class="text-muted small">Le procole d'annotation est ensemble de méta-catégories définies par le groupe afin d'avoir un langage commun d'intentions.</p> |
15 <p class="text-muted small">Le procole d'annotation est ensemble de méta-catégories définies par le groupe afin d'avoir un langage commun d'intentions.</p> |
33 |
16 |
|
17 <p class="small text-muted mb-1">Méta-catégories obligatoires</p> |
|
18 |
|
19 <ul class="list-group mb-3" id="metacategories"> |
34 {% for metacategory in site.data.metacategories %} |
20 {% for metacategory in site.data.metacategories %} |
35 <h4><span style="border-bottom: 3px solid rgb{{ metacategory.color }};">{{ metacategory.label }}</span></h4> |
21 <li class="list-group-item"> |
|
22 <p class="mb-1"><span class="badge" style="background-color: rgb{{ metacategory.color }};">{{ metacategory.label }}</span></p> |
36 |
23 |
37 <p>{{ metacategory.description }}</p> |
24 <p class="small text-muted mb-0">{{ metacategory.description }}</p> |
|
25 </li> |
38 {% endfor %} |
26 {% endfor %} |
|
27 </ul> |
39 |
28 |
|
29 <p class="small text-muted mb-1">Méta-catégories propres au groupe</p> |
|
30 |
|
31 <ol class="list-group mb-2" id="metacategories-extra"> |
40 {% for metacategory in site.data.metacategories-extra %} |
32 {% for metacategory in site.data.metacategories-extra %} |
41 <h4><span style="border-bottom: 3px solid rgb{{ metacategory.color }};">{{ metacategory.label }}</span></h4> |
33 <li class="list-group-item"> |
|
34 <p class="mb-1 d-flex w-100 justify-content-between"> |
|
35 <span class="badge" style="background-color: rgb{{ metacategory.color }};">{{ metacategory.label }}</span> |
|
36 <a class="small" href="metacategory-edit.html" data-toggle="modal" data-target="#exampleModal">éditer</a> |
|
37 </p> |
42 |
38 |
43 <p>{{ metacategory.description }}</p> |
39 <p class="small text-muted mb-0">{{ metacategory.description }}</p> |
|
40 </li> |
44 {% endfor %} |
41 {% endfor %} |
|
42 </ol> |
45 |
43 |
46 <button type="submit" class="btn btn-primary">Enregistrer</button> <span class="small ml-2"><a href="#">voir l'historique</a></span> |
44 <div class="text-right mb-3"> |
|
45 <a href="#" class="" data-toggle="modal" data-target="#exampleModal">Ajouter une nouvelle méta-catégorie</a> |
|
46 </div> |
|
47 |
|
48 <div class="d-flex w-100 justify-content-between"> |
|
49 <div> </div> |
|
50 |
|
51 <div> |
|
52 <span class="mr-2"><a href="#">voir l'historique</a></span><button type="submit" class="btn btn-primary">Enregistrer</button> |
|
53 </div> |
|
54 </div> |
|
55 |
47 |
56 |
48 </div> |
57 </div> |
49 </div> |
58 </div> |
50 </div> |
59 </div> |
|
60 |
|
61 |
|
62 <!-- Modal --> |
|
63 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
|
64 <div class="modal-dialog" role="document"> |
|
65 <div class="modal-content"> |
|
66 <div class="modal-header"> |
|
67 <h5 class="modal-title" id="exampleModalLabel">Ajouter ou modifier</h5> |
|
68 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|
69 <span aria-hidden="true">×</span> |
|
70 </button> |
|
71 </div> |
|
72 <div class="modal-body"> |
|
73 <div class="modal-body"> |
|
74 <form> |
|
75 <div class="form-group"> |
|
76 <label for="metacategory-label" class="form-control-label">Étiquette</label> |
|
77 <input type="text" class="form-control" id="metacategory-label"> |
|
78 </div> |
|
79 <div class="form-group"> |
|
80 <label for="metacategory-color" class="form-control-label">Couleur</label> |
|
81 <input type="text" class="form-control" id="metacategory-color"> |
|
82 </div> |
|
83 <div class="form-group"> |
|
84 <label for="message-text" class="form-control-label">Description</label> |
|
85 <textarea class="form-control" id="message-text"></textarea> |
|
86 </div> |
|
87 </form> |
|
88 </div> |
|
89 </div> |
|
90 <div class="modal-footer"> |
|
91 <a href="#" class="mr-auto text-danger">supprimer</a> |
|
92 <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button> |
|
93 <button type="button" class="btn btn-primary">Enregistrer</button> |
|
94 </div> |
|
95 </div> |
|
96 </div> |
|
97 </div> |
|
98 |
|
99 |
|
100 <style> |
|
101 body.dragging, body.dragging * { |
|
102 cursor: move !important; |
|
103 } |
|
104 |
|
105 .dragged { |
|
106 position: absolute; |
|
107 opacity: 0.5; |
|
108 z-index: 2000; |
|
109 } |
|
110 |
|
111 #metacategories-extra li.placeholder { |
|
112 position: relative; |
|
113 /** More li styles **/ |
|
114 background-color: rgba(0,0,0,.125); |
|
115 list-style-type: none; |
|
116 height: 10px; |
|
117 } |
|
118 #metacategories-extra li.placeholder:before { |
|
119 position: absolute; |
|
120 /** Define arrowhead **/ |
|
121 |
|
122 color: red; |
|
123 content: ""; |
|
124 width:0; |
|
125 height: 0; |
|
126 } |
|
127 </style> |