cMainFooterSocial.ftl
1 <#-- Macro: cMainFooterSocial
2
3 Description: affiche un pied de page principal avec les boutons réseaux sociaux de Paris.fr.
4
5 Parameters:
6 @param - title - string - required - nom du service numérique
7 @param - nested_pos - string - required - position du contenu 'nested' passé dans la macro. Valeurs possible avant,'before' et aprés,'after'
8 @param - socialNested - string - optional - position du contenu 'nested' passé dans la macro. Valeurs possible avant,'before' et après,'after'
9 @param - align - string - required - alignement de la partie "menu" dans le pied de page. Valeurs possibles : 'arround' | 'between' | 'start' | 'end' | 'evenly'
10 @param - classColMain - string - required - taille de la zone "menu"
11 @param - classColSocial - string - required - taille de la zone "social"
12 @param - params - string - optionnal - permet d'ajouter des parametres HTML au tag footer
13 -->
14 <#macro cMainFooterSocial title nested_pos='after' socialNested='' align='around' classColMain='col-md-7' classColSocial='col-md-5' params='' deprecated...>
15 <@deprecatedWarning args=deprecated />
16 <#if !dskey('theme.site_property.menu.sidebarMenu.checkbox')?starts_with('DS') && dskey('theme.site_property.menu.sidebarMenu.checkbox')?number == 1></div></div></#if>
17 <footer class="social z-1" role="contentinfo"<#if params !=''> ${params!}</#if>>
18 <div class="row m-0">
19 <div class="col-12 <#if classColMain !=''> ${classColMain}</#if>">
20 <div class="main-footer justify-content-${align} py-4">
21 <div class="d-flex align-items-center justify-content-center justify-content-lg-start w-100">
22 <a class="logo hide-icon-target" href="${urlMainSite}" target="_blank">
23 <@cImg src=logoFooter! class='d-inline-block' id='footer-img' alt='#i18n{theme.labelGoToSite} ${mainSite!}' />
24 </a>
25 <hr aria-hidden="true">
26 <a class="site" title="#i18n{theme.labelGoToSite} ${title}" href=".">${title}</a>
27 </div>
28 </div>
29 <div class="main-footer justify-content-${align}">
30 <div class="d-flex align-items-center">
31 <ul class="nav d-flex justify-content-center justify-content-md-start" aria-label="#i18n{theme.footerInfo}" >
32 <#if nested_pos='before'><#nested></#if>
33 <@_footerMenu />
34 <#if nested_pos='after'>
35 <#nested>
36 </#if>
37 </ul>
38 </div>
39 </div>
40 </div>
41 <div class="col-12 main-bg-color<#if classColSocial !=''> ${classColSocial}</#if> d-flex justify-align-items">
42 <div class="social-links">
43 <#if socialNested !=''><div class="d-flex justify-content-center align-items-center">${socialNested}</div></#if>
44 <h2 class="paris-footer-social-title text-center text-gray">#i18n{theme.labelFollow}</h2>
45 <ul class="list-inline text-center">
46 <li class="list-inline-item">
47 <a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de ${footerSocialTitleFb}" href="${footerSocialLinkFb}">
48 <svg class="paris-icon paris-icon-facebook" role="img" aria-labelledby="paris-icon-title-fb" focusable="false">
49 <title id="paris-icon-title-fb">${footerSocialTitleFb}</title>
50 <use xlink:href="#paris-icon-facebook"></use>
51 </svg>
52 </a>
53 </li>
54 <li class="list-inline-item">
55 <a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de ${footerSocialTitleTw}" href="${footerSocialLinkTw}">
56 <svg class="paris-icon paris-icon-x" role="img" aria-labelledby="paris-icon-title-tw" focusable="false">
57 <title id="paris-icon-title-x">${footerSocialTitleTw}</title>
58 <use xlink:href="#paris-icon-x"></use>
59 </svg>
60 </a>
61 </li>
62 <li class="list-inline-item">
63 <a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de ${footerSocialTitleIn}" href="${footerSocialLinkIn}">
64 <svg class="paris-icon paris-icon-instagram" role="img" aria-labelledby="paris-icon-title-in" focusable="false">
65 <title id="paris-icon-title-in">${footerSocialTitleIn}</title>
66 <use xlink:href="#paris-icon-instagram"></use>
67 </svg>
68 </a>
69 </li>
70 <li class="list-inline-item">
71 <a class="social-link has-icon hide-icon-target" target="_blank" aria-label="Aller vers le site de ${footerSocialTitleLi}" href="${footerSocialLinkLi}">
72 <svg class="paris-icon paris-icon-linkedin" role="img" aria-labelledby="paris-icon-title-li" focusable="false">
73 <title id="paris-icon-title-li">${footerSocialTitleLi}</title>
74 <use xlink:href="#paris-icon-linkedin"></use>
75 </svg>
76 </a>
77 </li>
78 </ul>
79 <p class="paris-footer-social-title text-center">#i18n{theme.footerSocialText}</p>
80 </div>
81 </div>
82 </div>
83 </footer>
84 <@parisIconPack />
85 </#macro>