<div class="scrollable-table">
<table class="issues-table">
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Date</th>
<th scope="col">Information</th>
<th scope="col">Assigned to</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="one-line"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#validate" />
</svg>
New wine validation</td>
<td class="one-line">2019-07-03 15:46</td>
<td class="info">
<p><a href="#">First Hotel Billingehus</a> has uploaded a new wine in need of validation. <a href="#notification-1" class="toggle" aria-controls="#notification-1" data-toggle-alt="Show less">Show more…</a></p>
<div id="notification-1" class="toggle-content">
<p>Dolor odio facere tempore perferendis possimus? Exercitationem
inventore id magni explicabo tenetur Ea et quibusdam molestiae
pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid
deleniti nisi Sint explicabo hic</p>
<p>Dolor odio facere tempore perferendis possimus? Exercitationem
inventore id magni explicabo tenetur Ea et quibusdam molestiae
pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid
deleniti nisi Sint explicabo hic</p>
<p>Dolor odio facere tempore perferendis possimus? Exercitationem
inventore id magni explicabo tenetur Ea et quibusdam molestiae
pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid
deleniti nisi Sint explicabo hic</p>
</div>
</td>
<td class="one-line">
<a href="mailto:jerker@finewineclub.com" data-tippy-content="jerker@finewineclub.com">Jerker Soomus</a>
</td>
<td>
<div class="action-bar">
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inbox" />
</svg>
<span>Pick task</span>
</span>
</button>
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#archive" />
</svg>
<span>Archive</span>
</span>
</button>
<button type="button" class="alt size-xs" aria-label="Delete">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</div>
</td>
</tr>
<tr>
<td class="one-line"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#money" />
</svg>
Price change</td>
<td class="one-line">2019-07-04 10:18</td>
<td class="info"><a href="#">Bertrand Ambroise Corton Rognet 2007</a> has increased in price with 25%.
</td>
<td class="one-line">
</td>
<td>
<div class="action-bar">
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inbox" />
</svg>
<span>Pick task</span>
</span>
</button>
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#archive" />
</svg>
<span>Archive</span>
</span>
</button>
<button type="button" class="alt size-xs" aria-label="Delete">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</div>
</td>
</tr>
<tr>
<td class="one-line"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#support" />
</svg>
Support request</td>
<td class="one-line">2019-07-04 18:33</td>
<td class="info"><a href="#">Stureplan</a> has requested help with wine matching.
</td>
<td class="one-line">
<a href="mailto:ralf@finewineclub.com" data-tippy-content="ralf@finewineclub.com">Ralf Nord</a>
</td>
<td>
<div class="action-bar">
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inbox" />
</svg>
<span>Pick task</span>
</span>
</button>
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#archive" />
</svg>
<span>Archive</span>
</span>
</button>
<button type="button" class="alt size-xs" aria-label="Delete">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
{{#> @scrollable-table}}
<table class="issues-table">
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Date</th>
<th scope="col">Information</th>
<th scope="col">Assigned to</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{{#each issues}}
<tr>
<td class="one-line">{{> @svg}} {{category}}</td>
<td class="one-line">{{date}}</td>
<td class="info">{{{information}}}</td>
<td class="one-line">
{{#if assignee}}
<a href="mailto:{{assignee-mail}}" data-tippy-content="{{assignee-mail}}">{{assignee}}</a>
{{/if}}
</td>
<td>
{{#> @action-bar}}
{{#each ../issues-buttons}}
{{> @button}}
{{/each}}
{{/ @action-bar}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{/ @scrollable-table}}
{
"issues-buttons": [
{
"text": "Pick task",
"icon": "inbox",
"modifier": "alt size-xs"
},
{
"text": "Archive",
"icon": "archive",
"modifier": "alt size-xs"
},
{
"text": "Delete",
"icon": "delete",
"icon-only": true,
"modifier": "alt size-xs"
}
],
"issues": [
{
"category": "New wine validation",
"icon": "validate",
"date": "2019-07-03 15:46",
"assignee": "Jerker Soomus",
"assignee-mail": "jerker@finewineclub.com",
"information": "<p><a href=\"#\">First Hotel Billingehus</a> has uploaded a new wine in need of validation. <a href=\"#notification-1\" class=\"toggle\" aria-controls=\"#notification-1\" data-toggle-alt=\"Show less\">Show more…</a></p> <div id=\"notification-1\" class=\"toggle-content\">\n <p>Dolor odio facere tempore perferendis possimus? Exercitationem\n inventore id magni explicabo tenetur Ea et quibusdam molestiae\n pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid\n deleniti nisi Sint explicabo hic</p>\n <p>Dolor odio facere tempore perferendis possimus? Exercitationem\n inventore id magni explicabo tenetur Ea et quibusdam molestiae\n pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid\n deleniti nisi Sint explicabo hic</p>\n <p>Dolor odio facere tempore perferendis possimus? Exercitationem\n inventore id magni explicabo tenetur Ea et quibusdam molestiae\n pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid\n deleniti nisi Sint explicabo hic</p>\n</div>\n"
},
{
"category": "Price change",
"icon": "money",
"date": "2019-07-04 10:18",
"information": "<a href=\"#\">Bertrand Ambroise Corton Rognet 2007</a> has increased in price with 25%.\n"
},
{
"category": "Support request",
"icon": "support",
"date": "2019-07-04 18:33",
"assignee": "Ralf Nord",
"assignee-mail": "ralf@finewineclub.com",
"information": "<a href=\"#\">Stureplan</a> has requested help with wine matching.\n"
}
]
}
/**
* Issues table
*/
@media screen {
.issues-table {
width: 100%;
}
.issues-table td {
vertical-align: top;
padding-bottom: 0.5em;
padding-top: 0.5em;
}
.issues-table td.info {
min-width: 48ch;
}
}
No notes defined.