Liderança na transição energética justa
7 min
Título
Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Mais lidos
Nossas Atividades
5 autores negros que você precisa conhecer
Artigo
5 min
Sustentabilidade
Como cuidamos das florestas que nos abrigam
Artigo
6 min
Nossas Atividades
Nossa jornada começa na Bahia, vem conferir! | Mochileiras
Artigo
3 min
Sustentabilidade
O (en)canto que vem do oceano
Artigo
5 min
Inovação
10 filmes sobre tecnologia e inovação
Artigo
3 min
Transição Energética
Conheça a primeira gasolina carbono neutro do país
Artigo
6 min
Nossas Atividades
De onde vem a gasolina?
Artigo
3 min
Nossas Atividades
Pré-sal: 15 anos de uma conquista que fez história
Artigo
4 min
Mais recentes
Um erro ocorreu enquanto processava o modelo.
The following has evaluated to null or missing:
==> getDataForCard(card).ourEnergyCategory [in template "20099#20135#10884565" at line 609, column 71]
----
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: #assign filterCardsNews = cards?filte... [in template "20099#20135#10884565" in macro "renderCards" at line 609, column 21]
- Reached through: @renderCards allAssets [in template "20099#20135#10884565" at line 653, column 9]
----
1<#-- Conteúdo Web -> Templates: Funções gerais -->
2<#include "${templatesPath}/1975398" />
3
4
5<#-- Liferay Services -->
6<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
7<#assign fileEntryService = staticUtil["com.liferay.document.library.kernel.service.DLFileEntryLocalServiceUtil"] />
8<#assign assetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService") />
9<#assign assetVocabularyService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyService") />
10<#assign assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") />
11<#assign AssetEntryQuery = objectUtil('com.liferay.asset.kernel.service.persistence.AssetEntryQuery')>
12<#assign PortalUtil = staticUtil["com.liferay.portal.kernel.util.PortalUtil"]>
13<#assign AssetEntryQueryService = objectUtil("com.liferay.asset.kernel.service.AssetEntryLocalServiceUtil").getService()>
14
15<#assign vocabularies = assetVocabularyService.getGroupVocabularies(groupId) />
16<#assign ourEnergyVocabulary = findVocabulary("Nossa Energia", vocabularies)/>
17<#assign typeOfNewsVocabulary = findVocabulary("Tipo de Notícia", vocabularies)/>
18<#assign numberOfCards = 4/>
19
20
21<#attempt>
22 <#assign ourEnergyCategories = [] />
23 <#list ourEnergyVocabulary.getCategories() as ourEnergyCategory >
24 <#assign categorySortOrder = 1 />
25 <#assign categorySortOrderByService = ""/>
26 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Ordem")??)>
27 <#assign categorySortOrderByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Ordem") />
28 <#if categorySortOrderByService.value?matches("^[0-9]+$")>
29 <#assign categorySortOrder = categorySortOrderByService.value?number />
30 </#if>
31 </#if>
32
33 <#assign shadowColorCategory = "" />
34 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra")??)>
35 <#assign categoryShadowColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor da Sombra") />
36 <#assign shadowColorCategory = categoryShadowColorByService.value />
37 </#if>
38
39 <#assign backgroundColorCategory = "" />
40 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo")??)>
41 <#assign categoryBackgroundColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor de Fundo") />
42 <#assign backgroundColorCategory = categoryBackgroundColorByService.value />
43 </#if>
44
45 <#assign textColorCategory = "" />
46 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto")??)>
47 <#assign categoryTextColorByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto") />
48 <#assign textColorCategory = categoryTextColorByService.value />
49 </#if>
50
51 <#assign textColorHighContrastCategory = "" />
52 <#if (assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste")??)>
53 <#assign categoryTextColorHighContrastByService = assetCategoryPropService.fetchCategoryProperty(ourEnergyCategory.getCategoryId(),"Cor do Texto em Alto Contraste") />
54 <#assign textColorHighContrastCategory = categoryTextColorHighContrastByService.value />
55 </#if>
56
57 <#assign ourEnergyCategories += [{"sortOrder": categorySortOrder, "title": ourEnergyCategory.getName(), "titleLocale": ourEnergyCategory.getTitle(locale), "shadowColor": shadowColorCategory, "backgroundColor": backgroundColorCategory, "textColor": textColorCategory, "textColorHighContrast": textColorHighContrastCategory}] />
58 </#list>
59
60 <#assign allCategoriesText = ""/>
61
62 <#if locale?lower_case == "pt_br">
63 <#assign allCategoriesText = "Todos"/>
64 <#else>
65 <#assign allCategoriesText = "All"/>
66 </#if>
67
68 <#assign allOurEnergyCategories = [{"sortOrder": 0, "title": "Todos", "titleLocale": allCategoriesText, "shadowColor": "", "backgroundColor": "FFF", "textColor": "008542", "textColorHighContrast": "E4F7E8"}] + ourEnergyCategories />
69 <#assign allOurEnergyCategories = allOurEnergyCategories?sort_by("sortOrder") />
70
71 <#recover>
72 <#assign ourEnergyCategories = [] />
73 <#assign allOurEnergyCategories = [] />
74
75</#attempt>
76
77<#-- Root Css -> Para poder instanciar dois elementos e não dar confusão no JS -->
78<#assign contentNumber = randomNumber(4586) />
79<#assign rootCss = "card-news-list-category-container_" + randomNumber(4586) />
80
81<#assign groupId = themeDisplay.getScopeGroupId()>
82<#assign companyId = themeDisplay.getCompanyId()>
83<#assign realUserId = themeDisplay.getDefaultUserId() />
84<#assign className = "com.liferay.journal.model.JournalArticle">
85<#assign classNameId = PortalUtil.getClassNameId(className)>
86
87${AssetEntryQuery.setClassNameIds([classNameId]) }
88${AssetEntryQuery.setEnd(numberOfCards)}
89${AssetEntryQuery.setOrderByCol1("createDate")}
90${AssetEntryQuery.setOrderByType1("DESC")}
91
92<#assign allAssets = []/>
93<#list ourEnergyVocabulary.getCategories() as ourEnergyCategory>
94 ${AssetEntryQuery.setAllCategoryIds([ourEnergyCategory.getCategoryId()])}
95 <#assign ents = AssetEntryQueryService.getEntries(AssetEntryQuery) />
96 <#assign allAssets = allAssets + ents />
97</#list>
98
99<#-- Na lista de Web Contents é inserido um atributo data de moficacao para cada Web Content,
100seguidamente é ordenado em ordem decrescente pela data
101depois descarta-se a data -->
102<#assign allAssets = allAssets
103 ?map(asset -> {"content": asset, "date": asset.getCreateDate()})
104 ?sort_by("date")?reverse
105 ?map(assetInfo -> assetInfo.content) />
106
107<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article -->
108<#function getFirstCategoryOfVocabulary journalArticle vocabulary >
109 <#attempt>
110 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) />
111
112 <#list categories as category>
113 <#if vocabulary.getVocabularyId() == category.getVocabularyId()>
114 <#return category.getName()>
115 </#if>
116 </#list>
117
118 <#return "">
119
120 <#recover>
121 <#return "" />
122
123 </#attempt>
124</#function>
125
126<#-- Função para obter os dados de um card no Web Content (Journal Article) -->
127<#function getDataForCard entry >
128 <#attempt>
129 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entry.getClassPK()) />
130 <#assign ddmStructure = journalArticle.getDDMStructure() />
131 <#assign fieldList = getFieldListByStructure(ddmStructure) />
132 <#assign xmlArticle = journalArticle.getDocument().getRootElement() />
133 <#assign ddmStructure = journalArticle.getDDMStructure() />
134
135 <#-- Tentando pegar Imagem -->
136 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) />
137 <#assign media = "" />
138 <#list mediasGroup as mediaGroup >
139 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) />
140
141 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${media.fileEntryId}") />
142
143 <#assign urlAdaptativeMedia = ""/>
144 <#if media.url?? && media.url?has_content && fileDataRequest?? && fileDataRequest.adaptedImages?? >
145 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages />
146 <#list dataAdaptativeMedia as data>
147 <#if data.resolutionName == "Preview-1000x0">
148 <#assign urlAdaptativeMedia = data.contentUrl/>
149 </#if>
150 </#list>
151 </#if>
152 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "imageFileEntryId": media.fileEntryId, "urlAdaptativeMedia": urlAdaptativeMedia} />
153
154 <#-- Se não tiver imagem, tentar pegar vídeo -->
155 <#if !media.imageSrc?? || !media.imageSrc?has_content>
156 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") />
157 <#if youtubeID?? && youtubeID?has_content>
158 <#assign media = {"videoYotubeID": youtubeID} />
159 <#else>
160 <#-- Tentar pegar vídeo Interno -->
161 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) />
162 <#if internalVideo?? && internalVideo?has_content>
163 <#assign media = {"internalVideo": internalVideo} />
164 </#if>
165 </#if>
166 </#if>
167 </#list>
168
169 <#assign title = getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia") />
170
171 <#assign timeRead = getFieldValue(fieldList, xmlArticle, "Tempo de Leitura") />
172
173 <#assign ourEnergyCategory = getFirstCategoryOfVocabulary(entry, ourEnergyVocabulary) />
174
175 <#assign typeOfNews = getFirstCategoryOfVocabulary(entry, typeOfNewsVocabulary) />
176
177 <#if themeDisplay.getPortalURL()?contains("webserver")>
178 <#assign urlNews = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + journalArticle.getUrlTitle()>
179 <#else>
180 <#assign urlNews = themeDisplay.getPortalURL() + "/w/" + journalArticle.getUrlTitle()>
181 </#if>
182
183 <#assign cardData = {"media": media, "title": title, "timeRead": timeRead, "ourEnergyCategory": ourEnergyCategory, "typeOfNews": typeOfNews, "urlNews": urlNews} />
184
185 <#return cardData>
186
187 <#recover>
188 <#return {} />
189 </#attempt>
190
191 <#-- cardData -> image: url, alt
192 title
193 timeRead
194 ourEnergyCategory
195 typeOfNews
196 urlNews
197 -->
198</#function>
199
200
201<#-- Macro para renderizar um Card -->
202<#macro renderCard cardData>
203 <#-- cardData -> image: url, alt
204 title
205 timeRead
206 ourEnergyCategory
207 typeOfNews
208 urlNews
209 -->
210
211 <div class="card-news-container">
212 <a class="card-link" href="${cardData.urlNews}" style="display: none;"> Noticia: ${cardData.title} </a>
213
214 <div class="card-news-thumb">
215 <#assign noImage = "" />
216 <#if cardData.media.imageSrc?? && cardData.media.imageSrc?has_content>
217 <#assign imageSrc = cardData.media.imageSrc />
218 <#if cardData.media.urlAdaptativeMedia?? && cardData.media.urlAdaptativeMedia?has_content>
219 <#assign imageSrc = cardData.media.urlAdaptativeMedia />
220 </#if>
221 <img class="card-news-image" src="${imageSrc}" alt="${cardData.media.imageAlt}"/>
222 <#else>
223 <#if cardData.media.videoYotubeID?? && cardData.media.videoYotubeID?has_content>
224 <img class="card-news-image" src="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/maxresdefault.jpg" alt="YouTube Thumbnail"/>
225 <#else>
226 <#if (cardData.media.internalVideo?? && cardData.media.internalVideo.url?has_content) >
227 <video class="card-news-image">
228 <source src="${cardData.media.internalVideo.url}">
229 Your browser does not support the video tag.
230 </video>
231 <#else>
232 <#assign noImage = "no-image" />
233 </#if>
234 </#if>
235 <svg class="thumb-play-icon" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
236 <path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white" fill-opacity="0.8"/>
237 <path d="M22.2563 15.5744L13.2625 10.0744C13.1868 10.0277 13.1 10.0021 13.0111 10.0001C12.9221 9.99816 12.8343 10.02 12.7566 10.0633C12.6789 10.1066 12.6141 10.1698 12.569 10.2465C12.5239 10.3232 12.5001 10.4105 12.5 10.4994V21.4994C12.5001 21.5884 12.5239 21.6757 12.569 21.7524C12.6141 21.8291 12.6789 21.8923 12.7566 21.9356C12.8343 21.9789 12.9221 22.0007 13.0111 21.9988C13.1 21.9968 13.1868 21.9712 13.2625 21.9244L22.2563 16.4244C22.3301 16.3808 22.3913 16.3186 22.4338 16.2441C22.4763 16.1696 22.4987 16.0852 22.4987 15.9994C22.4987 15.9137 22.4763 15.8293 22.4338 15.7548C22.3913 15.6803 22.3301 15.6181 22.2563 15.5744Z" fill="#008542"/>
238 </svg>
239 </#if>
240 </div>
241
242 <div class="card-news-content ${noImage}">
243 <div class="card-news-text-content">
244 <div data-category="${cardData.ourEnergyCategory}" class="card-news-category paragraph-micro-regular"> ${cardData.ourEnergyCategory} </div>
245 <div class="card-news-title h4"> ${cardData.title} </div>
246 </div>
247
248 <div class="card-news-tags">
249 <div class="card-news-type">
250 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
251 <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"/>
252 </svg>
253
254 <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div>
255 </div>
256 <#if cardData.timeRead?? && cardData.timeRead?has_content>
257 <div class="card-news-time-read">
258 <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">
259 <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"/>
260 </svg>
261
262 <div class="card-news-time-read-text paragraph-micro-regular">${cardData.timeRead} min</div>
263 </div>
264 </#if>
265 </div>
266 </div>
267 </div>
268</#macro>
269
270<style>
271 .${rootCss} .card-news-container {
272 display: flex;
273 width: 100%;
274 min-height: 212px;
275 height: 212px;
276 align-items: center;
277 align-self: stretch;
278 border-radius: var(--border-radius-lg);
279 border: var(--border-width-hairline) solid var(--border-card-default, #EEE);
280 background: var(--background-surface-level-01, #FFF);
281 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
282 overflow: hidden;
283 cursor: pointer;
284 transition: border 300ms ease-in-out;
285 position: relative;
286 }
287
288 body.high-contrast-active .${rootCss} .card-news-container {
289 border: var(--border-width-hairline) solid var(--border-card-default, #525252);
290 background: var(--background-surface-level-01, #010101);
291 }
292
293 .${rootCss} .card-news-container:hover {
294 border: var(--border-width-hairline) solid rgb(0, 133, 66);
295 }
296
297 body.high-contrast-active .${rootCss} .card-news-container:hover {
298 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8);
299 }
300
301 .${rootCss} .card-news-container .card-news-link {
302 position: absolute;
303 top: 0;
304 width: 100%;
305 height: 100%;
306 z-index: 1;
307 }
308
309 .${rootCss} .card-news-container .card-news-thumb {
310 position: relative;
311 width: 100%;
312 height: 100%;
313 max-width: 378px;
314 min-height: 212px;
315 flex: 1 0 0;
316 align-self: stretch;
317 object-fit: cover;
318 pointer-events: none;
319 }
320
321 .${rootCss} .card-news-container .card-news-thumb .card-news-image {
322 width: 100%;
323 height: 100%;
324 max-width: 378px;
325 min-height: 212px;
326 flex: 1 0 0;
327 align-self: stretch;
328 object-fit: cover;
329 }
330
331 .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon {
332 position: absolute;
333 left: 50%;
334 top: 50%;
335 transform: translate(-50%, -50%);
336 }
337
338 .${rootCss} .card-news-container .card-news-content {
339 display: flex;
340 padding: var(--space-md, 24px);
341 flex-direction: column;
342 align-items: flex-start;
343 gap: var(--space-lg, 32px);
344 flex: 1 0 0;
345 pointer-events: none;
346 }
347
348 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(1) {
349 fill: black;
350 }
351
352 body.high-contrast-active .${rootCss} .card-news-container .card-news-thumb .thumb-play-icon path:nth-child(2) {
353 fill: white;
354 }
355
356 .${rootCss} .card-news-container .card-news-content .card-news-text-content {
357 display: flex;
358 flex-direction: column;
359 align-items: flex-start;
360 gap: var(--space-sm, 16px);
361 align-self: stretch;
362 pointer-events: none;
363 }
364
365 .${rootCss} .card-news-container .card-news-content .card-news-category {
366 display: flex;
367 justify-content: center;
368 align-items: center;
369 padding: var(--space-micro) var(--space-xs);
370 border-radius: var(--border-radius-pill);
371 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);
372 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10);
373 line-height: var(--line-height-lg, 144%);
374 color: var(--default-sup-green-water, #006B65);
375 pointer-events: none;
376 }
377
378 .${rootCss} .card-news-container .card-news-content .card-news-title {
379 display: -webkit-box;
380 -webkit-box-orient: vertical;
381 -webkit-line-clamp: 4;
382 align-self: stretch;
383 overflow: hidden;
384 color: var(--text-primary-default, #373737);
385 text-overflow: ellipsis;
386 margin: 0;
387 pointer-events: none;
388 }
389
390 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-title {
391 color: var(--text-primary-default, #FFF);
392 }
393
394 .${rootCss} .card-news-container .card-news-content .card-news-tags {
395 display: flex;
396 align-items: center;
397 align-content: center;
398 gap: var(--space-sm, 16px);
399 align-self: stretch;
400 flex-wrap: wrap;
401 }
402
403 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type,
404 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read {
405 display: flex;
406 align-items: center;
407 gap: var(--space-xxs, 8px);
408 }
409
410 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type path {
411 stroke: #D7D7D7;
412 }
413
414 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type .card-news-type-text,
415 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-time-read-text {
416 color: var(--text-tertiary-default, #959595);
417 line-height: var(--line-height-lg, 144%);
418 }
419
420 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-type .card-news-type-text,
421 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-time-read-text {
422 color: var(--text-tertiary-default, #EEE);
423 }
424
425 .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-icon-time-read {
426 transform: translateY(-0.5px);
427 }
428
429 body.high-contrast-active .${rootCss} .card-news-container .card-news-content .card-news-tags .card-news-time-read .card-news-icon-time-read path {
430 fill: #D7D7D7;
431 }
432
433 @media screen and (max-width: 1024px) {
434 .${rootCss} .card-news-container {
435 height: 370px;
436 min-width: 256px;
437 max-width: 680px;
438 flex-direction: column;
439 align-items: flex-start;
440 }
441
442 .${rootCss} .card-news-container .card-news-thumb {
443 max-width: 100%;
444 }
445
446 .${rootCss} .card-news-container .card-news-image {
447 height: 168px;
448 min-height: 168px;
449 max-width: 100% !important;
450 width: 100%;
451 }
452
453 .${rootCss} .card-news-container picture:has(.card-news-image) {
454 width: 100%;
455 }
456
457 .${rootCss} .card-news-container .card-news-content {
458 position: relative;
459 padding: var(--space-lg, 32px) var(--space-md, 24px);
460 }
461
462 .${rootCss} .card-news-container .card-news-content.no-image {
463 padding-top: var(--space-sm);
464 }
465
466 .${rootCss} .card-news-container .card-news-content .card-news-text-content {
467 gap: var(--space-sm, 16px);
468 flex: 1 0 0;
469 }
470
471 .${rootCss} .card-news-container .card-news-content .card-news-category {
472 position: absolute;
473 left: 24px;
474 top: -13px;
475 }
476
477 .${rootCss} .card-news-container .card-news-content.no-image .card-news-category {
478 position: relative;
479 top: 0;
480 left: 0;
481 }
482 }
483</style>
484
485<#macro renderCategories>
486 <div class="categories-container">
487 <div class="categories-text paragraph-md-regular">
488 <#if locale?lower_case == "pt_br">
489 Categorias:
490 <#else>
491 Categories:
492 </#if>
493 </div>
494
495 <div class="categories-list">
496 <#list allOurEnergyCategories as category>
497 <div class="category-container">
498 <div data-category="${category.title}" class="our-energy-category paragraph-micro-regular <#if category?is_first>category-active</#if>">
499 ${category.titleLocale}
500 </div>
501 </div>
502 </#list>
503 </div>
504 </div>
505
506 <style>
507 .${rootCss} .categories-container {
508 display: flex;
509 align-items: center;
510 align-content: center;
511 gap: var(--space-sm, 16px);
512 align-self: stretch;
513 flex-wrap: wrap;
514 }
515
516 .${rootCss} .categories-container .categories-text {
517 color: var(--text-secondary-default, #525252);
518 }
519
520 body.high-contrast-active .${rootCss} .categories-container .categories-text {
521 color: #F8F8F8;
522 }
523
524 .${rootCss} .categories-container .categories-list {
525 display: flex;
526 min-width: 256px;
527 max-width: 680px;
528 align-items: center;
529 align-content: center;
530 gap: var(--space-sm, 16px);
531 flex-wrap: wrap;
532 }
533
534
535 .${rootCss} .categories-container .categories-list .our-energy-category {
536 display: flex;
537 padding: var(--space-micro, 2px) var(--space-xs, 12px);
538 justify-content: center;
539 align-items: center;
540 border-radius: var(--border-radius-pill);
541 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(--background-surface-level-01, #FFF);
542 line-height: var(--line-height-lg);
543 cursor: pointer;
544 color: var(--text-primary-accent, #008542);
545 }
546
547 .${rootCss} .categories-container .categories-list .category-container {
548 padding: var(--size-nano);
549 border-radius: var(--border-radius-pill);
550 border: var(--border-width-hairline) solid transparent;
551 }
552
553 .${rootCss} .categories-container .categories-list .category-container:has(.our-energy-category.category-active) {
554 border: var(--border-width-hairline) solid var(--border-color-accent, #008542);
555 }
556
557 body.high-contrast-active .${rootCss} .categories-container .categories-list .category-container:has(.our-energy-category.category-active) {
558 border: var(--border-width-hairline) solid rgba(228, 247, 232, 1);
559 }
560
561 @media screen and (max-width: 1024px) {
562 .${rootCss} .categories-container {
563 flex-wrap: nowrap;
564 width: 100%;
565 }
566
567 .${rootCss} .categories-container .categories-list {
568 flex-wrap: nowrap;
569 width: fit-content;
570 overflow: auto;
571 scrollbar-width: none;
572 scroll-snap-type: x mandatory;
573 padding-right: var(--space-lg);
574 }
575
576 .${rootCss} .categories-container .categories-list::-webkit-scrollbar {
577 display: none;
578 }
579
580 .${rootCss} .categories-container .categories-list .category-container {
581 scroll-snap-align: start;
582 }
583
584 .${rootCss} .categories-container .categories-list .category-container .our-energy-category {
585 white-space: nowrap;
586 scroll-snap-align: start;
587 }
588 }
589
590 </style>
591</#macro>
592
593<#macro renderCards cards>
594
595 <div class="card-news-list">
596 <#list allOurEnergyCategories as categoryOurEnergy>
597 <div class="${categoryOurEnergy.title} <#if categoryOurEnergy?is_first>category-active</#if>">
598 <#if categoryOurEnergy.title == "Todos">
599 <#assign filterCardsNews = cards />
600 <#if filterCardsNews?size gt numberOfCards>
601 <#assign filterCardsNews = filterCardsNews[0..numberOfCards-1] />
602 </#if>
603 <#list filterCardsNews as cardNews>
604 <#assign cardData = getDataForCard(cardNews) />
605 <@renderCard cardData/>
606 </#list>
607
608 <#else>
609 <#assign filterCardsNews = cards?filter(card -> (getDataForCard(card).ourEnergyCategory == categoryOurEnergy.title)) />
610
611 <#if filterCardsNews?size gt numberOfCards>
612 <#assign filterCardsNews = filterCardsNews[0..numberOfCards-1] />
613 </#if>
614
615 <#list filterCardsNews as cardNews>
616 <#assign cardData = getDataForCard(cardNews) />
617 <@renderCard cardData/>
618 </#list>
619 </#if>
620 </div>
621 </#list>
622 </div>
623
624 <style>
625 .${rootCss} .card-news-list {
626 display: flex;
627 }
628
629 .${rootCss} .card-news-list > div {
630 display: none;
631 flex-direction: column;
632 align-items: flex-start;
633 gap: var(--space-sm, 16px);
634 align-self: stretch;
635 }
636
637 .${rootCss} .card-news-list > div.category-active {
638 display: flex;
639 flex-direction: column;
640 align-items: flex-start;
641 gap: var(--space-sm, 16px);
642 align-self: stretch;
643 }
644 </style>
645
646
647</#macro>
648
649<#-- Renderizar Lista de cards -->
650<#if allAssets?has_content>
651 <div class="${rootCss}">
652 <@renderCategories />
653 <@renderCards allAssets />
654 </div>
655</#if>
656
657
658<style>
659
660 .portlet {
661 margin: 0;
662 }
663
664 .${rootCss} {
665 width: 100%;
666 font-family: var(--font-family-base, "Petrobras Sans");
667 display: flex;
668 flex-direction: column;
669 gap: var(--space-lg);
670 }
671
672</style>
673
674<#list allOurEnergyCategories as ourEnergyCategory>
675 <style>
676 .${rootCss} [data-category="${ourEnergyCategory.title}"] {
677 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%), #${ourEnergyCategory.backgroundColor} !important;
678 box-shadow: 0px 2px 6px 0px #${ourEnergyCategory.shadowColor} !important;
679 color: #${ourEnergyCategory.textColor} !important;
680 }
681
682 body.high-contrast-active .${rootCss} [data-category="${ourEnergyCategory.title}"] {
683 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%), #${ourEnergyCategory.backgroundColor} !important;
684 color: #${ourEnergyCategory.textColorHighContrast} !important;
685 }
686
687 </style>
688</#list>
689
690<script>
691
692 document.addEventListener('DOMContentLoaded', ()=>{
693 const root = document.querySelector(".${rootCss}");
694 const listCategoriesItens = root.querySelectorAll(".categories-list .category-container .our-energy-category");
695 const listOfCardsByCategory = [...root.querySelector(".card-news-list").children];
696
697 listCategoriesItens.forEach((category, index)=>{
698 category.addEventListener("click", ()=>{
699
700 const categoryActive = root.querySelector(".categories-list .category-active");
701 const listOfCardsActive = root.querySelector(".card-news-list .category-active");
702
703 categoryActive.classList.remove("category-active");
704 listOfCardsActive.classList.remove("category-active");
705
706 category.classList.add("category-active");
707 listOfCardsByCategory[index].classList.add("category-active");
708 });
709 });
710 });
711
712
713function setLinks${contentNumber}() {
714
715 const allCategoryCards = document.querySelectorAll(".${rootCss} .card-news-container");
716 allCategoryCards.forEach((card) => {
717 card.addEventListener('click', (event) => {
718 const element = event.target;
719 console.log(element);
720 element.querySelector('a').click();
721 });
722 })
723
724 document.querySelector('.${rootCss} .card-news-list').classList.add('active');
725
726}
727
728setLinks${contentNumber}()
729
730
731</script>
ASSINE A NEWSLETTER DA PETROBRAS NO LINKEDIN
Acompanhe como estamos nos preparando para o futuro de baixo carbono, conectados a um mundo em transformação.
Mochileiras - viaje
X
X
X
X
Mochileiras - viaje
X
X
X
X
Veja Mais
Inovação
O que Street Fighter IV, Photoshop, o Angry Birds e a Petrobras tem em comum?
Artigo
3 min
Inovação
Internet das coisas em favor da segurança
Artigo
5 min
Inovação
Natureza como Inspiração
Artigo
7 min
Inovação
Conheça nosso sistema imersivo de pesquisa de campo
Artigo
4 min
Transição Energética
Liderança na transição energética justa
Artigo
7 min
Inovação
Robô-bombeiro: uma invenção futurista para garantir nossa segurança hoje
Artigo
3 min
Inovação
Uma receita premiada: o que as tecnologias pioneiras do campo de Búzios têm em comum com a gastronomia?
Artigo
7 min
Inovação
As mil e uma utilidades do scanner 3D – e como essa tecnologia está cada vez mais acessível
Artigo
6 min
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: