<!-- Radatz Tagesmenu Hochformat Template --> <style type='text/css'> .spotPreviewDefault { width: 1080px; height: 1920px; } {{divId}} .template { background-image: url( {{#if image}} {{{image}}} {{else}} {{{mediaPath}}}content/media/public/media/radatz_hintergrund_menue_hoch.png {{/if}} ); background-repeat: repeat; background-color: black; width: 1080px; height: 1920px; margin: 0} @font-face { font-family: 'MarketOT'; src: url('fonts/MarketOT.otf'); } {{divId}} .container { position: relative; margin-left: 80px; margin-right: 80px; top: 340px; } {{divId}} .item { position: relative; font-family: 'MarketOT'; font-size: 80px; letter-spacing: -0.3px; color: #fff; margin-bottom: 42px; } {{divId}} .item:nth-child(n+7) { display: none; } {{divId}} .labelField { position: relative; display: block; width: 650px; line-height: 95px; margin-right: 20px; word-wrap: normal; margin-bottom: 10px; } {{divId}} .subField { position: relative; display: block; width: 680px; font-size: 55px; margin-top: -10px; line-height: 55px; } {{divId}} .priceField { position: absolute; display: inline-block; top: 0px; right: 0px; text-align: right; font-size: 80px; line-height: 80px; letter-spacing: 1px; height: 100px; } span { display: inline-block; } </style> <div class='template'> <div class='container'> {{#menu}} {{#if available}} <div class='item'> <div class='labelField'><span>{{name}}</span></div> <div class='subField'>{{sideDish}}</div> <div class='priceField'>{{price}}</div> </div> {{/if}} {{/menu}} </div> </div> <script type='text/javascript'> /*Resize items where text is to long*/ function templateInitFunc{{playerId}}(player) { setTimeout(function(){ $('.labelField').each(function(){ var width = $(this).width(); var innerWidth = $(this).find('span').first().width(); console.log(width, $(this).find('span').first().width()); while(innerWidth > width) { size = parseInt($(this).css('font-size'), 10); $(this).css('font-size', size - 1); innerWidth = $(this).find('span').first().width(); } }); }, 100); setTimeout(function(){ var end = $('.item:visible:last-child').position().top + $('.item:visible:last-child').height(); if(end > 1500){ $('.item').css('margin-bottom', '50px'); } }, 0); } </script>