mirror of https://github.com/logos-co/open-law.git
interpretation tagging UI
This commit is contained in:
SvyatoslavArtymovych
parent
131e77592d
commit
59217dfc39
|
|
@ -14,7 +14,7 @@ def get_or_create_tag(tag_name: str):
|
|||
|
||||
tag = m.Tag.query.filter_by(name=tag_name).first()
|
||||
if not tag:
|
||||
log(log.INFO, "Create Tag: [%s]", tag)
|
||||
log(log.INFO, "Create Tag: [%s]", tag_name)
|
||||
tag = m.Tag(name=tag_name).save()
|
||||
|
||||
return tag
|
||||
|
|
|
|||
|
|
@ -1157,14 +1157,14 @@ input:checked + .toggle-bg {
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
.z-\[55\] {
|
||||
z-index: 55;
|
||||
}
|
||||
|
||||
.z-\[150\] {
|
||||
z-index: 150;
|
||||
}
|
||||
|
||||
.z-\[55\] {
|
||||
z-index: 55;
|
||||
}
|
||||
|
||||
.col-span-6 {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
|
|
@ -1389,6 +1389,10 @@ input:checked + .toggle-bg {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-11 {
|
||||
height: 2.75rem;
|
||||
}
|
||||
|
|
@ -1450,10 +1454,6 @@ input:checked + .toggle-bg {
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.max-h-full {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
|
@ -1462,6 +1462,10 @@ input:checked + .toggle-bg {
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-11 {
|
||||
width: 2.75rem;
|
||||
}
|
||||
|
|
@ -1490,6 +1494,10 @@ input:checked + .toggle-bg {
|
|||
width: 1rem;
|
||||
}
|
||||
|
||||
.w-4\/5 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.w-40 {
|
||||
width: 10rem;
|
||||
}
|
||||
|
|
@ -1530,22 +1538,6 @@ input:checked + .toggle-bg {
|
|||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-4\/5 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w-20 {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
|
@ -1724,6 +1716,10 @@ input:checked + .toggle-bg {
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
|
@ -1732,10 +1728,6 @@ input:checked + .toggle-bg {
|
|||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.-space-x-px > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(-1px * var(--tw-space-x-reverse));
|
||||
|
|
@ -1866,10 +1858,6 @@ input:checked + .toggle-bg {
|
|||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-sm {
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
.rounded-b {
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
|
|
@ -1985,31 +1973,6 @@ input:checked + .toggle-bg {
|
|||
border-color: rgb(255 255 255 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-red-100 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(253 232 232 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-red-800 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(155 28 28 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-red-600 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(224 36 36 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-red-900 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(119 29 29 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-black {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-blue-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(235 245 255 / var(--tw-bg-opacity));
|
||||
|
|
@ -2075,6 +2038,11 @@ input:checked + .toggle-bg {
|
|||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-sky-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(125 211 252 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-slate-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(203 213 225 / var(--tw-bg-opacity));
|
||||
|
|
@ -2103,21 +2071,6 @@ input:checked + .toggle-bg {
|
|||
background-color: rgb(255 255 255 / 0.5);
|
||||
}
|
||||
|
||||
.bg-emerald-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(52 211 153 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-sky-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(14 165 233 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-sky-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(125 211 252 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
|
|
@ -2151,10 +2104,6 @@ input:checked + .toggle-bg {
|
|||
stroke: #F05252;
|
||||
}
|
||||
|
||||
.stroke-yellow-600 {
|
||||
stroke: #9F580A;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -2480,11 +2429,6 @@ input:checked + .toggle-bg {
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-slate-50 {
|
||||
--tw-shadow-color: #f8fafc;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.outline {
|
||||
outline-style: solid;
|
||||
}
|
||||
|
|
@ -2580,26 +2524,16 @@ input:checked + .toggle-bg {
|
|||
background-color: rgb(155 28 28 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-white:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-sky-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(3 105 161 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-sky-600:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(2 132 199 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-sky-400:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(56 189 248 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-white:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-gradient-to-bl:hover {
|
||||
background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
|
||||
}
|
||||
|
|
@ -2825,21 +2759,6 @@ input:checked + .toggle-bg {
|
|||
border-color: transparent;
|
||||
}
|
||||
|
||||
:is(.dark .dark\:border-red-600) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(224 36 36 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:border-black) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:border-white) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(255 255 255 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:bg-blue-600) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
|
|
@ -2899,11 +2818,6 @@ input:checked + .toggle-bg {
|
|||
background-color: rgb(4 116 129 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:bg-sky-500) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(14 165 233 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:bg-opacity-80) {
|
||||
--tw-bg-opacity: 0.8;
|
||||
}
|
||||
|
|
@ -3008,11 +2922,6 @@ input:checked + .toggle-bg {
|
|||
background-color: rgb(3 102 114 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:hover\:bg-sky-600:hover) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(2 132 199 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
:is(.dark .dark\:hover\:text-blue-500:hover) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity));
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -35,6 +35,23 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Tags
|
||||
</label>
|
||||
<input type="text" name="tags" class="hidden create-interpretation-tags">
|
||||
<input
|
||||
type="text"
|
||||
id="tags-input"
|
||||
class="multiple-input mb-3 shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||
placeholder="e.g. Law (press 'Enter' or Comma to add tag. Click on tag to edit it)"
|
||||
data-save-results-to="create-interpretation-tags"
|
||||
>
|
||||
<div class="multiple-input-items gap-1 flex flex-wrap">
|
||||
{% for tag in interpretation.tags %}
|
||||
<div class="cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white rounded text-center py-1/2 px-2">{{tag.name}}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal footer -->
|
||||
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{% include 'book/delete_section_modal.html' %}
|
||||
{% include 'book/edit_section_modal.html' %}
|
||||
|
||||
<!-- show delete section btn on rightside bar -->
|
||||
<!-- show delete section btn on right side bar -->
|
||||
{% set show_delete_section = True %} {% set show_edit_section = True %}
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
|
|
@ -70,12 +70,13 @@
|
|||
{% if current_user.is_authenticated %}
|
||||
<!-- prettier-ignore -->
|
||||
<form
|
||||
{% if sub_collection %}
|
||||
action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id) }}"
|
||||
{% else %}
|
||||
action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id,section_id=section.id) }}"
|
||||
{% endif %}
|
||||
method="post" class="bg-white rounded-lg shadow dark:bg-gray-700">
|
||||
{% if sub_collection %}
|
||||
action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id,section_id=section.id) }}"
|
||||
{% else %}
|
||||
action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id,section_id=section.id) }}"
|
||||
{% endif %}
|
||||
method="post" class="prevent-submit-on-enter bg-white rounded-lg shadow dark:bg-gray-700"
|
||||
>
|
||||
{{ form_hidden_tag() }}
|
||||
<input type="hidden" name="section_id" id="section_id" value="{{section.id}}" />
|
||||
<input type="hidden" name="label" id="label" value="{{section.label}}" />
|
||||
|
|
@ -95,7 +96,21 @@
|
|||
<div id="interpretation-text" class="quill-editor dark:text-white h-64"></div>
|
||||
</div>
|
||||
</div>
|
||||
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Tags
|
||||
</label>
|
||||
<input type="text" name="tags" class="hidden create-interpretation-tags">
|
||||
<input
|
||||
type="text"
|
||||
id="tags-input"
|
||||
class="multiple-input mb-3 shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||
placeholder="e.g. Law (press 'Enter' or Comma to add tag. Click on tag to edit it)"
|
||||
data-save-results-to="create-interpretation-tags"
|
||||
>
|
||||
<div class="multiple-input-items gap-1 flex flex-wrap"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Modal footer -->
|
||||
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
|
||||
<button name="submit" type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 ml-auto">Submit</button>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
>
|
||||
<div class="multiple-input-items gap-1 flex flex-wrap">
|
||||
{% for tag in book.tags %}
|
||||
<div class="cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 rounded text-center py-1/2 px-2">{{tag.name}}</div>
|
||||
<div class="cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white rounded text-center py-1/2 px-2">{{tag.name}}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<nav
|
||||
class="fixed top-0 z-[55] w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
|
||||
<div>
|
||||
<div>
|
||||
<div class="px-3 py-3 lg:px-5 lg:pl-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex w-full items-center justify-between">
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
<div class="divide-y divide-gray-100 dark:divide-gray-700">
|
||||
<a href="#" class="flex px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="rounded-full w-11 h-11" src="/docs/images/people/profile-picture-1.jpg" alt="Jese image" />
|
||||
<img class="rounded-full w-11 h-11" src="" alt="Jese image" />
|
||||
<div class="absolute flex items-center justify-center w-5 h-5 ml-6 -mt-5 bg-blue-600 border border-white rounded-full dark:border-gray-800">
|
||||
<svg class="w-3 h-3 text-white" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path> <path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path> </svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ const multipleInputJs = () => {
|
|||
|
||||
const wordDiv = document.createElement('div');
|
||||
// prettier-ignore
|
||||
wordDiv.className = 'cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 rounded text-center py-1/2 px-2';
|
||||
wordDiv.className = 'cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white rounded text-center py-1/2 px-2';
|
||||
wordDiv.innerHTML = inputValue;
|
||||
addedWords.push(inputValue);
|
||||
wordDiv.addEventListener('click', () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue