1<#-- ESTILOS EN EL TEMA 

2 

3<style> 

4	.destacadosContainer{ 

5		position: relative; 

6		width: 100%;  

7		padding-bottom: calc((100% - 40%) / (4 * 0.75)); -- padding-bottom: 20%; -- 

8		margin-top: 0; 

9		margin-bottom: 0; 

10		background: rgb(185,65,85); /* For browsers that do not support gradients */ 

11		background: -webkit-linear-gradient(90deg, rgb(169,66,118), rgb(198,64,57)); /* For Safari 5.1 to 6.0 */ 

12		background: -o-linear-gradient(90deg, rgb(169,66,118), rgb(198,64,57)); /* For Opera 11.1 to 12.0 */ 

13		background: -moz-linear-gradient(90deg, rgb(169,66,118), rgb(198,64,57)); /* For Firefox 3.6 to 15 */ 

14		background: linear-gradient(90deg, rgb(169,66,118), rgb(198,64,57)); /* Standard syntax */ 

15		bottom:-3px; 

16	} 

17	 

18	.destacados{ 

19		position: absolute; 

20		top: 0; bottom: 0; left: 0; right: 0; 

21		width: auto; 

22	} 

23		 

24	.partialWidth{  

25		margin-left: 20%; margin-right: 20%;  

26	} 

27	 

28	.destacados .elementoDestacado{ 

29		position: relative; 

30		float: left; 

31		width: 23%; 

32		height: 94%; 

33		margin: 1%; 

34	} 

35	 

36-------------------------- Primer Elemento -------------------------- 

37	.destacados .elementoDestacado .titulo{ 

38		position: relative; 

39		width: 100%; height: 76%; 

40		color: white; 

41		border: solid 3px white; 

42	} 

43	 

44	.destacados .elementoDestacado .calendEvent{ 

45		position: relative; 

46		width: 100%; height: 22%; 

47		margin-top: 2%; 

48		color: white; 

49		border: solid 3px white; 

50		cursor: pointer; 

51	} 

52 

53	.destacados .titulo .icon-star_empty{ 

54		position: absolute; 

55		top: 12%; 

56		margin-left: 12%; 

57		font-size: 4vw !important; 

58	} 

59	 

60	.destacados .titulo #tituloFirst{ 

61		position: absolute; 

62		width: 67%; 

63		top: 41%; 

64		margin: 0 21% 0 12%;		 

65		word-wrap: break-word; 

66		font-size: 2.7vw; 

67		font-weight: 800; 

68		line-height: 100%; 

69		text-transform: lowercase; 

70	} 

71	 

72	.destacados .elementoDestacado .calendEvent a{ 

73		color: white; 

74		text-decoration: none; 

75	} 

76	 

77	.destacados #firstElementDestadado .calendEvent span{ 

78		position: absolute; 

79		right: 0; top: 23%; 

80		font-size: 2vw; 

81		margin-right: 3%; 

82	} 

83 

84	.destacados #firstElementDestadado .calendEvent p{ 

85		position: relative; 

86		top: 7%; 

87		margin: 3% 19% 3% 3%; 

88		word-wrap: break-word; 

89		font-size: 1.3vw; 

90		font-weight: 800; 

91		line-height: 82%; 

92		text-transform: lowercase; 

93	} 

94	 

95-------------------------- El resto de elementos -------------------------- 

96	.elementoDestacado .capaHover{ 

97		position: relative; 

98		width: 100%; height: 100%; 

99	} 

100	 

101	.elementoDestacado a{ 

102		color: black; 

103		text-decoration: none;	 

104	} 

105 

106	.elementoDestacado .imagenEvent{ 

107		width: 100%; height: 100%; 

108	} 

109	 

110	.elementoDestacado .simboloEntrada{ 

111		position: absolute; 

112		bottom: 0; right: 0; 

113		height: 50px; width: 50px; 

114		z-index: 10 !important; 

115		border-bottom: 50px solid rgb(198,64,57); 

116		border-left: 50px solid transparent; 

117	} 

118 

119	.elementoDestacado .icon-ticket{ 

120		position: absolute; 

121		bottom: 0; right: 0; 

122		font-size: 23pt !important; 

123		color: white; 

124		z-index: 10 !important; 

125	} 

126	 

127	.destacados .elementoDestacado .fondoImag{ 

128		position: absolute; 

129		top: 0; left: 0; 

130		height: 100%; width: 100%; 

131	} 

132	 

133	.destacados .elementoDestacado .oculto{ 

134		display: none; 

135	} 

136		 

137	.destacados .elementoDestacado .imgWrap .textoEvento{ 

138		position: absolute; 

139		top: 5%; left: 5px; 

140	} 

141	.destacados .elementoDestacado .imgWrap .textoEvento .nombreEvento{ 

142		font-size: 1vw; 

143		font-weight: 700; 

144	}	 

145	.destacados .elementoDestacado .imgWrap .textoEvento p{ 

146		display: inline; 

147		background-color: white; 

148		 

149	} 

150	.destacados .elementoDestacado .imgWrap .simboloMas{ 

151		position: absolute; 

152		top: 50%; left: 50%; 

153		transform: translateX(-50%) translateY(-50%); 

154		color: white; 

155	}	 

156	.destacados .elementoDestacado .imgWrap .simboloMas span{ 

157		font-size: 4vw !important; 

158	} 

159 

160-------------------------- Comportamientos hover -------------------------- 

161 

162	.destacados .elementoDestacado .calendEvent:hover{ 

163		background-color: rgba(77,77,77,0.5); 

164	} 

165	 

166	.destacados .elementoDestacado .imgWrap{ 

167		position: relative; 

168		width: 100%; 

169		height: 100%; 

170		cursor: pointer; 

171	} 

172	 

173	.destacados .elementoDestacado .capaHover:hover .imgWrap:after{ 

174		background-color: rgba(77,77,77,0.7); 

175	} 

176	 

177	.destacados .elementoDestacado .capaHover:hover .imgWrap:after{ 

178		display: block; 

179		content: ""; 

180		position: absolute; 

181		top: 0;	bottom: 0; left: 0;	right: 0; 

182		border: solid 5px white; 

183	} 

184	 

185	 

186	.destacados .elementoDestacado:hover .simboloEntrada{ 

187		height: 65px; width: 65px; 

188		border-bottom: 65px solid rgb(198,64,57); 

189		border-left: 65px solid transparent; 

190		margin: 5px; 

191	} 

192	 

193	.destacados .elementoDestacado:hover .icon-ticket{ 

194		bottom: 5px; right: 5px;		 

195		font-size: 30pt !important; 

196	} 

197	 

198	.destacados .elementoDestacado:hover .oculto{ 

199		display: block; 

200		z-index: 1; 

201	} 

202	 

203 

204-------------------------- Responsive -------------------------- 

205	@media only screen and (max-width: 1200px) { 

206		.destacados .titulo #tituloFirst{ 

207			font-size: 2.7vw !important; 

208		} 

209	} 

210	 

211	@media only screen and (max-width: 991px){ 

212		.destacadosContainer{ 

213			padding-bottom: calc((100% - 20%) * 0.33); -- padding-bottom: 26%; -- 

214			margin-top: -8%; 

215			margin-bottom: -35px; 

216			 

217		} 

218		.destacados .titulo .icon-star_empty{ 

219			font-size: 6vw !important; 

220		} 

221		.destacados .titulo #tituloFirst{ 

222			font-size: 3.6vw !important; 

223		} 

224		.destacados #firstElementDestadado .calendEvent p{ 

225			font-size: 1.8vw !important; 

226		}		 

227		.destacados #firstElementDestadado .calendEvent span{ 

228    		top: 19%; 

229			font-size: 3vw !important; 

230		} 

231	} 

232	 

233	 

234	@media only screen and (max-width: 767px) { 

235		.destacadosContainer{ 

236			padding-bottom: calc((100% - 10%) / 0.75); -- padding-bottom: 120%; -- 

237			margin-top: -8%; 

238			margin-bottom: -40px; 

239		} 

240	 

241		.destacados .elementoDestacado{ 

242			width: 48%; 

243			height: 48.5%; 

244		} 

245	 

246		.destacados .titulo #tituloFirst{ 

247			font-size: 8.6vw !important; 

248		}	 

249		.destacados .titulo .icon-star_empty{ 

250			font-size: 12vw !important; 

251		}		 

252		.destacados #firstElementDestadado .calendEvent p{ 

253			font-size: 4vw !important; 

254		}		 

255		.destacados #firstElementDestadado .calendEvent span{ 

256    		font-size: 6vw !important; 

257		}		 

258		.destacados .elementoDestacado .imgWrap .simboloMas span { 

259			font-size: 14vw !important; 

260		}					 

261		.destacados .elementoDestacado .imgWrap .textoEvento .nombreEvento { 

262			font-size: 3.5vw; 

263			line-height: 4vw !important; 

264		} 

265	}	 

266		 

267		 

268	@media only screen and (max-width: 476px) { 

269		.destacadosContainer{ 

270			padding-bottom: calc(100% / 0.75); -- padding-bottom: 132%; -- 

271			margin-top:-36px; 

272		} 

273		.destacados .titulo #tituloFirst{ 

274			font-size: 9.5vw !important; 

275		} 

276		.destacados #firstElementDestadado .calendEvent p{ 

277			font-size: 4.5vw !important; 

278		}		 

279		.destacados #firstElementDestadado .calendEvent span{ 

280    		font-size: 8vw !important; 

281		} 

282	} 

283	 

284 

285	@media only screen and (max-width: 991px){ 

286		.partialWidth{ margin-left: 10%; margin-right: 10%; } 

287	} 

288	@media only screen and (max-width: 767px){ 

289		.partialWidth{ margin-left: 5%; margin-right: 5%; }	 

290	} 

291	@media only screen and (max-width: 476px){ 

292		.partialWidth{ margin-left: 0; margin-right: 0; } 

293	} 

294	 

295</style> 

296 

297--> 

298 

299 

300 

301		 

302<#if entries?has_content> 

303 

304	<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")> 

305	 

306	<#assign destacamos = journalArticleLocalService.getLatestArticle(90341).getDescription(locale)/> 

307	<#assign irACalendarioDeEventos = journalArticleLocalService.getLatestArticle(90353).getDescription(locale)/> 

308	 

309	<#assign count = 0> 

310 

311	<div class="destacadosContainer"> 

312	<div class="destacados partialWidth"> 

313		<div id="firstElementDestadado" class="elementoDestacado"> 

314			<div class="titulo"> 

315				<span class="icon-star_empty"></span> 

316				<#if locale != "fr_FR"> 

317					<p id="tituloFirst" class="titulo-faimilia-nunito">${destacamos[0..4]} ${destacamos[5..]}</p> 

318				<#else> 

319					 

320					<p id="tituloFirst" class="titulo-faimilia-nunito">${destacamos[0..5]} ${destacamos[6..]}</p> 

321				</#if> 

322			</div> 

323			<div class="calendEvent"> 

324				<a href="/calendario-de-eventos"> 

325				<p>${irACalendarioDeEventos}</p> 

326				<span class="icon-calendar"></span> 

327				</a> 

328			</div> 

329		</div> 

330 

331		<#list entries as curEntry>	 

332			<#assign viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, curEntry, true) />	 

333			 

334			<#assign classPK = curEntry.getClassPK()>	<#--Obtenemos la clave primaria (Primary Key) del correspondiente asset a mostrar--> 

335			<#assign article = journalArticleLocalService.getLatestArticle(classPK)>  

336			 

337			 

338			<#-- 

339			<#assign listLang = article.getAvailableLanguageIds()>		 

340			<#assign appearLang = false> 

341			<#list listLang as language> 

342				<#if language == locale.toString()> 

343					<#assign appearLang = true> 

344				</#if> 

345			</#list> 

346 

347			<#if appearLang> 

348				<#assign document = saxReaderUtil.read(article.getContentByLocale('${themeDisplay.getLocale()}'))> 

349			<#else> 

350				<#assign document = saxReaderUtil.read(article.getContentByLocale(article.getDefaultLanguageId()))> 

351			</#if> 

352			--> 

353			 

354			 

355			<#assign document = saxReaderUtil.read(article.getContent())> 

356			<#assign rootElement = document.getRootElement()>	 

357			 

358			<#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='Titulo']")> 

359			<#assign titulo = xPathSelector.selectSingleNode(rootElement).getStringValue()?trim> 

360			 

361			<#-- La imagen que recogemos es siempre la imagen añadida con el idioma por defecto. Si no lo hacemos así, error. --> 

362			<#assign documentImg = saxReaderUtil.read(article.getContentByLocale(article.getDefaultLanguageId()))> 

363			<#assign rootElementImg = documentImg.getRootElement()>  

364			<#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='Imagen']")> 

365			<#assign image = xPathSelector.selectSingleNode(rootElementImg).getStringValue()?trim> 

366			 

367			<#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='EnlaceEvento']")> 

368			<#assign enlaceEvento = xPathSelector.selectSingleNode(rootElement).getStringValue()?trim> 

369			 

370			 

371			 

372			<#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='Venta']")> 

373			<#assign venta = xPathSelector.selectSingleNode(rootElement).getStringValue()?trim> 

374 

375			<#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='EnlaceVentaDeTickets']")> 

376			<#assign enlaceVenta = xPathSelector.selectSingleNode(rootElement).getStringValue()?trim>  

377			 

378			<#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='FechaFin']")> 

379			<#assign fechaFin = xPathSelector.selectSingleNode(rootElement).getStringValue()?trim>  

380			 

381			<#-- <#assign fechaFinFormat = fechaFin?date.xs?string["yyyyMMdd"]?number> 

382			<#assign fechaActual = .now?date?string["yyyyMMdd"]?number> --> 

383					   

384 

385			 

386			<#-- <#if fechaFinFormat gte fechaActual && count lte 2>	-->	 

387			 

388			<#if count lte 2> 

389				<div class="elementoDestacado"> <#-- -->		 

390					<div class="capaHover"> 

391						<#if enlaceEvento == ""> 

392							<a href="${viewURL}"> 

393						<#else> 

394							<a href="${enlaceEvento?ensure_starts_with('http://')}" target="_blank"> 

395						</#if> 

396						<div class="imgWrap"> 

397							<img class="imagenEvent lazyImagen" alt="No hay imagen disponible de este evento" data-src="${image}"/> 

398							 

399							 

400							<div class="textoEvento oculto"> 

401								<p class="nombreEvento">${titulo}</p> 

402							</div> 

403							<div class="simboloMas oculto"> 

404									<span class="icon-plus"></span> 

405							</div>	 

406						</div> 

407						</a> 

408						 

409						<#if venta[2..3] == "si"> 

410						<div class="simboloEntrada"> 

411						</div> 

412						<a href="${enlaceVenta}" target="_blank"><span class="icon-ticket"></span></a> 

413						</#if> 

414					</div> 

415				</div> 

416				<#assign count++> 

417			<#else> 

418				<#break> 

419			</#if> 

420			 

421		</#list> 

422 

423	</div> 

424	</div> 

425</#if>