diff --git a/src/admin/admin.vue b/src/admin/admin.vue
index ef83caa1f..945d858af 100644
--- a/src/admin/admin.vue
+++ b/src/admin/admin.vue
@@ -14,7 +14,9 @@
-
diff --git a/src/admin/components/edition/term-edition-form.vue b/src/admin/components/edition/term-edition-form.vue
index 78e97ef21..200677c6f 100644
--- a/src/admin/components/edition/term-edition-form.vue
+++ b/src/admin/components/edition/term-edition-form.vue
@@ -243,10 +243,24 @@
}
}
+ @keyframes enter {
+ from {
+ opacity: 0;
+ transform: translate(-40px,0);
+ }
+ to {
+ opacity: 1;
+ transform: translate(0px,0);
+ }
+ }
+
form {
padding: 2.0rem 0rem 1rem 3rem;
border-left: 1px solid $gray2;
margin-top: 1.0em;
+ position: relative;
+ animation-name: enter;
+ animation-duration: 0.5s;
.tainacan-page-title {
margin-bottom: 40px;
diff --git a/src/admin/components/lists/terms-list.vue b/src/admin/components/lists/terms-list.vue
index b7dc46507..1e97e8046 100644
--- a/src/admin/components/lists/terms-list.vue
+++ b/src/admin/components/lists/terms-list.vue
@@ -24,7 +24,7 @@
class="term-item"
:class="{
'not-sortable-item': term.opened || !term.saved,
- 'not-focusable-item': term.opened
+ 'opened-term': term.opened
}"
:style="{'margin-left': (term.depth * 40) + 'px'}"
v-for="(term, index) in orderedTermsList"
@@ -81,11 +81,12 @@
80)
+ this.termEditionFormTop = container.scrollTop - 80;
+ else
+ this.termEditionFormTop = 0;
+
this.isEditingTerm = true;
+
if (!term.opened) {
for (let i = 0; i < this.orderedTermsList.length; i++) {
@@ -397,6 +407,10 @@ export default {
min-height: 40px;
display: block;
position: relative;
+
+ &:hover {
+ background-color: $gray1 !important;
+ }
.handle {
padding-right: 6em;
@@ -443,33 +457,37 @@ export default {
}
}
- &.not-sortable-item, &.not-sortable-item:hover {
+ &.opened-term {
cursor: default;
- background-color: white !important;
+ background-color: $blue1;
- }
- &.not-focusable-item, &.not-focusable-item:hover {
- cursor: default;
-
.term-name {
- color: $turquoise3;
+ color: $blue3;
+ }
+ &:before {
+ content: '';
+ display: block;
+ position: absolute;
+ left: 100%;
+ right: -20px;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-color: transparent transparent transparent $blue1;
+ border-left-width: 16px;
+ border-top-width: 20px;
+ border-bottom-width: 20px;
+ top: 0;
+ }
+ &:hover:before {
+ border-color: transparent transparent transparent $gray1;
}
}
}
- // .term-item:hover:not(.not-sortable-item) {
- // background-color: $secondary;
- // border-color: $secondary;
- // color: white !important;
-
- // .label-details, .icon, .not-saved {
- // color: white !important;
- // }
-
- // .grip-icon {
- // fill: white;
- // }
- // }
+ .edit-forms-list {
+ padding-left: 0;
+ }