Mijn Projecten

Component preview

<header>
    <div class="dso-logo-bar">
        <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" />
        <div class="dso-tools-bar">
            <div class="dso-login">
                <a href="" class="dso-tertiary">
                    <dso-icon icon="user"></dso-icon><span>Inloggen</span>
                </a>
            </div>
        </div>
    </div>
    <nav class="dso-navbar">

        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle dso-secondary" aria-expanded="false">
                <dso-icon icon="bars"></dso-icon>
                <span class="sr-only">Menu</span>
            </button>
        </div>

        <ul class="dso-nav dso-nav-main">
            <li>
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    Vergunningcheck
                </a>
            </li>
            <li>
                <a href="#">
                    Aanvragen
                </a>
            </li>
            <li>
                <a href="#">
                    Regels op de kaart
                </a>
            </li>
            <li class="dso-active">
                <a href="#" aria-current="page">
                    Mijn Omgevingsloket
                </a>
            </li>
        </ul>
    </nav>

</header>
<main>
    <div class="dso-app-heading">

        <h1>Mijn projecten</h1>

    </div>
    <div class="dso-context-wrapper">
        <div class="dso-context-label">
            <div class="dso-button-row">
                <button type="button" class="dso-secondary">
                    <dso-icon icon="plus"></dso-icon><span>Nieuw project</span>
                </button>

                <button type="button" class="dso-secondary">
                    <dso-icon icon="email"></dso-icon><span>Actiecode invoeren</span>
                </button>

            </div>
        </div>
        <div class="dso-context-container">
            <div class="dso-search-bar">
                <div class="dso-search-bar-input">

                    <label for="search-bar--default" class="dso-search-icon">Zoeken in projecten</label>

                    <input type="text" id="search-bar--default" placeholder="Zoeken in projecten" />

                </div>
                <button type="button" class="dso-secondary sr-only">
                    Zoeken

                </button>
            </div>

        </div>
    </div>

    <div class="dso-table-responsive">
        <table class="table">
            <caption class="sr-only">Overzicht van gebruikersnamen</caption>
            <thead>
                <tr>
                    <th scope="col" class="col-xs-7">Projectnaam</th>
                    <th scope="col" class="col-xs-3">Rol</th>
                    <th scope="col" class="col-xs-2">
                        <span class="sr-only">Acties<span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        <a href="#" class="dso-tertiary"><span>Boomkappen in de achtertuin</span></a>

                        <dso-label id="label-default" status="danger">Wordt verwijderd op 31-12-2023
                        </dso-label>

                    </th>
                    <td>
                        Initiatiefnemer
                    </td>
                    <td class="text-right">
                        <button type="button" class="dso-tertiary"><span class="sr-only">Boomkappen in de achtertuin aanpassen</span>
                            <dso-icon icon="pencil"></dso-icon>
                            <dso-tooltip position="top">Projectnaam bewerken</dso-tooltip>
                        </button>

                        <button type="button" class="dso-tertiary"><span class="sr-only">Boomkappen in de achtertuin verwijderen</span>
                            <dso-icon icon="trash"></dso-icon>
                            <dso-tooltip position="top">Verwijderen</dso-tooltip>
                        </button>

                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <a href="#" class="dso-tertiary"><span>Project 9</span></a>

                    </th>
                    <td>
                        Initiatiefnemer
                    </td>
                    <td class="text-right">
                        <button type="button" class="dso-tertiary"><span class="sr-only">Project 9 aanpassen</span>
                            <dso-icon icon="pencil"></dso-icon>
                            <dso-tooltip position="top">Projectnaam bewerken</dso-tooltip>
                        </button>

                        <button type="button" class="dso-tertiary"><span class="sr-only">Project 9 verwijderen</span>
                            <dso-icon icon="trash"></dso-icon>
                            <dso-tooltip position="top">Verwijderen</dso-tooltip>
                        </button>

                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <a href="#" class="dso-tertiary"><span>Project 8</span></a>

                    </th>
                    <td>
                        Initiatiefnemer
                    </td>
                    <td class="text-right">
                        <button type="button" class="dso-tertiary"><span class="sr-only">Project 8 aanpassen</span>
                            <dso-icon icon="pencil"></dso-icon>
                            <dso-tooltip position="top">Projectnaam bewerken</dso-tooltip>
                        </button>

                        <button type="button" class="dso-tertiary"><span class="sr-only">Project 8 verwijderen</span>
                            <dso-icon icon="trash"></dso-icon>
                            <dso-tooltip position="top">Verwijderen</dso-tooltip>
                        </button>

                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <a href="#" class="dso-tertiary"><span>Project 7</span></a>

                    </th>
                    <td>
                        Gemachtigde
                    </td>
                    <td class="text-right">
                        <button type="button" class="dso-tertiary"><span class="sr-only">Project 7 aanpassen</span>
                            <dso-icon icon="pencil"></dso-icon>
                            <dso-tooltip position="top">Projectnaam bewerken</dso-tooltip>
                        </button>

                        <button type="button" class="dso-tertiary"><span class="sr-only">Project 7 verwijderen</span>
                            <dso-icon icon="trash"></dso-icon>
                            <dso-tooltip position="top">Verwijderen</dso-tooltip>
                        </button>

                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</main>

<footer>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <h2>Basic link</h2>
            <ul class="dso-link-list">
                <li><a href="#">Normale link</a></li>
                <li><a href="#">Test link</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Externe links</h2>
            <ul class="dso-link-list">
                <li><a href="#" class="extern">Externe link</a></li>
                <li><a href="#" class="extern">Extra externe link</a></li>
                <li><a href="#" class="extern">Laatste externe link</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Tekst paragraaf</h2>
            <p>
                Loop goed na welke inhoud essentieel is voor de footer. Creeër met ros en cols de gewenste indeling van uw footer.
            </p>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Combinatie links en tekst</h2>
            <p>
                Tekst kan worden gevolgd door verscheidene <a href="#">links</a>.
            </p>
            <ul class="dso-link-list">
                <li><a href="#">Combinatie link</a></li>
                <li><a href="#">Combinatie link 2</a></li>
            </ul>
        </div>
    </div>
</footer>

{% render '@header', {menu: menu, breadcrumbs: []} -%}

<main>
  {% render '@application-heading', appheading -%}

  <div class="dso-context-wrapper">
    <div class="dso-context-label">
      <div class="dso-button-row">
        {% render '@button', {label:'Nieuw project', type:'button', modifier:'dso-secondary', icon:'plus'} %}
        {% render '@button', {label:'Actiecode invoeren', type:'button', modifier:'dso-secondary', icon:'email'} %}
      </div>
    </div>
    <div class="dso-context-container">
      {% render '@search-bar', {label:'Zoeken in projecten', placeholder:'Zoeken in projecten', buttonLabel:'Zoeken', hideSearchButton: true, hiddenLabel: true, icon: true} %}
    </div>
  </div>

  <div class="dso-table-responsive">
    <table class="table">
      <caption class="sr-only">Overzicht van gebruikersnamen</caption>
      <thead>
        <tr>
          <th scope="col" class="col-xs-7">Projectnaam</th>
          <th scope="col" class="col-xs-3">Rol</th>
          <th scope="col" class="col-xs-2">
            <span class="sr-only">Acties<span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            {% render '@anchor', {modifier:'dso-tertiary', label:'Boomkappen in de achtertuin', url:'#'} %}
            {% render '@label', {label:'Wordt verwijderd op 31-12-2023', status:'danger'} %}
          </th>
          <td>
            Initiatiefnemer
          </td>
          <td class="text-right">
            {% render '@button', {label:'Boomkappen in de achtertuin aanpassen', type:'button', modifier:'dso-tertiary', icon:'pencil', iconOnly: true, tooltip: {label: 'Projectnaam bewerken', position: 'top'} } %}
            {% render '@button', {label:'Boomkappen in de achtertuin verwijderen', type:'button', modifier:'dso-tertiary', icon:'trash', iconOnly: true, tooltip: {label: 'Verwijderen', position: 'top'} } %}
          </td>
        </tr>
        <tr>
          <th scope="row">
            {% render '@anchor', {modifier:'dso-tertiary', label:'Project 9', url:'#'} %}
          </th>
          <td>
            Initiatiefnemer
          </td>
          <td class="text-right">
            {% render '@button', {label:'Project 9 aanpassen', type:'button', modifier:'dso-tertiary', icon:'pencil', iconOnly: true, tooltip: {label: 'Projectnaam bewerken', position: 'top'} } %}
            {% render '@button', {label:'Project 9 verwijderen', type:'button', modifier:'dso-tertiary', icon:'trash', iconOnly: true, tooltip: {label: 'Verwijderen', position: 'top'} } %}
          </td>
        </tr>
        <tr>
          <th scope="row">
            {% render '@anchor', {modifier:'dso-tertiary', label:'Project 8', url:'#'} %}
          </th>
          <td>
            Initiatiefnemer
          </td>
          <td class="text-right">
            {% render '@button', {label:'Project 8 aanpassen', type:'button', modifier:'dso-tertiary', icon:'pencil', iconOnly: true, tooltip: {label: 'Projectnaam bewerken', position: 'top'} } %}
            {% render '@button', {label:'Project 8 verwijderen', type:'button', modifier:'dso-tertiary', icon:'trash', iconOnly: true, tooltip: {label: 'Verwijderen', position: 'top'} } %}
          </td>
        </tr>
        <tr>
          <th scope="row">
            {% render '@anchor', {modifier:'dso-tertiary', label:'Project 7', url:'#'} %}
          </th>
          <td>
            Gemachtigde
          </td>
          <td class="text-right">
            {% render '@button', {label:'Project 7 aanpassen', type:'button', modifier:'dso-tertiary', icon:'pencil', iconOnly: true, tooltip: {label: 'Projectnaam bewerken', position: 'top'} } %}
            {% render '@button', {label:'Project 7 verwijderen', type:'button', modifier:'dso-tertiary', icon:'trash', iconOnly: true, tooltip: {label: 'Verwijderen', position: 'top'} } %}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</main>

{% render '@footer' %}