diff --git a/app/partials/custom-attributes/custom-attributes-values.jade b/app/partials/custom-attributes/custom-attributes-values.jade index 2a5ec5eb..ba45e4f3 100644 --- a/app/partials/custom-attributes/custom-attributes-values.jade +++ b/app/partials/custom-attributes/custom-attributes-values.jade @@ -7,8 +7,10 @@ section.duty-custom-fields(ng-show="ctrl.customAttributes.length") ng-click="toggleCollapse()" ) tg-svg(svg-icon="icon-arrow-down") + .custom-fields-body( ng-show="!collapsed" + ng-class="{'collapse-fields': ctrl.customAttributes.length > 6}" ) .custom-attribute( ng-repeat="attr in ctrl.customAttributes" diff --git a/app/styles/modules/common/custom-fields.scss b/app/styles/modules/common/custom-fields.scss index 003e9cc0..792550bb 100644 --- a/app/styles/modules/common/custom-fields.scss +++ b/app/styles/modules/common/custom-fields.scss @@ -24,7 +24,7 @@ border-bottom: 1px solid $whitish; display: flex; justify-content: flex-start; - padding: 1rem; + padding: .7rem; &:hover { .custom-field-options { opacity: 1; @@ -85,3 +85,40 @@ } } } + +.custom-fields-body { + display: flex; + flex-wrap: wrap; + &.collapse-fields { + .custom-attribute { + flex-basis: 50%; + @include breakpoint(laptop) { + flex-basis: 100%; + &:nth-child(even) { + padding: 0; + } + &:nth-child(odd) { + padding: 0; + } + } + &:nth-child(even) { + padding: 0 0 0 2rem; + } + &:nth-child(odd) { + padding: 0 2rem 0 0; + } + } + } + .custom-attribute { + flex-basis: 100%; + &:nth-child(even) { + padding: 0; + } + &:nth-child(odd) { + padding: 0; + } + } + .custom-field-single { + height: 100%; + } +}