<div class="o-notificationsOverlapBox d-flex flex-column ">
<div class="o-overlapBox__header d-flex flex-row justify-content-between align-items-center">
<div class="d-flex">
<h3 class="o-overlapBox__title d-flex align-items-center mb-0">Notificaties </h3>
<div class="m-addItem cursor-pointer -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>Markeer alles als gelezen</span>
</div>
</div>
<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-notificationsOverlapBox__content onhover-trigger">
<div class="row ">
<div class="col col-11 d-flex align-items-center">
<div class="row d-flex align-items-center">
<div class="mr-3 d-inline-flex">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
MV
</div>
<span class="d-inline-flex">
<strong class="ml-2 limit-lines-1 align-self-center">Marcella Vonk</strong>
</span>
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center ml-2">
<div class="a-dotTag__text">18min geleden</div>
<div class="a-dotTag__dot rounded-circle bg-blue ml-2"></div>
</div>
</div>
<div class="notificationContent pr-3 pr-md-4 pb-3 pb-md-4 d-flex flex-column position-relative w-100 ">
<span class="mb-2">
<div class="d-flex flex-wrap">
Jappy @Marcella Ik heb er nog een keer naar gekeken maar ik wil hem toch nog een beetje herzien
</div>
</span>
</div>
</div>
</div>
<div class="col col-1 d-flex onhover-display">
<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'>Naam wijzigen</div>
<div class='dropdown-item'>Notitie toevoegen</div>
<div class='dropdown-divider'></div>
<div class='dropdown-item'>Archiveren</div>
<div class='dropdown-divider'></div>
<div class='dropdown-item'>Archiveren</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-notificationsOverlapBox__content o-notificationRead onhover-trigger">
<div class="row ">
<div class="col col-11 d-flex align-items-center">
<div class="row d-flex align-items-center">
<div class="mr-3 d-inline-flex">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
MV
</div>
<span class="d-inline-flex">
<strong class="ml-2 limit-lines-1 align-self-center">Marcella Vonk</strong>
</span>
<div class="a-dotTag font-weight-normal text-muted d-flex align-items-center ml-2">
<div class="a-dotTag__text">18min geleden</div>
<div class="a-dotTag__dot rounded-circle bg-blue ml-2"></div>
</div>
</div>
<div class="notificationContent pr-3 pr-md-4 pb-3 pb-md-4 d-flex flex-column position-relative w-100 ">
<span class="mb-2">
<div class="d-flex flex-wrap">
Jappy @Marcella Ik heb er nog een keer naar gekeken maar ik wil hem toch nog een beetje herzien
</div>
</span>
</div>
</div>
</div>
<div class="col col-1 d-flex onhover-display">
<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'>Naam wijzigen</div>
<div class='dropdown-item'>Notitie toevoegen</div>
<div class='dropdown-divider'></div>
<div class='dropdown-item'>Archiveren</div>
<div class='dropdown-divider'></div>
<div class='dropdown-item'>Archiveren</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-notificationsOverlapBox d-flex flex-column {% if locked %}-locked{% endif %}">
<div class="o-overlapBox__header d-flex flex-row justify-content-between align-items-center">
<div class="d-flex">
<h3 class="o-overlapBox__title d-flex align-items-center mb-0">{{title}} </h3>
{% render '@add-item--no-box', {text:"Markeer alles als gelezen", icon:"save", cursor_class: true, team:true}, true %}
</div>
<div class="d-flex">
{% render '@circle', {icon:"close", size:"small"}, true %}
</div>
</div>
{% if error %}
{% render '@notice-bar--error', {overlapbox:true, utilitybar:false}, true %}
{% endif %}
<div class="o-overlapBox__body flex-grow-1">
{% if loading %}
<div class="d-flex flex-column align-items-center justify-content-center absolute">
{% render '@loader--wave' %}
<span class="text-muted mt-3">Notificaties laden...</span>
</div>
{% else %}
{% render '@notification-message', {read:false}, true %}
{% render '@notification-message' %}
{% endif %}
</div>
</div>
{
"title": "Notificaties",
"loading": false,
"error": true,
"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.