<div class="atm-table-wrapper">
<div class="table-responsive">
<div class='title'>
<h4 class="atm-heading ">Biologie</h4>
<a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</div>
<table>
<tr>
<th>Werkvorm</th>
<th>Datum</th>
<th>Omschrijving</th>
</tr>
<tr>
<td>Labo</td>
<td>10 / 06 /2021</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>Case study</td>
<td>10 / 06 /2021</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>
</table>
</div>
<div class="table-list">
<div class='title'>
<h3 class="atm-heading ">Biologie</h3>
<a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</div>
<ul>
<li>
<div class="wrapper">
<div class="item">
<div><span>Werkvorm</span></div>
<div>Labo</div>
</div>
<div class="item">
<div><span>Datum</span></div>
<div>10 / 06 /2021</div>
</div>
<div class="item">
<div><span>Omschrijving</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>Werkvorm</span></div>
<div>Case study</div>
</div>
<div class="item">
<div><span>Datum</span></div>
<div>10 / 06 /2021</div>
</div>
<div class="item">
<div><span>Omschrijving</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>
</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": true,
"heading": {
"text": "Biologie"
},
"icon-delete": {
"title": "Verwijder item",
"text": "Verwijder item",
"modifier": "icon-delete",
"iconBefore": {
"icon": "fa-times",
"style": "far"
}
},
"headerRow": [
{
"text": "Werkvorm"
},
{
"text": "Datum"
},
{
"text": "Omschrijving"
}
],
"rows": [
{
"cells": [
{
"text": "Labo"
},
{
"text": "10 / 06 /2021"
},
{
"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": "Case study"
},
{
"text": "10 / 06 /2021"
},
{
"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."
}
]
}
]
}
.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.