<div class="atm-table-wrapper">
<div class="table-responsive">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
<td>
<div class='mol-tag tag-accept'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Goedgekeurd</span>
</div>
</td>
<td>
<p><span>Details inhaalexamen</span></p>
<p><span>Datum:</span>10/04/2021</p>
<p><span>Tijd:</span>10:00 uur</p>
<p><span>Lokaal:</span>OG-Aud1</p>
</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
<td>
<div class='mol-tag tag-reject'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Afgekeurd</span>
</div>
</td>
<td>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
<td>
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
</td>
<td>Row 3 Col 5</td>
</tr>
<tr>
<td>Row 4 Col 1</td>
<td>Row 4 Col 2</td>
<td>Row 4 Col 3</td>
<td>
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
</td>
<td>Row 4 Col 5</td>
</tr>
</table>
</div>
<div class="table-list">
<ul>
<li>
<div class="wrapper">
<div class="item">
<div><span>Header 1</span></div>
<div>Row 1 Col 1</div>
</div>
<div class="item">
<div><span>Header 2</span></div>
<div>Row 1 Col 2</div>
</div>
<div class="item">
<div><span>Header 3</span></div>
<div>Row 1 Col 3</div>
</div>
<div class="item">
<div><span>Header 4</span></div>
<div>
<div class='mol-tag tag-accept'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Goedgekeurd</span>
</div>
</div>
</div>
<div class="item">
<div><span>Header 5</span></div>
<div>
<p>Details inhaalexamen</p>
<p><span>Datum:</span>10/04/2021</p>
<p><span>Tijd:</span>10:00 uur</p>
<p><span>Lokaal:</span>OG-Aud1</p>
</div>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="item">
<div><span>Header 1</span></div>
<div>Row 2 Col 1</div>
</div>
<div class="item">
<div><span>Header 2</span></div>
<div>Row 2 Col 2</div>
</div>
<div class="item">
<div><span>Header 3</span></div>
<div>Row 2 Col 3</div>
</div>
<div class="item">
<div><span>Header 4</span></div>
<div>
<div class='mol-tag tag-reject'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Afgekeurd</span>
</div>
</div>
</div>
<div class="item">
<div><span>Header 5</span></div>
<div>Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst.</div>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="item">
<div><span>Header 1</span></div>
<div>Row 3 Col 1</div>
</div>
<div class="item">
<div><span>Header 2</span></div>
<div>Row 3 Col 2</div>
</div>
<div class="item">
<div><span>Header 3</span></div>
<div>Row 3 Col 3</div>
</div>
<div class="item">
<div><span>Header 4</span></div>
<div>
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
</div>
</div>
<div class="item">
<div><span>Header 5</span></div>
<div>Row 3 Col 5</div>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="item">
<div><span>Header 1</span></div>
<div>Row 4 Col 1</div>
</div>
<div class="item">
<div><span>Header 2</span></div>
<div>Row 4 Col 2</div>
</div>
<div class="item">
<div><span>Header 3</span></div>
<div>Row 4 Col 3</div>
</div>
<div class="item">
<div><span>Header 4</span></div>
<div>
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
</div>
</div>
<div class="item">
<div><span>Header 5</span></div>
<div>Row 4 Col 5</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="atm-table-wrapper">
<div class="table-responsive">
{{#if tableHeading}}
<div class='title'>
{{render '@app-heading--h4' heading merge=true}}
{{render '@app-link' icon-delete merge=true}}
</div>
{{/if}}
<table>
{{#if headerRow}}
<tr>
{{#if headerCol}}
<th></th>
{{/if}}
{{#each headerRow}}
<th>{{text}}</th>
{{/each}}
</tr>
{{/if}}
{{#each rows}}
<tr>
{{#if ../headerCol}}
{{#with (lookup ../headerCol @index) as |header|}}
<th class="head">{{header.text}}</th>
{{/with}}
{{/if}}
{{#each cells}}
{{#if text}}
<td>{{text}}</td>
{{/if}}
{{#if status-accept}}
<td> {{render '@app-tag--tag-accept'}}</td>
{{/if}}
{{#if status-reject}}
<td> {{render '@app-tag--tag-reject'}}</td>
{{/if}}
{{#if status-applied}}
<td> {{render '@app-tag--tag-applied'}}</td>
{{/if}}
{{#if details}}
<td>
<p><span>{{details.title}}</span></p>
<p><span>Datum:</span>{{details.date}}</p>
<p><span>Tijd:</span>{{details.time}}</p>
<p><span>Lokaal:</span>{{details.locale}}</p>
</td>
{{/if}}
{{#if date-picker}}
<td>{{render '@app-date-picker'}}</td>
{{/if}}
{{#if dates}}
<td>
{{#each dates}}
<div class="mb-4">
{{render '@app-date-picker'}}
</div>
{{/each}}
{{render '@app-link--icon-after' add-date-link merge=true}}
</td>
{{/if}}
{{#if checkbox}}
<td>{{render '@app-checkbox'}}</td>
{{/if}}
{{#if text-area}}
<td>{{render '@app-textarea'}}</td>
{{/if}}
{{#if delete}}
<td class="icon-delete">{{render '@app-link' icon-delete merge=true}}</td>
{{/if}}
{{/each}}
</tr>
{{/each}}
</table>
</div>
<div class="table-list">
{{#if tableHeading}}
<div class='title'>
{{render '@app-heading--h3' heading merge=true}}
{{render '@app-link' icon-delete merge=true}}
</div>
{{/if}}
<ul>
{{#each rows}}
<li>
{{#with (lookup ../headerCol @index) as |header|}}
<span>{{header.text}}</span>
{{/with}}
<div class="wrapper">
{{#each cells}}
<div class="item">
{{#if ../../headerRow}}
{{#with (lookup ../../headerRow @index) as |header|}}
<div {{header.attributes}}><span>{{header.text}}</span></div>
{{/with}}
{{/if}}
{{#if delete}}
<div class="icon">{{render '@app-link' icon-delete merge=true}}</div>
{{/if}}
{{#if text}}
<div>{{text}}</div>
{{/if}}
{{#if status-accept}}
<div> {{render '@app-tag--tag-accept'}}</div>
{{/if}}
{{#if status-reject}}
<div> {{render '@app-tag--tag-reject'}}</div>
{{/if}}
{{#if status-applied}}
<div> {{render '@app-tag--tag-applied'}}</div>
{{/if}}
{{#if details}}
<div>
<p>{{details.title}}</p>
<p><span>Datum:</span>{{details.date}}</p>
<p><span>Tijd:</span>{{details.time}}</p>
<p><span>Lokaal:</span>{{details.locale}}</p>
</div>
{{/if}}
{{#if date-picker}}
<div>{{render '@app-date-picker'}}</div>
{{/if}}
{{#if dates}}
<td>
{{#each dates}}
<div class="mb-4">
{{render '@app-date-picker'}}
</div>
{{/each}}
{{render '@app-link--icon-after' add-date-link merge=true}}
</td>
{{/if}}
{{#if checkbox}}
<div>{{render '@app-checkbox'}}</div>
{{/if}}
{{#if text-area}}
<div>{{render '@app-textarea'}}</div>
{{/if}}
</div>
{{/each}}
</div>
</li>
{{/each}}
</ul>
</div>
</div>
{
"tableHeading": false,
"headerRow": [
{
"text": "Header 1"
},
{
"text": "Header 2"
},
{
"text": "Header 3"
},
{
"text": "Header 4"
},
{
"text": "Header 5"
}
],
"rows": [
{
"cells": [
{
"text": "Row 1 Col 1"
},
{
"text": "Row 1 Col 2"
},
{
"text": "Row 1 Col 3"
},
{
"status-accept": "Goedgekeurd"
},
{
"details": {
"title": "Details inhaalexamen",
"date": "10/04/2021",
"time": "10:00 uur",
"locale": "OG-Aud1"
}
}
]
},
{
"cells": [
{
"text": "Row 2 Col 1"
},
{
"text": "Row 2 Col 2"
},
{
"text": "Row 2 Col 3"
},
{
"status-reject": "Afgekeurd"
},
{
"text": "Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst."
}
]
},
{
"cells": [
{
"text": "Row 3 Col 1"
},
{
"text": "Row 3 Col 2"
},
{
"text": "Row 3 Col 3"
},
{
"status-applied": "Aangevraagd"
},
{
"text": "Row 3 Col 5"
}
]
},
{
"cells": [
{
"text": "Row 4 Col 1"
},
{
"text": "Row 4 Col 2"
},
{
"text": "Row 4 Col 3"
},
{
"status-applied": "Aangevraagd"
},
{
"text": "Row 4 Col 5"
}
]
}
]
}
.atm-table-wrapper {
@apply overflow-x-auto border-gray-700;
textarea {
@apply w-full md:w-52 mr-10 mt-2 md:mt-0;
}
.table-responsive {
@apply hidden md:block w-full;
.title {
@apply relative pt-1;
.atm-link {
@apply absolute right-1 top-1 text-red;
}
}
.icon-delete {
@apply absolute right-4 top-4;
@apply text-red;
.atm-icon,
.atm-link span {
@apply text-red;
@apply font-bold;
}
.text {
@apply hidden;
}
}
table {
@apply w-full lg:table-fixed;
th {
@apply w-full bg-white;
}
tr:first-child {
@apply border-none;
}
tr {
@apply border-r border-l-2 border-b border-gray-700 relative;
th {
@apply bg-gray-700 p-4 font-semibold text-left border-solid border-gray-700;
}
.head {
@apply align-top;
}
td {
@apply p-4 align-top border-solid whitespace-nowrap lg:whitespace-normal;
}
}
.atm-link {
@apply text-green;
.text {
@apply underline;
}
}
}
}
.table-list {
@apply block md:hidden;
.atm-link {
@apply text-green;
.text {
@apply underline;
}
}
.icon-delete {
@apply absolute right-4 top-4;
@apply text-red;
.atm-icon,
.atm-link span {
@apply text-red;
@apply font-bold;
}
.text {
@apply hidden;
}
}
.title {
@apply relative pt-4;
.icon {
@apply right-1 top-4;
}
span {
@apply font-bold;
}
}
.wrapper {
@apply relative;
.item .atm-link {
@apply font-normal;
}
}
ul {
li {
&:not(:last-child) {
@apply md:mb-4;
}
.wrapper {
@apply bg-white m-0 md:m-[5px] md:mb-8 p-8 border border-solid border-gray-700 shadow-xl;
.item {
@apply mb-4;
}
}
}
}
}
}
No notes defined.