1<#if !entries?has_content>
2 <#if !themeDisplay.isSignedIn()>
3 ${renderRequest.setAttribute("PORTLET_CONFIGURATOR_VISIBILITY", true)}
4 </#if>
5
6 <div class="alert alert-info">
7 <@liferay_ui["message"] key="there-are-no-results" />
8 </div>
9</#if>
10
11<#assign nameInstancePublisher = randomNamespace />
12
13<section class="cards-cont${nameInstancePublisher}" id="cards-cont">
14
15<!---------------------- VARIABLES ------------------------>
16
17 <#list entries as entry>
18 <#assign docXml = saxReaderUtil.read(entry.getAssetRenderer().getArticle().getContentByLocale(locale)) />
19 <#assign viewURL = renderResponse.createRenderURL() />
20 <#assign urlimagenNode = docXml.valueOf("//dynamic-element[@name='IMAGEN']")/>
21 <#assign applyImage = docXml.valueOf("//dynamic-element[@name='APLICAIMAGEN']") />
22 <#assign video = docXml.valueOf("//dynamic-element[@name='VIDEO']/dynamic-content/text()") />
23 <#assign link = docXml.valueOf("//dynamic-element[@name='URLALTER']/dynamic-content/text()") />
24
25 <#assign titulo = docXml.valueOf("//dynamic-element[@name='TITULO']/dynamic-content/text()") />
26 <#assign fecha = docXml.valueOf("//dynamic-element[@name='FECHAINI']/dynamic-content/text()") />
27
28 <#assign contenido = docXml.valueOf("//dynamic-element[@name='RESUMEN']/dynamic-content/text()") />
29
30 <#assign valores = entry.getAssetRenderer().getArticle()/>
31
32 <#assign groupId = valores["groupId"]/>
33
34 <#assign name = valores["urlTitle"]/>
35
36 <#assign applyUrlAlter = docXml.valueOf("//dynamic-element[@name='APLIENLACEALTER']/dynamic-content/text()")/>
37
38 <#assign assetRenderer = entry.getAssetRenderer() />
39
40 <#assign viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, assetRenderer, entry, !stringUtil.equals(assetLinkBehavior, "showFullContent"))
41 />
42
43
44 <#if urlimagenNode?has_content>
45 <#assign urlimagenString = urlimagenNode?string />
46 <#assign urlimagen = urlimagenString?eval />
47 </#if>
48
49 <div class="card-info${nameInstancePublisher}" id="card-info">
50 <div class="card-img${nameInstancePublisher}" id="card-img">
51 <#if getterUtil.getBoolean(applyImage)>
52 <#if urlimagenNode?trim?length == 0>
53 <img alt="sin imagen" src="/recursosdb/20129/601896/img-publicador.jpg/46864a87-7600-fabb-dd44-e6ae5bed4c0e?t=1602176211106" title="${titulo}">
54 <#else>
55 <#if urlimagen.url?has_content>
56 <img alt="${urlimagen.alt}" src='${urlimagen.url}' title="${titulo}">
57 <#else>
58 <img alt='${urlimagen["alt"]}' src='/recursosdb/${urlimagen["groupId"]}/${urlimagen["classPK"]}/${urlimagen["name"]}/${urlimagen["uuid"]}' title="${titulo}">
59 </#if>
60 </#if>
61 </#if>
62 <#if assetRenderer.hasEditPermission(themeDisplay.getPermissionChecker())>
63 <#assign editPortletURL = assetRenderer.getURLEdit(renderRequest, renderResponse, windowStateFactory.getWindowState("NORMAL"), themeDisplay.getURLCurrent())!"" />
64 <#if validator.isNotNull(editPortletURL)>
65 <a class="editOptionmas" href="${editPortletURL.toString()}">Editar ✐</a>
66 </#if>
67 </#if>
68 </div>
69 <div class="card-txt${nameInstancePublisher}" id="card-txt">
70 <div class="card-lead${nameInstancePublisher}" id="card-lead">${fecha}</div>
71 <div class="card-title${nameInstancePublisher}" id="card-title">
72 <#if getterUtil.getBoolean(applyUrlAlter)>
73 <a class="link${nameInstancePublisher}" href="${link}" target="${video}">
74 ${titulo}
75 </a>
76 <#else>
77 <a class="link${nameInstancePublisher}" href="${viewURL}" target="_self">
78 ${titulo}
79 </a>
80 </#if>
81 </div>
82 <!--<div class="card-lead${nameInstancePublisher}" id="card-lead">${contenido}</div>
83 <div class="card-btn${nameInstancePublisher}" id="card-btn"></div>-->
84
85
86 </div>
87
88 </div>
89 </#list>
90
91</section>
92
93<script type="text/javascript">
94 /*
95const observerOptions = {
96 root: null,
97 rootMargin: '0px',
98 threshold: [0, 0.5] // Esto permite detectar tanto la entrada como la salida
99};
100
101const observer = new IntersectionObserver(entries => {
102 entries.forEach(entry => {
103 if (entry.isIntersecting) {
104 entry.target.classList.remove('hidden');
105 entry.target.classList.add('visible');
106 } else {
107 entry.target.classList.remove('visible');
108 entry.target.classList.add('hidden');
109 }
110 });
111}, observerOptions);
112
113const animatedElements = document.querySelectorAll('.card-info${nameInstancePublisher}');
114animatedElements.forEach(element => observer.observe(element));
115*/
116</script>
117
118<style>
119 /*
120.card-info${nameInstancePublisher} {
121 opacity: 0;
122 transform: translateX(100%);
123 transition: all 1s ease-out;
124}
125
126.card-info${nameInstancePublisher}.visible {
127 opacity: 1;
128 transform: translateX(0);
129}
130
131.card-info${nameInstancePublisher}.hidden {
132 opacity: 0;
133 transform: translateX(-100%);
134}
135*/
136</style>
137
138
139
140
141
142<!---------------------- ESTLOS BASICOS ------------------------>
143
144 <style>
145
146 .cards-cont${nameInstancePublisher} {
147 width: 100%;
148 display: flex;
149 justify-content: center;
150 flex-wrap: wrap;
151 gap: 30px;
152
153 }
154
155
156 .card-info${nameInstancePublisher} {
157 width: 100%;
158 max-width: 326px;
159 height: 350px;
160 /* margin: 15px; */
161 display: flex;
162 border-radius:20px;
163 align-content: center;
164 align-items: center;
165 flex-wrap: wrap;
166 overflow:hidden;
167 position:relative;
168 /*opacity:0;*/
169 }
170
171 .card-info${nameInstancePublisher}:hover {
172 width: 100%;
173 max-width: 326px;
174 height: 350px;
175 overflow:hidden;
176 /* margin: 15px; */
177 display: flex;
178 align-content: center;
179 align-items: center;
180 flex-wrap: wrap;
181 border-radius:20px;
182 }
183
184 .card-img${nameInstancePublisher} {
185 width: 100%;
186 height: 350px;
187 border-radius: 10px;
188 -webkit-box-shadow: 0px 1px 12px 2px rgb(0 0 0 / 47%);
189 box-shadow: 0px 1px 12px 2px rgb(0 0 0 / 47%);
190 box-sizing: border-box;
191 background-position: center;
192 background-size: cover;
193 -webkit-transition: all 500ms ease-in-out; // IE 9
194 -moz-transition: all 500ms ease-in-out; // Firefox
195 -ms-transition: all 500ms ease-in-out; // Safari and Chrome
196 -o-transition: all 500ms ease-in-out; // Opera
197 transition: all 500ms ease-in-out;
198 position:relative;
199 display:flex;
200 }
201
202 .card-info${nameInstancePublisher}:hover .card-img${nameInstancePublisher}{
203 width: 100%;
204 height: 350px;
205 border-radius: 10px;
206 box-sizing: border-box;
207 background-position: center;
208 background-size: cover;
209 overflow:hidden;
210 -moz-transform: scale(1.12);
211 -webkit-transform: scale(1.12);
212 -o-transform: scale(1.12);
213 -ms-transform: scale(1.12);
214 transform: scale(1.12);
215 }
216
217 .card-img${nameInstancePublisher} img{
218 vertical-align: middle;
219 border-style: none;
220 width: 100%;
221 height: 350px;
222 object-fit: cover;
223 object-position: center;
224 border-radius: 10px;
225 }
226
227 .card-txt${nameInstancePublisher} {
228 position: absolute;
229 display: flex;
230 padding: 20px;
231 color: #FFF;
232 opacity: 1;
233 transition: all 500msease-in-out;
234 width: 90%;
235 flex-wrap: wrap;
236 max-width: 100%;
237 bottom: 0px;
238 background-color: #000000a8;
239 overflow: hidden;
240 }
241
242
243 .card-title${nameInstancePublisher} {
244 font-family:var(--ppal-font);
245 font-size: 1rem;
246 transition: all 500ms ease-in-out;
247 width:100%;
248 text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
249 }
250 #card-title a{
251 color: #FFF !important;
252 font-family: var(--ppal-font) !important;
253 font-size: 1.2rem !important;
254 font-weight: 600 !important;
255 line-height: 1;
256 }
257
258 .card-lead${nameInstancePublisher} {
259 font-family: HelveticaLight;
260 font-size: 0.9rem;
261 transition: all 500ms ease-in-out;
262 }
263
264 .card-btn${nameInstancePublisher} {
265 padding: 5px;
266 font-family: HelveticaLight;
267 border: 1px solid #fff;
268 width: 30%;
269 font-size: 0.8rem;
270 margin-top: 10px;
271 display: flex;
272 border-radius: 10px;
273 text-align: center;
274 /* margin: 0 auto; */
275 /* align-content: center; */
276 justify-content: center;
277 cursor: pointer;
278 opacity: 1;
279 }
280
281 .card-info${nameInstancePublisher}:hover .card-btn${nameInstancePublisher}{
282 background-color:#FFF;
283 color:#494949;
284 }
285
286 .card-btn${nameInstancePublisher} a{
287 color:#FFF;
288 text-decoration:none;
289 }
290
291 .card-info${nameInstancePublisher}:hover .card-btn${nameInstancePublisher} a{
292 color:#494949;
293
294 }
295
296
297 .editOptionmas{
298 position: absolute;
299 background-color: #173268;
300 padding: 2px 5px;
301 color: #FFF;
302 font-family:HelveticaLight;
303 display:flex;
304 flex-wrap:nowrap;
305 width: 85px;
306 top:0px;
307 justify-content: center;
308 border-radius:10px 0px 10px 0px;
309 }
310
311 .editOptionmas:hover{
312 text-decoration:none;
313 color:#FFF;
314 font-family:HelveticaBold;
315 }
316
317 </style>
