diff --git a/src/bundle/Resources/public/css/ezplatform.min.css b/src/bundle/Resources/public/css/ezplatform.min.css index d45a20a0cb..f66d4272aa 100644 --- a/src/bundle/Resources/public/css/ezplatform.min.css +++ b/src/bundle/Resources/public/css/ezplatform.min.css @@ -1 +1 @@ -html{height:100%;width:100%}body{height:100%}.ez-main-row{min-height:calc(100vh - 60px)}.ez-standalone-page .ez-main-row{min-height:100vh}.ez-dashboard .ez-main-row{background-color:#bbb}.ez-side-menu .ez-icon,.ez-context-menu .ez-icon{display:block;margin:0 auto;fill:#fff}.ezimage-field img{display:inline-block;max-width:100%;width:auto;height:auto}button.btn{white-space:normal}.ez-field-edit{margin:1rem 0}.ezrichtext-field{display:inline-block;width:100%}.ezrichtext-field .align-left{float:left}.ezrichtext-field .align-center{text-align:center}.ezrichtext-field .align-right{float:right}.ez-login-view .ez-main-container{height:100%}.ez-checkbox-icon{border:2px solid #0f6d95;padding:.2rem;margin:0;line-height:1;border-radius:5px;position:relative;z-index:1;cursor:pointer}.ez-checkbox-icon:before{content:"";position:absolute;width:2.3rem;height:2.3rem;top:50%;left:0;background-color:#0f6d95;z-index:-1;border-radius:5px;transform:translate(calc(100% + .3rem), -50%);transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-checkbox-icon .ez-icon{fill:#0f6d95;margin:.1rem}.ez-checkbox-icon .ez-icon+.ez-icon{fill:#fff}.ez-checkbox-icon.is-checked:before{transform:translate(0.15rem, -50%)}.ez-checkbox-icon.is-checked .ez-icon{fill:#fff}.ez-checkbox-icon.is-checked .ez-icon+.ez-icon{fill:#0f6d95}.ez-checkbox-icon .ez-checkbox-icon__checkbox{display:none}.ez-visually-hidden{height:1px;opacity:0;position:relative;z-index:0}.ez-spin{animation:spin 1.75s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.ez-content-preview .ez-main-container{padding:0}.nav-tabs{border-bottom:2px solid #fafafa;background-color:#e5e3e3}.nav-tabs .nav-item{margin-bottom:0}.nav-tabs .nav-link{color:#878787}.nav-tabs .nav-link:hover{background-color:#bbb;border-color:#bbb}.nav-tabs .nav-link.active{background-color:#fafafa;border-color:#fafafa}.ez-dashboard .nav-tabs{border-bottom:2px solid #445A64;background-color:#fff;margin-bottom:1rem}.ez-dashboard .nav-tabs .nav-link.active{background-color:#445A64;border-color:#445A64;color:#fff}.ez-content-view .nav-tabs{border-bottom:2px solid #e5e3e3}.ez-content-view .nav-tabs .nav-item{margin-bottom:-2px}.ez-table-header{display:flex;justify-content:space-between;background-color:#a8c8d5;align-items:center;padding:.5rem 1rem}.ez-table-header h5{margin-bottom:0;font-weight:bold}.ez-table-header .ez-icon{width:1rem;height:1rem;fill:#fff;margin-right:.5rem}.ez-table-header.ground-base{background-color:#e5e3e3}.ez-dashboard .table thead{background-color:#62828F;color:#fff}.ez-dashboard .table thead th{border-bottom:none}.ez-content-view .table{margin-bottom:3rem}.ez-header{background-color:#e5e3e3}.ez-header .breadcrumb{margin-bottom:0;padding-left:0}.ez-icon{width:2rem;height:2rem}.btn-icon .ez-icon{width:1.5rem;height:1.5rem;fill:#f15a10}.ez-field-edit--ezauthor .btn-icon .ez-icon{fill:#fff;width:1rem;height:1rem}.ez-main-nav .ez-icon{width:1.5rem;height:1.5rem}.ez-icon-search-button{fill:#fff;height:1rem;width:1rem}.ez-btn--extra-actions .ez-icon{pointer-events:none}.ez-btn-ae:hover .ez-icon{fill:#65B6F0}.ez-btn-ae .ez-icon{width:1.5rem;height:1.5rem;fill:#fff}.ez-field-edit--ezrichtext [data-ezelement="ezembed"] .ez-embed-content .ez-icon{width:1.5rem;height:1.5rem;vertical-align:middle}.ez-icon--logo{width:10rem;height:7rem;display:block;margin:0 auto}.ez-field-edit--with-preview .ez-icon{fill:#fff;height:1rem;width:1rem}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-icon .ez-icon{fill:#333;height:2rem;width:2rem}.ez-preview__action .ez-icon{width:1rem;height:1rem}.ez-preview__action.ez-preview__action--selected .ez-icon{fill:#fff}.ez-field-edit--ezdate .ez-data-source__btn--clear-input .ez-icon,.ez-field-edit--ezdatetime .ez-data-source__btn--clear-input .ez-icon,.ez-field-edit--eztime .ez-data-source__btn--clear-input .ez-icon{width:1rem;height:1rem}.ez-page-title{padding-bottom:1rem}.ez-page-title h2{margin-bottom:0}.ez-page-title h5{padding-left:2.5rem;color:#bbb}.ez-extra-actions{border-radius:8px;border:6px solid #0f6d95;width:300px}.ez-extra-actions__action{display:block;background:none;border:0 none;width:100%;text-align:left;border-radius:4px;padding:0 16px;line-height:45px;background:#fff;color:#0f6d95;text-decoration:none;cursor:pointer;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-extra-actions__action:hover,.ez-extra-actions__action:focus{background:#0f6d95;color:#fff;text-decoration:none}.ez-extra-actions__action+.ez-extra-actions__action{margin-top:8px}.ez-extra-actions__header{line-height:45px;color:#fff;padding:0 8px}.ez-extra-actions__content{background:#e5e3e3;max-height:300px;overflow:auto}.ez-extra-actions--edit .ez-extra-actions__content{padding:8px}.ez-extra-actions--edit .ez-extra-actions__form-values{max-height:150px;overflow:auto}.ez-extra-actions--edit .radio{display:block;background:none;border:0 none;width:100%;text-align:left;border-radius:4px;padding:0 16px;line-height:45px;background:#fff;color:#0f6d95;text-decoration:none;cursor:pointer;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-extra-actions--edit .radio:hover,.ez-extra-actions--edit .radio:focus{background:#0f6d95;color:#fff;text-decoration:none}.ez-extra-actions--edit .radio:not(:last-child){margin-bottom:.5rem}.ez-extra-actions--edit .radio label{display:flex;align-items:center;margin:0;cursor:pointer}.ez-extra-actions--edit .radio label [type="radio"]{display:none}.ez-extra-actions__section-header{background:#bbb;color:#333;padding-left:.5rem}.ez-extra-actions__section-content{background:#fff;color:#333;padding:1rem .5rem}.ez-extra-actions__section-content select{display:inline-block;width:100%}.ez-extra-actions--create .ez-extra-actions__content{max-height:initial}.ez-extra-actions--create .ez-extra-actions__section-content--content-type{padding:0}.ez-extra-actions--create .radio{cursor:pointer;background:#fff;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);padding-left:1.5rem}.ez-extra-actions--create .radio:hover,.ez-extra-actions--create .radio:focus{background:#0f6d95}.ez-extra-actions--create .radio label{margin:0;display:block}.ez-extra-actions--create .radio label [type="radio"]{display:none}.ez-extra-actions--create button[type="submit"]{display:none}.ez-extra-actions::after{content:'';position:absolute;height:40px;width:10px;top:30px;right:-6px;transform:translate(100%, -50%);z-index:0;background:#0f6d95}.ez-extra-actions-container .ez-extra-actions{position:absolute;left:0;z-index:2;opacity:1;transform:translate(calc(-100% - 10px), 0) scaleX(1);transform-origin:right center;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-extra-actions-container .ez-extra-actions--hidden{opacity:0;transform:translate(calc(-100% - 15px), 0) scaleX(0)}.ae-ui .ae-toolbar-add{opacity:0}.ae-ui .ae-toolbar .ae-button.ez-btn-ae{width:auto;height:auto;margin:.3rem .8rem}.ae-ui .ae-toolbar .ae-button.ez-btn-ae .ez-btn-ae__label{font-size:.85rem;margin-bottom:0;margin-top:.2rem}.ae-ui .ae-container .ez-ae-edit-link .ez-btn-ae{color:#fff}.ae-ui .ae-container .ez-ae-edit-link .ez-btn-ae.ez-btn-ae--clear-link{position:absolute;bottom:0;right:0;color:#333;height:2.25rem;display:none}.ae-ui .ae-container .ez-ae-edit-link .ez-btn-ae.ez-btn-ae--remove-link{margin-right:1rem;background-color:#bbb}.ae-ui .ae-container .ez-ae-edit-link .ez-btn-ae.ez-btn-ae--udw{background-color:#bbb}.ae-ui .ae-container .ez-ae-edit-link.is-linked .ez-btn-ae.ez-btn-ae--clear-link{display:block}.btn-icon{padding:0}.ez-field-edit--ezauthor .btn-icon{border-radius:50%;height:2rem;width:2rem}.ez-btn--login{float:right;border-color:#fff;background-color:transparent;margin-top:1rem}.ez-btn--login:hover{background-color:#fff;border-color:#f15a10;color:#f15a10}.ez-fieldgroup .ez-fieldgroup-name{color:#0f6d95;border-bottom:2px solid #0f6d95;padding-bottom:.5rem}.ez-fieldgroup .ez-content-field{padding-left:2rem;margin-bottom:1.5rem}.ez-fieldgroup .ez-content-field .ez-content-field-name{background-color:#e5e3e3;margin-bottom:0;padding:.5rem 1.5rem;border-top-right-radius:5px;border-top-left-radius:5px}.ez-fieldgroup .ez-content-field .ez-content-field-value{background-color:#fff;padding:1rem 1.5rem;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.ez-main-nav{padding:0;background-color:#f3f3f3}.ez-main-nav .nav-tabs{background-color:#f3f3f3;border:none;margin-bottom:0}.ez-main-nav .nav-tabs .nav-link{padding:1rem 2rem;color:#333;display:flex}.ez-main-nav .nav-tabs .nav-link .ez-icon{margin-right:.5rem}.ez-main-nav .nav-tabs .nav-link:hover{background-color:#f3f3f3;border-color:#f3f3f3}.ez-main-nav .nav-tabs .nav-link.active{background-color:#fff;border-color:#fff;color:#333}.ez-main-sub-nav{background-color:#fff;padding:0;padding-left:100px}.ez-main-sub-nav .navbar-nav .nav-link{padding:.8rem 1rem;color:#333}.ez-main-sub-nav .navbar-nav .nav-link.active{border-bottom:2px solid #f15a10;font-weight:bold}.ez-notifications-container{position:fixed;bottom:0;width:100%;line-height:2.1}.ez-notifications-container .alert{margin-bottom:0}.ez-instant-filter__input{display:block;width:100%}.ez-extra-actions--create .ez-instant-filter__group-name{padding-left:.5rem}.ez-extra-actions--create .ez-instant-filter__input-wrapper{padding:1rem .5rem}.ez-extra-actions--create .ez-instant-filter__group-item label{cursor:pointer}.ez-extra-actions--create .ez-instant-filter__items{max-height:200px;overflow:auto}.ez-login{height:100%}.ez-login__image{background:url("/bundles/ezplatformadminui/img/login-background.jpg");background-size:cover}.ez-login__form{background:linear-gradient(to bottom, #fd8a52 0%, #ef6533 70%);display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff}.ez-login__form-label{margin-bottom:0;margin-top:1rem}.ez-login__form-input{border:none}.ez-login__form-wrapper{width:18rem;height:90%;display:flex;flex-direction:column;justify-content:center}*:not(.form-inline) .form-control-label{font-weight:700;font-size:14px;color:#333;margin-bottom:0;margin-top:20px}*:not(.form-inline) .col-form-legend{font-weight:700;font-size:16px;color:#333;margin-bottom:0;margin-top:20px}.ez-preview .ez-preview__nav{display:flex;align-items:center;justify-content:space-between;background-color:#a8c8d5;padding:.2rem 1rem}.ez-preview .ez-preview__nav .ez-preview__item{flex-basis:45%}.ez-preview .ez-preview__nav .ez-preview__item--back{display:flex;align-items:center;justify-content:space-between;line-height:0}.ez-preview .ez-preview__nav .ez-preview__item--actions{flex-basis:auto;display:flex;justify-content:center;border:1px solid #4b4b4b;border-radius:5px;padding:.1rem;background:#fff}.ez-preview .ez-preview__nav .ez-preview__item-text{text-overflow:ellipsis;width:80%;display:block;overflow:hidden;white-space:nowrap}.ez-preview .ez-preview__nav .ez-preview__item .ez-preview__action{line-height:0;display:block;padding:.5rem;border:none;border-radius:initial;cursor:pointer;border-radius:5px}.ez-preview .ez-preview__nav .ez-preview__item .ez-preview__action.ez-preview__action--selected{background-color:#4b4b4b}.ez-preview .ez-preview__iframe iframe{width:100%;height:calc(100vh - 45px);display:block;margin:0 auto;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-preview .ez-preview__iframe--tablet{background:url("/bundles/ezplatformadminui/img/preview-tablet.png") top center no-repeat;height:1250px;margin-top:1rem}.ez-preview .ez-preview__iframe--tablet iframe{width:769px;height:1157px;padding-top:129px}.ez-preview .ez-preview__iframe--mobile{background:url("/bundles/ezplatformadminui/img/preview-mobile.png") top center no-repeat;height:900px;margin-top:1rem}.ez-preview .ez-preview__iframe--mobile iframe{width:375px;height:792px;padding-top:123px}.ez-field-edit .ez-field-edit__label.required:after,.ez-field-edit .ez-data-source__label.required:after{content:'*:'}.ez-field-edit.is-invalid .ez-field-edit__label-wrapper{color:#cb2540}.ez-field-edit.is-invalid .ez-field-edit__data{position:relative}.ez-field-edit.is-invalid .ez-field-edit__data:before{content:'!';position:absolute;top:0;left:-20px;width:20px;background:red;color:white;text-align:center;font-size:1.5rem;border-top-left-radius:5px;border-bottom-left-radius:5px}.ez-field-edit--with-preview,.ez-field-edit--with-preview *,.ez-field-edit--with-preview *:after,.ez-field-edit--with-preview *:before{box-sizing:border-box}.ez-field-edit--with-preview .form-control-file{opacity:0;height:1px}.ez-field-edit--with-preview .ez-field-edit__data{border-radius:.25rem;border:1px dashed #f15a10;padding:1rem;text-align:center;position:relative}.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__btn-add{display:inline-flex;padding:.5rem 1.25rem;border-radius:.25rem;text-align:center;cursor:pointer;letter-spacing:.5px;color:#fff;font-size:.875rem;font-weight:700;border:1px solid #f15a10;background-color:#f15a10;transition:background .3s ease-in-out;align-items:center}.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__btn-add .ez-icon{margin-right:.5rem}.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__btn-add:hover,.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__btn-add:focus{background:#cf4c0c}.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__message--main{box-sizing:border-box;cursor:auto;line-height:60px;margin:0}.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__message--filesize{font-size:.75rem;line-height:60px}.ez-field-edit--with-preview .ez-field-edit-preview{display:flex;flex-wrap:nowrap;padding:0 1.25rem;background:#e5e3e3}.ez-field-edit--with-preview .ez-field-edit-preview__visual{flex:1 1 auto}.ez-field-edit--with-preview .ez-field-edit-preview__actions{flex:0 0 64px;display:flex;flex-direction:column;align-items:center}.ez-field-edit--with-preview .ez-field-edit-preview__action--preview{padding:0;border:0 none;border-radius:50%;height:40px;width:40px;line-height:40px;cursor:pointer;transition:background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);text-align:center;display:block;background:#878787;margin-top:1.25rem}.ez-field-edit--with-preview .ez-field-edit-preview__action--preview:hover,.ez-field-edit--with-preview .ez-field-edit-preview__action--preview:focus{background:#6b6b6b}.ez-field-edit--with-preview .ez-field-edit-preview__action--remove{padding:0;border:0 none;border-radius:50%;height:40px;width:40px;line-height:40px;cursor:pointer;transition:background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);text-align:center;display:block;background:#cb2540}.ez-field-edit--with-preview .ez-field-edit-preview__action--remove:hover,.ez-field-edit--with-preview .ez-field-edit-preview__action--remove:focus{background:#b32032}.ez-field-edit--ezauthor .ez-data-source__author{background-color:#e5e3e3;padding:1rem}.ez-field-edit--ezauthor .ez-data-source__label-wrapper .ez-data-source__label{margin-bottom:0}.ez-field-edit--ezauthor .ez-data-source__actions{display:flex;align-items:center;padding-top:1.5rem}.ez-field-edit--ezauthor .ez-data-source__actions button{margin:0 .5rem}.ez-field-edit--ezauthor.is-invalid .ez-data-source__field.is-invalid{color:#cb2540}.ez-field-edit--ezauthor.is-invalid .ez-field-edit__data:before{display:none}.ez-field-edit--ezauthor.is-invalid .ez-data-source__author{position:relative}.ez-field-edit--ezauthor.is-invalid .ez-data-source__author.is-invalid:before{content:'!';position:absolute;top:0;left:-20px;width:20px;background:red;color:white;text-align:center;font-size:1.5rem;border-top-left-radius:5px;border-bottom-left-radius:5px}.ez-field-edit--ezstring .ez-field-edit__data{width:50%}.ez-field-edit--ezemail .ez-field-edit__data{width:50%}.ez-field-edit--ezinteger .ez-field-edit__data{width:5rem}.ez-field-edit--ezfloat .ez-field-edit__data{width:5rem}.ez-field-edit--ezboolean .ez-data-source__label{position:relative;width:2rem;height:calc(2rem + .25rem);background-color:#bbb;margin-left:calc((2rem + .25rem) / 2);cursor:pointer}.ez-field-edit--ezboolean .ez-data-source__label input{opacity:0;height:1px}.ez-field-edit--ezboolean .ez-data-source__label .ez-data-source__indicator{width:2rem;height:2rem;display:block;background-color:#fafafa;border-radius:50%;position:absolute;top:2px;left:0;transition:all .3s ease-in-out;transform:translateX(-50%);cursor:pointer}.ez-field-edit--ezboolean .ez-data-source__label.is-checked{background-color:#0f6d95}.ez-field-edit--ezboolean .ez-data-source__label.is-checked .ez-data-source__indicator{transform:translateX(50%)}.ez-field-edit--ezboolean .ez-data-source__label.is-checked:before{background-color:#0f6d95}.ez-field-edit--ezboolean .ez-data-source__label.is-checked:after{background-color:#0f6d95}.ez-field-edit--ezboolean .ez-data-source__label:before,.ez-field-edit--ezboolean .ez-data-source__label:after{content:'';height:calc(2rem + .25rem);width:calc(2rem + .25rem);border-radius:50%;position:absolute;top:50%;background-color:#bbb;z-index:-1;cursor:pointer}.ez-field-edit--ezboolean .ez-data-source__label:before{left:0;transform:translate(-50%, -50%)}.ez-field-edit--ezboolean .ez-data-source__label:after{right:0;transform:translate(50%, -50%)}.ez-field-edit--ezurl .ez-field-edit__data{background-color:#e5e3e3;padding:1rem}.ez-field-edit--ezurl.is-invalid .ez-data-source__field--link{color:#cb2540}.ez-field-edit--ezrichtext .ez-data-source__input{opacity:0;height:1px}.ez-field-edit--ezrichtext .ez-data-source__richtext{background-color:#fff;min-height:100px;border:1px solid rgba(0,0,0,0.15);border-radius:.25rem;display:inline-block;width:100%;padding:.5rem}.ez-field-edit--ezrichtext .ez-data-source__richtext .is-block-focused,.ez-field-edit--ezrichtext .ez-data-source__richtext .cke_widget_wrapper.cke_widget_focused>.cke_widget_element{outline:2px dashed #bbb;outline-offset:1px}.ez-field-edit--ezrichtext [data-ezalign="right"]{float:right}.ez-field-edit--ezrichtext [data-ezalign="left"]{float:left}.ez-field-edit--ezrichtext [data-ezalign="center"]{text-align:center}.ez-field-edit--ezrichtext [data-ezelement="ezembed"]{background:#e5e3e3;border:1px solid #bbb;font-size:1.1rem;display:inline-block;margin:0.5rem 0.3rem;padding:0.3rem;box-sizing:border-box;line-height:1;min-height:auto}.ez-field-edit--ezrichtext [data-ezelement="ezembed"] [data-ezelement="ezconfig"]{display:none}.ez-field-edit--ezrichtext [data-ezelement="ezembed"] .ez-embed-content{margin-bottom:0}.ez-field-edit--ezselection .ez-data-source{position:relative;color:#333;font-weight:bold;cursor:pointer}.ez-field-edit--ezselection .ez-data-source__selected{list-style:none;padding-left:0;margin-bottom:0;width:50%;border:1px solid #a8c8d5;padding:.1rem 2rem .1rem .1rem;border-radius:5px;position:relative;min-height:2.8rem}.ez-field-edit--ezselection .ez-data-source__selected:after{content:'';width:2rem;height:100%;border-top-right-radius:4px;border-bottom-right-radius:4px;background-color:#a8c8d5;position:absolute;right:0;top:0}.ez-field-edit--ezselection .ez-data-source__selected:before{content:'';width:0;height:0;border-style:solid;border-width:10px 5px 0 5px;border-color:#fff transparent transparent transparent;position:absolute;right:1rem;top:50%;transform:translate(50%, -50%);z-index:1}.ez-field-edit--ezselection .ez-data-source__selected .selected-item{background:#a8c8d5;width:auto;display:inline-block;padding:.3rem 1.5rem .3rem .3rem;margin:.2rem;border-radius:5px;position:relative}.ez-field-edit--ezselection .ez-data-source__selected .selected-item .remove-selection{width:1rem;height:1rem;display:inherit;position:absolute;top:50%;right:.5rem;transform:translateY(-50%)}.ez-field-edit--ezselection .ez-data-source__selected .selected-item .remove-selection:before,.ez-field-edit--ezselection .ez-data-source__selected .selected-item .remove-selection:after{content:'';width:.1rem;height:1rem;background-color:#333;content:'';position:absolute;top:50%;left:50%}.ez-field-edit--ezselection .ez-data-source__selected .selected-item .remove-selection:before{transform:translate(50%, -50%) rotate(-45deg)}.ez-field-edit--ezselection .ez-data-source__selected .selected-item .remove-selection:after{transform:translate(50%, -50%) rotate(45deg)}.ez-field-edit--ezselection .ez-data-source__options{list-style:none;padding-left:0;margin-bottom:0;position:absolute;top:100%;transform:scaleY(1);transform-origin:top center;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);width:50%;border:1px solid #a8c8d5;background-color:#fff}.ez-field-edit--ezselection .ez-data-source__options--hidden{transform:scaleY(0)}.ez-field-edit--ezselection .ez-data-source__options .option-item{padding:.2rem .5rem}.ez-field-edit--ezselection .ez-data-source__options .option-item.option-selected{background-color:#a8c8d5}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview{width:500px;height:80px;line-height:80px}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__visual{display:flex}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__actions{flex:0 0 100px;display:flex;align-items:center;flex-direction:row;justify-content:space-between}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__action--preview{margin-top:0}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-icon{flex:0 0 2rem;display:flex;align-items:center;justify-content:center}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-name,.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-size{flex:1 1 auto;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:flex;align-items:center}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-name{max-width:240px;padding-left:1.25rem}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-size{max-width:100px;padding:0 1.25rem}.ez-field-edit--ezimage .ez-field-edit-preview{padding:1.25rem 0 1.25rem 1.25rem}.ez-field-edit--ezimage .ez-field-edit-preview__media{max-width:100%;width:auto;height:auto;display:block}.ez-field-edit--ezimage .ez-field-edit-preview__details{color:#6b6b6b;font-size:.75rem;padding-top:.5rem}.ez-field-edit--ezmedia .ez-field-edit-preview{padding:1.25rem 0 1.25rem 1.25rem}.ez-field-edit--ezmedia .ez-field-edit-preview__media{max-width:100%;width:100%;height:auto;display:block}.ez-field-edit--ezmedia .ez-field-edit-preview__spinner{display:none}.ez-field-edit--ezmedia .ez-field-edit-preview__media-wrapper--loading{background:#bbb;padding:1.25rem;text-align:center}.ez-field-edit--ezmedia .ez-field-edit-preview__media-wrapper--loading .ez-field-edit-preview__spinner{display:inline-block;width:2rem;height:2rem}.ez-field-edit--ezmedia .ez-field-edit-preview__media-wrapper--loading .ez-field-edit-preview__media{display:none}.ez-field-edit--ezmedia .ez-field-edit-preview__details{color:#6b6b6b;font-size:.75rem;padding-top:8px}.ez-field-edit--ezmedia .ez-field-edit-preview__info+.ez-field-edit-preview__info{margin-top:1.25rem}.ez-field-edit--ezmedia .ez-field-edit-preview__dimensions{display:flex}.ez-field-edit--ezmedia .ez-field-edit-preview__dimensions .ez-field-edit-preview__info{margin-right:1.25rem;margin-top:0}.ez-field-edit--ezmedia .ez-field-edit-preview__dimensions .ez-field-edit-preview__info .ez-field-edit-preview__input{width:10ch}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label{position:relative;width:1rem;height:calc(1rem + .25rem);background-color:#bbb;margin-left:calc((1rem + .25rem) / 2);cursor:pointer}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label input{opacity:0;height:1px}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label .ez-data-source__indicator{width:1rem;height:1rem;display:block;background-color:#fafafa;border-radius:50%;position:absolute;top:2px;left:0;transition:all .3s ease-in-out;transform:translateX(-50%);cursor:pointer}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label.is-checked{background-color:#0f6d95}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label.is-checked .ez-data-source__indicator{transform:translateX(50%)}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label.is-checked:before{background-color:#0f6d95}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label.is-checked:after{background-color:#0f6d95}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:before,.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:after{content:'';height:calc(1rem + .25rem);width:calc(1rem + .25rem);border-radius:50%;position:absolute;top:50%;background-color:#bbb;z-index:-1;cursor:pointer}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:before{left:0;transform:translate(-50%, -50%)}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:after{right:0;transform:translate(50%, -50%)}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-field-edit-preview__section-title{margin-bottom:.625rem}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-field-edit-preview__input-wrapper{display:flex;align-items:center;cursor:pointer}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label{margin-bottom:0}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:after,.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:before{z-index:0}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__indicator{z-index:1}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label-text{margin-left:1.25rem;font-size:.875rem}.ez-field-edit--ezdate .ez-data-source__input-wrapper{max-width:25ch;position:relative}.ez-field-edit--ezdate .ez-data-source__btn--clear-input{position:absolute;z-index:2;top:50%;right:.25rem;transform:translate(0, -50%);background:none;border:0;width:1.5rem;height:1.5rem;line-height:.5rem;text-align:center;padding:0;margin:0;cursor:pointer;outline:none}.ez-field-edit--ezdate .ez-data-source__btn--clear-input .ez-icon{fill:#bbb;transition:fill 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-field-edit--ezdate .ez-data-source__btn--clear-input:hover .ez-icon,.ez-field-edit--ezdate .ez-data-source__btn--clear-input:focus .ez-icon{fill:#878787}.ez-field-edit--ezdatetime .ez-data-source__input-wrapper{max-width:25ch;position:relative}.ez-field-edit--ezdatetime .ez-data-source__btn--clear-input{position:absolute;z-index:2;top:50%;right:.25rem;transform:translate(0, -50%);background:none;border:0;width:1.5rem;height:1.5rem;line-height:.5rem;text-align:center;padding:0;margin:0;cursor:pointer;outline:none}.ez-field-edit--ezdatetime .ez-data-source__btn--clear-input .ez-icon{fill:#bbb;transition:fill 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-field-edit--ezdatetime .ez-data-source__btn--clear-input:hover .ez-icon,.ez-field-edit--ezdatetime .ez-data-source__btn--clear-input:focus .ez-icon{fill:#878787}.ez-field-edit--eztime .ez-data-source__input-wrapper{max-width:25ch;position:relative}.ez-field-edit--eztime .ez-data-source__btn--clear-input{position:absolute;z-index:2;top:50%;right:.25rem;transform:translate(0, -50%);background:none;border:0;width:1.5rem;height:1.5rem;line-height:.5rem;text-align:center;padding:0;margin:0;cursor:pointer;outline:none}.ez-field-edit--eztime .ez-data-source__btn--clear-input .ez-icon{fill:#bbb;transition:fill 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-field-edit--eztime .ez-data-source__btn--clear-input:hover .ez-icon,.ez-field-edit--eztime .ez-data-source__btn--clear-input:focus .ez-icon{fill:#878787}.ez-ae-edit-link{display:flex;flex-direction:column;padding:.5rem}.ez-ae-edit-link__row{display:flex;align-items:flex-end}.ez-ae-edit-link__row:not(:last-child){margin-bottom:1rem}.ez-ae-edit-link__row.ez-ae-edit-link__row--actions{justify-content:flex-end}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--url{position:relative;display:flex;flex-direction:column;width:25rem}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--title,.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target{display:flex;flex-direction:column}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--title .ez-ae-edit-link__text,.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__text{margin-bottom:0.3rem}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--title{width:24rem;margin-right:1rem}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice{height:2.25rem}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label{margin-bottom:0}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label span{background-color:#4b4b4b;height:2.25rem;padding:.7rem .5rem;display:block;color:#333}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label input:checked+span{background-color:#bbb;color:#fff}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label [type="radio"]{display:none}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label.ez-ae-edit-link__label--same-tab span{border-top-left-radius:5px;border-bottom-left-radius:5px}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label.ez-ae-edit-link__label--new-tab span{border-top-right-radius:5px;border-bottom-right-radius:5px}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--separator{line-height:2.25rem;padding:0 .5rem}.ez-ae-edit-link .ez-ae-edit-link__block .ez-ae-edit-link__label{margin-bottom:.3rem}.ez-ae-edit-link .ez-ae-edit-link__block .ez-ae-edit-link__input{height:2.25rem} +html{height:100%;width:100%}body{height:100%}.ez-main-row{min-height:calc(100vh - 60px)}.ez-standalone-page .ez-main-row{min-height:100vh}.ez-dashboard .ez-main-row{background-color:#bbb}.ez-side-menu .ez-icon,.ez-context-menu .ez-icon{display:block;margin:0 auto;fill:#fff}.ezimage-field img{display:inline-block;max-width:100%;width:auto;height:auto}button.btn{white-space:normal}.ez-field-edit{margin:1rem 0}.ezrichtext-field{display:inline-block;width:100%}.ezrichtext-field .align-left{float:left}.ezrichtext-field .align-center{text-align:center}.ezrichtext-field .align-right{float:right}.ez-login-view .ez-main-container{height:100%}.ez-checkbox-icon{border:2px solid #0f6d95;padding:.2rem;margin:0;line-height:1;border-radius:5px;position:relative;z-index:1;cursor:pointer}.ez-checkbox-icon:before{content:"";position:absolute;width:2.3rem;height:2.3rem;top:50%;left:0;background-color:#0f6d95;z-index:-1;border-radius:5px;transform:translate(calc(100% + .3rem), -50%);transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-checkbox-icon .ez-icon{fill:#0f6d95;margin:.1rem}.ez-checkbox-icon .ez-icon+.ez-icon{fill:#fff}.ez-checkbox-icon.is-checked:before{transform:translate(0.15rem, -50%)}.ez-checkbox-icon.is-checked .ez-icon{fill:#fff}.ez-checkbox-icon.is-checked .ez-icon+.ez-icon{fill:#0f6d95}.ez-checkbox-icon .ez-checkbox-icon__checkbox{display:none}.ez-visually-hidden{height:1px;opacity:0;position:relative;z-index:0}.ez-spin{animation:spin 1.75s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.ez-content-preview .ez-main-container{padding:0}.nav-tabs{border-bottom:2px solid #fafafa;background-color:#e5e3e3}.nav-tabs .nav-item{margin-bottom:0}.nav-tabs .nav-link{color:#878787}.nav-tabs .nav-link:hover{background-color:#bbb;border-color:#bbb}.nav-tabs .nav-link.active{background-color:#fafafa;border-color:#fafafa}.ez-dashboard .nav-tabs{border-bottom:2px solid #445A64;background-color:#fff;margin-bottom:1rem}.ez-dashboard .nav-tabs .nav-link.active{background-color:#445A64;border-color:#445A64;color:#fff}.ez-content-view .nav-tabs{border-bottom:2px solid #e5e3e3}.ez-content-view .nav-tabs .nav-item{margin-bottom:-2px}.ez-table-header{display:flex;justify-content:space-between;background-color:#a8c8d5;align-items:center;padding:.5rem 1rem}.ez-table-header h5{margin-bottom:0;font-weight:bold}.ez-table-header .ez-icon{width:1rem;height:1rem;fill:#fff;margin-right:.5rem}.ez-table-header.ground-base{background-color:#e5e3e3}.ez-dashboard .table thead{background-color:#62828F;color:#fff}.ez-dashboard .table thead th{border-bottom:none}.ez-content-view .table{margin-bottom:3rem}.ez-header{background-color:#e5e3e3}.ez-header .breadcrumb{margin-bottom:0;padding-left:0}.ez-icon{width:2rem;height:2rem}.btn-icon .ez-icon{width:1.5rem;height:1.5rem;fill:#f15a10}.ez-field-edit--ezauthor .btn-icon .ez-icon{fill:#fff;width:1rem;height:1rem}.ez-main-nav .ez-icon{width:1.5rem;height:1.5rem}.ez-icon-search-button{fill:#fff;height:1rem;width:1rem}.ez-btn--extra-actions .ez-icon{pointer-events:none}.ez-btn-ae:hover .ez-icon{fill:#65B6F0}.ez-btn-ae .ez-icon{width:1.5rem;height:1.5rem;fill:#fff}.ez-field-edit--ezrichtext [data-ezelement="ezembed"] .ez-embed-content .ez-icon{width:1.5rem;height:1.5rem;vertical-align:middle}.ez-icon--logo{width:10rem;height:7rem;display:block;margin:0 auto}.ez-field-edit--with-preview .ez-icon{fill:#fff;height:1rem;width:1rem}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-icon .ez-icon{fill:#333;height:2rem;width:2rem}.ez-preview__action .ez-icon{width:1rem;height:1rem}.ez-preview__action.ez-preview__action--selected .ez-icon{fill:#fff}.ez-field-edit--ezdate .ez-data-source__btn--clear-input .ez-icon,.ez-field-edit--ezdatetime .ez-data-source__btn--clear-input .ez-icon,.ez-field-edit--eztime .ez-data-source__btn--clear-input .ez-icon{width:1rem;height:1rem}.ez-page-title{padding-bottom:1rem}.ez-page-title h2{margin-bottom:0}.ez-page-title h5{padding-left:2.5rem;color:#bbb}.ez-extra-actions{border-radius:8px;border:6px solid #0f6d95;width:300px}.ez-extra-actions__action{display:block;background:none;border:0 none;width:100%;text-align:left;border-radius:4px;padding:0 16px;line-height:45px;background:#fff;color:#0f6d95;text-decoration:none;cursor:pointer;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-extra-actions__action:hover,.ez-extra-actions__action:focus{background:#0f6d95;color:#fff;text-decoration:none}.ez-extra-actions__action+.ez-extra-actions__action{margin-top:8px}.ez-extra-actions__header{line-height:45px;color:#fff;padding:0 8px}.ez-extra-actions__content{background:#e5e3e3;max-height:300px;overflow:auto}.ez-extra-actions--edit .ez-extra-actions__content{padding:8px}.ez-extra-actions--edit .ez-extra-actions__form-values{max-height:150px;overflow:auto}.ez-extra-actions--edit .radio{display:block;background:none;border:0 none;width:100%;text-align:left;border-radius:4px;padding:0 16px;line-height:45px;background:#fff;color:#0f6d95;text-decoration:none;cursor:pointer;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-extra-actions--edit .radio:hover,.ez-extra-actions--edit .radio:focus{background:#0f6d95;color:#fff;text-decoration:none}.ez-extra-actions--edit .radio:not(:last-child){margin-bottom:.5rem}.ez-extra-actions--edit .radio label{display:flex;align-items:center;margin:0;cursor:pointer}.ez-extra-actions--edit .radio label [type="radio"]{display:none}.ez-extra-actions__section-header{background:#bbb;color:#333;padding-left:.5rem}.ez-extra-actions__section-content{background:#fff;color:#333;padding:1rem .5rem}.ez-extra-actions__section-content select{display:inline-block;width:100%}.ez-extra-actions--create .ez-extra-actions__content{max-height:initial}.ez-extra-actions--create .ez-extra-actions__section-content--content-type{padding:0}.ez-extra-actions--create .radio{cursor:pointer;background:#fff;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);padding-left:1.5rem}.ez-extra-actions--create .radio:hover,.ez-extra-actions--create .radio:focus{background:#0f6d95}.ez-extra-actions--create .radio label{margin:0;display:block}.ez-extra-actions--create .radio label [type="radio"]{display:none}.ez-extra-actions--create button[type="submit"]{display:none}.ez-extra-actions::after{content:'';position:absolute;height:40px;width:10px;top:30px;right:-6px;transform:translate(100%, -50%);z-index:0;background:#0f6d95}.ez-extra-actions-container .ez-extra-actions{position:absolute;left:0;z-index:2;opacity:1;transform:translate(calc(-100% - 10px), 0) scaleX(1);transform-origin:right center;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-extra-actions-container .ez-extra-actions--hidden{opacity:0;transform:translate(calc(-100% - 15px), 0) scaleX(0)}.ae-ui .ae-toolbar-add{opacity:0}.ae-ui .ae-toolbar .ae-button.ez-btn-ae{width:auto;height:auto;margin:.3rem .8rem}.ae-ui .ae-toolbar .ae-button.ez-btn-ae .ez-btn-ae__label{font-size:.85rem;margin-bottom:0;margin-top:.2rem}.ae-ui .ae-container .ez-ae-edit-link .ez-btn-ae{color:#fff}.ae-ui .ae-container .ez-ae-edit-link .ez-btn-ae.ez-btn-ae--clear-link{position:absolute;bottom:0;right:0;color:#333;height:2.25rem;display:none}.ae-ui .ae-container .ez-ae-edit-link .ez-btn-ae.ez-btn-ae--remove-link{margin-right:1rem;background-color:#bbb}.ae-ui .ae-container .ez-ae-edit-link .ez-btn-ae.ez-btn-ae--udw{background-color:#bbb}.ae-ui .ae-container .ez-ae-edit-link.is-linked .ez-btn-ae.ez-btn-ae--clear-link{display:block}.btn-icon{padding:0}.ez-field-edit--ezauthor .btn-icon{border-radius:50%;height:2rem;width:2rem}.ez-btn--login{float:right;border-color:#fff;background-color:transparent;margin-top:1rem}.ez-btn--login:hover{background-color:#fff;border-color:#f15a10;color:#f15a10}.ez-fieldgroup .ez-fieldgroup-name{color:#0f6d95;border-bottom:2px solid #0f6d95;padding-bottom:.5rem}.ez-fieldgroup .ez-content-field{padding-left:2rem;margin-bottom:1.5rem}.ez-fieldgroup .ez-content-field .ez-content-field-name{background-color:#e5e3e3;margin-bottom:0;padding:.5rem 1.5rem;border-top-right-radius:5px;border-top-left-radius:5px}.ez-fieldgroup .ez-content-field .ez-content-field-value{background-color:#fff;padding:1rem 1.5rem;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.ez-main-nav{padding:0;background-color:#f3f3f3}.ez-main-nav .nav-tabs{background-color:#f3f3f3;border:none;margin-bottom:0}.ez-main-nav .nav-tabs .nav-link{padding:1rem 2rem;color:#333;display:flex}.ez-main-nav .nav-tabs .nav-link .ez-icon{margin-right:.5rem}.ez-main-nav .nav-tabs .nav-link:hover{background-color:#f3f3f3;border-color:#f3f3f3}.ez-main-nav .nav-tabs .nav-link.active{background-color:#fff;border-color:#fff;color:#333}.ez-main-sub-nav{background-color:#fff;padding:0;padding-left:100px}.ez-main-sub-nav .navbar-nav .nav-link{padding:.8rem 1rem;color:#333}.ez-main-sub-nav .navbar-nav .nav-link.active{border-bottom:2px solid #f15a10;font-weight:bold}.ez-notifications-container{position:fixed;bottom:0;width:100%;line-height:2.1}.ez-notifications-container .alert{margin-bottom:0}.ez-instant-filter__input{display:block;width:100%}.ez-extra-actions--create .ez-instant-filter__group-name{padding-left:.5rem}.ez-extra-actions--create .ez-instant-filter__input-wrapper{padding:1rem .5rem}.ez-extra-actions--create .ez-instant-filter__group-item label{cursor:pointer}.ez-extra-actions--create .ez-instant-filter__items{max-height:200px;overflow:auto}.ez-login{height:100%}.ez-login__image{background:url("/bundles/ezplatformadminui/img/login-background.jpg");background-size:cover}.ez-login__form{background:linear-gradient(to bottom, #fd8a52 0%, #ef6533 70%);display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff}.ez-login__form-label{margin-bottom:0;margin-top:1rem}.ez-login__form-input{border:none}.ez-login__form-wrapper{width:18rem;height:90%;display:flex;flex-direction:column;justify-content:center}*:not(.form-inline) .form-control-label{font-weight:700;font-size:14px;color:#333;margin-bottom:0;margin-top:20px}*:not(.form-inline) .form-control-label:after{content:': '}*:not(.form-inline) .form-control-label.required:after{content:'*: '}*:not(.form-inline) .col-form-legend{font-weight:700;font-size:14px;color:#333;margin-bottom:0;margin-top:20px}*:not(.form-inline) .col-form-legend:after{content:': '}*:not(.form-inline) .col-form-legend.required:after{content:'*: '}.ez-preview .ez-preview__nav{display:flex;align-items:center;justify-content:space-between;background-color:#a8c8d5;padding:.2rem 1rem}.ez-preview .ez-preview__nav .ez-preview__item{flex-basis:45%}.ez-preview .ez-preview__nav .ez-preview__item--back{display:flex;align-items:center;justify-content:space-between;line-height:0}.ez-preview .ez-preview__nav .ez-preview__item--actions{flex-basis:auto;display:flex;justify-content:center;border:1px solid #4b4b4b;border-radius:5px;padding:.1rem;background:#fff}.ez-preview .ez-preview__nav .ez-preview__item-text{text-overflow:ellipsis;width:80%;display:block;overflow:hidden;white-space:nowrap}.ez-preview .ez-preview__nav .ez-preview__item .ez-preview__action{line-height:0;display:block;padding:.5rem;border:none;border-radius:initial;cursor:pointer;border-radius:5px}.ez-preview .ez-preview__nav .ez-preview__item .ez-preview__action.ez-preview__action--selected{background-color:#4b4b4b}.ez-preview .ez-preview__iframe iframe{width:100%;height:calc(100vh - 45px);display:block;margin:0 auto;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-preview .ez-preview__iframe--tablet{background:url("/bundles/ezplatformadminui/img/preview-tablet.png") top center no-repeat;height:1250px;margin-top:1rem}.ez-preview .ez-preview__iframe--tablet iframe{width:769px;height:1157px;padding-top:129px}.ez-preview .ez-preview__iframe--mobile{background:url("/bundles/ezplatformadminui/img/preview-mobile.png") top center no-repeat;height:900px;margin-top:1rem}.ez-preview .ez-preview__iframe--mobile iframe{width:375px;height:792px;padding-top:123px}.ez-field-edit .ez-field-edit__label:after,.ez-field-edit .ez-data-source__label:after{content:': '}.ez-field-edit .ez-field-edit__label.required:after,.ez-field-edit .ez-data-source__label.required:after{content:'*: '}.ez-field-edit.is-invalid .ez-field-edit__label-wrapper{color:#cb2540}.ez-field-edit.is-invalid .ez-field-edit__data{position:relative}.ez-field-edit.is-invalid .ez-field-edit__data:before{content:'!';position:absolute;top:0;left:-20px;width:20px;background:red;color:white;text-align:center;font-size:1.5rem;border-top-left-radius:5px;border-bottom-left-radius:5px}.ez-field-edit--with-preview,.ez-field-edit--with-preview *,.ez-field-edit--with-preview *:after,.ez-field-edit--with-preview *:before{box-sizing:border-box}.ez-field-edit--with-preview .form-control-file{opacity:0;height:1px}.ez-field-edit--with-preview .ez-field-edit__data{border-radius:.25rem;border:1px dashed #f15a10;padding:1rem;text-align:center;position:relative}.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__btn-add{display:inline-flex;padding:.5rem 1.25rem;border-radius:.25rem;text-align:center;cursor:pointer;letter-spacing:.5px;color:#fff;font-size:.875rem;font-weight:700;border:1px solid #f15a10;background-color:#f15a10;transition:background .3s ease-in-out;align-items:center}.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__btn-add .ez-icon{margin-right:.5rem}.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__btn-add:hover,.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__btn-add:focus{background:#cf4c0c}.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__message--main{box-sizing:border-box;cursor:auto;line-height:60px;margin:0}.ez-field-edit--with-preview .ez-field-edit__data .ez-data-source__message--filesize{font-size:.75rem;line-height:60px}.ez-field-edit--with-preview .ez-field-edit-preview{display:flex;flex-wrap:nowrap;padding:0 1.25rem;background:#e5e3e3}.ez-field-edit--with-preview .ez-field-edit-preview__visual{flex:1 1 auto}.ez-field-edit--with-preview .ez-field-edit-preview__actions{flex:0 0 64px;display:flex;flex-direction:column;align-items:center}.ez-field-edit--with-preview .ez-field-edit-preview__action--preview{padding:0;border:0 none;border-radius:50%;height:40px;width:40px;line-height:40px;cursor:pointer;transition:background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);text-align:center;display:block;background:#878787;margin-top:1.25rem}.ez-field-edit--with-preview .ez-field-edit-preview__action--preview:hover,.ez-field-edit--with-preview .ez-field-edit-preview__action--preview:focus{background:#6b6b6b}.ez-field-edit--with-preview .ez-field-edit-preview__action--remove{padding:0;border:0 none;border-radius:50%;height:40px;width:40px;line-height:40px;cursor:pointer;transition:background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);text-align:center;display:block;background:#cb2540}.ez-field-edit--with-preview .ez-field-edit-preview__action--remove:hover,.ez-field-edit--with-preview .ez-field-edit-preview__action--remove:focus{background:#b32032}.ez-field-edit--ezauthor .ez-data-source__author{background-color:#e5e3e3;padding:1rem}.ez-field-edit--ezauthor .ez-data-source__label-wrapper .ez-data-source__label{margin-bottom:0}.ez-field-edit--ezauthor .ez-data-source__actions{display:flex;align-items:center;padding-top:1.5rem}.ez-field-edit--ezauthor .ez-data-source__actions button{margin:0 .5rem}.ez-field-edit--ezauthor.is-invalid .ez-data-source__field.is-invalid{color:#cb2540}.ez-field-edit--ezauthor.is-invalid .ez-field-edit__data:before{display:none}.ez-field-edit--ezauthor.is-invalid .ez-data-source__author{position:relative}.ez-field-edit--ezauthor.is-invalid .ez-data-source__author.is-invalid:before{content:'!';position:absolute;top:0;left:-20px;width:20px;background:red;color:white;text-align:center;font-size:1.5rem;border-top-left-radius:5px;border-bottom-left-radius:5px}.ez-field-edit--ezstring .ez-field-edit__data{width:50%}.ez-field-edit--ezemail .ez-field-edit__data{width:50%}.ez-field-edit--ezinteger .ez-field-edit__data{width:5rem}.ez-field-edit--ezfloat .ez-field-edit__data{width:5rem}.ez-field-edit--ezboolean .ez-data-source__label{position:relative;width:2rem;height:calc(2rem + .25rem);background-color:#bbb;margin-left:calc((2rem + .25rem) / 2);cursor:pointer}.ez-field-edit--ezboolean .ez-data-source__label input{opacity:0;height:1px}.ez-field-edit--ezboolean .ez-data-source__label .ez-data-source__indicator{width:2rem;height:2rem;display:block;background-color:#fafafa;border-radius:50%;position:absolute;top:2px;left:0;transition:all .3s ease-in-out;transform:translateX(-50%);cursor:pointer}.ez-field-edit--ezboolean .ez-data-source__label.is-checked{background-color:#0f6d95}.ez-field-edit--ezboolean .ez-data-source__label.is-checked .ez-data-source__indicator{transform:translateX(50%)}.ez-field-edit--ezboolean .ez-data-source__label.is-checked:before{background-color:#0f6d95}.ez-field-edit--ezboolean .ez-data-source__label.is-checked:after{background-color:#0f6d95}.ez-field-edit--ezboolean .ez-data-source__label:before,.ez-field-edit--ezboolean .ez-data-source__label:after{content:'';height:calc(2rem + .25rem);width:calc(2rem + .25rem);border-radius:50%;position:absolute;top:50%;background-color:#bbb;z-index:-1;cursor:pointer}.ez-field-edit--ezboolean .ez-data-source__label:before{left:0;transform:translate(-50%, -50%)}.ez-field-edit--ezboolean .ez-data-source__label:after{right:0;transform:translate(50%, -50%)}.ez-field-edit--ezurl .ez-field-edit__data{background-color:#e5e3e3;padding:1rem}.ez-field-edit--ezurl.is-invalid .ez-data-source__field--link{color:#cb2540}.ez-field-edit--ezrichtext .ez-data-source__input{opacity:0;height:1px}.ez-field-edit--ezrichtext .ez-data-source__richtext{background-color:#fff;min-height:100px;border:1px solid rgba(0,0,0,0.15);border-radius:.25rem;display:inline-block;width:100%;padding:.5rem}.ez-field-edit--ezrichtext .ez-data-source__richtext .is-block-focused,.ez-field-edit--ezrichtext .ez-data-source__richtext .cke_widget_wrapper.cke_widget_focused>.cke_widget_element{outline:2px dashed #bbb;outline-offset:1px}.ez-field-edit--ezrichtext [data-ezalign="right"]{float:right}.ez-field-edit--ezrichtext [data-ezalign="left"]{float:left}.ez-field-edit--ezrichtext [data-ezalign="center"]{text-align:center}.ez-field-edit--ezrichtext [data-ezelement="ezembed"]{background:#e5e3e3;border:1px solid #bbb;font-size:1.1rem;display:inline-block;margin:0.5rem 0.3rem;padding:0.3rem;box-sizing:border-box;line-height:1;min-height:auto}.ez-field-edit--ezrichtext [data-ezelement="ezembed"] [data-ezelement="ezconfig"]{display:none}.ez-field-edit--ezrichtext [data-ezelement="ezembed"] .ez-embed-content{margin-bottom:0}.ez-field-edit--ezselection .ez-data-source{position:relative;color:#333;font-weight:bold;cursor:pointer}.ez-field-edit--ezselection .ez-data-source__selected{list-style:none;padding-left:0;margin-bottom:0;width:50%;border:1px solid #a8c8d5;padding:.1rem 2rem .1rem .1rem;border-radius:5px;position:relative;min-height:2.8rem}.ez-field-edit--ezselection .ez-data-source__selected:after{content:'';width:2rem;height:100%;border-top-right-radius:4px;border-bottom-right-radius:4px;background-color:#a8c8d5;position:absolute;right:0;top:0}.ez-field-edit--ezselection .ez-data-source__selected:before{content:'';width:0;height:0;border-style:solid;border-width:10px 5px 0 5px;border-color:#fff transparent transparent transparent;position:absolute;right:1rem;top:50%;transform:translate(50%, -50%);z-index:1}.ez-field-edit--ezselection .ez-data-source__selected .selected-item{background:#a8c8d5;width:auto;display:inline-block;padding:.3rem 1.5rem .3rem .3rem;margin:.2rem;border-radius:5px;position:relative}.ez-field-edit--ezselection .ez-data-source__selected .selected-item .remove-selection{width:1rem;height:1rem;display:inherit;position:absolute;top:50%;right:.5rem;transform:translateY(-50%)}.ez-field-edit--ezselection .ez-data-source__selected .selected-item .remove-selection:before,.ez-field-edit--ezselection .ez-data-source__selected .selected-item .remove-selection:after{content:'';width:.1rem;height:1rem;background-color:#333;content:'';position:absolute;top:50%;left:50%}.ez-field-edit--ezselection .ez-data-source__selected .selected-item .remove-selection:before{transform:translate(50%, -50%) rotate(-45deg)}.ez-field-edit--ezselection .ez-data-source__selected .selected-item .remove-selection:after{transform:translate(50%, -50%) rotate(45deg)}.ez-field-edit--ezselection .ez-data-source__options{list-style:none;padding-left:0;margin-bottom:0;position:absolute;top:100%;transform:scaleY(1);transform-origin:top center;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);width:50%;border:1px solid #a8c8d5;background-color:#fff}.ez-field-edit--ezselection .ez-data-source__options--hidden{transform:scaleY(0)}.ez-field-edit--ezselection .ez-data-source__options .option-item{padding:.2rem .5rem}.ez-field-edit--ezselection .ez-data-source__options .option-item.option-selected{background-color:#a8c8d5}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview{width:500px;height:80px;line-height:80px}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__visual{display:flex}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__actions{flex:0 0 100px;display:flex;align-items:center;flex-direction:row;justify-content:space-between}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__action--preview{margin-top:0}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-icon{flex:0 0 2rem;display:flex;align-items:center;justify-content:center}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-name,.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-size{flex:1 1 auto;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:flex;align-items:center}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-name{max-width:240px;padding-left:1.25rem}.ez-field-edit--ezbinaryfile.ez-field-edit--with-preview .ez-field-edit-preview__file-size{max-width:100px;padding:0 1.25rem}.ez-field-edit--ezimage .ez-field-edit-preview{padding:1.25rem 0 1.25rem 1.25rem}.ez-field-edit--ezimage .ez-field-edit-preview__media{max-width:100%;width:auto;height:auto;display:block}.ez-field-edit--ezimage .ez-field-edit-preview__details{color:#6b6b6b;font-size:.75rem;padding-top:.5rem}.ez-field-edit--ezimage.is-invalid .ez-field-edit-preview{position:relative}.ez-field-edit--ezimage.is-invalid .ez-field-edit-preview:before{content:'!';position:absolute;top:0;left:-20px;width:20px;background:red;color:white;text-align:center;font-size:1.5rem;border-top-left-radius:5px;border-bottom-left-radius:5px}.ez-field-edit--ezimage.is-invalid .ez-data-source__field--alternativeText.is-invalid .ez-data-source__label-wrapper,.ez-field-edit--ezimage.is-invalid .ez-data-source__field--alternativeText.is-invalid .ez-data-source__label-wrapper .form-control-label{color:#cb2540}.ez-field-edit--ezmedia .ez-field-edit-preview{padding:1.25rem 0 1.25rem 1.25rem}.ez-field-edit--ezmedia .ez-field-edit-preview__media{max-width:100%;width:100%;height:auto;display:block}.ez-field-edit--ezmedia .ez-field-edit-preview__spinner{display:none}.ez-field-edit--ezmedia .ez-field-edit-preview__media-wrapper--loading{background:#bbb;padding:1.25rem;text-align:center}.ez-field-edit--ezmedia .ez-field-edit-preview__media-wrapper--loading .ez-field-edit-preview__spinner{display:inline-block;width:2rem;height:2rem}.ez-field-edit--ezmedia .ez-field-edit-preview__media-wrapper--loading .ez-field-edit-preview__media{display:none}.ez-field-edit--ezmedia .ez-field-edit-preview__details{color:#6b6b6b;font-size:.75rem;padding-top:8px}.ez-field-edit--ezmedia .ez-field-edit-preview__info+.ez-field-edit-preview__info{margin-top:1.25rem}.ez-field-edit--ezmedia .ez-field-edit-preview__dimensions{display:flex}.ez-field-edit--ezmedia .ez-field-edit-preview__dimensions .ez-field-edit-preview__info{margin-right:1.25rem;margin-top:0}.ez-field-edit--ezmedia .ez-field-edit-preview__dimensions .ez-field-edit-preview__info .ez-field-edit-preview__input{width:10ch}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label{position:relative;width:1rem;height:calc(1rem + .25rem);background-color:#bbb;margin-left:calc((1rem + .25rem) / 2);cursor:pointer}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label input{opacity:0;height:1px}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label .ez-data-source__indicator{width:1rem;height:1rem;display:block;background-color:#fafafa;border-radius:50%;position:absolute;top:2px;left:0;transition:all .3s ease-in-out;transform:translateX(-50%);cursor:pointer}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label.is-checked{background-color:#0f6d95}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label.is-checked .ez-data-source__indicator{transform:translateX(50%)}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label.is-checked:before{background-color:#0f6d95}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label.is-checked:after{background-color:#0f6d95}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:before,.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:after{content:'';height:calc(1rem + .25rem);width:calc(1rem + .25rem);border-radius:50%;position:absolute;top:50%;background-color:#bbb;z-index:-1;cursor:pointer}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:before{left:0;transform:translate(-50%, -50%)}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:after{right:0;transform:translate(50%, -50%)}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-field-edit-preview__section-title{margin-bottom:.625rem}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-field-edit-preview__input-wrapper{display:flex;align-items:center;cursor:pointer}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label{margin-bottom:0}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:after,.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label:before{z-index:0}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__indicator{z-index:1}.ez-field-edit--ezmedia .ez-field-edit-preview__settings .ez-data-source__label-text{margin-left:1.25rem;font-size:.875rem}.ez-field-edit--ezdate .ez-data-source__input-wrapper{max-width:25ch;position:relative}.ez-field-edit--ezdate .ez-data-source__btn--clear-input{position:absolute;z-index:2;top:50%;right:.25rem;transform:translate(0, -50%);background:none;border:0;width:1.5rem;height:1.5rem;line-height:.5rem;text-align:center;padding:0;margin:0;cursor:pointer;outline:none}.ez-field-edit--ezdate .ez-data-source__btn--clear-input .ez-icon{fill:#bbb;transition:fill 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-field-edit--ezdate .ez-data-source__btn--clear-input:hover .ez-icon,.ez-field-edit--ezdate .ez-data-source__btn--clear-input:focus .ez-icon{fill:#878787}.ez-field-edit--ezdatetime .ez-data-source__input-wrapper{max-width:25ch;position:relative}.ez-field-edit--ezdatetime .ez-data-source__btn--clear-input{position:absolute;z-index:2;top:50%;right:.25rem;transform:translate(0, -50%);background:none;border:0;width:1.5rem;height:1.5rem;line-height:.5rem;text-align:center;padding:0;margin:0;cursor:pointer;outline:none}.ez-field-edit--ezdatetime .ez-data-source__btn--clear-input .ez-icon{fill:#bbb;transition:fill 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-field-edit--ezdatetime .ez-data-source__btn--clear-input:hover .ez-icon,.ez-field-edit--ezdatetime .ez-data-source__btn--clear-input:focus .ez-icon{fill:#878787}.ez-field-edit--eztime .ez-data-source__input-wrapper{max-width:25ch;position:relative}.ez-field-edit--eztime .ez-data-source__btn--clear-input{position:absolute;z-index:2;top:50%;right:.25rem;transform:translate(0, -50%);background:none;border:0;width:1.5rem;height:1.5rem;line-height:.5rem;text-align:center;padding:0;margin:0;cursor:pointer;outline:none}.ez-field-edit--eztime .ez-data-source__btn--clear-input .ez-icon{fill:#bbb;transition:fill 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)}.ez-field-edit--eztime .ez-data-source__btn--clear-input:hover .ez-icon,.ez-field-edit--eztime .ez-data-source__btn--clear-input:focus .ez-icon{fill:#878787}.ez-ae-edit-link{display:flex;flex-direction:column;padding:.5rem}.ez-ae-edit-link__row{display:flex;align-items:flex-end}.ez-ae-edit-link__row:not(:last-child){margin-bottom:1rem}.ez-ae-edit-link__row.ez-ae-edit-link__row--actions{justify-content:flex-end}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--url{position:relative;display:flex;flex-direction:column;width:25rem}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--title,.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target{display:flex;flex-direction:column}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--title .ez-ae-edit-link__text,.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__text{margin-bottom:0.3rem}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--title{width:24rem;margin-right:1rem}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice{height:2.25rem}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label{margin-bottom:0}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label span{background-color:#4b4b4b;height:2.25rem;padding:.7rem .5rem;display:block;color:#333}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label input:checked+span{background-color:#bbb;color:#fff}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label [type="radio"]{display:none}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label.ez-ae-edit-link__label--same-tab span{border-top-left-radius:5px;border-bottom-left-radius:5px}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--target .ez-ae-edit-link__choice .ez-ae-edit-link__label.ez-ae-edit-link__label--new-tab span{border-top-right-radius:5px;border-bottom-right-radius:5px}.ez-ae-edit-link .ez-ae-edit-link__block.ez-ae-edit-link__block--separator{line-height:2.25rem;padding:0 .5rem}.ez-ae-edit-link .ez-ae-edit-link__block .ez-ae-edit-link__label{margin-bottom:.3rem}.ez-ae-edit-link .ez-ae-edit-link__block .ez-ae-edit-link__input{height:2.25rem} diff --git a/src/bundle/Resources/public/js/scripts/admin.content.edit.js b/src/bundle/Resources/public/js/scripts/admin.content.edit.js new file mode 100644 index 0000000000..37cf09de6d --- /dev/null +++ b/src/bundle/Resources/public/js/scripts/admin.content.edit.js @@ -0,0 +1,26 @@ +(function (global, doc) { + const form = doc.querySelector('form[name="ezrepoforms_content_edit"]'); + const submitBtns = form.querySelectorAll('[type="submit"]:not([formnovalidate])'); + + form.setAttribute('novalidate', true); + + submitBtns.forEach(btn => { + const clickHandler = (event) => { + if (!parseInt(btn.dataset.isFormValid, 10)) { + event.preventDefault(); + + const validators = global.eZ.fieldTypeValidators; + const isFormValid = validators.map(validator => validator.isValid()).every(result => result); + + if (isFormValid) { + btn.dataset.isFormValid = 1; + // for some reason trying to fire click event inside the event handler flow is impossible + // the following line breaks the flow so it's possible to fire click event on a button again. + window.setTimeout(() => btn.click(), 0); + } + } + }; + btn.dataset.isFormValid = 0; + btn.addEventListener('click', clickHandler, false); + }); +})(window, document); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/base/base-field.js b/src/bundle/Resources/public/js/scripts/fieldType/base/base-field.js index 7e0bbb26aa..c0b1b941fb 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/base/base-field.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/base/base-field.js @@ -7,6 +7,8 @@ this.eventsMap = config.eventsMap; this.fieldSelector = config.fieldSelector; this.fieldContainer = config.fieldContainer; + this.fieldsToValidate = []; + this.isValid = this.isValid.bind(this); } /** @@ -15,11 +17,22 @@ * @method attachEvent * @param {String} eventName * @param {String} selector - * @param {Function} callback + * @param {Function} validateField * @memberof BaseFieldValidator */ - attachEvent(eventName, selector, callback) { - [...doc.querySelectorAll(selector)].forEach(item => item.addEventListener(eventName, callback, false)); + attachEvent(config) { + [...doc.querySelectorAll(config.selector)].forEach(item => { + const isValueValidator = typeof config.isValueValidator !== 'undefined' ? config.isValueValidator : true; + + this.fieldsToValidate.push({ + item, + isValueValidator, + callback: config.validateField + }); + + item.addEventListener(config.eventName, config.validateField, false); + item.addEventListener('checkIsValid', this.isValid, false); + }); } /** @@ -32,7 +45,10 @@ * @memberof BaseFieldValidator */ removeEvent(eventName, selector, callback) { - [...doc.querySelectorAll(selector)].forEach(item => item.removeEventListener(eventName, callback, false)); + [...doc.querySelectorAll(selector)].forEach(item => { + item.removeEventListener('checkIsValid', this.isValid, false); + item.removeEventListener(eventName, callback, false); + }); } /** @@ -45,7 +61,7 @@ * @returns {Array} * @memberof BaseFieldValidator */ - findValidationStateNodes(fieldNode, input, selectors) { + findValidationStateNodes(fieldNode, input, selectors = []) { return selectors.reduce((total, selector) => total.concat([...fieldNode.querySelectorAll(selector)]), []); } @@ -155,6 +171,8 @@ this.toggleInvalidState(validationResult.isError, config, event.target); this.toggleErrorMessage(validationResult, config, event.target); + + return validationResult; } /** @@ -164,10 +182,11 @@ * @memberof BaseFieldValidator */ init() { + this.fieldsToValidate = []; this.eventsMap.forEach(eventConfig => { eventConfig.validateField = this.validateField.bind(this, eventConfig); - this.attachEvent(eventConfig.eventName, eventConfig.selector, eventConfig.validateField); + this.attachEvent(eventConfig); }); } @@ -181,5 +200,30 @@ this.eventsMap.forEach(({eventName, selector, validateField}) => this.removeEvent(eventName, selector, validateField)); this.init(); } + + /** + * Checks whether field values are valid + * + * @method isValid + * @returns {Boolean} + */ + isValid() { + if (!this.fieldsToValidate.length) { + return true; + } + + const results = []; + + this.fieldsToValidate.forEach(field => { + if (field.isValueValidator) { + results.push(field.callback({ + target: field.item, + currentTarget: field.item + })); + } + }); + + return results.every(result => !result.isError); + } }; })(window, document); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/base/base-file-field.js b/src/bundle/Resources/public/js/scripts/fieldType/base/base-file-field.js index 86a5e4e430..15174416a4 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/base/base-file-field.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/base/base-file-field.js @@ -12,11 +12,26 @@ */ validateInput(event) { const input = event.currentTarget; + const dataContainer = this.fieldContainer.querySelector('.ez-field-edit__data'); const label = this.fieldContainer.querySelector(SELECTOR_FIELD_LABEL).innerHTML; - const result = { isError: false }; + const isRequired = (input.required || this.fieldContainer.classList.contains('ez-field-edit--required')); + const dataMaxSize = +input.dataset.maxFileSize; + const maxFileSize = parseInt(dataMaxSize, 10); + const isEmpty = input.files && + !input.files.length && + dataContainer && + !dataContainer.hasAttribute('hidden'); + let result = { isError: false }; - if (input.required && !input.files.length) { - result.errorMessage = global.eZ.errors.emptyField.replace('{fieldName}', label); + if (isRequired && isEmpty) { + result = { + isError: true, + errorMessage: global.eZ.errors.emptyField.replace('{fieldName}', label) + }; + } + + if (!isEmpty && maxFileSize > 0 && input.files[0].size > maxFileSize) { + result = this.showFileSizeError(); } return result; @@ -25,9 +40,10 @@ /** * Displays an error message: file size exceeds maximum value * - * @method showSizeError + * @method showFileSizeError + * @returns {Object} */ - showSizeError() { + showFileSizeError() { const label = this.fieldContainer.querySelector(SELECTOR_FIELD_LABEL).innerHTML; const result = { isError: true, diff --git a/src/bundle/Resources/public/js/scripts/fieldType/base/base-preview-field.js b/src/bundle/Resources/public/js/scripts/fieldType/base/base-preview-field.js index 37d53a4255..add62ea42f 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/base/base-preview-field.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/base/base-preview-field.js @@ -16,8 +16,11 @@ this.showPreview = this.showPreview.bind(this); this.handleRemoveFile = this.handleRemoveFile.bind(this); this.handleDropFile = this.handleDropFile.bind(this); - this.checkFileSize = this.checkFileSize.bind(this); - this.maxFileSize = parseInt(this.inputField.dataset.maxFileSize, 10); + this.handleInputChange = this.handleInputChange.bind(this); + + const dataMaxSize = +this.inputField.dataset.maxFileSize; + + this.maxFileSize = parseInt(dataMaxSize, 10); } /** @@ -72,10 +75,16 @@ * @param {Event} event */ handleDropFile(event) { - if (!this.checkCanDrop(event.dataTransfer.files[0])) { + const file = event.dataTransfer.files[0]; + + if (!this.checkCanDrop(file)) { return; } + if (this.maxFileSize > 0 && file.size > this.maxFileSize) { + return this.showFileSizeError(); + } + this.inputField.files = event.dataTransfer.files; } @@ -114,16 +123,16 @@ /** * Checks if file size is an allowed limit * - * @method checkFileSize + * @method handleInputChange * @param {Event} event */ - checkFileSize(event) { - const file = [...event.currentTarget.files][0]; - - if (this.maxFileSize !== 0 && file.size > this.maxFileSize) { - return this.showFileSizeError(); + handleInputChange(event) { + if (this.maxFileSize > 0 && event.currentTarget.files[0].size > this.maxFileSize) { + return this.resetInputField(); } + this.fieldContainer.querySelector('.ez-field-edit__option--remove-media').checked = false; + this.showPreview(event); } @@ -141,8 +150,8 @@ this.loadDroppedFilePreview(event); } - this.fieldContainer.querySelector(SELECTOR_PREVIEW).classList.remove('ez-visually-hidden'); - dropZone.classList.add('ez-visually-hidden', true); + this.fieldContainer.querySelector(SELECTOR_PREVIEW).removeAttribute('hidden'); + dropZone.setAttribute('hidden', true); btnRemove.addEventListener('click', this.handleRemoveFile, false); dropZone.removeEventListener('drop', this.handleDropFile); @@ -167,8 +176,9 @@ hidePreview() { const btnRemove = this.fieldContainer.querySelector(SELECTOR_BTN_REMOVE); - this.fieldContainer.querySelector(SELECTOR_DATA).classList.remove('ez-visually-hidden'); - this.fieldContainer.querySelector(SELECTOR_PREVIEW).classList.add('ez-visually-hidden', true); + this.fieldContainer.querySelector(SELECTOR_DATA).removeAttribute('hidden'); + this.fieldContainer.querySelector(SELECTOR_PREVIEW).setAttribute('hidden', true); + this.fieldContainer.classList.remove('is-invalid'); btnRemove.removeEventListener('click', this.handleRemoveFile); @@ -176,20 +186,31 @@ } /** - * Removes a file from input and hides a preview afterwards + * Resets input field state * - * @method handleRemoveFile + * @method resetInputField */ - handleRemoveFile(event) { - event.preventDefault(); - + resetInputField() { const clonedInput = this.clonedInputField.cloneNode(true); // required to reset properly the input of file type properly this.inputField.parentNode.replaceChild(clonedInput, this.inputField); this.inputField = clonedInput; - this.inputField.addEventListener('change', this.showPreview, false); + this.inputField.addEventListener('change', this.handleInputChange, false); + this.fieldContainer.querySelector('.ez-field-edit__option--remove-media').checked = true; + + this.validator.reinit(); + } + + /** + * Removes a file from input and hides a preview afterwards + * + * @method handleRemoveFile + */ + handleRemoveFile(event) { + event.preventDefault(); + this.resetInputField(); this.hidePreview(); } @@ -210,7 +231,7 @@ * @method initializeDropZone */ initializeDropZone() { - const dropZone = this.fieldContainer.querySelector('.ez-field-edit__preview.ez-visually-hidden + .ez-field-edit__data'); + const dropZone = this.fieldContainer.querySelector('.ez-field-edit__preview[hidden] + .ez-field-edit__data'); if (dropZone) { dropZone.addEventListener('drop', this.handleDropFile, false); @@ -225,7 +246,7 @@ initializePreview() { const preview = this.fieldContainer.querySelector('.ez-field-edit__preview'); - if (!preview.classList.contains('ez-visually-hidden')) { + if (!preview.hasAttribute('hidden')) { this.showPreview(); } } @@ -239,7 +260,7 @@ this.btnAdd = this.fieldContainer.querySelector('.ez-data-source__btn-add'); this.btnAdd.addEventListener('click', this.openFileSelector, false); - this.inputField.addEventListener('change', this.checkFileSize, false); + this.inputField.addEventListener('change', this.handleInputChange, false); window.addEventListener('drop', this.preventDefaultAction, false); window.addEventListener('dragover', this.preventDefaultAction, false); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezauthor.js b/src/bundle/Resources/public/js/scripts/fieldType/ezauthor.js index ed71a33d14..50fe336901 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezauthor.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezauthor.js @@ -168,7 +168,7 @@ findExistingErrorNodes(fieldNode, input, selectors) { return selectors.reduce((total, selector) => total.concat([...input.closest(SELECTOR_AUTHOR).querySelectorAll(selector)]), []); } - }; + } const validator = new EzAuthorValidator({ classInvalid: 'is-invalid', @@ -178,22 +178,24 @@ selector: '.ez-data-source__author .ez-data-source__field--name input', eventName: 'blur', callback: 'validateName', - invalidStateSelectors: [SELECTOR_FIELD, SELECTOR_AUTHOR, SELECTOR_FIELD_NAME], + invalidStateSelectors: [SELECTOR_AUTHOR, SELECTOR_FIELD_NAME], errorNodeSelectors: ['.ez-data-source__field--name .ez-data-source__label-wrapper'], }, { selector: '.ez-data-source__author .ez-data-source__field--email input', eventName: 'blur', callback: 'validateEmail', - invalidStateSelectors: [SELECTOR_FIELD, SELECTOR_AUTHOR, SELECTOR_FIELD_EMAIL], + invalidStateSelectors: [SELECTOR_AUTHOR, SELECTOR_FIELD_EMAIL], errorNodeSelectors: ['.ez-data-source__field--email .ez-data-source__label-wrapper'], }, { + isValueValidator: false, selector: SELECTOR_REMOVE_AUTHOR, eventName: 'click', callback: 'removeItem', }, { + isValueValidator: false, selector: '.ez-btn--add-author', eventName: 'click', callback: 'addItem', @@ -202,4 +204,8 @@ }); validator.init(); + + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; })(window, document); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezbinaryfile.js b/src/bundle/Resources/public/js/scripts/fieldType/ezbinaryfile.js index 593f71337b..d66633af8d 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezbinaryfile.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezbinaryfile.js @@ -1,5 +1,6 @@ (function (global) { const SELECTOR_FIELD = '.ez-field-edit--ezbinaryfile'; + const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper'; class EzBinaryFilePreviewField extends global.eZ.BasePreviewField { /** @@ -55,18 +56,17 @@ fieldContainer, eventsMap: [ { - selector: `${SELECTOR_FIELD} input`, + selector: `${SELECTOR_FIELD} input[type="file"]`, eventName: 'change', callback: 'validateInput', - invalidStateSelectors: [SELECTOR_FIELD], - errorNodeSelectors: ['.ez-field-edit__label-wrapper'], + errorNodeSelectors: [SELECTOR_LABEL_WRAPPER], }, { - selector: `${SELECTOR_FIELD} input`, + isValueValidator: false, + selector: `${SELECTOR_FIELD} input[type="file"]`, eventName: 'invalidFileSize', - callback: 'showSizeError', - invalidStateSelectors: [SELECTOR_FIELD], - errorNodeSelectors: ['.ez-field-edit__label-wrapper'], + callback: 'showFileSizeError', + errorNodeSelectors: [SELECTOR_LABEL_WRAPPER], }, ], }); @@ -76,5 +76,9 @@ }); previewField.init(); + + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; }) })(window); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezboolean.js b/src/bundle/Resources/public/js/scripts/fieldType/ezboolean.js index a6724b9a30..22dd239335 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezboolean.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezboolean.js @@ -43,9 +43,9 @@ selector: '.ez-field-edit--ezboolean input', eventName: 'change', callback: 'validateInput', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-field-edit__label-wrapper'], }, { + isValueValidator: false, selector: '.ez-field-edit--ezboolean input', eventName: 'change', callback: 'updateState', @@ -54,4 +54,8 @@ }); validator.init(); + + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; })(window); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezcountry.js b/src/bundle/Resources/public/js/scripts/fieldType/ezcountry.js index 9ee15e14af..5bfd8ae45b 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezcountry.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezcountry.js @@ -32,7 +32,6 @@ selector: `${SELECTOR_FIELD} .ez-data-source__input`, eventName: 'blur', callback: 'validateSelection', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-field-edit__label-wrapper'], }], }); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js b/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js index 13093a7d1b..6939a7ac16 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js @@ -40,7 +40,6 @@ selector: `${SELECTOR_FIELD} ${SELECTOR_INPUT}`, eventName: EVENT_VALUE_CHANGED, callback: 'validateInput', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-field-edit__label-wrapper'], }, ], @@ -48,6 +47,10 @@ validator.init(); + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; + const dateFields = [...document.querySelectorAll(SELECTOR_FIELD)]; const dateConfig = { formatDate: (date) => (new Date(date)).toLocaleDateString() diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js b/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js index 97c64f2c51..d8d0221119 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js @@ -40,7 +40,6 @@ selector: `${SELECTOR_FIELD} ${SELECTOR_INPUT}`, eventName: EVENT_VALUE_CHANGED, callback: 'validateInput', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-field-edit__label-wrapper'], }, ], @@ -48,6 +47,10 @@ validator.init(); + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; + const datetimeFields = [...document.querySelectorAll(SELECTOR_FIELD)]; const datetimeConfig = { enableTime: true, diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezemail.js b/src/bundle/Resources/public/js/scripts/fieldType/ezemail.js index d1c516ff4a..1bf8110e90 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezemail.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezemail.js @@ -36,11 +36,14 @@ selector: '.ez-field-edit--ezemail input', eventName: 'blur', callback: 'validateInput', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-field-edit__label-wrapper'], }, ], }); validator.init(); + + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; })(window); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezfloat.js b/src/bundle/Resources/public/js/scripts/fieldType/ezfloat.js index 8b651f1fca..50c41316a5 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezfloat.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezfloat.js @@ -47,11 +47,14 @@ selector: '.ez-field-edit--ezfloat input', eventName: 'blur', callback: 'validateFloat', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-field-edit__label-wrapper'], }, ], }); validator.init(); + + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; })(window); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js b/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js index a9fde6bc16..f06f6a9391 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js @@ -2,6 +2,7 @@ const SELECTOR_FIELD = '.ez-field-edit--ezimage'; const SELECTOR_INPUT_FILE = 'input[type="file"]'; const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper'; + const SELECTOR_ALT_WRAPPER = '.ez-field-edit-preview__image-alt'; class EzImageFilePreviewField extends global.eZ.BasePreviewField { /** @@ -44,8 +45,32 @@ } } + class EzImageFieldValidator extends global.eZ.BaseFileFieldValidator { + /** + * Validates the alternative text input + * + * @method validateAltInput + * @param {Event} event + * @returns {Object} + * @memberof EzStringValidator + */ + validateAltInput(event) { + const isRequired = event.target.required; + const isEmpty = !event.target.value; + const isError = (isEmpty && isRequired); + const label = event.target.closest(SELECTOR_ALT_WRAPPER).querySelector('.ez-data-source__label').innerHTML; + const result = { isError }; + + if (isEmpty) { + result.errorMessage = global.eZ.errors.emptyField.replace('{fieldName}', label); + } + + return result; + } + } + [...document.querySelectorAll(SELECTOR_FIELD)].forEach(fieldContainer => { - const validator = new global.eZ.BaseFileFieldValidator({ + const validator = new EzImageFieldValidator({ classInvalid: 'is-invalid', fieldContainer, eventsMap: [ @@ -53,14 +78,20 @@ selector: `${SELECTOR_FIELD} ${SELECTOR_INPUT_FILE}`, eventName: 'change', callback: 'validateInput', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: [SELECTOR_LABEL_WRAPPER], }, { + selector: `${SELECTOR_FIELD} ${SELECTOR_ALT_WRAPPER} .ez-data-source__input`, + eventName: 'blur', + callback: 'validateAltInput', + invalidStateSelectors: ['.ez-data-source__field--alternativeText'], + errorNodeSelectors: [`${SELECTOR_ALT_WRAPPER} .ez-data-source__label-wrapper`], + }, + { + isValueValidator: false, selector: `${SELECTOR_FIELD} ${SELECTOR_INPUT_FILE}`, eventName: 'invalidFileSize', - callback: 'showSizeError', - invalidStateSelectors: [SELECTOR_FIELD], + callback: 'showFileSizeError', errorNodeSelectors: [SELECTOR_LABEL_WRAPPER], }, ], @@ -72,5 +103,9 @@ }); previewField.init(); + + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; }) })(window); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezinteger.js b/src/bundle/Resources/public/js/scripts/fieldType/ezinteger.js index 69ceeb0a84..beeb7cfc3b 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezinteger.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezinteger.js @@ -47,11 +47,14 @@ selector: '.ez-field-edit--ezinteger input', eventName: 'blur', callback: 'validateInteger', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-field-edit__label-wrapper'], }, ], }); validator.init(); + + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; })(window); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezmedia.js b/src/bundle/Resources/public/js/scripts/fieldType/ezmedia.js index ba84a2e6f3..5e7f1d3882 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezmedia.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezmedia.js @@ -2,6 +2,8 @@ const SELECTOR_FIELD = '.ez-field-edit--ezmedia'; const SELECTOR_PREVIEW = '.ez-field-edit__preview'; const SELECTOR_MEDIA = '.ez-field-edit-preview__media'; + const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper'; + const SELECTOR_INFO_WRAPPER = '.ez-field-edit-preview__info'; const SELECTOR_MEDIA_WRAPPER = '.ez-field-edit-preview__media-wrapper'; const CLASS_MEDIA_WRAPPER_LOADING = 'ez-field-edit-preview__media-wrapper--loading'; @@ -11,7 +13,7 @@ * * @method updateState * @param {Event} event - * @memberof EzBooleanValidator + * @memberof EzMediaValidator */ updateState(event) { const checkbox = event.currentTarget.querySelector('input[type="checkbox"]'); @@ -26,6 +28,32 @@ label.classList[methodName]('is-checked'); checkbox.checked = !checkbox.checked; } + + /** + * Validates the dimensions inputs + * + * @method validateDimensions + * @param {Event} event + * @returns {Object} + * @memberof EzMediaValidator + */ + validateDimensions(event) { + const isRequired = event.target.required; + const value = +event.target.value; + const isEmpty = !value; + const isInteger = Number.isInteger(value); + const isError = (isEmpty && isRequired) || !isInteger; + const label = event.target.closest(SELECTOR_INFO_WRAPPER).querySelector('.form-control-label').innerHTML; + const result = { isError }; + + if (isEmpty) { + result.errorMessage = global.eZ.errors.emptyField.replace('{fieldName}', label); + } else if (!isInteger) { + result.errorMessage = global.eZ.errors.isNotInteger.replace('{fieldName}', label); + } + + return result; + } } class EzMediaPreviewField extends global.eZ.BasePreviewField { @@ -121,22 +149,27 @@ fieldContainer, eventsMap: [ { - selector: '[type="file"]', + selector: `${SELECTOR_FIELD} [type="file"]`, eventName: 'change', callback: 'validateInput', - invalidStateSelectors: [SELECTOR_FIELD], - errorNodeSelectors: ['.ez-field-edit__label-wrapper'], + errorNodeSelectors: [SELECTOR_LABEL_WRAPPER], }, { - selector: '.ez-field-edit-preview__info', + isValueValidator: false, + selector: `${SELECTOR_FIELD} ${SELECTOR_INFO_WRAPPER}`, eventName: 'click', callback: 'updateState', }, { - selector: '[type="file"]', + isValueValidator: false, + selector: `${SELECTOR_FIELD} [type="file"]`, eventName: 'invalidFileSize', - callback: 'showSizeError', - invalidStateSelectors: [SELECTOR_FIELD], - errorNodeSelectors: ['.ez-field-edit__label-wrapper'], - }, + callback: 'showFileSizeError', + errorNodeSelectors: [SELECTOR_LABEL_WRAPPER], + }, { + selector: `${SELECTOR_FIELD} .ez-field-edit-preview__dimensions .form-control`, + eventName: 'blur', + callback: 'validateDimensions', + errorNodeSelectors: [`${SELECTOR_INFO_WRAPPER} .ez-field-edit-preview__label-wrapper`], + } ], }); const previewField = new EzMediaPreviewField({ @@ -146,5 +179,9 @@ }); previewField.init(); + + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; }) })(window); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezselection.js b/src/bundle/Resources/public/js/scripts/fieldType/ezselection.js index f20b42c2a3..172546e40d 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezselection.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezselection.js @@ -36,7 +36,6 @@ selector: '.ez-field-edit--ezselection .ez-data-source__input', eventName: EVENT_VALUE_CHANGED, callback: 'validateInput', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-field-edit__label-wrapper'], }, ], @@ -44,6 +43,10 @@ validator.init(); + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; + [...doc.querySelectorAll(SELECTOR_FIELD)].forEach(container => { const createSelectedItem = (value, label) => `
  • ${label}
    • `; const handleSelection = (element, selected) => { diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezstring.js b/src/bundle/Resources/public/js/scripts/fieldType/ezstring.js index 02d7c1786f..b26de7a1eb 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezstring.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezstring.js @@ -39,11 +39,14 @@ selector: '.ez-field-edit--ezstring input', eventName: 'blur', callback: 'validateInput', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-field-edit__label-wrapper'], }, ], }); validator.init(); + + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; })(window); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/eztext.js b/src/bundle/Resources/public/js/scripts/fieldType/eztext.js index 98005d8213..249e76c53c 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/eztext.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/eztext.js @@ -30,11 +30,14 @@ selector: '.ez-field-edit--eztext textarea', eventName: 'blur', callback: 'validateInput', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-field-edit__label-wrapper'], }, ], }); validator.init(); + + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; })(window); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/eztime.js b/src/bundle/Resources/public/js/scripts/fieldType/eztime.js index 3d495ef8c2..36c3b44eb1 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/eztime.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/eztime.js @@ -40,7 +40,6 @@ selector: `${SELECTOR_FIELD} ${SELECTOR_INPUT}`, eventName: EVENT_VALUE_CHANGED, callback: 'validateInput', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-field-edit__label-wrapper'], }, ], @@ -48,6 +47,10 @@ validator.init(); + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; + const timeFields = [...document.querySelectorAll(SELECTOR_FIELD)]; const timeConfig = { enableTime: true, diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezurl.js b/src/bundle/Resources/public/js/scripts/fieldType/ezurl.js index 855715af06..80d8077ac4 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezurl.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezurl.js @@ -29,11 +29,14 @@ selector: '.ez-field-edit--ezurl .ez-data-source__field--link input', eventName: 'blur', callback: 'validateUrl', - invalidStateSelectors: [SELECTOR_FIELD], errorNodeSelectors: ['.ez-data-source__field--link .ez-data-source__label-wrapper'], }, ], }); validator.init(); + + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? + [...global.eZ.fieldTypeValidators, validator] : + [validator]; })(window); diff --git a/src/bundle/Resources/public/scss/_forms.scss b/src/bundle/Resources/public/scss/_forms.scss index fa783c3921..08063d4777 100644 --- a/src/bundle/Resources/public/scss/_forms.scss +++ b/src/bundle/Resources/public/scss/_forms.scss @@ -5,13 +5,17 @@ color: $ez-color-base-dark; margin-bottom: 0; margin-top: 20px; + + @include label-required(); } .col-form-legend { font-weight: 700; - font-size: 16px; + font-size: 14px; color: $ez-color-base-dark; margin-bottom: 0; margin-top: 20px; + + @include label-required(); } } diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss index c3e9f21f95..d7515317af 100644 --- a/src/bundle/Resources/public/scss/_mixins.scss +++ b/src/bundle/Resources/public/scss/_mixins.scss @@ -155,3 +155,15 @@ } } } + +@mixin label-required() { + &:after { + content: ': '; + } + + &.required { + &:after { + content: '*: '; + } + } +} diff --git a/src/bundle/Resources/public/scss/fieldType/_base-field.scss b/src/bundle/Resources/public/scss/fieldType/_base-field.scss index 38b8318f5f..0949ff3eaa 100644 --- a/src/bundle/Resources/public/scss/fieldType/_base-field.scss +++ b/src/bundle/Resources/public/scss/fieldType/_base-field.scss @@ -3,11 +3,7 @@ .ez-field-edit { .ez-field-edit__label, .ez-data-source__label { - &.required { - &:after { - content: '*:'; - } - } + @include label-required(); } &.is-invalid { diff --git a/src/bundle/Resources/public/scss/fieldType/_ezimage.scss b/src/bundle/Resources/public/scss/fieldType/_ezimage.scss index 904e4be9f1..18c589433f 100644 --- a/src/bundle/Resources/public/scss/fieldType/_ezimage.scss +++ b/src/bundle/Resources/public/scss/fieldType/_ezimage.scss @@ -15,4 +15,33 @@ padding-top: .5rem; } } + + &.is-invalid { + .ez-field-edit-preview { + position: relative; + + &:before { + content : '!'; + position: absolute; + top: 0; + left: -20px; + width: 20px; + background: red; + color: white; + text-align: center; + font-size: 1.5rem; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + } + + .ez-data-source__field--alternativeText { + &.is-invalid { + .ez-data-source__label-wrapper, + .ez-data-source__label-wrapper .form-control-label { + color: $ez-color-danger; + } + } + } + } } diff --git a/src/bundle/Resources/views/content/content_edit/content_edit_base.html.twig b/src/bundle/Resources/views/content/content_edit/content_edit_base.html.twig index 756dfc91f7..61756b22cb 100644 --- a/src/bundle/Resources/views/content/content_edit/content_edit_base.html.twig +++ b/src/bundle/Resources/views/content/content_edit/content_edit_base.html.twig @@ -43,6 +43,7 @@ {% javascripts '@EzPlatformAdminUiBundle/Resources/public/js/alloyeditor/dist/*.js' '@EzPlatformAdminUiAssetsBundle/Resources/public/vendors/flatpickr/dist/flatpickr.js' + '@EzPlatformAdminUiBundle/Resources/public/js/scripts/admin.content.edit.js' '@EzPlatformAdminUiBundle/Resources/public/js/scripts/fieldType/base/base-field.js' '@EzPlatformAdminUiBundle/Resources/public/js/scripts/fieldType/base/base-file-field.js' '@EzPlatformAdminUiBundle/Resources/public/js/scripts/fieldType/base/base-preview-field.js' diff --git a/src/bundle/Resources/views/content/form_fields.html.twig b/src/bundle/Resources/views/content/form_fields.html.twig index ad5c461a44..8867986664 100644 --- a/src/bundle/Resources/views/content/form_fields.html.twig +++ b/src/bundle/Resources/views/content/form_fields.html.twig @@ -33,18 +33,18 @@ {%- endblock %} {% block form_row_subfield -%} - {% set wrapper_class = 'ez-data-source__field ez-data-source__field--' ~ name %} - {% set wrapper_attr = wrapper_attr|default({})|merge({class: (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %} - {% set label_wrapper_class = 'ez-data-source__label-wrapper' %} + {% set required_row_class = 'ez-data-source__field--required' %} {% set label_class = 'ez-data-source__label' %} - {% set widget_wrapper_class = 'ez-data-source__input-wrapper' %} + {% set label_wrapper_class = 'ez-data-source__label-wrapper' %} {% set widget_class = 'ez-data-source__input' %} - {% set required_row_class = 'ez-data-source__field--required' %} + {% set widget_wrapper_class = 'ez-data-source__input-wrapper' %} + {% set wrapper_class = 'ez-data-source__field ez-data-source__field--' ~ name %} {% set wrapper_class = wrapper_class|replace({'___name___': name}) %} + {% if required %}{% set wrapper_class = (wrapper_class|default('') ~ ' ' ~ required_row_class)|trim %}{% endif %} {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ' ~ label_class)|trim}) %} {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ' ~ widget_class)|trim}) %} - {% if required %}{% set wrapper_class = (wrapper_class|default('') ~ ' ' ~ required_row_class)|trim %}{% endif %} + {% set wrapper_attr = wrapper_attr|default({})|merge({class: (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %}
    @@ -60,17 +60,19 @@ {% block form_row_fieldtype %} {% set fieldtype_identifier = form.parent.vars.value.fieldDefinition.fieldTypeIdentifier %} - {% set wrapper_class = 'ez-field-edit ez-field-edit--' ~ fieldtype_identifier %} - {% set wrapper_attr = wrapper_attr|default({})|merge({class: (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %} - {% set label_wrapper_class = 'ez-field-edit__label-wrapper' %} + {% set required_row_class = 'ez-field-edit--required' %} + {% set invalid_row_class = 'is-invalid' %} {% set label_class = 'ez-field-edit__label' %} - {% set widget_wrapper_class = 'ez-field-edit__data' %} + {% set label_wrapper_class = 'ez-field-edit__label-wrapper' %} {% set widget_class = 'ez-data-source__input' %} - {% set required_row_class = 'ez-field-edit--required' %} + {% set widget_wrapper_class = 'ez-field-edit__data' %} + {% set wrapper_class = 'ez-field-edit ez-field-edit--' ~ fieldtype_identifier %} + {% if required %}{% set wrapper_class = (wrapper_class|default('') ~ ' ' ~ required_row_class)|trim %}{% endif %} + {% if errors|length > 0 %}{% set wrapper_class = (wrapper_class|default('') ~ ' ' ~ invalid_row_class)|trim %}{% endif %} {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ' ~ label_class)|trim}) %} {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ' ~ widget_class)|trim}) %} - {% if required %}{% set wrapper_class = (wrapper_class|default('') ~ ' ' ~ required_row_class)|trim %}{% endif %} + {% set wrapper_attr = wrapper_attr|default({})|merge({'class': (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %}
    diff --git a/src/bundle/Resources/views/fieldtypes/binary_base.html.twig b/src/bundle/Resources/views/fieldtypes/binary_base.html.twig index 7321ec64d5..ecd0d8e1db 100644 --- a/src/bundle/Resources/views/fieldtypes/binary_base.html.twig +++ b/src/bundle/Resources/views/fieldtypes/binary_base.html.twig @@ -3,31 +3,31 @@ {% block binary_base_row %} {% set fieldtype_identifier = form.parent.vars.value.fieldDefinition.fieldTypeIdentifier %} {% set file_is_empty = form.parent.vars.value.value.fileName is null or form.parent.vars.value.value.fileSize is null %} + {% set wrapper_class = 'ez-field-edit ez-field-edit--with-preview ez-field-edit--' ~ fieldtype_identifier %} - {% set wrapper_attr = wrapper_attr|default({})|merge({class: (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %} + {% set widget_class = 'ez-data-source__input' %} + {% set required_row_class = 'ez-field-edit--required' %} + {% set invalid_row_class = 'is-invalid' %} {% set label_wrapper_class = 'ez-field-edit__label-wrapper' %} {% set label_class = 'ez-field-edit__label' %} {% set widget_wrapper_class = 'ez-field-edit__data'%} - {% if not file_is_empty %} - {% set widget_wrapper_class = (widget_wrapper_class ~ ' ez-visually-hidden')|trim %} - {% endif %} - {% set widget_class = 'ez-data-source__input' %} - {% set required_row_class = 'ez-field-edit--required' %} + {% if required %}{% set wrapper_class = (wrapper_class|default('') ~ ' ' ~ required_row_class)|trim %}{% endif %} + {% if errors|length > 0 %}{% set wrapper_class = (wrapper_class|default('') ~ ' ' ~ invalid_row_class)|trim %}{% endif %} {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ' ~ label_class)|trim}) %} {% set new_attributes = {'class': (attr.class|default('') ~ ' ' ~ widget_class)|trim, 'data-max-file-size': max_file_size} %} {% set attr = attr|merge(new_attributes) %} - {% if required %}{% set wrapper_class = (wrapper_class|default('') ~ ' ' ~ required_row_class)|trim %}{% endif %} + {% set wrapper_attr = wrapper_attr|default({})|merge({class: (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %}
    {{ form_label(form) }} {{ block('form_errors') }}
    -
    +
    {{ block(preview_block_name) }}
    -
    +
    {{ 'fieldtype.binary_base.drag_drop'|trans|desc('Drag and drop your files on browser window or upload them') }}
    @@ -40,31 +40,11 @@
    {{ 'fieldtype.binary_base.max_file_size'|trans({'%size%': max_file_size|default(0)|ez_file_size(2)})|desc('Max file size: %size%') }}
    {% endif %} {{- form_widget(form.file, {'attr': attr}) -}} + {{- form_widget(form.remove, {'attr': { + 'hidden': 'hidden', + 'class': 'ez-field-edit__option--remove-media' + }, 'label_attr': {'hidden': 'hidden'}}) -}}
    {% endblock %} - -{% block binary_base_preview_info_checkbox_row %} -
    -
    - - {{ form.vars.translation_domain is same as(false) ? form.vars.label : form.vars.label|trans({}, form.vars.translation_domain) }} -
    -
    -{% endblock %} - -{% block binary_base_preview_info_simple_row %} -
    -
    - {{ form_label(form, null, {'label_attr': {'class': 'ez-field-edit-preview__label'}}) }} - {% with {'form': form} %}{{ block('form_errors') }}{% endwith %} -
    -
    - {{ form_widget(form, {'attr': {'class': 'ez-field-edit-preview__input'}}) }} -
    -
    -{% endblock %} diff --git a/src/bundle/Resources/views/fieldtypes/binary_base_fields.html.twig b/src/bundle/Resources/views/fieldtypes/binary_base_fields.html.twig new file mode 100644 index 0000000000..2a39e68c97 --- /dev/null +++ b/src/bundle/Resources/views/fieldtypes/binary_base_fields.html.twig @@ -0,0 +1,27 @@ +{% block checkbox_row %} +
    +
    + + {{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }} +
    +
    +{% endblock %} + +{% block integer_row %} + {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ez-field-edit-preview__label')|trim}) %} + {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ez-field-edit-preview__input')|trim}) %} + +
    +
    + {{ form_label(form) }} + {{ block('form_errors') }} +
    +
    + {{ form_widget(form) }} +
    +
    +{% endblock %} + diff --git a/src/bundle/Resources/views/fieldtypes/ezimage.html.twig b/src/bundle/Resources/views/fieldtypes/ezimage.html.twig index e291494c74..a09a64f6c2 100644 --- a/src/bundle/Resources/views/fieldtypes/ezimage.html.twig +++ b/src/bundle/Resources/views/fieldtypes/ezimage.html.twig @@ -10,35 +10,35 @@ {%- endblock -%} {% block ezimage_preview %} -
    -
    -
    - {{ 'content.field_type.ezimage.img_alt'|trans({'%label%': form.vars.label})|desc( -
    -
    - {{ form.parent.vars.value.value.fileName }} - {{ form.parent.vars.value.value.fileSize|ez_file_size(2) }} + {% form_theme form '@EzPlatformAdminUi/fieldtypes/binary_base_fields.html.twig' %} + +
    +
    +
    + {{ 'content.field_type.ezimage.img_alt'|trans({'%label%': form.vars.label})|desc( +
    +
    + {{ form.parent.vars.value.value.fileName }} + {{ form.parent.vars.value.value.fileSize|ez_file_size(2) }} +
    +
    + {{ form_row(form.alternativeText) }} +
    - {% with {'form': form.alternativeText} %} -
    - {{ block('binary_base_preview_info_simple_row') }} +
    + + + + + +
    - {% endwith %} -
    -
    - - - - - -
    -
    {% endblock %} diff --git a/src/bundle/Resources/views/fieldtypes/ezmedia.html.twig b/src/bundle/Resources/views/fieldtypes/ezmedia.html.twig index 6580f8a2c5..4461da1546 100644 --- a/src/bundle/Resources/views/fieldtypes/ezmedia.html.twig +++ b/src/bundle/Resources/views/fieldtypes/ezmedia.html.twig @@ -10,6 +10,8 @@ {%- endblock -%} {% block ezmedia_preview %} + {% form_theme form '@EzPlatformAdminUi/fieldtypes/binary_base_fields.html.twig' %} +
    @@ -28,15 +30,15 @@ {{ form.parent.vars.value.value.fileSize|ez_file_size(2) }}
    -
    {{ 'content.field_type.ezmedia.player_settings'|trans({}, 'ezrepoforms_content')|desc('Player settings') }}:
    +
    {{ 'content.field_type.ezmedia.player_settings'|trans({}, 'ezrepoforms_content')|desc('Player settings') }}
    - {% with {'form': form.hasController} %}{{ block('binary_base_preview_info_checkbox_row') }}{% endwith %} - {% with {'form': form.autoplay} %}{{ block('binary_base_preview_info_checkbox_row') }}{% endwith %} - {% with {'form': form.loop} %}{{ block('binary_base_preview_info_checkbox_row') }}{% endwith %} + {{ form_row(form.hasController) }} + {{ form_row(form.autoplay) }} + {{ form_row(form.loop) }}
    - {% with {'form': form.width} %}{{ block('binary_base_preview_info_simple_row') }}{% endwith %} - {% with {'form': form.height} %}{{ block('binary_base_preview_info_simple_row') }}{% endwith %} + {{ form_row(form.width) }} + {{ form_row(form.height) }}