1<#if entries?has_content>
2
3<div class="news">
4
5 <#list entries as curEntry>
6
7 <#assign assetRenderer = curEntry.getAssetRenderer() />
8 <#assign dateFormat = "yyyy MMMM dd" />
9 <#assign publishDate=dateUtil.getDate(curEntry.getPublishDate(),dateFormat,locate)/>
10
11 <#assign dateFormatFA = "yyyy MM dd" />
12 <#assign publishDateFA =dateUtil.getDate(curEntry.getPublishDate(),dateFormatFA,locate)/>
13
14
15 <<#if curEntry?is_first?c != "true" >a href="${assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse,curEntry,true)}" <#else>div</#if> class="new splide__slide" >
16
17 <#if !assetRenderer.getThumbnailPath(renderRequest)??>
18 <#assign imgSrc="${themeDisplay.getPathThemeImages()}/placeholder.jpg" />
19 <#else>
20 <#assign imgSrc=assetRenderer.getThumbnailPath(renderRequest) />
21 </#if>
22 <div
23 class="image"
24 style="background: url(${imgSrc}) center no-repeat; background-size: cover"
25 ></div>
26 <div class="contents">
27 <h4 class="title">
28 <#if curEntry?is_first?c == "true" >
29 ${stringUtil.shorten(htmlUtil.stripHtml(curEntry.getTitle(locale)), 152)}
30 <#else>
31 ${stringUtil.shorten(htmlUtil.stripHtml(curEntry.getTitle(locale)), 66)}
32 </#if>
33 </h4>
34 <p class="desc">
35
36 <#if curEntry?is_first?c == "true" >
37 ${stringUtil.shorten(htmlUtil.stripHtml(curEntry.getSummaryCurrentValue()), 400)}
38 <#else>
39 ${stringUtil.shorten(htmlUtil.stripHtml(curEntry.getSummaryCurrentValue()), 175)}
40 </#if>
41
42 </p>
43
44 <#if curEntry?is_first?c == "true" >
45 <a href="${assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse,curEntry,true)}" class="more" id="text-lang-1865">
46
47
48 <#if themeDisplay.getLocale() == "fa_IR">
49 ادامه خبر
50 <#elseif themeDisplay.getLocale() == "en_US">
51 More
52 </#if>
53
54
55 </a>
56 </#if>
57
58 <div class="date">
59 <i class="sh-icon-time"></i>
60 <p id="pDate-u-id-${curEntry?index}"></p>
61 <script>
62 var el = document.getElementById("pDate-u-id-${curEntry?index}");
63 if(document.getElementsByTagName("html")[0].getAttribute("dir") == "rtl"){
64 el.innerHTML =moment('${publishDateFA}', 'YYYY MM DD')
65 .locale('fa')
66 .format('D MMMM YYYY');
67 }else {
68 el.innerHTML ="${publishDate}";
69 }
70 el.setAttribute("id", "");
71 </script>
72 </div>
73 </div>
74
75
76 </<#if curEntry?is_first?c != "true" >a<#else>div</#if> >
77 </#list>
78
79 <div class="show-in-mobile news-splide splide">
80 <div class="splide__arrows">
81 <button class="splide__arrow splide__arrow--prev">
82 <img src="${themeDisplay.getPathThemeImages()}/b-prev.png" alt="" />
83 </button>
84 <button class="splide__arrow splide__arrow--next">
85 <img src="${themeDisplay.getPathThemeImages()}/b-next.png" alt="" />
86 </button>
87 </div>
88 <div class="splide__track">
89 <div class="splide__list">
90
91
92 <#list entries as curEntry>
93
94 <#assign assetRenderer = curEntry.getAssetRenderer() />
95 <#assign dateFormat2 = "yyyy MMMM dd" />
96 <#assign publishDate2=dateUtil.getDate(curEntry.getPublishDate(),dateFormat2,locate)/>
97
98 <#assign dateFormatFA2 = "yyyy MM dd" />
99 <#assign publishDateFA2=dateUtil.getDate(curEntry.getPublishDate(),dateFormatFA2,locate)/>
100
101 <a class="new splide__slide" href="${assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse,curEntry,true)}">
102
103 <#if !assetRenderer.getThumbnailPath(renderRequest)??>
104 <#assign imgSrc="${themeDisplay.getPathThemeImages()}/placeholder.jpg" />
105 <#else>
106 <#assign imgSrc=assetRenderer.getThumbnailPath(renderRequest) />
107 </#if>
108
109 <div
110 class="image"
111 style="background: url(${imgSrc}) center no-repeat; background-size: cover"
112 ></div>
113 <div class="contents">
114 <h4 class="title">
115 ${stringUtil.shorten(htmlUtil.stripHtml(curEntry.getTitle(locale)), 66)}
116 </h4>
117 <p class="desc">
118 ${stringUtil.shorten(htmlUtil.stripHtml(curEntry.getSummaryCurrentValue()), 161)}
119 </p>
120 <div class="more">Continue the news</div>
121 <div class="date"><i class="sh-icon-time"></i>
122 <p id="Uid-2-${curEntry?index}"></p>
123
124 </div>
125 <script>
126 var el = document.getElementById("Uid-2-${curEntry?index}");
127 if(document.getElementsByTagName("html")[0].getAttribute("dir") == "rtl"){
128 el.innerHTML = moment('${publishDateFA2}', 'YYYY MM DD')
129 .locale('fa')
130 .format('D MMMM YYYY');
131 }else {
132 el.innerHTML ="${publishDate2}";
133 }
134 el.setAttribute("id", "");
135 </script>
136 </div>
137 </a>
138 </#list>
139
140
141 </div>
142 </div>
143 </div>
144
145
146</div>
147
148
149<script>
150
151 new Splide(".news-splide", {
152 perPage: 1,
153 padding: "2em",
154 gap: "3.5em",
155 direction: document.getElementsByTagName("html")[0].getAttribute("dir"),
156 }).mount();
157
158</script>
159
160
161<style>
162
163.news .date {
164 display:flex;
165}
166.news .date p {
167 margin-bottom:0;
168}
169.news {
170 display: flex;
171 flex-wrap: wrap;
172 justify-content: space-between;
173 position: relative;
174}
175.news .news-splide {
176 display: none;
177 margin-top: 0em;
178 width: 100%;
179 max-width: 30.6em;
180 margin: auto;
181}
182.news .news-splide .splide__pagination {
183 display: none;
184}
185.news .news-splide .splide__arrows .splide__arrow {
186 opacity: 1;
187 background: transparent;
188 top: 17.8em;
189}
190.news .news-splide .splide__arrows .splide__arrow img {
191 width: 3em;
192 height: 2.8em;
193}
194.news .news-splide .splide__arrows .splide__arrow--prev {
195 left: 1em;
196}
197.news .news-splide .splide__arrows .splide__arrow--next {
198 right: 1em;
199}
200.news .news-splide .splide__track {
201 padding-top: 3em;
202 padding-bottom: 3em;
203}
204.news .news-splide .splide__track .splide__list .splide__slide {
205 background: #fff;
206 box-shadow: -0.4em 0.6em 0.6em rgba(0, 52, 89, 0.08);
207 border-radius: 1em;
208 overflow: hidden;
209 text-decoration: none;
210}
211.news .news-splide .splide__track .splide__list .splide__slide .image {
212 height: 15em;
213 width: 100%;
214}
215.news .news-splide .splide__track .splide__list .splide__slide .contents {
216 padding: 2em 1em 1em 1em;
217}
218.news .news-splide .splide__track .splide__list .splide__slide .contents .title {
219 color: #003459;
220 font-size: 1em;
221 line-height: 1.4em;
222 text-align: left;
223}
224.news .news-splide .splide__track .splide__list .splide__slide .contents .desc {
225 color: #545454;
226 font-size: 1em;
227 line-height: 1.4em;
228 text-align: left;
229}
230.news .news-splide .splide__track .splide__list .splide__slide .contents .date {
231 color: #ffc000;
232 font-size: 0.8em;
233 float: right;
234 margin-bottom: 1em;
235}
236.news .news-splide .splide__track .splide__list .splide__slide .contents .date i {
237 display: none;
238}
239.news .news-splide .splide__track .splide__list .splide__slide .contents .more {
240 display: none;
241}
242.news > div.new:first-of-type {
243 display: flex;
244 height: 23.5em;
245 border-radius: 1em;
246 position: relative;
247 overflow: hidden;
248 margin-top: 1.2em;
249 text-decoration: none;
250 width: 100%;
251}
252.news > div.new:first-of-type .image {
253 position: absolute;
254 top: 0;
255 left: 0;
256 right: 0;
257 bottom: 0;
258 z-index: 1;
259}
260.news > div.new:first-of-type:hover .contents {
261 background: rgba(0, 52, 89, 0.877);
262 top: 0%;
263}
264.news > div.new:first-of-type:hover .contents::before {
265 opacity: 0;
266}
267.news > div.new:first-of-type:hover .contents .date {
268 top: 2em;
269}
270.news > div.new:first-of-type:hover .contents .desc,
271.news > div.new:first-of-type:hover .contents .more {
272 opacity: 1;
273}
274.news > div.new:first-of-type .contents {
275 position: relative;
276 top: 60%;
277 z-index: 2;
278 padding: 3em;
279 display: flex;
280 flex-direction: column;
281 transition: all ease-in-out 0.4s;
282 width: 100%;
283 height: 100%;
284}
285.news > div.new:first-of-type .contents * {
286 z-index: 3;
287}
288.news > div.new:first-of-type .contents::before {
289 content: "";
290 position: absolute;
291 top: 0;
292 right: 0;
293 left: 0;
294 height: 100%;
295 background: linear-gradient(180deg, rgba(0, 52, 89, 0), rgba(0, 52, 89, 0.904), #003459, #003459);
296 z-index: 2;
297 opacity: 1;
298 transition: all ease-in-out 0.4s;
299}
300.news > div.new:first-of-type .contents .title {
301 color: #ffc000;
302 font-size: 1em;
303 margin-bottom: 0;
304 margin-top: 1.4em;
305 line-height: 1.5em;
306 text-align: left;
307}
308.news > div.new:first-of-type .contents .desc {
309 color: #fff;
310 font-size: 1em;
311 margin-top: 1em;
312 opacity: 0;
313 transition: all ease-in-out 0.4s;
314 text-align: left;
315}
316.news > div.new:first-of-type .contents .date {
317 position: absolute;
318 top: 8.5em;
319 right: 2em;
320 color: #fff;
321 font-size: 0.8em;
322 transition: all ease-in-out 0.4s;
323}
324
325.news > div.new:first-of-type .contents .date i {
326 position: relative;
327 top: 0.11em;
328 margin-right: 0.3em;
329}
330.news > div.new:first-of-type .contents .more {
331 background: #ffc000;
332 box-shadow: 0px 0.2em 0.2em rgba(0, 0, 0, 0.1);
333 border-radius: 0.8em;
334 color: #000;
335 font-size: 1em;
336 padding: 0.6em 1.5em;
337 width: max-content;
338 align-self: flex-end;
339 opacity: 0;
340 transition: all ease-in-out 0.4s;
341 text-decoration: none;
342}
343.news > a.new:nth-of-type(2),
344.news > a.new:nth-of-type(1) {
345 width: calc(50% - 1em);
346 margin-top: 1.5em;
347 display: block;
348 background: #fff;
349 box-shadow: -0.4em 0.6em 0.6em rgba(0, 52, 89, 0.08);
350 border-radius: 1em;
351 overflow: hidden;
352 text-decoration: none;
353}
354.news > a.new:nth-of-type(2) .image,
355.news > a.new:nth-of-type(1) .image {
356 height: 15em;
357 width: 100%;
358}
359.news > a.new:nth-of-type(2) .contents,
360.news > a.new:nth-of-type(1) .contents {
361 padding: 1em;
362}
363.news > a.new:nth-of-type(2) .contents .title,
364.news > a.new:nth-of-type(1) .contents .title {
365 color: #003459;
366 font-size: 1em;
367 line-height: 1.4em;
368 text-align: left;
369 height: 3.2em;
370 overflow: hidden;
371}
372.news > a.new:nth-of-type(2) .contents .desc,
373.news > a.new:nth-of-type(1) .contents .desc {
374 color: #545454;
375 font-size: 1em;
376 line-height: 1.4em;
377 text-align: left;
378 height: 7.9em;
379 overflow: hidden;
380}
381.news > a.new:nth-of-type(2) .contents .date,
382.news > a.new:nth-of-type(1) .contents .date {
383 color: #ffc000;
384 font-size: 0.8em;
385 float: right;
386 margin-bottom: 1em;
387}
388.news > a.new:nth-of-type(2) .contents .date i,
389.news > a.new:nth-of-type(1) .contents .date i,
390.news > a.new:nth-of-type(2) .contents .more,
391.news > a.new:nth-of-type(1) .contents .more {
392 display: none;
393}
394@media only screen and (max-width: 768px) {
395 .news {
396 font-size: 14px;
397 }
398}
399@media only screen and (max-width: 576px) {
400 .news {
401 font-size: 13px;
402 }
403 .news > .new {
404 display: none !important;
405 }
406 .news .news-splide {
407 display: block;
408 }
409}
410
411html.rtl .news .news-splide .splide__arrows .splide__arrow--prev {
412 right: unset;
413}
414html.rtl .news .news-splide .splide__arrows .splide__arrow--next {
415 left: 1em;
416}
417
418html.rtl .news .news-splide .splide__track .splide__list .splide__slide {
419 box-shadow: 0.4em 0.6em 0.6em rgba(0, 52, 89, 0.08);
420}
421
422html.rtl .news .news-splide .splide__track .splide__list .splide__slide .contents .title {
423 text-align: right;
424}
425html.rtl .news .news-splide .splide__track .splide__list .splide__slide .contents .desc {
426 text-align: right;
427}
428html.rtl .news .news-splide .splide__track .splide__list .splide__slide .contents .date {
429 float: left;
430}
431
432html.rtl .news > div.new:first-of-type .contents::before {
433 background: linear-gradient(-180deg, rgba(0, 52, 89, 0), rgba(0, 52, 89, 0.904), #003459, #003459);
434}
435html.rtl .news > div.new:first-of-type .contents .title {
436 text-align: right;
437}
438html.rtl .news > div.new:first-of-type .contents .desc {
439 text-align: right;
440}
441html.rtl .news > div.new:first-of-type .contents .date {
442 left: 2em;
443 right:unset;
444}
445html.rtl .news > div.new:first-of-type .contents .date i {
446 margin-left: 0.3em;
447}
448html.rtl .news > div.new:first-of-type .contents .more {
449 padding: 0.6em 1.5em;
450 align-self: flex-end;
451}
452html.rtl .news > a.new:nth-of-type(2), html.rtl .news > a.new:nth-of-type(1) {
453 box-shadow: 0.4em 0.6em 0.6em rgba(0, 52, 89, 0.08);
454}
455html.rtl .news > a.new:nth-of-type(2) .image, html.rtl .news > a.new:nth-of-type(1) .image {
456}
457html.rtl .news > a.new:nth-of-type(2) .contents .title, html.rtl .news > a.new:nth-of-type(1) .contents .title {
458 text-align: right;
459}
460html.rtl .news > a.new:nth-of-type(2) .contents .desc, html.rtl .news > a.new:nth-of-type(1) .contents .desc {
461
462 text-align: right;
463}
464html.rtl .news > a.new:nth-of-type(2) .contents .date, html.rtl .news > a.new:nth-of-type(1) .contents .date {
465
466 float: left;
467}
468</style>
469
470<#else>
471 <div class="alert alert-info text-center">
472 <@liferay_ui["message"] key="there-are-no-results" />
473 </div>
474</#if>
ادرس : همدان، پل پژوهش، بلوار شهید فهمیده، خیابان مردم
تلفن : 38411101-081
صندوق پستی :579-65155
