<div id="header" class="main clearfix">
<nav class="navbar navbar-expand-xl navbar-light d-flex align-items-start">
<button class="navbar-toggler js-toggleMenu" type="button" aria-controls="navbarToggleMobileMenu" aria-label="Toggle navigation">
<svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="22" height="2" rx="1" fill="black" />
<rect y="6" width="22" height="2" rx="1" fill="black" />
<rect y="12" width="22" height="2" rx="1" fill="black" />
</svg>
</button>
<a href="index.html" class="navbar-brand"><img src="../../img/logos/logo-portaal.svg" alt="logo"></a>
<div class="component navigation navigation-title navbar-nav flex-column js-navigation">
<div class="component-content">
<nav>
<ul class="clearfix">
<li class="level1 item0 odd first rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="-active" title="Overzicht" href="/">Overzicht</a>
</div>
</li>
<li class="level1 item1 even rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="" title="Bestellingen" href="/">Bestellingen</a>
</div>
</li>
<li class="level1 item2 odd rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="" title="Woningen" href="/">Woningen</a>
</div>
</li>
<li class="level1 item3 even rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="" title="Bewoners" href="/">Bewoners</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
</nav>
</div>
<div id="content" class="main clearfix">
<div class="component contentHeader o-contentHeader d-flex align-items-center">
<div class="component-content">
<div class="row no-gutters w-100 h-100">
<div class="o-contentHeader__left col col-md-6 d-flex align-items-center position-static">
<div class="d-flex align-items-center">
<a href="index.html" class="o-contentHeader__logoAction mr-2 mr-md-3 -action">
<img src="../../img/logos/logo-portaal.svg" alt="logo">
<div class="a-circle -button -hover -border"><i class="icon-arrow-round-left"></i></div>
</a>
<div class="d-flex flex-column justify-content-center">
<h1 class="o-contentHeader__title d-flex align-items-center">
<span class="o-contentHeader__titleText">Updates</span>
</h1>
<small class="text-muted">3 ongelezen berichten</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content js-content">
<div class="component utilityBar o-utilityBar -updates d-none d-lg-flex justify-content-end">
<div class="o-utilityBar__parts d-flex flex-column flex-lg-row h-100 justify-content-xl-between align-items-lg-center w-100">
<div class="o-utilityBar__row w-100 d-none d-lg-flex justify-content-end align-items-center">
<div class="mr-3">
</div>
<div class="mr-3">
<div class="form-control -filter d-flex justify-content-between align-items-center w-100 position-relative">
<i class="icon-calendar text-body mr-2 cursor-pointer"></i>
<input type="text" class="js-datepickerFrom cursor-pointer" value="" placeholder="Selecteer datum" readonly>
<input class="js-datepicker flatpickr-input cursor-pointer">
<span class="ml-2 mr-2 ml-sm-3 mr-sm-3 cursor-default user-select-none">tot</span>
<input type="text" class="js-datepickerTo cursor-pointer" value="" placeholder="Selecteer datum" readonly>
</div>
</div>
<div class="m-searchInput">
<span class="d-block d-xxxxl-none">
<input type="search" class="form-control" id="search" placeholder="Zoeken">
</span>
<span class="d-none d-xxxxl-block">
<input type="search" class="form-control" id="search" placeholder="Overzicht doorzoeken">
</span>
<i class=" icon-search cursor-pointer"></i>
</div>
</div>
</div>
</div>
<div class="d-lg-none mb-3">
<div class="form-control -filter d-flex justify-content-between align-items-center w-100 position-relative">
<i class="icon-calendar text-body mr-2 cursor-pointer"></i>
<input type="text" class="js-datepickerFrom cursor-pointer" value="" placeholder="Selecteer datum" readonly>
<input class="js-datepicker flatpickr-input cursor-pointer">
<span class="ml-2 mr-2 ml-sm-3 mr-sm-3 cursor-default user-select-none">tot</span>
<input type="text" class="js-datepickerTo cursor-pointer" value="" placeholder="Selecteer datum" readonly>
</div>
</div>
<div class="d-lg-none mb-3">
<div class="m-searchInput">
<span class="d-block d-xxxxl-none">
<input type="search" class="form-control" id="search" placeholder="Zoeken">
</span>
<span class="d-none d-xxxxl-block">
<input type="search" class="form-control" id="search" placeholder="Overzicht doorzoeken">
</span>
<i class=" icon-search cursor-pointer"></i>
</div>
</div>
<div class="o-updates row align-items-start">
<div class="col-12 col-lg-8 mb-3 d-flex flex-wrap justify-content-between">
<h3 class="mb-3 w-100">Release notes</h3>
<div class="m-block d-flex -padding flex-column-reverse flex-xxl-row mb-4 justify-content-between">
<div class="d-flex flex-column w-100 mr-0 mr-xxl-5">
<div>
<strong class="mr-2 cursor-pointer">Communiceren op taakniveau</strong>
<span class="text-muted d-inline-block break-word">04-07-2022</span>
</div>
<p class="mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna, ut enim ad minim veam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</div>
<div class="m-block__img mb-4 mb-xxl-0">
<img src="../../img/screenshot.jpg" alt="Screenshot">
</div>
</div>
<div class="m-block d-flex -padding flex-column-reverse flex-xxl-row mb-4 justify-content-between">
<div class="d-flex flex-column w-100 mr-0 mr-xxl-5">
<div>
<strong class="mr-2 cursor-pointer">Aanwijzing GGW of App in takenlijst</strong>
<span class="text-muted d-inline-block break-word">01-07-2022</span>
</div>
<p class="mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna, ut enim ad minim veam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</div>
<div class="m-block__img mb-4 mb-xxl-0">
<img src="../../img/screenshot.jpg" alt="Screenshot">
</div>
</div>
<div class="m-block d-flex -padding flex-column-reverse flex-xxl-row mb-4 justify-content-between">
<div class="d-flex flex-column w-100 mr-0 mr-xxl-5">
<div>
<strong class="mr-2 cursor-pointer">Takenlijst refreshen</strong>
<span class="text-muted d-inline-block break-word">26-06-2022</span>
</div>
<p class="mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna, ut enim ad minim veam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</div>
<div class="m-block__img mb-4 mb-xxl-0">
<img src="../../img/screenshot.jpg" alt="Screenshot">
</div>
</div>
<div class="m-block d-flex -padding flex-column-reverse flex-xxl-row mb-0 justify-content-between">
<div class="d-flex flex-column w-100 mr-0 mr-xxl-5">
<div>
<strong class="mr-2 cursor-pointer">Naam wijzigen configuratie</strong>
<span class="text-muted d-inline-block break-word">26-06-2022</span>
</div>
<p class="mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna, ut enim ad minim veam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</div>
<div class="m-block__img mb-4 mb-xxl-0">
<img src="../../img/screenshot.jpg" alt="Screenshot">
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<h3 class="mb-3">Onderhoudsaankondigingen</h3>
<div class="m-block -single -padding d-flex flex-column mb-3">
<div class="o-updates__item">
<div>
<strong class="mr-2">Communiceren op taakniveau</strong>
<span class="text-muted d-inline-block break-word">04-07-2022</span>
</div>
<p class="mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
<div class="o-updates__item">
<div>
<strong class="mr-2">Communiceren op taakniveau</strong>
<span class="text-muted d-inline-block break-word">04-07-2022</span>
</div>
<p class="mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
<div class="o-updates__item">
<div>
<strong class="mr-2">Communiceren op taakniveau</strong>
<span class="text-muted d-inline-block break-word">04-07-2022</span>
</div>
<p class="mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
<div class="o-updates__item">
<div>
<strong class="mr-2">Communiceren op taakniveau</strong>
<span class="text-muted d-inline-block break-word">04-07-2022</span>
</div>
<p class="mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
<div class="o-updates__item">
<div>
<strong class="mr-2">Communiceren op taakniveau</strong>
<span class="text-muted d-inline-block break-word">04-07-2022</span>
</div>
<p class="mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="main clearfix">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="click" data-html="true" title="" data-custom-class="-menu" ">
MV
</div>
<div class=" popover-content">
<div class='dropdown-item'>Account instellingen</div>
<div class='dropdown-item'>Uitloggen</div>
</div>
<ul class="m-iconMenu text-secondary mb-0 d-flex flex-xl-column align-items-center list-unstyled">
<li><i class="icon-chat1"></i></li>
<li><i class="icon-bell"></i></li>
<li><i class="icon-question-mark"></i></li>
</ul>
</div>
{% extends '@layout' %}
{% block content %}
{% set handle2="dropdown" %}
{% set filter_type="tags" %}
{% set handle3="datepicker--filter-range" %}
{% set handle4="search-input" %}
{% render '@utility-bar', {handle2:handle2, filter_type:filter_type, handle3:handle3, handle4:handle4, updates:true}, true%}
<div class="d-lg-none mb-3">{% render '@'+handle3 %}</div>
<div class="d-lg-none mb-3">{% render '@'+handle4 %}</div>
<div class="o-updates row align-items-start">
<div class="col-12 col-lg-8 mb-3 d-flex flex-wrap justify-content-between">
<h3 class="mb-3 w-100">Release notes</h3>
{% for i in range(0, 4) -%}
{% set last_item = loop.last %}
{% render '@block', {i:i, subtasks:subtasks, label:label, updates:true, last_item:last_item}, true %}
{% endfor %}
</div>
<div class="col-12 col-lg-4">
<h3 class="mb-3">Onderhoudsaankondigingen</h3>
<div class="m-block -single -padding d-flex flex-column mb-3">
{% if results %}
{% for i in range(0, 5) -%}
{% set updates_item_title="Communiceren op taakniveau" %}
{% set updates_item_date="04-07-2022" %}
{% set updates_item_text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore." %}
<div class="o-updates__item">
<div>
<strong class="mr-2">{{ updates_item_title }}</strong>
<span class="text-muted d-inline-block break-word">{{ updates_item_date }}</span>
</div>
<p class="mt-2 mb-0">{{ updates_item_text }}</p>
</div>
{% endfor %}
{% else %}
<span class="text-muted font-italic text-center my-4 my-lg-5">Er zijn nog geen aankondigingen</span>
{% endif %}
</div>
</div>
</div>
{% if modal %}
{% render '@modal--image' %}
{% endif %}
{% endblock %}
{
"default_menu": "zakelijk",
"content_header": {
"title": "Updates",
"subtitle": "3 ongelezen berichten"
},
"modal": false,
"results": true
}
No notes defined.