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; + }