Css Adjustments and animations for collapses.
This commit is contained in:
Mateus Machado Luna
parent
eab5bc5bd6
commit
e3510a4964
|
|
@ -124,15 +124,17 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<b-field v-if="openedFilterId == filter.id">
|
||||
<filter-edition-form
|
||||
@onEditionFinished="onEditionFinished()"
|
||||
@onEditionCanceled="onEditionCanceled()"
|
||||
@onErrorFound="formWithErrors = filter.id"
|
||||
:index="index"
|
||||
:original-filter="filter"
|
||||
:edited-filter="editForms[openedFilterId]"/>
|
||||
</b-field>
|
||||
<transition name="form-collapse">
|
||||
<b-field v-if="openedFilterId == filter.id">
|
||||
<filter-edition-form
|
||||
@onEditionFinished="onEditionFinished()"
|
||||
@onEditionCanceled="onEditionCanceled()"
|
||||
@onErrorFound="formWithErrors = filter.id"
|
||||
:index="index"
|
||||
:original-filter="filter"
|
||||
:edited-filter="editForms[openedFilterId]"/>
|
||||
</b-field>
|
||||
</transition>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
|
|
@ -533,6 +535,10 @@ export default {
|
|||
transition: top 0.1s ease;
|
||||
cursor: grab;
|
||||
|
||||
&>.field, form {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.handle {
|
||||
padding-right: 6em;
|
||||
}
|
||||
|
|
@ -610,6 +616,10 @@ export default {
|
|||
border-color: $secondary;
|
||||
color: white !important;
|
||||
|
||||
&>.field, form {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.grip-icon {
|
||||
fill: $white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,17 +104,19 @@
|
|||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="openedMetadatumId == metadatum.id">
|
||||
<metadatum-edition-form
|
||||
:collection-id="collectionId"
|
||||
:is-repository-level="isRepositoryLevel"
|
||||
@onEditionFinished="onEditionFinished()"
|
||||
@onEditionCanceled="onEditionCanceled()"
|
||||
@onErrorFound="formWithErrors = metadatum.id"
|
||||
:index="index"
|
||||
:original-metadatum="metadatum"
|
||||
:edited-metadatum="editForms[metadatum.id]"/>
|
||||
</div>
|
||||
<transition name="form-collapse">
|
||||
<div v-if="openedMetadatumId == metadatum.id">
|
||||
<metadatum-edition-form
|
||||
:collection-id="collectionId"
|
||||
:is-repository-level="isRepositoryLevel"
|
||||
@onEditionFinished="onEditionFinished()"
|
||||
@onEditionCanceled="onEditionCanceled()"
|
||||
@onErrorFound="formWithErrors = metadatum.id"
|
||||
:index="index"
|
||||
:original-metadatum="metadatum"
|
||||
:edited-metadatum="editForms[metadatum.id]"/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
|
|
@ -832,6 +834,10 @@ export default {
|
|||
position: relative;
|
||||
cursor: grab;
|
||||
opacity: 1 !important;
|
||||
|
||||
&>.field, form {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.handle {
|
||||
padding-right: 6em;
|
||||
|
|
@ -903,6 +909,10 @@ export default {
|
|||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
color: white !important;
|
||||
|
||||
&>.field, form {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.label-details, .icon, .not-saved, .icon-level-identifier>i {
|
||||
color: white !important;
|
||||
|
|
|
|||
|
|
@ -62,24 +62,26 @@
|
|||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="term-item"
|
||||
:style="{
|
||||
'border-left-color': term.parent > 0 && childTerm.parent > 0 ? '#f2f2f2' : 'transparent'
|
||||
}"
|
||||
:class="{
|
||||
'opened-term': childTerm.opened,
|
||||
}"
|
||||
v-for="(childTerm, childIndex) in term.children"
|
||||
:key="childTerm.id"
|
||||
v-if="showChildren">
|
||||
|
||||
<recursive-term-item
|
||||
:term="childTerm"
|
||||
:index="childIndex"
|
||||
:taxonomy-id="taxonomyId"
|
||||
:order="order"/>
|
||||
</div>
|
||||
<transition-group name="filter-item">
|
||||
<div
|
||||
class="term-item"
|
||||
:style="{
|
||||
'border-left-color': term.parent > 0 && childTerm.parent > 0 ? '#f2f2f2' : 'transparent'
|
||||
}"
|
||||
:class="{
|
||||
'opened-term': childTerm.opened,
|
||||
}"
|
||||
v-for="(childTerm, childIndex) in term.children"
|
||||
:key="childTerm.id"
|
||||
v-if="showChildren">
|
||||
|
||||
<recursive-term-item
|
||||
:term="childTerm"
|
||||
:index="childIndex"
|
||||
:taxonomy-id="taxonomyId"
|
||||
:order="order"/>
|
||||
</div>
|
||||
</transition-group>
|
||||
<a
|
||||
class="view-more-terms"
|
||||
:class="{'is-disabled': isEditingTerm}"
|
||||
|
|
@ -257,10 +259,9 @@ export default {
|
|||
border-left: 1px solid transparent;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: display 0.3s, visibility 0.3s, opacity 0.3s;
|
||||
width: 100%;
|
||||
|
||||
&:first-child:hover {
|
||||
& .term-item:first-child:hover {
|
||||
background-color: $gray1 !important;
|
||||
.controls {
|
||||
visibility: visible;
|
||||
|
|
@ -367,7 +368,6 @@ export default {
|
|||
display: none;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: display 0.3s, visibility 0.3s, opacity 0.3s;
|
||||
}
|
||||
}
|
||||
.view-more-terms {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
<b-field class="filter-item-forms">
|
||||
<b-collapse
|
||||
class="show"
|
||||
:open="open">
|
||||
:open="open"
|
||||
animation="filter-item">
|
||||
<label
|
||||
class="label"
|
||||
slot="trigger"
|
||||
|
|
|
|||
|
|
@ -25,9 +25,10 @@
|
|||
</button>
|
||||
|
||||
<!-- Side bar with search and filters -->
|
||||
<!-- <transition name="filters-menu"> -->
|
||||
<aside
|
||||
:style="{ top: searchControlHeight + 'px' }"
|
||||
v-show="!isFiltersMenuCompressed && !openAdvancedSearch"
|
||||
v-if="!isFiltersMenuCompressed && !openAdvancedSearch"
|
||||
class="filters-menu tainacan-form is-hidden-mobile">
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
|
|
@ -100,7 +101,7 @@
|
|||
</section>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- </transition> -->
|
||||
<!-- ITEMS LIST AREA (ASIDE THE ASIDE) ------------------------- -->
|
||||
<div
|
||||
id="items-list-area"
|
||||
|
|
|
|||
|
|
@ -252,9 +252,9 @@ $modal-z: 9999999;
|
|||
transform: translate(0%, -30%);
|
||||
}
|
||||
to {
|
||||
height: 80px;
|
||||
max-height: 80px;
|
||||
min-height: 80px;
|
||||
height: 35px;
|
||||
max-height: 35px;
|
||||
min-height: 35px;
|
||||
opacity: 1;
|
||||
-ms-transform: translate(0, 0); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0); /* Safari */
|
||||
|
|
@ -264,9 +264,9 @@ $modal-z: 9999999;
|
|||
|
||||
@keyframes filter-item-out {
|
||||
from {
|
||||
height: 80px;
|
||||
max-height: 80px;
|
||||
min-height: 80px;
|
||||
height: 35px;
|
||||
max-height: 35px;
|
||||
min-height: 35px;
|
||||
opacity: 1;
|
||||
-ms-transform: translate(0, 0); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0); /* Safari */
|
||||
|
|
@ -284,12 +284,124 @@ $modal-z: 9999999;
|
|||
}
|
||||
|
||||
.filter-item-enter-active {
|
||||
overflow: hidden;
|
||||
animation-name: filter-item-in;
|
||||
animation-duration: 0.1s;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
.filter-item-leave-active {
|
||||
.filter-item-leave-active {
|
||||
overflow: hidden;
|
||||
animation-name: filter-item-out;
|
||||
animation-duration: 0.1s;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
||||
// Filter and Metadata Form Collapse
|
||||
@keyframes form-collapse-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
height: 0px;
|
||||
max-height: 0px;
|
||||
min-height: 0px;
|
||||
// -ms-transform: translate(0%, -30%); /* IE 9 */
|
||||
// -webkit-transform: translate(0%, -30%); /* Safari */
|
||||
// transform: translate(0%, -30%);
|
||||
}
|
||||
to {
|
||||
height: 300px;
|
||||
max-height: 300px;
|
||||
min-height: 300px;
|
||||
opacity: 1;
|
||||
// -ms-transform: translate(0, 0); /* IE 9 */
|
||||
// -webkit-transform: translate(0, 0); /* Safari */
|
||||
// transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes form-collapse-out {
|
||||
from {
|
||||
height: 300px;
|
||||
max-height: 300px;
|
||||
min-height: 300px;
|
||||
//opacity: 1;
|
||||
// -ms-transform: translate(0, 0); /* IE 9 */
|
||||
// -webkit-transform: translate(0, 0); /* Safari */
|
||||
// transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
height: 0px;
|
||||
max-height: 0px;
|
||||
min-height: 0px;
|
||||
//opacity: 0;
|
||||
// -ms-transform: translate(0%, -30%); /* IE 9 */
|
||||
// -webkit-transform: translate(0%, -30%); /* Safari */
|
||||
// transform: translate(0%, -30%);
|
||||
}
|
||||
}
|
||||
|
||||
.form-collapse-enter-active {
|
||||
overflow: hidden;
|
||||
animation-name: form-collapse-in;
|
||||
animation-duration: 0.2s;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
.form-collapse-leave-active {
|
||||
overflow: hidden;
|
||||
animation-name: form-collapse-out;
|
||||
animation-duration: 0.15s;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
||||
// Filters menu
|
||||
@keyframes filters-menu-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
width: 0px;
|
||||
max-width: 0px;
|
||||
min-width: 0px;
|
||||
-ms-transform: translate(-30%, 0%); /* IE 9 */
|
||||
-webkit-transform: translate(-30%, 0%); /* Safari */
|
||||
transform: translate(-30%, 0%);
|
||||
}
|
||||
to {
|
||||
height: 180px;
|
||||
max-width: 180px;
|
||||
min-width: 180px;
|
||||
opacity: 1;
|
||||
-ms-transform: translate(0, 0); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0); /* Safari */
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes filters-menu-out {
|
||||
from {
|
||||
width: 180px;
|
||||
max-width: 180px;
|
||||
min-width: 180px;
|
||||
opacity: 1;
|
||||
-ms-transform: translate(0, 0); /* IE 9 */
|
||||
-webkit-transform: translate(0, 0); /* Safari */
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
width: 0px;
|
||||
max-width: 0px;
|
||||
min-width: 0px;
|
||||
opacity: 0;
|
||||
-ms-transform: translate(-30%, 0%); /* IE 9 */
|
||||
-webkit-transform: translate(-30%, 0%); /* Safari */
|
||||
transform: translate(-30%, 0%);
|
||||
}
|
||||
}
|
||||
|
||||
.filters-menu-enter-active {
|
||||
animation-name: filters-menu-in;
|
||||
animation-duration: 0.2s;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
.filtes-menu-leave-active {
|
||||
animation-name: filters-menu-out;
|
||||
animation-duration: 0.2s;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
|
@ -137,6 +137,9 @@ export default {
|
|||
top: 5px;
|
||||
}
|
||||
}
|
||||
.filter-item-forms .datepicker .dropdown-content {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.search-control {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<b-icon
|
||||
:icon="props.open ? 'menu-down' : 'menu-right'"
|
||||
/>
|
||||
{{ filter.name }}
|
||||
<span class="collapse-label">{{ filter.name }}</span>
|
||||
</label>
|
||||
|
||||
<div>
|
||||
|
|
@ -171,6 +171,12 @@
|
|||
.icon {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.collapse-label {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.collapse-content {
|
||||
margin-top: 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue