Prefeitura de São Paulo

1<style> 

2.psp-card-services{ 

3  display: flex; 

4	flex-wrap: wrap; 

5	gap: 16px; 

6	justify-content: space-between; 

7	width: calc(100% - 2px); 

8	margin: 0 auto; 

9} 

10 

11.psp-card-services>a{ 

12  flex-basis: calc(100%/4 - 16px); 

13	flex-grow: 1; 

14} 

15 

16.card-service-highlight { 

17  position: relative; 

18  height: 120px; 

19  border-radius: 10px; 

20  transition: 0.5s; 

21	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08); 

22	position: relative; 

23	overflow: hidden; 

24} 

25 

26.card-service-highlight .box { 

27  position: absolute; 

28  background: white; 

29  border-radius: 10px; 

30  display: flex; 

31  justify-content: center; 

32  align-items: center; 

33  overflow: hidden; 

34  transition: 0.5s; 

35	left: 0; 

36  right: 0; 

37	top: 0; 

38	bottom: 0; 

39} 

40 

41.card-service-highlight .bg{ 

42    position: absolute; 

43    top: 0; 

44    left: 0; 

45    right: 0; 

46    height: 100%; 

47    background: var(--primary); 

48    z-index: 1; 

49    transform: translateY(-95%); 

50	  transition: .4s; 

51} 

52 

53 

54.card-service-highlight .box .content { 

55  padding: 20px; 

56  text-align: center; 

57	z-index: 1; 

58} 

59 

60 

61.card-service-highlight .box .content::before { 

62	content: "Cidadão"; 

63  position: absolute; 

64  bottom: 5px; 

65  right: 5px; 

66  font-size: 3.8rem; 

67  color: rgba(0,0,0,0.1); 

68	transform: translateY(190%); 

69	transition: .5s; 

70} 

71 

72.psp-card-services>div:first-child .box .content i{ 

73  color: rgba(236,102,8,1); 

74} 

75 

76.psp-card-services .card-service-highlight:hover .bg{ 

77  transform: translateY(0); 

78} 

79 

80.psp-card-services>div:first-child .card-service-highlight .bg{ 

81  background: rgba(236,102,8,1); 

82} 

83 

84.psp-card-services .card-service-highlight:hover .box .content::before{ 

85  color: rgba(255,255,255,0.6) !important; 

86	transform: translateY(0); 

87} 

88 

89.card-service-highlight .box .content h3 { 

90  font-size: 0.75rem; 

91	font-weight: 600; 

92	text-transform: uppercase; 

93	letter-spacing: 1px; 

94  color: var(--black); 

95  z-index: 1; 

96  transition: 0.5s; 

97  margin-bottom: 5px; 

98} 

99 

100.psp-card-services .card-service-highlight:hover .box .content h3,  

101.card-service-highlight:hover .box .content i{ 

102  color: white !important; 

103} 

104 

105.card-service-highlight .box .content i{ 

106  font-size: 2.4rem; 

107}	 

108</style> 

109 

110<#assign VOCABULARY_GROUP_SERVICE_ID = 4090540 /> 

111<#assign categories = restClient.get('/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/' + VOCABULARY_GROUP_SERVICE_ID + '/taxonomy-categories').items![] /> 

112 

113<#function getFieldValue fieldName> 

114  	<#assign field = DDMFormFieldValuesMap.fieldName[0] /> 

115	  <#return field.getValue().getString(locale) /> 

116</#function> 

117 

118<#macro getFields curEntry>	 

119	<#assign DDMFormFieldValuesMap = curEntry.getAssetRenderer().getDDMFormValuesReader().getDDMFormValues() /> 

120	<#assign fieldsArray = [] /> 

121	 

122  <#list DDMFormFieldValuesMap.getDDMFormFieldValues() as l> 

123		 <#assign fieldsArray = fieldsArray + [l.getValue().getString(locale)] /> 

124	</#list> 

125	 

126	<#assign title = curEntry.getTitle(locale) /> 

127	<#assign redirectURL = fieldsArray[0] /> 

128	<#assign icon = fieldsArray[1]  /> 

129	<#assign isExternalLink = fieldsArray[4] /> 

130	<#assign target = "_self" /> 

131	<#assign colorCategory = "var(--primary)" /> 

132	<#assign nameCategory = "Cidadão" /> 

133	 

134	<#if isExternalLink == "true"> 

135	  <#assign target = "_blank" /> 

136	<#else> 

137		<#assign redirectURL = "/" + curEntry.getAssetRenderer().getArticle().getUrlTitle(locale) /> 

138	</#if> 

139</#macro> 

140 

141 

142<#if entries?has_content> 

143	<div class="psp-card-services"> 

144	<#list entries as curEntry> 

145		<@getFields curEntry=curEntry /> 

146		<#list categories as cat> 

147		   <#if curEntry.getCategoryIds()?seq_contains(cat.id?number)> 

148				 <#assign colorCategory = cat.taxonomyCategoryProperties[0].value /> 

149				 <#assign nameCategory = cat.name /> 

150				 <#break /> 

151			 </#if> 

152		</#list> 

153		 

154		<style> 

155			.card-${template_id}${curEntry?index}  .box .content::before{ 

156				content: "${nameCategory}"; 

157				color: ${colorCategory}; 

158			} 

159				 

160			.card-${template_id}${curEntry?index} .bg{ 

161			  background: ${colorCategory}; 

162			} 

163			 

164			.card-${template_id}${curEntry?index}  .box .content i{ 

165			  color: ${colorCategory}; 

166			} 

167		</style> 

168		 

169		<a class="card-service-highlight card-${template_id}${curEntry?index}" title="${title}" href="${redirectURL}" target="${target}"> 

170      <div class="bg"></div> 

171      <div class="box"> 

172      <div class="content"> 

173			  <i class="material-icon"><#if icon != "">${icon}<#else>task</#if></i> 

174        <h3>${title?truncate(40)}</h3> 

175      </div> 

176      </div> 

177    </a> 

178	</#list>	 

179	</div> 

180</#if>