<!-- ### Begin: Element standing-table ### -->
<div id="c36" class="frame frame-default frame-type-standing-table frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<div class="table-responsive">
<table class="table table-standings">
<thead>
<tr>
<th> Platz </th>
<th> </th>
<th> Mannschaft </th>
<th> Spiele </th>
<th> Tore </th>
<th> Gegentore </th>
<th> Tordiffernz </th>
<th> Punkte </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1. </td>
<td> </td>
<td> SG Flensburg-Handewitt </td>
<td> 14 </td>
<td> 427 </td>
<td> 357 </td>
<td> 70 </td>
<td> 25:3 </td>
<td><span class="svg-arrow-thick-right-12x12"></span></td>
</tr>
<tr>
<td> 2. </td>
<td> </td>
<td> Rhein-Neckar Löwen </td>
<td> 15 </td>
<td> 446 </td>
<td> 389 </td>
<td> 57 </td>
<td> 23:7 </td>
<td><span class="svg-arrow-thick-right-12x12"></span></td>
</tr>
<tr>
<td> 3. </td>
<td> </td>
<td> THW Kiel </td>
<td> 12 </td>
<td> 396 </td>
<td> 318 </td>
<td> 78 </td>
<td> 22:2 </td>
<td><span class="svg-arrow-thick-up-12x12"></span></td>
</tr>
<tr>
<td> 4. </td>
<td> </td>
<td> Füchse BERLIN </td>
<td> 13 </td>
<td> 380 </td>
<td> 336 </td>
<td> 44 </td>
<td> 21:5 </td>
<td><span class="svg-arrow-thick-down-12x12"></span></td>
</tr>
<tr>
<td> 5. </td>
<td> </td>
<td> SC Magdeburg </td>
<td> 14 </td>
<td> 422 </td>
<td> 368 </td>
<td> 54 </td>
<td> 19:9 </td>
<td><span class="svg-arrow-thick-up-12x12"></span></td>
</tr>
<tr>
<td> 6. </td>
<td> </td>
<td> SC DHfK Leipzig </td>
<td> 15 </td>
<td> 394 </td>
<td> 384 </td>
<td> 10 </td>
<td> 17:13 </td>
<td><span class="svg-arrow-thick-down-12x12"></span></td>
</tr>
<tr>
<td> 7. </td>
<td><img src="../../common/img/dummy-images/hsg-wetzlar.png"></td>
<td> HSG Wetzlar </td>
<td> 16 </td>
<td> 457 </td>
<td> 430 </td>
<td> 27 </td>
<td> 17:15 </td>
<td><span class="svg-arrow-thick-up-12x12"></span></td>
</tr>
<tr>
<td> 8. </td>
<td> </td>
<td> Bergischer HC </td>
<td> 15 </td>
<td> 423 </td>
<td> 403 </td>
<td> 20 </td>
<td> 16:14 </td>
<td><span class="svg-arrow-thick-down-12x12"></span></td>
</tr>
<tr>
<td> 9. </td>
<td> </td>
<td> Frisch Auf Göppingen </td>
<td> 14 </td>
<td> 378 </td>
<td> 375 </td>
<td> 3 </td>
<td> 15:13 </td>
<td><span class="svg-arrow-thick-up-12x12"></span></td>
</tr>
<tr>
<td> 10. </td>
<td> </td>
<td> TVB Stuttgart </td>
<td> 15 </td>
<td> 422 </td>
<td> 429 </td>
<td> -7 </td>
<td> 15:15 </td>
<td><span class="svg-arrow-thick-up-12x12"></span></td>
</tr>
<tr>
<td> 11. </td>
<td> </td>
<td> TBV Lemgo Lippe </td>
<td> 16 </td>
<td> 424 </td>
<td> 439 </td>
<td> -15 </td>
<td> 15:17 </td>
<td><span class="svg-arrow-thick-down-12x12"></span></td>
</tr>
<tr>
<td> 12. </td>
<td> </td>
<td> TSV Hannover-Burgdorf </td>
<td> 15 </td>
<td> 415 </td>
<td> 417 </td>
<td> -2 </td>
<td> 14:16 </td>
<td><span class="svg-arrow-thick-right-12x12"></span></td>
</tr>
<tr>
<td> 13. </td>
<td> </td>
<td> MT Melsungen </td>
<td> 10 </td>
<td> 282 </td>
<td> 270 </td>
<td> 12 </td>
<td> 13:7 </td>
<td><span class="svg-arrow-thick-right-12x12"></span></td>
</tr>
<tr>
<td> 14. </td>
<td><img src="../../common/img/dummy-images/hc-erlangen.png" class="img-fluid"></td>
<td> HC Erlangen </td>
<td> 15 </td>
<td> 399 </td>
<td> 401 </td>
<td> -2 </td>
<td> 13:17 </td>
<td><span class="svg-arrow-thick-right-12x12"></span></td>
</tr>
<tr>
<td> 15. </td>
<td> </td>
<td> GWD Minden </td>
<td> 12 </td>
<td> 306 </td>
<td> 328 </td>
<td> -22 </td>
<td> 10:14 </td>
<td><span class="svg-arrow-thick-right-12x12"></span></td>
</tr>
<tr>
<td> 16. </td>
<td> </td>
<td> HSG Nordhorn-Lingen </td>
<td> 15 </td>
<td> 388 </td>
<td> 446 </td>
<td> -58 </td>
<td> 8:22 </td>
<td><span class="svg-arrow-thick-right-12x12"></span></td>
</tr>
<tr>
<td> 17. </td>
<td> </td>
<td> HBW Balingen-Weilstetten </td>
<td> 15 </td>
<td> 392 </td>
<td> 446 </td>
<td> -54 </td>
<td> 7:23 </td>
<td><span class="svg-arrow-thick-right-12x12"></span></td>
</tr>
<tr>
<td> 18. </td>
<td> </td>
<td> Eulen Ludwigshafen </td>
<td> 15 </td>
<td> 336 </td>
<td> 411 </td>
<td> -75 </td>
<td> 6:24 </td>
<td><span class="svg-arrow-thick-right-12x12"></span></td>
</tr>
<tr>
<td> 19. </td>
<td> </td>
<td> TuSEM Essen </td>
<td> 13 </td>
<td> 350 </td>
<td> 402 </td>
<td> -52 </td>
<td> 5:21 </td>
<td><span class="svg-arrow-thick-up-12x12"></span></td>
</tr>
<tr>
<td> 20. </td>
<td> </td>
<td> HSC Coburg </td>
<td> 15 </td>
<td> 369 </td>
<td> 457 </td>
<td> -88 </td>
<td> 3:27 </td>
<td><span class="svg-arrow-thick-down-12x12"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ### End: Element standing-table ### -->
{% extends '@wrapper-frame' %}
{% set CType = 'standing-table' %}
{% import _self as section %}
{% macro columns(cell,rowIteratorFirst,rowIteratorLast,columnIteratorFirst, table_header_position) %}
{% spaceless %}
{% if rowIteratorFirst %}
{% if table_header_position == 1 %}
<th>
{% else %}
{% if columnIteratorFirst %}
{% if table_header_position == 2 %}
<th>
{% else %}
<td>
{% endif %}
{% else %}
<td>
{% endif %}
{% endif %}
{% else %}
{% if columnIteratorFirst %}
{% if table_header_position == 2 %}
<th>
{% else %}
<td>
{% endif %}
{% else %}
<td>
{% endif %}
{% endif %}
{% endspaceless %}
{% spaceless %}
{% if cell %}
{% include template_from_string(cell) %}
{% else %}
{% endif %}
{% endspaceless %}
{% if rowIteratorFirst %}
{% if table_header_position == 1 %}
</th>
{% else %}
{% if columnIteratorFirst %}
{% if table_header_position == 2 %}
</th>
{% else %}
</td>
{% endif %}
{% else %}
</td>
{% endif %}
{% endif %}
{% else %}
{% if columnIteratorFirst %}
{% if table_header_position == 2 %}
</th>
{% else %}
</td>
{% endif %}
{% else %}
</td>
{% endif %}
{% endif %}
{% endmacro %}
{% block main %}
{% include "@atom-header" %}
{% if table %}
<div class="table-responsive">
<table class="table{% if table_class %} table-{{ table_class }}{% endif %}">
{% if table_caption %}
<caption>{{ table_caption }}</caption>
{% endif %}
{% for row in table %}
{% set rowIteratorFirst = loop.first %}
{% set rowIteratorLast = loop.last %}
{% if rowIteratorFirst %}
{% if table_header_position == 1 %}
<thead>
{% else %}
<tbody>
{% endif %}
{% elseif rowIteratorLast %}
{% if table_tfoot %}
</tbody>
<tfoot>
{% endif %}
{% endif %}
<tr>
{% spaceless %}
{% for cell in row %}
{% set columnIteratorFirst = loop.first %}
{{ section.columns(cell,rowIteratorFirst,rowIteratorLast,columnIteratorFirst, table_header_position) }}
{% endfor %}
{% endspaceless %}
</tr>
{% if rowIteratorFirst %}
{% if table_header_position == 1 %}
</thead>
<tbody>
{% endif %}
{% elseif rowIteratorLast %}
{% if table_tfoot %}
</tfoot>
{% else %}
</tbody>
{% endif %}
{% endif %}
{% endfor %}
</table>
</div>
{% endif %}
{% endblock %}
{
"table_caption": null,
"table_class": "standings",
"table_header_position": 1,
"table_tfoot": null,
"table": [
[
"Platz",
null,
"Mannschaft",
"Spiele",
"Tore",
"Gegentore",
"Tordiffernz",
"Punkte",
""
],
[
"1.",
"",
"SG Flensburg-Handewitt",
"14",
"427",
"357",
"70",
"25:3",
"<span class=\"svg-arrow-thick-right-12x12\"></span>"
],
[
"2.",
"",
"Rhein-Neckar Löwen",
"15",
"446",
"389",
"57",
"23:7",
"<span class=\"svg-arrow-thick-right-12x12\"></span>"
],
[
"3.",
"",
"THW Kiel",
"12",
"396",
"318",
"78",
"22:2",
"<span class=\"svg-arrow-thick-up-12x12\"></span>"
],
[
"4.",
"",
"Füchse BERLIN",
"13",
"380",
"336",
"44",
"21:5",
"<span class=\"svg-arrow-thick-down-12x12\"></span>"
],
[
"5.",
"",
"SC Magdeburg",
"14",
"422",
"368",
"54",
"19:9",
"<span class=\"svg-arrow-thick-up-12x12\"></span>"
],
[
"6.",
"",
"SC DHfK Leipzig",
"15",
"394",
"384",
"10",
"17:13",
"<span class=\"svg-arrow-thick-down-12x12\"></span>"
],
[
"7.",
"<img src=\"../../common/img/dummy-images/hsg-wetzlar.png\">",
"HSG Wetzlar",
"16",
"457",
"430",
"27",
"17:15",
"<span class=\"svg-arrow-thick-up-12x12\"></span>"
],
[
"8.",
"",
"Bergischer HC",
"15",
"423",
"403",
"20",
"16:14",
"<span class=\"svg-arrow-thick-down-12x12\"></span>"
],
[
"9.",
"",
"Frisch Auf Göppingen",
"14",
"378",
"375",
"3",
"15:13",
"<span class=\"svg-arrow-thick-up-12x12\"></span>"
],
[
"10.",
"",
"TVB Stuttgart",
"15",
"422",
"429",
"-7",
"15:15",
"<span class=\"svg-arrow-thick-up-12x12\"></span>"
],
[
"11.",
"",
"TBV Lemgo Lippe",
"16",
"424",
"439",
"-15",
"15:17",
"<span class=\"svg-arrow-thick-down-12x12\"></span>"
],
[
"12.",
"",
"TSV Hannover-Burgdorf",
"15",
"415",
"417",
"-2",
"14:16",
"<span class=\"svg-arrow-thick-right-12x12\"></span>"
],
[
"13.",
"",
"MT Melsungen",
"10",
"282",
"270",
"12",
"13:7",
"<span class=\"svg-arrow-thick-right-12x12\"></span>"
],
[
"14.",
"<img src=\"../../common/img/dummy-images/hc-erlangen.png\" class=\"img-fluid\">",
"HC Erlangen",
"15",
"399",
"401",
"-2",
"13:17",
"<span class=\"svg-arrow-thick-right-12x12\"></span>"
],
[
"15.",
"",
"GWD Minden",
"12",
"306",
"328",
"-22",
"10:14",
"<span class=\"svg-arrow-thick-right-12x12\"></span>"
],
[
"16.",
"",
"HSG Nordhorn-Lingen",
"15",
"388",
"446",
"-58",
"8:22",
"<span class=\"svg-arrow-thick-right-12x12\"></span>"
],
[
"17.",
"",
"HBW Balingen-Weilstetten",
"15",
"392",
"446",
"-54",
"7:23",
"<span class=\"svg-arrow-thick-right-12x12\"></span>"
],
[
"18.",
"",
"Eulen Ludwigshafen",
"15",
"336",
"411",
"-75",
"6:24",
"<span class=\"svg-arrow-thick-right-12x12\"></span>"
],
[
"19.",
"",
"TuSEM Essen",
"13",
"350",
"402",
"-52",
"5:21",
"<span class=\"svg-arrow-thick-up-12x12\"></span>"
],
[
"20.",
"",
"HSC Coburg",
"15",
"369",
"457",
"-88",
"3:27",
"<span class=\"svg-arrow-thick-down-12x12\"></span>"
]
]
}
.frame-type-standing-table {
.scrollbar {
overflow: hidden; //remove scrollbar
position: relative;
&::after {
content: "";
@include position(absolute, 0 -1px 0 null);
width: 20px;
background: linear-gradient(90deg, rgba($white, 0), $white);
}
.table-responsive {
cursor: grab;
margin-bottom: -20px; //remove scrollbar
&:active {
cursor: grabbing;
}
}
}
}
.table-standings {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
th,
td {
border-top: none;
vertical-align: middle;
}
th {
border-bottom: none;
font-size: .75rem;
font-weight: normal;
}
tbody {
tr {
background-color: #F6F6F6;
border-top: 5px solid $white;
td {
font-size: $font-size-sm;
&:first-child {
padding-left: 1.5rem;
position: relative;
&::before {
content: "";
@include position(absolute, 0 null 0 0);
background-color: #E2E2E2;
width: 10px;
}
}
&:first-child,
&:nth-child(3) {
@include Rift-Bold;
white-space: nowrap;
@include media-breakpoint-up(md) {
font-size: $h5-font-size;
}
}
}
&.hsg td {
&:first-child,
&:nth-child(3) {
color: $secondary;
}
}
}
}
img {
width: 30px;
height: 30px;
}
}
let table = document.querySelector('.frame-type-standing-table .table-responsive'),
isDown = false,
startX,
scrollLeft;
if (table) {
function hasScrollbar() {
if (table.scrollWidth > table.offsetWidth) {
table.parentElement.classList.add('scrollbar');
} else {
table.parentElement.classList.remove('scrollbar');
}
}
// Initial function call
hasScrollbar();
// Resize listener
window.addEventListener('resize', () => hasScrollbar());
// drag to scroll
table.addEventListener('mousedown', (e) => {
isDown = true;
table.classList.add('active');
startX = e.pageX - table.offsetLeft;
scrollLeft = table.scrollLeft;
});
table.addEventListener('mouseleave', () => {
isDown = false;
table.classList.remove('active');
});
table.addEventListener('mouseup', () => {
isDown = false;
table.classList.remove('active');
});
table.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - table.offsetLeft;
const walk = x - startX; //scroll-fast
table.scrollLeft = scrollLeft - walk;
// console.log(walk);
});
// Add class to highlight HSG Wetzlar
Array.from(document.querySelectorAll('td'))
.find((el) => el.textContent.trim() == 'HSG Wetzlar')
.parentElement.classList.add('hsg');
}
No notes defined.