diff --git a/Resources/Private/Templates/Youtube/Index.html b/Resources/Private/Templates/Youtube/Index.html index 35d6def78ad4b5124fdc35a8d3babfa10ed8f6b2..8e968a5e756f2fedb4f3678c84e184e5e1b13356 100644 --- a/Resources/Private/Templates/Youtube/Index.html +++ b/Resources/Private/Templates/Youtube/Index.html @@ -1,27 +1,27 @@ <f:layout name="Default" /> <f:section name="main"> - <div class="sg-youtube"> + <ul class="sg-youtube"> <f:for each="{feed}" as="feedItem"> - <a class="sg-youtube-item" href="{feedItem.url}"> - <f:if condition="{feedItem.thumbnail}"> - <div class="sg-youtube-image"> - <img src="{feedItem.thumbnail}" /> - </div> - </f:if> - <f:if condition="{feedItem.title}"> - <div class="sg-youtube-title"> - <h4 class="h4"> - {feedItem.title} - </h4> - </div> - </f:if> - <f:if condition="{feedItem.description}"> - <div class="sg-youtube-text"> - <f:format.crop maxCharacters="200">{feedItem.description}</f:format.crop> - </div> - </f:if> - </a> + <li class="sg-youtube-item-container"> + <a class="sg-youtube-item" href="{feedItem.url}"> + <f:if condition="{feedItem.thumbnail}"> + <div class="sg-youtube-image" style="background-image: url('{feedItem.thumbnail}');"></div> + </f:if> + <f:if condition="{feedItem.title}"> + <div class="sg-youtube-title"> + <h4 class="h4"> + {feedItem.title} + </h4> + </div> + </f:if> + <f:if condition="{feedItem.description}"> + <div class="sg-youtube-text"> + <f:format.crop maxCharacters="200">{feedItem.description}</f:format.crop> + </div> + </f:if> + </a> + </li> </f:for> - </div> + </ul> </f:section>