Index.html 4.03 KB
Newer Older
1
<f:layout name="Default"/>
Johannes Kreiner's avatar
Johannes Kreiner committed
2
3

<f:section name="main">
4
5
6
	<f:if condition="{debugOutput}">
		{debugOutput -> f:format.raw()}
	</f:if>
7

8
	<f:if condition="{response.kind} == 'youtube#playlistItemListResponse' && {feed -> f:count() > 0}">
9
10
		<f:then>
			<div class="sg-youtube-playlist">
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
				<f:if condition="{feed -> f:count()} == 1">
					<f:then>
						<ul class="sg-youtube">
							<li class="sg-youtube-item-container sg-youtube-item-single">
								<a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
									<f:if condition="{feed.0.thumbnail}">
										<div class="sg-youtube-image">
											<img src="{feed.0.thumbnail}" alt="{feed.0.title}"/>
										</div>
									</f:if>
									<f:if condition="{feed.0.title}">
										<div class="sg-youtube-title">
											<h3 class="h3">
												<f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
											</h3>
										</div>
									</f:if>
								</a>
							</li>
						</ul>
					</f:then>
					<f:else>
33
34
						<div class="sg-youtube">
							<div class="sg-youtube-item-container">
35
36
								<a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
									<f:if condition="{feed.0.thumbnail}">
37
										<div class="sg-youtube-image">
38
											<img src="{feed.0.thumbnail}" alt="{feed.0.title}"/>
39
40
										</div>
									</f:if>
41
									<f:if condition="{feed.0.title}">
42
43
										<div class="sg-youtube-title">
											<h3 class="h3">
44
												<f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
45
46
47
48
49
											</h3>
										</div>
									</f:if>
								</a>
							</div>
50
						</div>
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
						<ul class="sg-youtube">
							<f:for each="{feed}" as="feedItem" iteration="feedIterator">
								<f:if condition="!{feedIterator.isFirst}">
									<li class="sg-youtube-item-container sg-youtube-item-list">
										<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
											<f:if condition="{feedItem.thumbnail}">
												<div class="sg-youtube-image">
													<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
												</div>
											</f:if>
											<f:if condition="{feedItem.title}">
												<div class="sg-youtube-title">
													<h3 class="h3">
														<f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
													</h3>
												</div>
											</f:if>
										</a>
									</li>
70
								</f:if>
71
72
73
74
							</f:for>
						</ul>
					</f:else>
				</f:if>
75
76
77
78
79
80
			</div>
		</f:then>
		<f:else>
			<ul class="sg-youtube sg-youtube-default">
				<f:for each="{feed}" as="feedItem" iteration="feedIterator">
					<li class="sg-youtube-item-container{f:if(condition: '{feedIterator.total} < 2', then: ' sg-youtube-item-single')}">
81
						<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}" target="_blank" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
							<f:if condition="{feedItem.thumbnail}">
								<div class="sg-youtube-image">
									<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
								</div>
							</f:if>
							<f:if condition="{feedItem.title}">
								<div class="sg-youtube-title">
									<h3 class="h3">
										<f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
									</h3>
								</div>
							</f:if>
							<f:if condition="{feedItem.description}">
								<div class="sg-youtube-text">
									<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feedItem.description}</f:format.crop></f:format.htmlentitiesDecode>
								</div>
							</f:if>
						</a>
					</li>
				</f:for>
			</ul>
		</f:else>
	</f:if>
105
</f:section>