Página inicial Nossa Energia Nossa Energia
Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Um erro ocorreu enquanto processava o modelo.
Java method "com.sun.proxy.$Proxy192.getGroupVocabularies(long)" threw an exception when invoked on com.sun.proxy.$Proxy192 object "com.liferay.portlet.asset.service.impl.AssetVocabularyServiceImpl@35b3107a"; see cause exception in the Java stack trace.
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign vocabularies = assetVocabular... [in template "20099#20135#11049244" at line 30, 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<#-- Conteúdo Web -> Templates: Busca pelas imagens do tipo de noticia --> 13<#include "${templatesPath}/18598756" /> 14 15<#assign POST_TYPES_CATEGORIES = getPostTypeImages()!default([]) /> 16 17<#-- Nome das midias adaptativas de imagem para desktop e mobile --> 18<#assign adaptativeMediaDesktopResolutionName = "Preview-1000x0" /> 19<#assign adaptativeMediaMobileResolutionName = "Thumbnail-300x300" /> 20 21 22<#-- Liferay Services --> 23<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") /> 24<#assign fileEntryService = staticUtil["com.liferay.document.library.kernel.service.DLFileEntryLocalServiceUtil"] /> 25<#assign layoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService")> 26<#assign assetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService") /> 27<#assign assetVocabularyService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyService") /> 28<#assign assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") /> 29<#assign layout = layoutLocalService.getLayout(themeDisplay.getPlid())> 30<#assign vocabularies = assetVocabularyService.getGroupVocabularies(groupId) /> 31 32<#assign ourEnergyVocabulary = findVocabulary("Nossa Energia", vocabularies)/> 33<#assign typeOfNewsVocabulary = findVocabulary("Tipo de Notícia", vocabularies )/> 34<#assign typeOfNewsVocabularyId = 10720340 /> 35 36 37<#assign contentNumber = randomNumber(4586) /> 38 39<#assign folderId = "18598813"/> 40 41<#assign category = "" /> 42<#assign categoryName = "" > 43<#if locale?lower_case == 'pt_br'> 44 <#assign categoryName = "Todos" > 45<#else> 46 <#assign categoryName = "All" > 47</#if> 48 49<#if request.getParameter("category")?? && request.getParameter("category")?has_content> 50 <#assign categoryId = request.getParameter("category")?number> 51 <#if categoryId?? && categoryId?has_content> 52 <#assign category = assetCategoryLocalService.getCategory(categoryId) /> 53 <#assign categoryName = category.getTitle(locale) /> 54 </#if> 55</#if> 56 57<#if categoryId?? && categoryId?has_content> 58 <#attempt> 59 <#assign categoryDates = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-categories/${categoryId}")> 60 <#recover> 61 <#assign categoryDates = { "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}> 62 </#attempt> 63<#else> 64 <#assign categoryDates = { "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}> 65</#if> 66 67 68<#assign categoryPage = getFirstCategoryOfVocabularyInPage(layout, ourEnergyVocabulary) /> 69<#if categoryPage?? && categoryPage?has_content> 70 <#assign categoryName = categoryPage.getTitle(locale) /> 71 <#assign categoryId = categoryPage.getCategoryId() /> 72 <#assign category = categoryPage /> 73 <script> 74 if (!window.location.search.includes('category') && !document.body.classList.contains("has-edit-mode-menu")) { 75 // Redirecionar para uma nova URL 76 const urlPage = new URL(window.location.href); 77 urlPage.searchParams.set('sort', "createDate-"); 78 urlPage.searchParams.set('category', "${categoryId}"); 79 window.location.href = urlPage.toString(); 80 } 81 </script> 82</#if> 83 84<#if categoryDates.parentTaxonomyVocabulary.name="Nossa Energia"> 85 <#attempt> 86 <#assign ourEnergyStyles = [] /> 87 <#assign shadowColorCategory = "" /> 88 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor da Sombra")??)> 89 <#assign categoryShadowColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor da Sombra") /> 90 <#assign shadowColorCategory = categoryShadowColorByService.value /> 91 </#if> 92 93 <#assign backgroundColorCategory = "" /> 94 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor de Fundo")??)> 95 <#assign categoryBackgroundColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor de Fundo") /> 96 <#assign backgroundColorCategory = categoryBackgroundColorByService.value /> 97 </#if> 98 99 <#assign textColorCategory = "" /> 100 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto")??)> 101 <#assign categoryTextColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto") /> 102 <#assign textColorCategory = categoryTextColorByService.value /> 103 </#if> 104 105 <#assign textColorHighContrastCategory = "" /> 106 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto em Alto Contraste")??)> 107 <#assign categoryTextColorHighContrastByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto em Alto Contraste") /> 108 <#assign textColorHighContrastCategory = categoryTextColorHighContrastByService.value /> 109 </#if> 110 111 <#assign ourEnergyStyles = [{"titleLocale": category.getTitle(locale),"shadowColor": shadowColorCategory, "backgroundColor": backgroundColorCategory, "textColor": textColorCategory, "textColorHighContrast": textColorHighContrastCategory}] /> 112 113 <#recover> 114 <#assign ourEnergyStyles = [{"titleLocale": "Nenhum", "shadowColor": "000", "backgroundColor": "000", "textColor": "FFF", "textColorHighContrast": "FFF"}] /> 115 116 </#attempt> 117</#if> 118 119 120<#-- Root Css -> Para poder instanciar dois elementos e não dar confusão no JS --> 121<#assign rootCss = "results-list-category-container_" + randomNumber(4586) /> 122 123<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article --> 124<#function getFirstCategoryOfVocabulary journalArticle vocabulary > 125 <#attempt> 126 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) /> 127 128 <#list categories as category> 129 <#if vocabulary.getVocabularyId() == category.getVocabularyId()> 130 <#return category.getTitle(locale)> 131 </#if> 132 </#list> 133 134 <#return ""> 135 136 <#recover> 137 <#return "" /> 138 </#attempt> 139 140</#function> 141 142<#function getFirstCategoryOfVocabularyInPage layout vocabulary > 143 <#attempt> 144 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.portal.kernel.model.Layout", layout.getPlid()) /> 145 146 <#list categories as category> 147 <#if vocabulary.getVocabularyId() == category.getVocabularyId()> 148 <#return category> 149 </#if> 150 </#list> 151 152 <#return ""> 153 154 <#recover> 155 <#return "" /> 156 </#attempt> 157 158</#function> 159 160 161<#assign countCategoriesDates = 0 /> 162<#assign categoriesRestInfo = [] /> 163 164<#function getCategoriesDates > 165 166 <#attempt> 167 <#assign countCategoriesDates = countCategoriesDates + 1 /> 168 169 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entries[0].getClassPK()) /> 170 <#assign ddmStructure = journalArticle.getDDMStructure() /> 171 <#assign highlightsRestDates = restClient.get("/headless-delivery/v1.0/content-structures/10700214/structured-contents?fields=contentFields%2CfriendlyUrlPath%2Cid%2Ckey%2CtaxonomyCategoryBriefs%2Ctitle&page=${countCategoriesDates}&pageSize=10&search=%3CtaxonomyCategoryName%3E${categoryName}%3C%2FtaxonomyCategoryName%3E&sort=dateCreated%3Adesc") /> 172 173 <#list highlightsRestDates.items as item> 174 <#list item.taxonomyCategoryBriefs as category> 175 <#if category.taxonomyCategoryId == categoryId> 176 <#assign categoriesRestInfo += [item] > 177 </#if> 178 </#list> 179 <#if categoriesRestInfo?size gte 3> 180 <#return categoriesRestInfo /> 181 </#if> 182 183 </#list> 184 185 <#if categoriesRestInfo?size lt 3> 186 <#call getCategoriesDates() /> 187 <#else> 188 <#return categoriesRestInfo /> 189 </#if> 190 191 <#recover> 192 <#return categoriesRestInfo /> 193 </#attempt> 194 195</#function> 196 197<#attempt> 198 <#assign categoryDates = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-categories/${categoryId}")> 199 <#recover> 200 <#assign categoryDates = { "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}> 201</#attempt> 202 203 204<#function getCategoriesImages > 205 <#attempt> 206 <#-- Image Banner --> 207 <#assign categoryImageDates = restClient.get("/headless-delivery/v1.0/document-folders/${folderId}/documents?search=${categoryName}&sort=dateCreated%3Adesc")> 208 <#if categoryImageDates?has_content > 209 <#assign categoriesImagesInfo = categoryImageDates.items[0]> 210 <#else> 211 <#assign categoriesImagesInfo = { "contentUrl": "", "id": "0" } > 212 </#if> 213 214 <#return categoriesImagesInfo /> 215 216 <#recover> 217 <#assign categoriesImagesInfo = { "contentUrl": "", "id": "0" } > 218 <#return categoriesImagesInfo /> 219 </#attempt> 220 221</#function> 222 223 224 225<#if categoryDates.parentTaxonomyVocabulary.name="Nossa Energia"> 226 227 <#assign highlightsDates = getCategoriesDates() /> 228 <#assign categoryImage = getCategoriesImages() /> 229 230</#if> 231 232<#-- Função para obter os dados de um card no Web Content (Journal Article) --> 233<#function getDataForCard entry > 234 <#attempt> 235 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entry.getClassPK()) /> 236 <#assign ddmStructure = journalArticle.getDDMStructure() /> 237 <#assign fieldList = getFieldListByStructure(ddmStructure) /> 238 <#assign xmlArticle = journalArticle.getDocument().getRootElement() /> 239 240 <#-- Tentando pegar Imagem --> 241 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) /> 242 <#assign media = "" /> 243 <#list mediasGroup as mediaGroup > 244 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) /> 245 246 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${media.fileEntryId}") /> 247 248 <#assign urlAdaptativeMediaDesktop = ""/> 249 <#assign urlAdaptativeMediaMobile = ""/> 250 <#if media.url?? && media.url?has_content > 251 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages /> 252 <#list dataAdaptativeMedia as data> 253 <#if data.resolutionName == adaptativeMediaDesktopResolutionName> 254 <#assign urlAdaptativeMediaDesktop = data.contentUrl/> 255 </#if> 256 <#if data.resolutionName == adaptativeMediaMobileResolutionName> 257 <#assign urlAdaptativeMediaMobile = data.contentUrl/> 258 </#if> 259 </#list> 260 </#if> 261 262 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "imageFileEntryId": media.fileEntryId, "urlAdaptativeMedia": {"desktop": urlAdaptativeMediaDesktop, "mobile": urlAdaptativeMediaMobile}} /> 263 264 <#-- Se não tiver imagem, tentar pegar vídeo --> 265 <#if !media.imageSrc?? || !media.imageSrc?has_content> 266 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") /> 267 <#if youtubeID?? && youtubeID?has_content> 268 <#assign media = {"videoYotubeID": youtubeID} /> 269 <#else> 270 <#-- Tentar pegar vídeo Interno --> 271 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) /> 272 <#if internalVideo?? && internalVideo?has_content> 273 <#assign media = {"internalVideo": internalVideo} /> 274 </#if> 275 </#if> 276 </#if> 277 </#list> 278 279 <#assign title = getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia") /> 280 281 <#assign timeRead = getFieldValue(fieldList, xmlArticle, "Tempo de Leitura") /> 282 283 <#assign typeOfNews = getFirstCategoryOfVocabulary(entry, typeOfNewsVocabulary) /> 284 285 <#assign ourEnergy = getFirstCategoryOfVocabulary(entry, ourEnergyVocabulary) /> 286 287 <#if themeDisplay.getPortalURL()?contains("webserver")> 288 <#assign urlNews = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + journalArticle.getUrlTitle()> 289 <#else> 290 <#assign urlNews = themeDisplay.getPortalURL() + "/w/" + journalArticle.getUrlTitle()> 291 </#if> 292 293 <#if !urlNews?has_content > 294 <#assign urlNews = "" > 295 </#if> 296 297 <#assign cardData = {"media": media, "title": title, "timeRead": timeRead, "typeOfNews": typeOfNews, "ourEnergy": ourEnergy, "urlNews": urlNews} /> 298 299 <#return cardData> 300 301 <#recover> 302 <#return {"media": "", "title": "", "timeRead": "", "typeOfNews": "", "ourEnergy": "", "urlNews": ""} /> 303 </#attempt> 304 305 <#-- cardData -> image: url, alt 306 title 307 timeRead 308 ourEnergyCategory 309 typeOfNews 310 urlNews 311 --> 312</#function> 313 314<#macro renderCard cardData> 315 <#-- cardData -> image: url, alt 316 title 317 timeRead 318 ourEnergyCategory 319 typeOfNews 320 urlNews 321 --> 322 <div class="card-news-container"> 323 <div class="overlay-card-highlight"> </div> 324 325 <a class="card-category-link card-link" href="${cardData.urlNews}" style="display: none;"> ${cardData.title} </a> 326 327 <div class="card-news-thumb"> 328 <#assign noImage = "" /> 329 <#if cardData.media?? && cardData.media?has_content> 330 <#if cardData.media.imageSrc?? && cardData.media.imageSrc?has_content> 331 <#assign imageSrcDesktop = cardData.media.imageSrc /> 332 <#assign imageSrcmobile = cardData.media.imageSrc /> 333 <#if cardData.media.urlAdaptativeMedia?? && cardData.media.urlAdaptativeMedia?has_content> 334 <#assign imageSrcDesktop = cardData.media.urlAdaptativeMedia.desktop /> 335 <#assign imageSrcMobile = cardData.media.urlAdaptativeMedia.mobile /> 336 </#if> 337 338 <picture > 339 <source media="(max-width:767px)" srcset="${imageSrcMobile}"> 340 <img class="card-news-image" loading="lazy" src="${imageSrcDesktop}" alt="${cardData.media.imageAlt}"/> 341 </picture> 342 343 <#else> 344 <#if cardData.media.videoYotubeID?? && cardData.media.videoYotubeID?has_content> 345 <picture > 346 <source media="(max-width:767px)" srcset="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/mqdefault.jpg"> 347 <img class="card-news-image" loading="lazy" src="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/maxresdefault.jpg" alt="YouTube Thumbnail"/> 348 </picture> 349 <#else> 350 <#if (cardData.media.internalVideo?? && cardData.media.internalVideo.url?has_content) > 351 <video class="card-news-image"> 352 <source src="${cardData.media.internalVideo.url}"> 353 Your browser does not support the video tag. 354 </video> 355 <#else> 356 <#assign noImage = "no-image" /> 357 </#if> 358 </#if> 359 </#if> 360 </#if> 361 </div> 362 363 <div class="card-news-category-container ${noImage}"> 364 <div data-category="${categoryName}" class="card-news-category paragraph-micro-regular"> ${cardData.ourEnergy} </div> 365 </div> 366 367 <div class="card-news-text-content ${noImage}"> 368 <div class="card-news-title h4"> ${cardData.title} </div> 369 370 <div class="card-news-info"> 371 <div class="card-news-type"> 372 <#if getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default(""))?? > 373 <#assign postTypeIconUrl = getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default("")) /> 374 <img src="${postTypeIconUrl}" alt="post type icon" loading="lazy" /> 375 <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div> 376 <#else/> 377 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> 378 <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"/> 379 </svg> 380 <div class="card-news-type-text paragraph-micro-regular">Artigo</div> 381 </#if> 382 </div> 383 384 <#if cardData.timeRead?? && cardData.timeRead?has_content> 385 <div class="card-news-time-read"> 386 <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"> 387 <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"/> 388 </svg> 389 <div class="card-news-time-read-text paragraph-micro-regular">${cardData.timeRead} min</div> 390 </div> 391 </#if> 392 </div> 393 </div> 394 </div> 395 396</#macro> 397 398<#macro renderFilters > 399 <div class="order-filter-container"> 400 401 <div class="order-container" > 402 <span class="paragraph-sm-regular"> 403 <#if locale?lower_case == 'pt_br'> 404 Ordenar por: 405 <#else> 406 Order by: 407 </#if> 408 </span> 409 <select name="order" id="select-order"> 410 411 <option class="paragraph-sm-regular" value=""> 412 <#if locale?lower_case == 'pt_br'> 413 Padrão 414 <#else> 415 Default 416 </#if> 417 </option> 418 <option class="paragraph-sm-regular" value="createDate-"> 419 <#if locale?lower_case == 'pt_br'> 420 Mais recentes 421 <#else> 422 Recents 423 </#if> 424 </option> 425 <option class="paragraph-sm-regular" value="createDate%2B"> 426 <#if locale?lower_case == 'pt_br'> 427 Mais antigos 428 <#else> 429 Olders 430 </#if> 431 </option> 432 </select> 433 </div> 434 435 <div class="filter-container"> 436 <span class="paragraph-sm-regular"> 437 <#if locale?lower_case == 'pt_br'> 438 Filtrar por: 439 <#else> 440 Filter by: 441 </#if> 442 </span> 443 444 <select name="filter" id="select-filter"> 445 <option class="paragraph-sm-regular" value="0"> 446 <#if locale?lower_case == 'pt_br'> 447 Todos 448 <#else> 449 All 450 </#if> 451 </option> 452 </select> 453 </div> 454 455 </div> 456 457</#macro> 458 459<#if entries?has_content> 460 461 <div class="${rootCss}"> 462 463 <#if categoryDates.parentTaxonomyVocabulary.name == "Nossa Energia"> 464 465 <#-- Names Fields --> 466 <#assign newsTitle = "Título de destaque da notícia" /> 467 <#assign readTime = "Tempo de Leitura" /> 468 <#assign highlightMedia = "Mídia de destaque da notícia" /> 469 <#assign highlightImage = "Imagem Destaque" /> 470 471 <#-- Type of News Dates --> 472 <#attempt> 473 <#assign typeOfNewsRestDates = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/${typeOfNewsVocabulary.getVocabularyId()}/taxonomy-categories?sort=dateCreated")> 474 <#assign typeOfNewsDates = typeOfNewsRestDates.items > 475 <#recover> 476 <#assign typeOfNewsDates = []> 477 </#attempt> 478 479 <div class="category-top-border"></div> 480 <div class="dates-category-container"> 481 <div class="breakpoint"> 482 <#assign categoryWithImage = "" > 483 <#if categoryImage.contentUrl != ""> 484 <#assign categoryWithImage = "with-image" > 485 </#if> 486 <div class="category-top-session col-1-12 md-col-1-8 sm-col-1-4 ${categoryWithImage}"> 487 <div class="text-container"> 488 489 <div class="results-category-title fragment_85017"> 490 <div class="petro-title"> 491 <h2 id="title" class="h2" > 492 ${categoryDates.name} 493 </h2> 494 <div class="yellow-bar bar-h2"></div> 495 </div> 496 </div> 497 498 <div class="category-description paragraph-md-regular"> 499 ${categoryDates.description} 500 </div> 501 502 </div> 503 <#if categoryImage.contentUrl != "" > 504 <div class="category-banner" > 505 <picture > 506 <source media="(max-width:767px)" srcset="/o/adaptive-media/image/${categoryImage.id}/${adaptativeMediaMobileResolutionName}/image"> 507 <img 508 src="/o/adaptive-media/image/${categoryImage.id}/${adaptativeMediaDesktopResolutionName}/image" 509 alt="Image ${categoryDates.name}" loading="lazy"> 510 </picture> 511 </div> 512 </#if> 513 </div> 514 </div> 515 516 517 <div class="cards-highlights-container col-1-12 md-col-1-8 sm-col-1-4"> 518 <#list highlightsDates as cardHighlight> 519 520 <#assign newsTitleDate = "" /> 521 <#assign readTimeDate = "" /> 522 <#assign highlightImageUrl = "" /> 523 <#assign highlightImageFileEntryId = "" /> 524 <#assign highlightImageDescription = "" /> 525 <#assign highlightTypeNews = "" /> 526 527 <#list cardHighlight.contentFields as contentField> 528 529 <#if contentField.label == newsTitle> 530 <#assign newsTitleDate = contentField.contentFieldValue.data /> 531 </#if> 532 <#if contentField.label == readTime> 533 <#assign readTimeDate = contentField.contentFieldValue.data /> 534 </#if> 535 <#if contentField.label == highlightMedia> 536 <#list contentField.nestedContentFields as nestedContent> 537 <#if nestedContent.label == highlightImage && nestedContent.contentFieldValue.image?? > 538 <#assign highlightImageUrl = nestedContent.contentFieldValue.image.contentUrl /> 539 <#assign highlightImageFileEntryId = nestedContent.contentFieldValue.image.id /> 540 <#assign highlightImageDescription = nestedContent.contentFieldValue.image.description /> 541 </#if> 542 </#list> 543 </#if> 544 545 </#list> 546 547 <#list cardHighlight.taxonomyCategoryBriefs as categories > 548 549 <#list typeOfNewsDates as types > 550 <#if categories.taxonomyCategoryId?number == types.id?number > 551 <#assign highlightTypeNews = categories.taxonomyCategoryName /> 552 <#break> 553 </#if> 554 </#list> 555 </#list> 556 557 <div class="card-category-highlight-container"> 558 <#assign newsJournalArticleFriendlyUrl = "/"> 559 <#if themeDisplay.getPortalURL()?contains("webserver")> 560 <#assign newsJournalArticleFriendlyUrl = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + cardHighlight.friendlyUrlPath> 561 <#else> 562 <#assign newsJournalArticleFriendlyUrl = themeDisplay.getPortalURL() + "/w/" + cardHighlight.friendlyUrlPath> 563 </#if> 564 <a class="card-category-link cards-category-highlights-link" href="${newsJournalArticleFriendlyUrl}"> 565 <span style="display: none;"> ${newsTitleDate} </span> 566 </a> 567 568 <#if highlightImageUrl?has_content && highlightImageUrl != "" > 569 <picture > 570 <source media="(max-width:767px)" srcset="/o/adaptive-media/image/${highlightImageFileEntryId}/${adaptativeMediaMobileResolutionName}/image"> 571 <img 572 class="card-news-image" src="/o/adaptive-media/image/${highlightImageFileEntryId}/${adaptativeMediaDesktopResolutionName}/image" 573 alt="${highlightImageDescription}" loading="lazy" 574 > 575 </picture> 576 <#else> 577 <div class="no-image"></div> 578 </#if> 579 580 <div class="card-news-category-container "> 581 <div data-category="${categoryDates.name}" class="card-news-category paragraph-micro-regular"> 582 ${categoryDates.name} 583 </div> 584 </div> 585 <div class="card-news-text-content "> 586 <div class="card-news-title h4"> 587 ${newsTitleDate} 588 </div> 589 <div class="card-news-info"> 590 <div class="card-news-type"> 591 <#if getPostTypeImageUrl(POST_TYPES_CATEGORIES, highlightTypeNews)?? > 592 <#assign postTypeIconUrl = getPostTypeImageUrl(POST_TYPES_CATEGORIES, highlightTypeNews) /> 593 <img src="${postTypeIconUrl}" alt="post type icon" loading="lazy" /> 594 <div class="card-news-type-text paragraph-micro-regular">${highlightTypeNews}</div> 595 <#else/> 596 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> 597 <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"/> 598 </svg> 599 <div class="card-news-type-text paragraph-micro-regular">Artigo</div> 600 </#if> 601 </div> 602 <div class="card-news-time-read"> 603 <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"> 604 <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" 605 fill="#959595"> 606 </path> 607 </svg> 608 <div class="card-news-time-read-text paragraph-micro-regular"> 609 ${readTimeDate} min 610 </div> 611 </div> 612 </div> 613 </div> 614 </div> 615 </#list> 616 617 618 </div> 619 620 621 </div> 622 </#if> 623 624 625 <#if categoryDates.parentTaxonomyVocabulary.name != "Nossa Energia"> 626 627 <div class="results-category-title tags-title "> 628 <div class="breakpoint"> 629 <div class="tags-title-container col-1-12 md-col-1-8 sm-col-1-4"> 630 <div class="title-section fragment_85017"> 631 <div class="petro-title"> 632 <h2 id="title" class="h2" > 633 ${categoryDates.name} 634 </h2> 635 <div class="yellow-bar bar-h2"></div> 636 </div> 637 </div> 638 639 <div class="filters-section"> 640 <span class="quantify-results-text paragraph-sm-regular"> 641 <#if searchContainer.getTotal() != 0> 642 643 <#-- <#if locale?lower_case == "pt_br"> --> 644 Foram encontrados<span class="quantify-results-text-number paragraph-sm-bold"> ${searchContainer.getTotal()}</span> conteúdos 645 646 <#-- <#else> 647 Found<span class="quantify-results-text-number paragraph-sm-bold"> ${searchContainer.getTotal()}</span> contents 648 </#if> --> 649 </#if> 650 </span> 651 652 <@renderFilters /> 653 </div> 654 </div> 655 </div> 656 </div> 657 658 </#if> 659 660 <div class="card-news-list-breakpoint breakpoint"> 661 662 <#if categoryDates.parentTaxonomyVocabulary.name="Nossa Energia"> 663 <div class="title-filter-container col-1-12 md-col-1-8 sm-col-1-4"> 664 665 <div class="results-category-title fragment_85017"> 666 <div class="petro-title"> 667 <h3 id="title" class="h3" > 668 <#if locale?lower_case == 'pt_br'> 669 Saiba mais 670 <#else> 671 Know more: 672 </#if> 673 </h3> 674 <div class="yellow-bar bar-h3"></div> 675 676 </div> 677 </div> 678 679 <@renderFilters /> 680 681 </div> 682 683 </#if> 684 685 <div class="card-news-list col-1-12 md-col-1-8 sm-col-1-4"> 686 687 <#if searchContainer.getTotal() == 0> 688 <span class="quantify-results-text paragraph-sm-regular"> 689 <#if locale?lower_case == "pt_br"> 690 Poxa! Sua busca não encontrou nenhum resultado 691 <#else> 692 Wow! Your search did not return any results 693 </#if> 694 </span> 695 </#if> 696 697 <#if entries?has_content> 698 <#list entries as entry> 699 <#assign cardData = getDataForCard(entry) /> 700 <@renderCard cardData/> 701 </#list> 702 </#if> 703 </div> 704 </div> 705 </div> 706</#if> 707 708<#if ourEnergyStyles?? > 709 <#list ourEnergyStyles as ourEnergyStyle> 710 <style> 711 .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] { 712 <#if ourEnergyStyle.backgroundColor?? && ourEnergyStyle.backgroundColor?has_content> 713 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; 714 </#if> 715 box-shadow: 0px 2px 6px 0px #${ourEnergyStyle.shadowColor} !important; 716 color: #${ourEnergyStyle.textColor} !important; 717 } 718 719 body.high-contrast-active .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] { 720 <#if ourEnergyStyle.backgroundColor?? && ourEnergyStyle.backgroundColor?has_content> 721 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; 722 </#if> 723 color: #${ourEnergyStyle.textColorHighContrast} !important; 724 } 725 726 </style> 727 </#list> 728</#if> 729 730 731 732<style> 733 734 /* BANNER CATEGORIES AND HIGHLIGHTS SESSION */ 735 .category-top-border { 736 width: 100%; 737 height: 16px; 738 739 /* Gradient Verde Claro */ 740 background: linear-gradient(270deg, #C4D600 0%, #F1C115 68%); 741 742 } 743 744 body.high-contrast-active .category-top-border { 745 background: linear-gradient(270deg, var(--color-neutral-600) 0%, var(--color-neutral-800) 68%); 746 } 747 748 .${rootCss} .dates-category-container .category-top-session { 749 display: flex; 750 width: 100%; 751 justify-content: space-between; 752 padding: var(--space-xl) 0; 753 } 754 755 .${rootCss} .dates-category-container .category-top-session .text-container { 756 width: 100%; 757 } 758 759 760 .${rootCss} .dates-category-container .category-top-session .text-container .petro-title { 761 flex-shrink: 0; 762 } 763 764 .${rootCss} .text-container { 765 display: flex; 766 justify-content: space-between; 767 align-items: center; 768 gap: var(--space-lg); 769 } 770 771 .${rootCss} .dates-category-container .category-top-session.with-image .text-container { 772 flex-direction: column; 773 align-items: flex-start; 774 max-width: 100%; 775 } 776 777 body.high-contrast-active .${rootCss} .text-container { 778 color: var(--text-primary-default, #FFF) !important; 779 } 780 781 .${rootCss} .text-container .category-title { 782 width: 480px; 783 flex-shrink: 0; 784 } 785 786 .${rootCss} .text-container .category-description { 787 padding-top: var(--space-xs); 788 max-width: 70%; 789 } 790 791 .${rootCss} .category-banner { 792 width: 455px; 793 height: 256px; 794 flex-shrink: 0; 795 } 796 797 .${rootCss} .category-banner img { 798 width: 100%; 799 height: 100%; 800 object-fit: cover; 801 } 802 803 804 .${rootCss} .cards-highlights-container { 805 display: flex; 806 justify-content: space-between; 807 height: 420px; 808 width: 100%; 809 max-width: 1440px; 810 margin: var(--space-lg) auto var(--space-xl); 811 gap: var(--space-md); 812 overflow-x: auto; 813 814 scrollbar-color: #008542 #E7E9EF; 815 scrollbar-width: auto; 816 } 817 818 body.high-contrast-active .${rootCss} .cards-highlights-container { 819 scrollbar-color: var(--color-neutral-600) var(--color-neutral-800); 820 } 821 822 .${rootCss} .cards-highlights-container::-webkit-scrollbar { 823 background: #fff; 824 width: 15px; 825 height: 15px; 826 } 827 828 .${rootCss} .card-category-highlight-container { 829 width: 410px; 830 height: 370px; 831 display: flex; 832 flex-direction: column; 833 flex-shrink: 0; 834 border-radius: var(--border-radius-lg); 835 border: var(--border-width-hairline) solid var(--border-card-default, #EEE); 836 background: var(--background-surface-level-01, #FFF); 837 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 838 overflow: hidden; 839 scroll-snap-align: start; 840 cursor: pointer; 841 transition: border 300ms ease-in-out; 842 text-decoration: none; 843 position: relative; 844 } 845 846 847 .${rootCss} .card-category-highlight-container:hover { 848 border: var(--border-width-hairline) solid rgb(0, 133, 66); 849 } 850 851 852 body.high-contrast-active .${rootCss} .card-category-highlight-container { 853 border: var(--border-width-hairline) solid var(--border-card-default, #525252); 854 background: var(--background-surface-level-01, #010101); 855 } 856 857 858 body.high-contrast-active .${rootCss} .card-category-highlight-container:hover { 859 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8); 860 } 861 862 863 body.high-contrast-active .${rootCss} .card-category-highlight-container * { 864 color: var(--text-primary-default, #FFF) !important; 865 } 866 867 .${rootCss} .cards-highlights-container .card-category-highlight-container .card-category-link { 868 position: absolute; 869 top: 0; 870 width: 100%; 871 height: 100%; 872 z-index: 1; 873 } 874 875 .${rootCss} .card-category-highlight-container .card-news-image { 876 position: relative; 877 width: 100%; 878 } 879 880 .${rootCss} .card-category-highlight-container .no-image { 881 height: 50px; 882 } 883 884 .${rootCss} .card-category-highlight-container .card-news-image { 885 width: 100%; 886 height: 168px; 887 object-fit: cover; 888 } 889 890 .${rootCss} .card-category-highlight-container .card-news-category-container { 891 position: relative; 892 } 893 894 .${rootCss} .card-category-highlight-container .card-news-category-container .card-news-category { 895 display: flex; 896 justify-content: center; 897 align-items: center; 898 padding: var(--space-micro) var(--space-xs); 899 position: absolute; 900 z-index: 2; 901 left: var(--space-md); 902 top: -13px; 903 border-radius: var(--border-radius-pill); 904 905 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10); 906 line-height: var(--line-height-lg, 144%); 907 color: var(--default-sup-green-water, #006B65); 908 white-space: nowrap; 909 } 910 911 .${rootCss} .card-category-highlight-container .card-news-text-content { 912 display: flex; 913 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px); 914 flex-direction: column; 915 justify-content: space-between; 916 align-items: flex-start; 917 flex: 1 0 0; 918 align-self: stretch; 919 } 920 921 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-title { 922 display: -webkit-box; 923 -webkit-box-orient: vertical; 924 -webkit-line-clamp: 4; 925 align-self: stretch; 926 overflow: hidden; 927 color: var(--text-primary-default, #373737); 928 text-overflow: ellipsis; 929 margin: 0; 930 } 931 932 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info { 933 display: flex; 934 align-items: center; 935 align-content: center; 936 gap: var(--space-sm, 16px); 937 align-self: stretch; 938 flex-wrap: wrap; 939 } 940 941 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type, 942 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read { 943 display: flex; 944 align-items: center; 945 gap: var(--space-xxs, 8px); 946 } 947 948 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 949 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 950 color: var(--text-tertiary-default, #959595); 951 line-height: var(--line-height-lg, 144%); 952 } 953 954 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type, 955 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read { 956 display: flex; 957 align-items: center; 958 gap: var(--space-xxs, 8px); 959 } 960 961 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 962 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 963 color: var(--text-tertiary-default, #959595); 964 line-height: var(--line-height-lg, 144%); 965 } 966 967 /* END BANNER CATEGORIES AND HIGHLIGHTS SESSION */ 968 969 970 971 .${rootCss} .results-category-title.tags-title { 972 background: var(--color-neutral-300); 973 padding: var(--space-xl) 0; 974 975 } 976 977 978 .${rootCss} .results-category-title.tags-title .filters-section { 979 display: flex; 980 justify-content: space-between; 981 width: 100%; 982 } 983 984 .${rootCss} .results-category-title.tags-title .filters-section .quantify-results-text { 985 padding-top: var(--space-xs); 986 padding-right: var(--space-xs); 987 } 988 989 990 991 .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h2, 992 .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h3 { 993 background-color: var(--text-secondary-accent, #FDC82F); 994 } 995 996 .${rootCss} .title-filter-container { 997 display: flex; 998 justify-content: space-between; 999 height: 68px; 1000 } 1001 1002 /* Order and Filter */ 1003 .${rootCss} .order-filter-container { 1004 display: flex; 1005 } 1006 1007 .${rootCss} .filter-container, 1008 .${rootCss} .order-container { 1009 display: none; 1010 flex-shrink: 0; 1011 align-items: center; 1012 height: 45px; 1013 gap: var(--spacing-space-xxs, 8px); 1014 margin-right: var(--space-lg); 1015 } 1016 1017 .${rootCss} .filter-container.active, 1018 .${rootCss} .order-container.active { 1019 display: flex; 1020 } 1021 1022 body.high-contrast-active .${rootCss} .filter-container, 1023 body.high-contrast-active .${rootCss} .order-container { 1024 color: var(--color-neutral-200); 1025 } 1026 1027 .${rootCss} .filter-container #select-filter, 1028 .${rootCss} .order-container #select-order { 1029 display: flex; 1030 padding: var(--spacing-space-xxs, 8px) var(--spacing-space-xl, 40px) var(--spacing-space-xxs, 8px) var(--spacing-space-sm, 16px); 1031 align-items: center; 1032 gap: var(--spacing-space-md, 24px); 1033 align-self: stretch; 1034 border-radius: var(--border-radius-lg, 16px); 1035 border: 1px solid var(--border-color-light); 1036 appearance: none; 1037 -webkit-appearance: none; 1038 -moz-appearance: none; 1039 background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTMgNkw4IDExTDMgNiIgc3Ryb2tlPSIjNTI1MjUyIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+); 1040 background-repeat: no-repeat; 1041 background-position: 95%; 1042 } 1043 1044 1045 body.high-contrast-active .${rootCss} .filter-container #select-filter option, 1046 body.high-contrast-active .${rootCss} .order-container #select-order option { 1047 background-color: var(--color-neutral-200); 1048 } 1049 1050 /* renderCard */ 1051 .${rootCss} .card-news-list { 1052 display: none; 1053 flex-wrap: wrap; 1054 gap: var(--space-lg); 1055 width: 100%; 1056 justify-content: flex-start; 1057 padding-top: var(--space-lg) 1058 } 1059 1060 .${rootCss} .card-news-list.active { 1061 display: flex; 1062 } 1063 1064 .${rootCss} .card-news-container { 1065 width: 300px; 1066 height: 370px; 1067 display: flex; 1068 flex-direction: column; 1069 flex-shrink: 0; 1070 align-items: flex-start; 1071 border-radius: var(--border-radius-lg); 1072 border: var(--border-width-hairline) solid var(--border-card-default, #EEE); 1073 background: var(--background-surface-level-01, #FFF); 1074 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 1075 overflow: hidden; 1076 scroll-snap-align: start; 1077 cursor: pointer; 1078 transition: border 300ms ease-in-out; 1079 text-decoration: none; 1080 position: relative; 1081 } 1082 1083 body.high-contrast-active .${rootCss} .card-news-container { 1084 border: var(--border-width-hairline) solid var(--border-card-default, #525252); 1085 background: var(--background-surface-level-01, #010101); 1086 } 1087 1088 .${rootCss} .card-news-container:hover { 1089 border: var(--border-width-hairline) solid rgb(0, 133, 66); 1090 } 1091 1092 body.high-contrast-active .${rootCss} .card-news-container:hover { 1093 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8); 1094 } 1095 1096 .${rootCss} .card-news-container .card-category-link { 1097 position: absolute; 1098 top: 0; 1099 width: 100%; 1100 height: 100%; 1101 z-index: 3; 1102 } 1103 1104 .${rootCss} .card-news-container .card-news-thumb { 1105 position: relative; 1106 width: 100%; 1107 pointer-events: none; 1108 } 1109 1110 .${rootCss} .card-news-container .card-news-image { 1111 width: 100%; 1112 height: 168px; 1113 object-fit: cover; 1114 1115 pointer-events: none; 1116 } 1117 1118 .${rootCss} .card-news-container .card-news-category-container { 1119 position: relative; 1120 } 1121 1122 .${rootCss} .card-category-highlight-container .card-news-category-container .card-news-category, 1123 .${rootCss} .card-news-container .card-news-category-container .card-news-category { 1124 display: flex; 1125 justify-content: center; 1126 align-items: center; 1127 padding: var(--space-micro) var(--space-xs); 1128 position: absolute; 1129 z-index: 2; 1130 left: var(--space-md); 1131 top: -13px; 1132 border-radius: var(--border-radius-pill); 1133 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); 1134 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10); 1135 line-height: var(--line-height-lg, 144%); 1136 color: var(--default-sup-green-water, #006B65); 1137 white-space: nowrap; 1138 1139 pointer-events: none; 1140 } 1141 1142 body.high-contrast-active .${rootCss} .card-news-container .card-news-category-container .card-news-category { 1143 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); 1144 color: var(--default-sup-green-water, #99E0DD); 1145 } 1146 1147 .${rootCss} .card-news-container .card-news-category-container.no-image .card-news-category { 1148 position: relative; 1149 top: 0; 1150 left: 0; 1151 margin-left: var(--space-md); 1152 margin-top: var(--space-md); 1153 } 1154 1155 .${rootCss} .card-news-container .card-news-text-content { 1156 display: flex; 1157 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px); 1158 flex-direction: column; 1159 justify-content: space-between; 1160 align-items: flex-start; 1161 flex: 1 0 0; 1162 align-self: stretch; 1163 z-index: 1; 1164 1165 pointer-events: none; 1166 } 1167 1168 .${rootCss} .card-news-container .card-news-text-content.no-image { 1169 padding-top: var(--space-sm); 1170 } 1171 1172 .${rootCss} .card-news-container .card-news-text-content .card-news-title { 1173 display: -webkit-box; 1174 -webkit-box-orient: vertical; 1175 -webkit-line-clamp: 4; 1176 align-self: stretch; 1177 overflow: hidden; 1178 color: var(--text-primary-default, #373737); 1179 text-overflow: ellipsis; 1180 margin: 0; 1181 } 1182 1183 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-title { 1184 color: var(--text-primary-default, #FFF); 1185 } 1186 1187 .${rootCss} .card-news-container .card-news-text-content .card-news-info { 1188 display: flex; 1189 align-items: center; 1190 align-content: center; 1191 gap: var(--space-sm, 16px); 1192 align-self: stretch; 1193 flex-wrap: wrap; 1194 } 1195 1196 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type, 1197 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read { 1198 display: flex; 1199 align-items: center; 1200 gap: var(--space-xxs, 8px); 1201 } 1202 1203 1204 body.high-contrast-active .${rootCss} .results-category-title .petro-title { 1205 color: var(--text-primary-default, #FFF) !important; 1206 } 1207 1208 body.high-contrast-active .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h2, 1209 body.high-contrast-active .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h3 { 1210 background-color: var(--text-secondary-accent, #FFEEB3); 1211 } 1212 1213 .${rootCss} .card-news-list .card-news-container .overlay-card-highlight { 1214 display: none; 1215 } 1216 1217 .${rootCss} .card-news-list .card-news-container .graphism-card-highlight { 1218 display: none; 1219 } 1220 1221 1222 /* Card Highlights */ 1223 .${rootCss} .card-news-list .card-news-container.card-highlights { 1224 width: 632px; 1225 height: 360px; 1226 justify-content: flex-end; 1227 } 1228 1229 .${rootCss} .card-news-list .card-news-container.card-highlights .overlay-card-highlight { 1230 display: block; 1231 position: absolute; 1232 top: 0; 1233 left: 0; 1234 width: 100%; 1235 height: 100%; 1236 background: linear-gradient(190deg, rgba(13, 19, 16, 0.00) 27.69%, rgba(13, 19, 16, 0.94) 63.29%); 1237 z-index: 1; 1238 opacity: 0.8; 1239 1240 pointer-events: none; 1241 } 1242 1243 .${rootCss} .card-news-list .card-news-container.card-highlights .graphism-card-highlight { 1244 display: block; 1245 position: absolute; 1246 bottom: 0; 1247 left: 0; 1248 z-index: 1; 1249 1250 pointer-events: none; 1251 } 1252 1253 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-title { 1254 color: var(--text-primary-default, #FFF); 1255 } 1256 1257 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-image { 1258 width: 632px; 1259 height: 360px; 1260 position: absolute; 1261 top: 0; 1262 left: 0; 1263 1264 pointer-events: none; 1265 } 1266 1267 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-thumb { 1268 height: 100%; 1269 } 1270 1271 1272 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-category { 1273 display: none; 1274 } 1275 1276 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content { 1277 width: 632px; 1278 position: relative; 1279 height: 200px; 1280 flex-grow: revert; 1281 bottom: 30px; 1282 } 1283 1284 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content .card-news-info { 1285 position: absolute; 1286 top: -1px; 1287 } 1288 /* *** End Card Highlights *** */ 1289 1290 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type path { 1291 stroke: #D7D7D7; 1292 } 1293 1294 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 1295 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 1296 color: var(--text-tertiary-default, #959595); 1297 line-height: var(--line-height-lg, 144%); 1298 } 1299 1300 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text, 1301 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text { 1302 color: var(--text-tertiary-default, #EEE); 1303 } 1304 1305 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read { 1306 transform: translateY(-0.5px); 1307 } 1308 1309 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 { 1310 fill: #D7D7D7; 1311 } 1312 1313 1314 1315 .${rootCss} .quantify-results-text-number { 1316 color: var(--border-color-accent); 1317 } 1318 1319 1320 /* Liferay Pagination */ 1321 .pagination-bar .pagination-items-per-page { 1322 display: none !important; 1323 } 1324 1325 .pagination-bar .pagination-results { 1326 display: none !important; 1327 } 1328 1329 .pagination-bar .pagination { 1330 width: 100%; 1331 display: flex; 1332 justify-content: center; 1333 margin-top: var(--space-xl); 1334 } 1335 1336 .pagination-bar .page-item { 1337 display: none !important; 1338 outline: none; 1339 display: flex; 1340 flex-direction: column; 1341 align-items: center; 1342 justify-content: center; 1343 width: var(--size-lg); 1344 height: var(--size-lg); 1345 border-radius: var(--border-radius-pill, 100px); 1346 color: var(--text-tertiary-default, #959595); 1347 background: transparent; 1348 border: var(--border-width-hairline) solid transparent; 1349 transition: background 300ms ease-in-out, border-color 300ms ease-in-out; 1350 } 1351 1352 .pagination-bar .page-item.active .page-link { 1353 background: transparent; 1354 } 1355 1356 .pagination-bar .page-item .page-link:hover{ 1357 background: transparent; 1358 } 1359 1360 .pagination-bar .page-item:hover{ 1361 border-color: var(--border-color-accent); 1362 background: transparent; 1363 } 1364 1365 .pagination-bar .page-item.round-border { 1366 border-radius: var(--radius-pill, 100px); 1367 border: 1px solid var(--border-color-accent); 1368 } 1369 1370 .pagination-bar .page-item.disabled.round-border { 1371 border: 1px solid var(--text-tertiary-default, #959595); 1372 1373 } 1374 1375 .pagination-bar .page-item.show-item { 1376 display: flex !important; 1377 } 1378 1379 .pagination-bar .page-item.disabled span span svg { 1380 stroke: #525252; 1381 } 1382 1383 .pagination-bar .page-item span span svg { 1384 stroke: var(--border-color-accent); 1385 } 1386 1387 .pagination-bar .page-item.disabled { 1388 pointer-events: none; 1389 } 1390 1391 .pagination-bar .page-item.disabled:hover{ 1392 background: transparent; 1393 } 1394 1395 .pagination-bar .page-item.active { 1396 background: var(--background-surface-level-02, #F8F8F8); 1397 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12); 1398 border: var(--border-width-hairline) solid #F8F8F8; 1399 pointer-events: none; 1400 } 1401 1402 1403 .pagination-bar .page-item.active * { 1404 color: var(--border-color-accent); 1405 font-weight: 700; 1406 } 1407 1408 body.high-contrast-active .pagination-bar .page-item span span svg { 1409 stroke: var(--tertiary-default, #EEE) !important; 1410 } 1411 1412 body.high-contrast-active .pagination-bar * { 1413 color: var(--tertiary-default, #EEE) !important; 1414 1415 } 1416 1417 body.high-contrast-active .pagination-bar .page-item.round-border { 1418 border-color: var(--tertiary-default, #EEE) !important; 1419 } 1420 1421 body.high-contrast-active .pagination-bar .page-item.active { 1422 color: var(--tertiary-default, #EEE) !important; 1423 border: none; 1424 } 1425 1426 body.high-contrast-active .pagination-bar .page-item.active { 1427 background: var(--surface-level-02, #373737) !important; 1428 } 1429 1430 body.high-contrast-active .pagination-bar .page-item:hover{ 1431 border-color: var(--tertiary-default, #EEE); 1432 } 1433 1434 1435 @media screen and (max-width: 1440px) { 1436 1437 .${rootCss} .cards-highlights-container { 1438 padding: 0 var(--space-big); 1439 } 1440 } 1441 1442 @media screen and (max-width: 1024px) { 1443 .${rootCss} .dates-category-container .category-top-session { 1444 display: grid; 1445 grid-template-areas: 1446 "banner" 1447 "text"; 1448 grid-template-columns: 100%; 1449 } 1450 1451 .${rootCss} .text-container { 1452 grid-area: text; 1453 width: 100%; 1454 max-width: 100%; 1455 } 1456 1457 .${rootCss} .category-banner { 1458 grid-area: banner; 1459 margin: 0 auto var(--space-lg); 1460 } 1461 1462 } 1463 1464 1465 1466 @media screen and (max-width: 766px) { 1467 .${rootCss} .dates-category-container .category-top-session { 1468 padding: 0; 1469 } 1470 1471 1472 .${rootCss} .category-banner { 1473 height: 205px; 1474 width: 100%; 1475 1476 } 1477 1478 .${rootCss} .category-banner img { 1479 position: absolute; 1480 width: 100vw; 1481 left: 0; 1482 height: 205px; 1483 } 1484 1485 .${rootCss} .category-top-session .text-container { 1486 margin: var(--space-md) 0; 1487 flex-direction: column; 1488 align-items: flex-start; 1489 } 1490 1491 .${rootCss} .text-container .category-description { 1492 max-width: 100%; 1493 } 1494 1495 .${rootCss} .dates-category-container .category-top-session.with-image .text-container { 1496 max-width: 100%; 1497 } 1498 1499 .${rootCss} .cards-highlights-container { 1500 padding: 0 var(--space-lg); 1501 } 1502 1503 .${rootCss} .cards-highlights-container .card-category-highlight-container { 1504 width: 312px; 1505 } 1506 1507 1508 .${rootCss} .results-category-title.tags-title .filters-section { 1509 flex-direction: column; 1510 gap: var(--space-lg); 1511 } 1512 1513 .${rootCss} .title-filter-container { 1514 flex-direction: column; 1515 gap: var(--space-lg); 1516 height: fit-content; 1517 } 1518 1519 1520 .${rootCss} .filter-container.active, 1521 .${rootCss} .order-container.active { 1522 flex-direction: column; 1523 align-items: flex-start; 1524 } 1525 1526 .${rootCss} .filter-container.active #select-filter, 1527 .${rootCss} .order-container.active #select-order { 1528 align-self: flex-start; 1529 } 1530 1531 1532 .${rootCss} .card-news-list .card-news-container.card-highlights { 1533 width: 100%; 1534 } 1535 1536 1537 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content { 1538 width: 100%; 1539 } 1540 1541 1542 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-image { 1543 width: 100%; 1544 } 1545 1546 } 1547 1548</style> 1549 1550<script> 1551 AUI().ready(function () { 1552 1553 const editMode = document.body.classList.contains('has-edit-mode-menu'); 1554 const cardsList = document.querySelector('.${rootCss} .card-news-list'); 1555 1556 1557 if (!editMode) { 1558 const cardsHighlightsListLinks = document.querySelectorAll('.${rootCss} .cards-highlights-container .card-category-highlight-container .cards-category-highlights-link'); 1559 const cards = cardsList.querySelectorAll('.card-news-container'); 1560 1561 cards.forEach((card, index) => { 1562 let cardLink = card.querySelector('a'); 1563 cardsHighlightsListLinks.forEach((cardHighligh) => { 1564 //let cardLinkHref = cardLink.href.toString(); 1565 if (cardLink.href.includes(cardHighligh.href)) { 1566 card.remove(); 1567 } 1568 }) 1569 }) 1570 1571 1572 const firstImage = cardsList.querySelector('.card-news-container img'); 1573 const firstContent = cardsList.querySelector('.card-news-container'); 1574 const firstContentWithImage = null; 1575 1576 1577 if (firstImage) { 1578 // Card Highlight - List 1579 const firstContentWithImage = firstImage.parentElement.parentElement.parentElement; 1580 1581 if (firstContentWithImage) { 1582 let cloneElementWithImage = firstContentWithImage.cloneNode(true); 1583 const divSvg = document.createElement("div"); 1584 divSvg.innerHTML = `<svg 1585 class="graphism-card-highlight" width="632" height="226" viewBox="0 0 632 226" fill="none" xmlns="http://www.w3.org/2000/svg"> 1586 <g style="mix-blend-mode:multiply" opacity="0.5"> 1587 <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"/> 1588 </g> 1589 </svg>`; 1590 cloneElementWithImage.insertBefore(divSvg, cloneElementWithImage.firstChild); 1591 cloneElementWithImage.classList.add('card-highlights'); 1592 cardsList.insertBefore(cloneElementWithImage, firstContent); 1593 firstContentWithImage.remove(); 1594 } 1595 } 1596 } 1597 1598 cardsList.classList.add('active'); 1599 1600 const url = new URL(window.location.href); 1601 const searchParams = url.searchParams; 1602 1603 // Order and Filters - Combos 1604 const orderContainer = document.querySelector('.${rootCss} .order-container'); 1605 const filterContainer = document.querySelector('.${rootCss} .filter-container'); 1606 const orderCombo = orderContainer.querySelector('#select-order'); 1607 const filterCombo = filterContainer.querySelector('#select-filter'); 1608 1609 // Order Functions 1610 const setOrder = (orderBy) => { 1611 1612 //const url = new URL(window.location.href); 1613 //const searchParams = url.searchParams; 1614 1615 searchParams.set('sort', orderBy); 1616 url.search = searchParams.toString(); 1617 let newUrl = url.toString(); 1618 1619 newUrl.includes("sort=createDate%25") && (newUrl = url.toString().replace("sort=createDate%25", "sort=createDate%")); 1620 window.location.href = newUrl; 1621 } 1622 1623 // Filter Functions 1624 const setFilter = (filterBy) => { 1625 if (+filterBy === 0 ) { 1626 searchParams.delete('categoryTypeNews') 1627 } else { 1628 searchParams.set('categoryTypeNews', filterBy); 1629 } 1630 1631 url.search = searchParams.toString(); 1632 let newUrl = url.toString(); 1633 1634 window.location.href = newUrl; 1635 } 1636 1637 const renderTypeOptions = (options) => { 1638 let actualFilter = searchParams.get('categoryTypeNews'); 1639 options.forEach(typeItem => { 1640 let optionItem = document.createElement('option'); 1641 optionItem.classList.add('paragraph-sm-regular'); 1642 optionItem.setAttribute("value", typeItem.id); 1643 1644 if (+typeItem.id == +actualFilter) { 1645 optionItem.setAttribute('selected', ''); 1646 } 1647 1648 let optionItemName = document.createTextNode(typeItem.name); 1649 optionItem.appendChild(optionItemName); 1650 1651 filterCombo.appendChild(optionItem); 1652 }) 1653 } 1654 1655 1656 async function getTypeNews(vocabularyId) { 1657 try { 1658 const restResponse = await fetch(`/o/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/${typeOfNewsVocabularyId}/taxonomy-categories?fields=id%2Cname`, { 1659 headers: { 1660 "x-csrf-token": Liferay.authToken, 1661 'accept': 'application/json' 1662 }, 1663 method: "GET", 1664 }); 1665 1666 1667 const eventData = await restResponse.json(); 1668 1669 renderTypeOptions(eventData.items); 1670 1671 } catch (error) { 1672 console.error("Error connecting to vocabularies API:", error); 1673 } 1674 } 1675 1676 async function getRenderData() { 1677 await getTypeNews(); 1678 } 1679 1680 getRenderData(); 1681 1682 const orderComboOptions = orderCombo.querySelectorAll('option'); 1683 const filterComboOptions = filterCombo.querySelectorAll('option'); 1684 1685 1686 orderComboOptions.forEach((item) => { 1687 1688 let actualSort = searchParams.get('sort') ? searchParams.get('sort').replace(/\+/g, '%2B') : ''; 1689 if (item.value === actualSort) { 1690 item.setAttribute('selected', ''); 1691 } 1692 1693 }) 1694 1695 orderCombo.addEventListener('change', (item) => { 1696 setOrder(item.target.value); 1697 }) 1698 1699 filterCombo.addEventListener('change', (item) => { 1700 setFilter(item.target.value); 1701 }) 1702 1703 1704 1705 orderContainer.classList.add('active'); 1706 filterContainer.classList.add('active'); 1707 1708 // ******************************************* 1709 const cards = cardsList.querySelectorAll('.card-news-container'); 1710 1711 if (cards.length == 0) { 1712 let noItemMsg = document.createElement('p'); 1713 let msg = document.createTextNode('Nenhum resultado encontrado para o filtro selecionado além do(s) card(s) em destaque!'); 1714 noItemMsg.classList.add('paragraph-sm-regular'); 1715 1716 noItemMsg.appendChild(msg); 1717 1718 cardsList.appendChild(noItemMsg); 1719 } 1720 1721 // Liferay Pagination Edits: 1722 const paginationItens = document.querySelectorAll('.pagination-bar .pagination .page-item'); 1723 1724 if (paginationItens.length > 0) { 1725 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"> 1726 <path d="M13.5 8H2.5M2.5 8L7 3.5M2.5 8L7 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1727 </svg>`; 1728 1729 paginationItens[0].classList.add('round-border'); 1730 1731 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"> 1732 <path d="M2.5 8H13.5M13.5 8L9 3.5M13.5 8L9 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1733 </svg>`; 1734 1735 paginationItens[(paginationItens.length - 1)].classList.add('round-border'); 1736 1737 1738 paginationItens.forEach(item => { 1739 item.classList.add('show-item'); 1740 }); 1741 1742 } 1743 }); 1744 1745 1746AUI().ready(() => { 1747 function setLinks${contentNumber}() { 1748 1749 const allCards = document.querySelectorAll(".${rootCss} .card-news-container"); 1750 allCards.forEach((card) => { 1751 card.addEventListener('click', (event) => { 1752 card.querySelector('a').click(); 1753 }); 1754 }) 1755 1756 document.querySelector('.${rootCss} .card-news-list').classList.add('active'); 1757 1758 } 1759 1760 setLinks${contentNumber}() 1761}); 1762 1763</script> Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Escolha um Canal:
java.lang.NullPointerException
Acessibilidade
Idioma:
Selecione um idioma: