<div class="o-overlapBox js-resizable d-flex flex-column ">
<div class="o-overlapBox__resizer resizer"></div>
<div class="o-overlapBox__header d-flex flex-row justify-content-between align-items-center">
<h3 class="o-overlapBox__title d-flex align-items-center mb-0">Bestelgegevens </h3>
<div class="d-flex">
<div class="a-circle -small -hover -border -pointer cursor-default">
<i class="icon-close"></i>
</div>
</div>
</div>
<div class="m-noticeBar -error -overlapbox alert alert-dismissible fade show position-sticky" role="alert">
<div class="m-noticeBar__content invalid-feedback d-flex flex-row justify-content-center align-items-center">
<strong>De takenlijst laadt niet lorem ipsum dolor sit amet consectetuer adipiscing elit</strong>
</div>
<button type="button" class="btn m-noticeBar__close position-absolute" data-dismiss="alert" aria-label="Close">
<i class="icon-close"></i>
</button>
</div>
<div class="o-overlapBox__body flex-grow-1">
<div class="o-overlapBox__content">
<div class="d-flex flex-column align-items-center justify-content-center absolute">
<div class="a-loader -wave">
<svg class="a-loader__animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: rgba(241, 242, 243, 0);" width="75px" viewBox="12.5 38 75 22" preserveAspectRatio="xMidYMid">
<circle cx="30" cy="55" r="5" fill="#69d2c2">
<animate attributeName="cy" calcMode="spline" keySplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.7 0 0.5 1 ; 0 0 0.5 1; 0 0 0.5 1; 0 0 0.5 1" repeatCount="indefinite" values="55;45;45;55;54;55;55" keyTimes="0;0.25;0.43;0.58;0.6;0.7;1" dur="1.75s" begin="-0.6"></animate>
</circle>
<circle cx="50" cy="55" r="5" fill="#e3000f">
<animate attributeName="cy" calcMode="spline" keySplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.7 0 0.5 1 ; 0 0 0.5 1; 0 0 0.5 1; 0 0 0.5 1" repeatCount="indefinite" values="55;45;45;55;54;55;55" keyTimes="0;0.25;0.40;0.55;0.6;0.7;1" dur="1.75s" begin="-0.45"></animate>
</circle>
<circle cx="70" cy="55" r="5" fill="#ff85bb">
<animate attributeName="cy" calcMode="spline" keySplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.7 0 0.5 1 ; 0 0 0.5 1; 0 0 0.5 1; 0 0 0.5 1" repeatCount="indefinite" values="55;45;45;55;54;55;55" keyTimes="0;0.25;0.40;0.55;0.6;0.7;1" dur="1.75s" begin="-0.3"></animate>
</circle>
</svg>
</div>
<span class="text-muted mt-3">Taak laden...</span>
</div>
</div>
</div>
<div class="o-overlapBox__footer d-flex align-items-center">
<div class="d-flex h-100 w-100 justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="a-circle -button -hover bg-primary -pointer cursor-default">
<i class="icon-save"></i>
</div>
<span class="text-muted d-none d-sm-block px-2 pl-md-3"><span class="d-inline-block">Laatst opgeslagen:</span> <span class="d-inline-block">3 seconden geleden</span></span>
</div>
<button type="button" class="btn btn-outline-dark -icon -iconLeft">
<i class="icon-checkmark"></i>
Taak voltooien
</button>
</div>
</div>
</div>
{#
Added resizer (nov 2021)
Added content section (jan 2022)
Added add owner and deadline fields (jan 2022)
Added locked (dec 2021)
#}
<div class="o-overlapBox js-resizable d-flex flex-column {% if locked %}-locked{% endif %}">
<div class="o-overlapBox__resizer resizer"></div>
<div class="o-overlapBox__header d-flex flex-row justify-content-between align-items-center">
<h3 class="o-overlapBox__title d-flex align-items-center mb-0">{{title}} {% if locked %}<i class="ml-2 icon-lock"></i>{% endif %}</h3>
<div class="d-flex">
{% render '@circle', {icon:"close", size:"small"}, true %}
</div>
</div>
{% if (fieldset == false) and (offerte_list == false) %}{% render '@notice-bar--error', {overlapbox:true, utilitybar:false}, true %}{% endif %}
<div class="o-overlapBox__body flex-grow-1">
<div class="o-overlapBox__content">
{% if loading %}
<div class="d-flex flex-column align-items-center justify-content-center absolute">
{% render '@loader--wave' %}
<span class="text-muted mt-3">Taak laden...</span>
</div>
{% elif fieldset %}
{% render '@fieldset' %}
{% elif offerte_list %}
{% render '@configuration-group--planner', {label:"Offertes", title1:"Offerte V1", title2:"Offerte V2", add:true, badge:true}, true %}
{% else %}
{% render '@form-heading' %}
{% render '@input-field-group' %}
{% render '@input-field-group--disabled' %}
{% render '@select-field' %}
{% render '@select-field--disabled' %}
{% render '@teamlist-group--with-add-button' %}
{% render '@textarea-group' %}
{% render '@datepicker' %}
{% render '@datepicker--disabled' %}
{% render '@timepicker' %}
{% render '@timepicker--disabled' %}
{% render '@tagsinput-group' %}
{% render '@tagsinput-group--predefined-tags' %}
{% render '@tagsinput-group--disabled' %}
{% render '@upload-field' %}
{% render '@add-item' %}
{% render '@add-item--disabled' %}
{% render '@configuration-group--radio' %}
{% render '@configuration-group--disabled' %}
{% render '@configuration-group--table' %}
{% render '@configuration-group--planner-with-buttons' %}
{% render '@configuration-group--buttons' %}
{% render '@advanced-radio-group' %}
{% render '@advanced-radio-group--open' %}
{% render '@advanced-radio-group--tabs' %}
{% render '@advanced-radio-group--disabled' %}
{% render '@advanced-radio-group--textarea-open' %}
{% render '@map-group' %}
{% render '@checkbox' %}
{% endif %}
</div>
</div>
<div class="o-overlapBox__footer d-flex align-items-center">
<div class="d-flex h-100 w-100 justify-content-between align-items-center">
<div class="d-flex align-items-center">
{% render '@circle--filled-bg', {icon:"save"}, true %}
<span class="text-muted d-none d-sm-block px-2 pl-md-3"><span class="d-inline-block">Laatst opgeslagen:</span> <span class="d-inline-block">3 seconden geleden</span></span>
</div>
{% render '@button--border-icon-left', {icon:"checkmark", text:"Taak voltooien"}, true %}
</div>
</div>
</div>
{
"title": "Bestelgegevens",
"loading": true,
"fieldset": false,
"offerte_list": false,
"locked": false,
"info": false
}
Add the .-locked class to the .o-overlapBox div. View and download buttons still need to be available, to distinguish them, add .-download or .-view classes to the wrapping .a-circle buttons.