<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="o-overlapBox__body flex-grow-1">
<div class="o-overlapBox__content">
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Offertes</label>
<div class="m-configuration w-100 overflow-hidden">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<div class="flex-grow-1">
<strong class="mr-2">Offerte V1</strong>
<div class="d-inline-block"><span class="badge rounded-pill bg-warning -left">In behandeling</span>
</div>
<div class="text-muted">17-04-2021</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-edit-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
<i class="icon-vertical-dots"></i>
</div>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item'>Dearchiveren</div>
</div>
</div>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup91740" aria-expanded="false" aria-controls="collapseListGroup91740">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup91740">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="m-configuration w-100 overflow-hidden">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<div class="flex-grow-1">
<strong class="mr-2">Offerte V2</strong>
<div class="d-inline-block"><span class="badge rounded-pill bg-warning -left">In behandeling</span>
</div>
<div class="text-muted">17-04-2021</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-edit-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
<i class="icon-vertical-dots"></i>
</div>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item'>Dearchiveren</div>
</div>
</div>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup13585" aria-expanded="false" aria-controls="collapseListGroup13585">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup13585">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="m-addItem -noBox d-flex align-items-center position-relative user-select-none">
<div class="a-statusCircle">
<svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
</svg>
</div>
<span class="pl-2 cursor-pointer" data-toggle-prev>Nieuw</span>
</div>
</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": false,
"fieldset": false,
"offerte_list": true,
"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.