Título
Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Um erro ocorreu enquanto processava o modelo.
The following has evaluated to null or missing:
==> categoryDates.parentTaxonomyVocabulary [in template "20099#20135#11049244" at line 77, column 6]
----
Tip: It's the step after the last dot that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #if categoryDates.parentTaxonomyVocab... [in template "20099#20135#11049244" at line 77, column 1]
----
1<#--
2Widget templates can be used to modify the look of a
3specific application.
4
5Please use the right panel to quickly add commonly used variables.
6Autocomplete is also available and can be invoked by typing "${".
7-->
8
9<#-- Conteúdo Web -> Templates: Funções gerais -->
10<#include "${templatesPath}/1975398" />
11
12
13<#-- Liferay Services -->
14<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
15<#assign fileEntryService = staticUtil["com.liferay.document.library.kernel.service.DLFileEntryLocalServiceUtil"] />
16<#assign layoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService")>
17<#assign assetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService") />
18<#assign assetVocabularyService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyService") />
19<#assign assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") />
20<#assign layout = layoutLocalService.getLayout(themeDisplay.getPlid())>
21<#assign vocabularies = assetVocabularyService.getGroupVocabularies(groupId) />
22
23<#assign ourEnergyVocabulary = findVocabulary("Nossa Energia", vocabularies)/>
24<#assign typeOfNewsVocabulary = findVocabulary("Tipo de Notícia", vocabularies )/>
25
26<#--
27 typeOfNewsVocabulary - category ids:
28 10720344 - Artigo
29 10720341 - Infográfico
30-->
31
32<#assign category = "" />
33<#assign categoryName = "" >
34<#if locale?lower_case == 'pt_br'>
35 <#assign categoryName = "Todos" >
36<#else>
37 <#assign categoryName = "All" >
38</#if>
39
40<#if request.getParameter("category")?? && request.getParameter("category")?has_content>
41 <#assign categoryId = request.getParameter("category")?number>
42 <#if categoryId?? && categoryId?has_content>
43 <#assign category = assetCategoryLocalService.getCategory(categoryId) />
44 <#assign categoryName = category.getTitle(locale) />
45 </#if>
46</#if>
47
48
49<#if categoryId?? && categoryId?has_content>
50 <#attempt>
51 <#assign categoryDates = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-categories/${categoryId}")>
52 <#recover>
53 <#assign categoryDates = { "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}>
54 </#attempt>
55<#else>
56 <#assign categoryDates = { "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}>
57</#if>
58
59
60<#assign categoryPage = getFirstCategoryOfVocabularyInPage(layout, ourEnergyVocabulary) />
61<#if categoryPage?? && categoryPage?has_content>
62 <#assign categoryName = categoryPage.getTitle(locale) />
63 <#assign categoryId = categoryPage.getCategoryId() />
64 <#assign category = categoryPage />
65 <script>
66 if (!window.location.search.includes('category') && !document.body.classList.contains("has-edit-mode-menu")) {
67 // Redirecionar para uma nova URL
68 const url = new URL(window.location.href);
69 url.searchParams.set('category', "${categoryId}");
70 url.searchParams.set('sort', "createDate-");
71 window.location.href = url.toString();
72 }
73 </script>
74</#if>
75
76
77<#if categoryDates.parentTaxonomyVocabulary.name="Nossa Energia">
78 <#attempt>
79 <#assign ourEnergyStyles = [] />
80 <#assign shadowColorCategory = "" />
81 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor da Sombra")??)>
82 <#assign categoryShadowColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor da Sombra") />
83 <#assign shadowColorCategory = categoryShadowColorByService.value />
84 </#if>
85
86 <#assign backgroundColorCategory = "" />
87 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor de Fundo")??)>
88 <#assign categoryBackgroundColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor de Fundo") />
89 <#assign backgroundColorCategory = categoryBackgroundColorByService.value />
90 </#if>
91
92 <#assign textColorCategory = "" />
93 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto")??)>
94 <#assign categoryTextColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto") />
95 <#assign textColorCategory = categoryTextColorByService.value />
96 </#if>
97
98 <#assign textColorHighContrastCategory = "" />
99 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto em Alto Contraste")??)>
100 <#assign categoryTextColorHighContrastByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto em Alto Contraste") />
101 <#assign textColorHighContrastCategory = categoryTextColorHighContrastByService.value />
102 </#if>
103
104 <#assign ourEnergyStyles = [{"titleLocale": category.getTitle(locale),"shadowColor": shadowColorCategory, "backgroundColor": backgroundColorCategory, "textColor": textColorCategory, "textColorHighContrast": textColorHighContrastCategory}] />
105
106 <#recover>
107 <#assign ourEnergyStyles = [{"titleLocale": "Nenhum", "shadowColor": "000", "backgroundColor": "000", "textColor": "FFF", "textColorHighContrast": "FFF"}] />
108
109 </#attempt>
110
111</#if>
112
113
114<#-- Root Css -> Para poder instanciar dois elementos e não dar confusão no JS -->
115<#assign contentNumber = randomNumber(4586) />
116<#assign rootCss = "results-list-category-container_" + randomNumber(4586) />
117
118<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article -->
119<#function getFirstCategoryOfVocabulary journalArticle vocabulary >
120 <#attempt>
121 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) />
122
123 <#list categories as category>
124 <#if vocabulary.getVocabularyId() == category.getVocabularyId()>
125 <#return category.getTitle(locale)>
126 </#if>
127 </#list>
128
129 <#return "">
130
131 <#recover>
132 <#return "" />
133 </#attempt>
134
135</#function>
136
137<#function getFirstCategoryOfVocabularyInPage layout vocabulary >
138 <#attempt>
139 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.portal.kernel.model.Layout", layout.getPlid()) />
140
141 <#list categories as category>
142 <#if vocabulary.getVocabularyId() == category.getVocabularyId()>
143 <#return category>
144 </#if>
145 </#list>
146
147 <#return "">
148
149 <#recover>
150 <#return "" />
151 </#attempt>
152
153</#function>
154
155<#-- Função para obter os dados de um card no Web Content (Journal Article) -->
156<#function getDataForCard entry >
157 <#attempt>
158 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entry.getClassPK()) />
159 <#assign ddmStructure = journalArticle.getDDMStructure() />
160 <#assign fieldList = getFieldListByStructure(ddmStructure) />
161 <#assign xmlArticle = journalArticle.getDocument().getRootElement() />
162
163 <#-- Tentando pegar Imagem -->
164 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) />
165 <#assign media = "" />
166 <#list mediasGroup as mediaGroup >
167 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) />
168
169 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${media.fileEntryId}") />
170
171 <#assign urlAdaptativeMedia = ""/>
172 <#if media.url?? && media.url?has_content >
173 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages />
174 <#list dataAdaptativeMedia as data>
175 <#if data.resolutionName == "Preview-1000x0">
176 <#assign urlAdaptativeMedia = data.contentUrl/>
177 </#if>
178 </#list>
179 </#if>
180
181 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "imageFileEntryId": media.fileEntryId, "urlAdaptativeMedia": urlAdaptativeMedia} />
182
183 <#-- Se não tiver imagem, tentar pegar vídeo -->
184 <#if !media.imageSrc?? || !media.imageSrc?has_content>
185 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") />
186 <#if youtubeID?? && youtubeID?has_content>
187 <#assign media = {"videoYotubeID": youtubeID} />
188 <#else>
189 <#-- Tentar pegar vídeo Interno -->
190 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) />
191 <#if internalVideo?? && internalVideo?has_content>
192 <#assign media = {"internalVideo": internalVideo} />
193 </#if>
194 </#if>
195 </#if>
196 </#list>
197
198 <#assign title = getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia") />
199
200 <#assign timeRead = getFieldValue(fieldList, xmlArticle, "Tempo de Leitura") />
201
202 <#assign typeOfNews = getFirstCategoryOfVocabulary(entry, typeOfNewsVocabulary) />
203
204 <#assign ourEnergy = getFirstCategoryOfVocabulary(entry, ourEnergyVocabulary) />
205
206 <#if themeDisplay.getPortalURL()?contains("webserver")>
207 <#assign urlNews = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + journalArticle.getUrlTitle()>
208 <#else>
209 <#assign urlNews = themeDisplay.getPortalURL() + "/w/" + journalArticle.getUrlTitle()>
210 </#if>
211
212 <#if !urlNews?has_content >
213 <#assign urlNews = "" >
214 </#if>
215
216 <#assign cardData = {"media": media, "title": title, "timeRead": timeRead, "typeOfNews": typeOfNews, "ourEnergy": ourEnergy, "urlNews": urlNews} />
217
218 <#return cardData>
219
220 <#recover>
221 <#return {"media": "", "title": "", "timeRead": "", "typeOfNews": "", "ourEnergy": "", "urlNews": ""} />
222 </#attempt>
223
224 <#-- cardData -> image: url, alt
225 title
226 timeRead
227 ourEnergyCategory
228 typeOfNews
229 urlNews
230 -->
231</#function>
232
233<#macro renderCard cardData>
234 <#-- cardData -> image: url, alt
235 title
236 timeRead
237 ourEnergyCategory
238 typeOfNews
239 urlNews
240 -->
241 <div class="card-news-container">
242 <div class="overlay-card-highlight"> </div>
243 <svg class="graphism-card-highlight" width="632" height="226" viewBox="0 0 632 226" fill="none" xmlns="http://www.w3.org/2000/svg">
244 <g style="mix-blend-mode:multiply" opacity="0.5">
245 <path d="M632 226L16 226C7.16345 226 0 218.837 0 210V0L516.247 42.7231C527.012 43.6139 536.601 49.8754 541.745 59.3732L632 226Z" fill="#00552A"/>
246 </g>
247 </svg>
248
249 <a class="card-category-link card-link" href="${cardData.urlNews}" style="display: none;"> ${cardData.title} </a>
250
251 <div class="card-news-thumb">
252 <#assign noImage = "" />
253 <#if cardData.media?? && cardData.media?has_content>
254 <#if cardData.media.imageSrc?? && cardData.media.imageSrc?has_content>
255 <#assign imageSrc = cardData.media.imageSrc />
256 <#if cardData.media.urlAdaptativeMedia?? && cardData.media.urlAdaptativeMedia?has_content>
257 <#assign imageSrc = cardData.media.urlAdaptativeMedia />
258 </#if>
259
260 <img class="card-news-image" src="${imageSrc}" alt="${cardData.media.imageAlt}"/>
261
262 <#else>
263 <#if cardData.media.videoYotubeID?? && cardData.media.videoYotubeID?has_content>
264 <img class="card-news-image" src="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/maxresdefault.jpg" alt="YouTube Thumbnail"/>
265 <#else>
266 <#if (cardData.media.internalVideo?? && cardData.media.internalVideo.url?has_content) >
267 <video class="card-news-image">
268 <source src="${cardData.media.internalVideo.url}">
269 Your browser does not support the video tag.
270 </video>
271 <#else>
272 <#assign noImage = "no-image" />
273 </#if>
274 </#if>
275 </#if>
276 </#if>
277 </div>
278
279 <div class="card-news-category-container ${noImage}">
280 <div data-category="${categoryName}" class="card-news-category paragraph-micro-regular"> ${categoryName} </div>
281 </div>
282
283 <div class="card-news-text-content ${noImage}">
284 <div class="card-news-title h4"> ${cardData.title} </div>
285
286 <div class="card-news-info">
287 <div class="card-news-type">
288 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
289 <path d="M6.25 7.5H13.75M6.25 10H13.75M6.25 12.5H13.75M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z" stroke="#959595" stroke-linecap="round" stroke-linejoin="round"/>
290 </svg>
291 <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div>
292 </div>
293 <#if cardData.timeRead?? && cardData.timeRead?has_content>
294 <div class="card-news-time-read">
295 <svg class="card-news-icon-time-read" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
296 <path d="M10.5 5.625C10.5 5.34886 10.2761 5.125 10 5.125C9.72386 5.125 9.5 5.34886 9.5 5.625H10.5ZM10 10H9.5C9.5 10.2761 9.72386 10.5 10 10.5V10ZM14.375 10.5C14.6511 10.5 14.875 10.2761 14.875 10C14.875 9.72386 14.6511 9.5 14.375 9.5V10.5ZM17 10C17 13.866 13.866 17 10 17V18C14.4183 18 18 14.4183 18 10H17ZM10 17C6.13401 17 3 13.866 3 10H2C2 14.4183 5.58172 18 10 18V17ZM3 10C3 6.13401 6.13401 3 10 3V2C5.58172 2 2 5.58172 2 10H3ZM10 3C13.866 3 17 6.13401 17 10H18C18 5.58172 14.4183 2 10 2V3ZM9.5 5.625V10H10.5V5.625H9.5ZM10 10.5H14.375V9.5H10V10.5Z" fill="#959595"/>
297 </svg>
298 <div class="card-news-time-read-text paragraph-micro-regular">${cardData.timeRead} min</div>
299 </div>
300 </#if>
301 </div>
302 </div>
303 </div>
304
305</#macro>
306
307
308<#if entries?has_content>
309
310 <div class="${rootCss}">
311 <div class="results-category-title fragment_85017">
312 <div class="petro-title">
313 <h2 id="title" class="display-sm" >
314 ${categoryName}
315 </h2>
316 <div class="yellow-bar bar-display-sm"></div>
317 </div>
318 </div>
319 <div class="card-news-list-background"> </div>
320
321 <div class="card-news-list-breakpoint breakpoint">
322
323 <div class="results-quantity-filter-container col-1-11 md-col-1-8 sm-col-1-4">
324 <span class="quantify-results-text paragraph-sm-regular">
325 <#if locale?lower_case == "pt_br">
326 <#if searchContainer.getTotal() == 0>
327 Poxa! Sua busca não encontrou nenhum resultado
328 <#else>
329 Foram encontrados<span class="quantify-results-text-number paragraph-sm-bold"> ${searchContainer.getTotal()}</span> conteúdos
330 </#if>
331 <#else>
332 <#if searchContainer.getTotal() == 0>
333 Wow! Your search did not return any results
334 <#else>
335 Found<span class="quantify-results-text-number paragraph-sm-bold"> ${searchContainer.getTotal()}</span> contents
336 </#if>
337 </#if>
338 </span>
339 <div class="order-container">
340 <span class="paragraph-sm-regular">
341 <#if locale?lower_case == 'pt_br'>
342 Ordenar por:
343 <#else>
344 Order by:
345 </#if>
346 </span>
347 <select name="ordenação" id="select-order">
348 <option class="paragraph-sm-regular" value="createDate-">
349 <#if locale?lower_case == 'pt_br'>
350 Mais recentes
351 <#else>
352 Recents
353 </#if>
354 </option>
355 <option class="paragraph-sm-regular" value="createDate%2B">
356 <#if locale?lower_case == 'pt_br'>
357 Mais antigos
358 <#else>
359 Olders
360 </#if>
361 </option>
362 </select>
363 </div>
364
365 <#-- <br>
366 <#if searchContainer.getTotal() gt 0>
367 <div>
368 <label for="select-type">
369 <#if locale?lower_case == 'pt_br'>
370 Tipo:
371 <#else>
372 Type:
373 </#if>
374 </label>
375 <select id="select-type">
376 <option>
377 <#if locale?lower_case == 'pt_br'>
378 Todos
379 <#else>
380 All
381 </#if>
382 </option>
383 <#list typeOfNewsVocabulary.getCategories() as type>
384 <option> ${type.getTitle(locale)}</option>
385 </#list>
386 </select>
387 </div>
388 </#if -->
389 </div>
390
391 <div class="card-news-list col-1-12 md-col-1-8 sm-col-1-4">
392 <#if entries?has_content>
393 <#list entries as entry>
394 <#assign cardData = getDataForCard(entry) />
395 <@renderCard cardData/>
396 </#list>
397 </#if>
398 </div>
399 </div>
400 </div>
401</#if>
402
403<#if ourEnergyStyles?? >
404 <#list ourEnergyStyles as ourEnergyStyle>
405 <style>
406 .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] {
407 <#if ourEnergyStyle.backgroundColor?? && ourEnergyStyle.backgroundColor?has_content>
408 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 0%, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 100%), #${ourEnergyStyle.backgroundColor} !important;
409 </#if>
410 box-shadow: 0px 2px 6px 0px #${ourEnergyStyle.shadowColor} !important;
411 color: #${ourEnergyStyle.textColor} !important;
412 }
413
414 body.high-contrast-active .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] {
415 <#if ourEnergyStyle.backgroundColor?? && ourEnergyStyle.backgroundColor?has_content>
416 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(55, 55, 55, 1)) 0%, var(--background-surface-opacity-light-level-07, rgba(55, 55, 55, 1)) 100%), #${ourEnergyStyle.backgroundColor} !important;
417 </#if>
418 color: #${ourEnergyStyle.textColorHighContrast} !important;
419 }
420
421 </style>
422 </#list>
423
424
425</#if>
426
427
428<style>
429
430 .${rootCss} .results-category-title {
431 background: var(--background-surface-level-02, #F8F8F8);
432 display: flex;
433 width: 100%;
434 padding: var(--spacing-space-xl, 40px) var(--spacing-space-big, 72px);
435 flex-direction: column;
436 align-items: center;
437 }
438
439 .${rootCss} .results-category-title .petro-title {
440 width: 100%;
441 max-width: 1440px;
442 margin: 0 var(--space-big);
443 }
444
445 .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-display-sm {
446 background-color: var(--text-secondary-accent, #FDC82F);
447 }
448
449 .${rootCss} .results-quantity-filter-container .order-container {
450 display: none;
451 flex-direction: column;
452 gap: var(--spacing-space-xxs, 8px);
453 }
454
455 .${rootCss} .results-quantity-filter-container .order-container.active {
456 display: flex;
457 }
458
459 .${rootCss} .results-quantity-filter-container .order-container #select-order {
460 display: flex;
461 padding: var(--spacing-space-xxs, 8px) var(--spacing-space-xl, 40px) var(--spacing-space-xxs, 8px) var(--spacing-space-sm, 16px);
462 align-items: center;
463 gap: var(--spacing-space-md, 24px);
464 align-self: stretch;
465 border-radius: var(--border-radius-lg, 16px);
466 border: 1px solid var(--border-color-light);
467 appearance: none;
468 -webkit-appearance: none;
469 -moz-appearance: none;
470 background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTMgNkw4IDExTDMgNiIgc3Ryb2tlPSIjNTI1MjUyIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+);
471 background-repeat: no-repeat;
472 background-position: 95%;
473 }
474
475
476 body.high-contrast-active .${rootCss} .results-quantity-filter-container .order-container #select-order {
477 background: transparent;
478 background-image: url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M13 6L8 11L3 6" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
479 background-repeat: no-repeat;
480 background-position: 95%
481 }
482
483
484 body.high-contrast-active .${rootCss} .results-quantity-filter-container .order-container #select-order option {
485 background-color: var(--color-neutral-900);
486 }
487
488 /* renderCard */
489 .${rootCss} .card-news-list {
490 display: none;
491 flex-wrap: wrap;
492 gap: var(--space-lg);
493 width: 100%;
494 justify-content: flex-start;
495 }
496
497 .${rootCss} .card-news-list.active {
498 display: flex;
499 }
500
501 .${rootCss} .card-news-container {
502 width: 300px;
503 height: 370px;
504 display: flex;
505 flex-direction: column;
506 flex-shrink: 0;
507 align-items: flex-start;
508 border-radius: var(--border-radius-lg);
509 border: var(--border-width-hairline) solid var(--border-card-default, #EEE);
510 background: var(--background-surface-level-01, #FFF);
511 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
512 overflow: hidden;
513 scroll-snap-align: start;
514 cursor: pointer;
515 transition: border 300ms ease-in-out;
516 text-decoration: none;
517 position: relative;
518 }
519
520 body.high-contrast-active .${rootCss} .card-news-container {
521 border: var(--border-width-hairline) solid var(--border-card-default, #525252);
522 background: var(--background-surface-level-01, #010101);
523 }
524
525 .${rootCss} .card-news-container:hover {
526 border: var(--border-width-hairline) solid rgb(0, 133, 66);
527 }
528
529 body.high-contrast-active .${rootCss} .card-news-container:hover {
530 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8);
531 }
532
533 .${rootCss} .card-news-container .card-news-link {
534 position: absolute;
535 top: 0;
536 width: 100%;
537 height: 100%;
538 z-index: 3;
539 }
540
541 .${rootCss} .card-news-container .card-news-thumb {
542 position: relative;
543 width: 100%;
544 pointer-events: none;
545 }
546
547 .${rootCss} .card-news-container .card-news-image {
548 width: 100%;
549 height: 168px;
550 object-fit: cover;
551 pointer-events: none;
552 }
553
554 .${rootCss} .card-news-container .card-news-category-container {
555 position: relative;
556 }
557
558 .${rootCss} .card-news-container .card-news-category-container .card-news-category {
559 display: flex;
560 justify-content: center;
561 align-items: center;
562 padding: var(--space-micro) var(--space-xs);
563 position: absolute;
564 z-index: 2;
565 left: var(--space-md);
566 top: -13px;
567 border-radius: var(--border-radius-pill);
568 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 0%, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 100%), var(--default-sup-green-water, #006B65);
569 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10);
570 line-height: var(--line-height-lg, 144%);
571 color: var(--default-sup-green-water, #006B65);
572 white-space: nowrap;
573 pointer-events: none;
574 }
575
576 body.high-contrast-active .${rootCss} .card-news-container .card-news-category-container .card-news-category {
577 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, #373737) 0%, var(--background-surface-opacity-light-level-07, #373737) 100%), var(--default-sup-green-water, #99E0DD);
578 color: var(--default-sup-green-water, #99E0DD);
579 }
580
581 .${rootCss} .card-news-container .card-news-category-container.no-image .card-news-category {
582 position: relative;
583 top: 0;
584 left: 0;
585 margin-left: var(--space-md);
586 margin-top: var(--space-md);
587 }
588
589 .${rootCss} .card-news-container .card-news-text-content {
590 display: flex;
591 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px);
592 flex-direction: column;
593 justify-content: space-between;
594 align-items: flex-start;
595 flex: 1 0 0;
596 align-self: stretch;
597 z-index: 1;
598 pointer-events: none;
599 }
600
601 .${rootCss} .card-news-container .card-news-text-content.no-image {
602 padding-top: var(--space-sm);
603 }
604
605 .${rootCss} .card-news-container .card-news-text-content .card-news-title {
606 display: -webkit-box;
607 -webkit-box-orient: vertical;
608 -webkit-line-clamp: 4;
609 align-self: stretch;
610 overflow: hidden;
611 color: var(--text-primary-default, #373737);
612 text-overflow: ellipsis;
613 margin: 0;
614 }
615
616 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-title {
617 color: var(--text-primary-default, #FFF);
618 }
619
620 .${rootCss} .card-news-container .card-news-text-content .card-news-info {
621 display: flex;
622 align-items: center;
623 align-content: center;
624 gap: var(--space-sm, 16px);
625 align-self: stretch;
626 flex-wrap: wrap;
627 }
628
629 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type,
630 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read {
631 display: flex;
632 align-items: center;
633 gap: var(--space-xxs, 8px);
634 }
635
636 body.high-contrast-active .${rootCss} .results-category-title {
637 background: var(--background-surface-level-02, #373737) !important;
638 }
639
640 body.high-contrast-active .${rootCss} .results-category-title .petro-title {
641 color: var(--text-primary-default, #FFF) !important;
642 }
643
644 body.high-contrast-active .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-display-sm {
645 background-color: var(--text-secondary-accent, #FFEEB3);
646 }
647
648 .${rootCss} .card-news-list .card-news-container .overlay-card-highlight {
649 display: none;
650 }
651
652 .${rootCss} .card-news-list .card-news-container .graphism-card-highlight {
653 display: none;
654 }
655
656 /* Card Highlights */
657 .${rootCss} .card-news-list .card-news-container.card-highlights {
658 width: 632px;
659 height: 360px;
660 justify-content: flex-end;
661 }
662
663 .${rootCss} .card-news-list .card-news-container.card-highlights .overlay-card-highlight {
664 display: block;
665 position: absolute;
666 top: 0;
667 left: 0;
668 width: 100%;
669 height: 100%;
670 background: linear-gradient(190deg, rgba(13, 19, 16, 0.00) 27.69%, rgba(13, 19, 16, 0.94) 63.29%);
671 z-index: 1;
672 opacity: 0.8;
673 pointer-events: none;
674 }
675
676 .${rootCss} .card-news-list .card-news-container.card-highlights .graphism-card-highlight {
677 display: block;
678 position: absolute;
679 bottom: 0;
680 left: 0;
681 z-index: 1;
682 pointer-events: none;
683 }
684
685 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-title {
686 color: var(--text-primary-default, #FFF);
687 }
688
689 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-thumb {
690 height: 100%;
691 }
692
693 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-image {
694 width: 632px;
695 height: 360px;
696 position: absolute;
697 top: 0;
698 left: 0;
699 pointer-events: none;
700 }
701
702 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-category {
703 display: none;
704 }
705
706 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content {
707 width: 100%;
708 position: relative;
709 height: 200px;
710 flex-grow: revert;
711 bottom: 30px;
712 }
713
714 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content .card-news-info {
715 position: absolute;
716 top: -1px;
717 }
718
719 @media screen and (max-width: 767px) {
720 .${rootCss} .card-news-list .card-news-container.card-highlights {
721 width: 100%;
722 }
723
724 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-image {
725 width: 100%;
726 }
727 }
728
729 /* *** End Card Highlights *** */
730
731 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type path {
732 stroke: #D7D7D7;
733 }
734
735 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
736 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
737 color: var(--text-tertiary-default, #959595);
738 line-height: var(--line-height-lg, 144%);
739 }
740
741 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
742 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
743 color: var(--text-tertiary-default, #EEE);
744 }
745
746 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read {
747 transform: translateY(-0.5px);
748 }
749
750 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read path {
751 fill: #D7D7D7;
752 }
753
754 /* Results Quantity Massage */
755 .${rootCss} .quantify-results-text-number {
756 color: var(--border-color-accent);
757 }
758
759 .${rootCss} .results-quantity-filter-container {
760 display: flex;
761 gap: var(--space-xxs, 8px);
762 flex-wrap: wrap;
763 justify-content: space-between;
764 align-items: center;
765 width: 100%;
766 margin: var(--space-xl) 0;
767 height: 68px;
768 }
769
770 body.high-contrast-active .${rootCss} .results-quantity-filter-container * {
771 color: var(--text-tertiary-default, #EEE) !important;
772 }
773
774 /* Liferay Pagination */
775 .pagination-bar .pagination-items-per-page {
776 display: none !important;
777 }
778
779 .pagination-bar .pagination-results {
780 display: none !important;
781 }
782
783 .pagination-bar .pagination {
784 width: 100%;
785 display: flex;
786 justify-content: center;
787 margin-top: var(--space-xl);
788 }
789
790 .pagination-bar .page-item {
791 display: none !important;
792 outline: none;
793 display: flex;
794 flex-direction: column;
795 align-items: center;
796 justify-content: center;
797 width: var(--size-lg);
798 height: var(--size-lg);
799 border-radius: var(--border-radius-pill, 100px);
800 color: var(--text-tertiary-default, #959595);
801 background: transparent;
802 border: var(--border-width-hairline) solid transparent;
803 transition: background 300ms ease-in-out, border-color 300ms ease-in-out;
804 }
805
806 .pagination-bar .page-item.active .page-link {
807 background: transparent;
808 }
809
810 .pagination-bar .page-item .page-link:hover{
811 background: transparent;
812 }
813
814 .pagination-bar .page-item:hover{
815 border-color: var(--border-color-accent);
816 background: transparent;
817 }
818
819 .pagination-bar .page-item.round-border {
820 border-radius: var(--radius-pill, 100px);
821 border: 1px solid var(--border-color-accent);
822 }
823
824 .pagination-bar .page-item.disabled.round-border {
825 border: 1px solid var(--text-tertiary-default, #959595);
826
827 }
828
829 .pagination-bar .page-item.show-item {
830 display: flex !important;
831 }
832
833 .pagination-bar .page-item.disabled span span svg {
834 stroke: #525252;
835 }
836
837 .pagination-bar .page-item span span svg {
838 stroke: var(--border-color-accent);
839 }
840
841 .pagination-bar .page-item.disabled {
842 pointer-events: none;
843 }
844
845 .pagination-bar .page-item.disabled:hover{
846 background: transparent;
847 }
848
849 .pagination-bar .page-item.active {
850 background: var(--background-surface-level-02, #F8F8F8);
851 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
852 border: var(--border-width-hairline) solid #F8F8F8;
853 pointer-events: none;
854 }
855
856
857 .pagination-bar .page-item.active * {
858 color: var(--border-color-accent);
859 font-weight: 700;
860 }
861
862 body.high-contrast-active .pagination-bar .page-item span span svg {
863 stroke: var(--tertiary-default, #EEE) !important;
864 }
865
866 body.high-contrast-active .pagination-bar * {
867 color: var(--tertiary-default, #EEE) !important;
868
869 }
870
871 body.high-contrast-active .pagination-bar .page-item.round-border {
872 border-color: var(--tertiary-default, #EEE) !important;
873 }
874
875 body.high-contrast-active .pagination-bar .page-item.active {
876 color: var(--tertiary-default, #EEE) !important;
877 border: none;
878 }
879
880 body.high-contrast-active .pagination-bar .page-item.active {
881 background: var(--surface-level-02, #373737) !important;
882 }
883
884 body.high-contrast-active .pagination-bar .page-item:hover{
885 border-color: var(--tertiary-default, #EEE);
886 }
887
888
889</style>
890
891<script>
892 AUI().ready(function () {
893
894 const editMode = document.body.classList.contains('has-edit-mode-menu');
895 const cardsList = document.querySelector('.${rootCss} .card-news-list');
896
897 if (!editMode) {
898 // Card Highlight
899 const firstImage = cardsList.querySelector('.card-news-container img');
900 const firstContent = cardsList.querySelector('.card-news-container');
901 const firstContentWithImage = null;
902
903 if (firstImage) {
904
905 const firstContentWithImage = firstImage.parentElement.parentElement;
906 if (firstContentWithImage) {
907 let cloneElementWithImage = firstContentWithImage.cloneNode(true);
908 cloneElementWithImage.classList.add('card-highlights');
909 cloneElementWithImage.addEventListener('click', (event) => {
910 const element = event.target;
911 element.querySelector('a').click();
912 });
913 cardsList.insertBefore(cloneElementWithImage, firstContent);
914 firstContentWithImage.remove()
915 }
916 }
917 }
918
919 cardsList.classList.add('active');
920
921 const url = new URL(window.location.href);
922 const searchParams = url.searchParams;
923
924 // Order Functions
925 const setOrder = (orderBy) => {
926
927 //const url = new URL(window.location.href);
928 //const searchParams = url.searchParams;
929
930 searchParams.set('sort', orderBy);
931 url.search = searchParams.toString();
932 let newUrl = url.toString();
933
934 newUrl.includes("sort=createDate%25") && (newUrl = url.toString().replace("sort=createDate%25", "sort=createDate%"));
935 window.location.href = newUrl
936 }
937
938 // Order By Combo Listeners
939 const orderContainer = document.querySelector('.${rootCss} .results-quantity-filter-container .order-container')
940 const orderCombo = orderContainer.querySelector('#select-order')
941 const orderComboOptions = orderCombo.querySelectorAll('option');
942 orderComboOptions.forEach((item) => {
943
944 let actualSort = searchParams.get('sort') ? searchParams.get('sort').replace(/\+/g, '%2B') : '';
945 if (item.value === actualSort) {
946 item.setAttribute('selected', '')
947 }
948
949 })
950
951 orderCombo.addEventListener('change', (item) => {
952 setOrder(item.target.value);
953 })
954
955 orderContainer.classList.add('active');
956
957 // Liferay Pagination Edits:
958 const paginationItens = document.querySelectorAll('.pagination-bar .pagination .page-item')
959
960 if (paginationItens.length > 0) {
961 paginationItens[0].querySelector('span span').innerHTML=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
962 <path d="M13.5 8H2.5M2.5 8L7 3.5M2.5 8L7 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
963 </svg>`
964
965 paginationItens[0].classList.add('round-border')
966
967 paginationItens[(paginationItens.length - 1)].querySelector('span span').innerHTML=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
968 <path d="M2.5 8H13.5M13.5 8L9 3.5M13.5 8L9 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
969 </svg>`
970
971 paginationItens[(paginationItens.length - 1)].classList.add('round-border')
972
973
974 paginationItens.forEach(item => {
975 item.classList.add('show-item')
976 })
977
978 }
979
980
981 });
982
983
984function setLinks${contentNumber}() {
985
986 const allCards = document.querySelectorAll(".${rootCss} .card-news-container");
987 allCards.forEach((card) => {
988 card.addEventListener('click', (event) => {
989 const element = event.target;
990 element.querySelector('a').click();
991 });
992 })
993
994 document.querySelector('.${rootCss} .card-news-list').classList.add('active');
995
996}
997
998setLinks${contentNumber}()
999
1000
1001
1002</script>
Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Escolha um Canal:
Navegue nas Seções:
Acessibilidade
Idioma:
Selecione um idioma: