Charte Intranet Cards - Zones du gabarit Accueil et Page 2 colonnes

Cette page ne doit être appliquée que si le script de migration assistée vous demande de passer la migration manuelle skin.20240301.INTRANETCARDS.indexzones

Organisation des zones du gabarit accueil et du gabarit page 2 colonnes

Afin de corriger un bug de positionnement des zones de droite en vue tablette, la structure des zones de droites a été revue.

Si vous avez surcharger le template "index" et/ou "page-2-columns" dans votre déclinaison, il faut réappliquer les modifications apportées.

Pour le gabarit "index": Les zones de droites, définies dans la partie "col-xl-4 col-print-4 sidebar" du gabarit, ne doivent plus être entourées d'un élément <div class="col-md-6 col-xl-12 col-print-12">

Pour le gabarit "page-2-columns": La zone de droite, définies dans la partie "col-xl-4 col-print-4 sidebar" doit être entourée d'un <div class="row">

Ces classes css "col-md-6 col-xl-12 col-print-12" sont maintenant automatiquement ajoutées à l'ensemble des zones-items des zones "right" et "syndication" pour le gabarit accueil et les zones-items de la zone "aside" pour le gabarit page à 2 colonnes, grâce aux template "zone-item-class"

<xsl:template name="zone-item-class">
   <xsl:variable name="zone-name" select="../@name"/>
        
   <xsl:if test="position() mod 2 = 0"><xsl:text>even </xsl:text></xsl:if>                               
   <xsl:if test="position() = 1"><xsl:text>first </xsl:text></xsl:if>
   <xsl:if test="position() = last()"><xsl:text>last </xsl:text></xsl:if>
   <xsl:if test="$zone-name = 'right' or $zone-name = 'syndication'"><xsl:text>col-md-6 col-xl-12 col-print-12</xsl:text></xsl:if>
</xsl:template>

<xsl:template name="zone-item-class">
   <xsl:variable name="zone-name" select="../@name"/>
        
   <xsl:if test="position() mod 2 = 0"><xsl:text>even </xsl:text></xsl:if>                               
   <xsl:if test="position() = 1"><xsl:text>first </xsl:text></xsl:if>
   <xsl:if test="position() = last()"><xsl:text>last </xsl:text></xsl:if>
   <xsl:if test="$zone-name = 'right' or $zone-name = 'syndication'"><xsl:text>col-md-6 col-xl-12 col-print-12</xsl:text></xsl:if>
</xsl:template>

<xsl:template name="zone-item-class">
   <xsl:variable name="zone-name" select="../@name"/>
        
   <xsl:if test="position() mod 2 = 0"><xsl:text>even </xsl:text></xsl:if>                               
   <xsl:if test="position() = 1"><xsl:text>first </xsl:text></xsl:if>
   <xsl:if test="position() = last()"><xsl:text>last </xsl:text></xsl:if>
   <xsl:if test="$zone-name = 'right' or $zone-name = 'syndication'"><xsl:text>col-md-6 col-xl-12 col-print-12</xsl:text></xsl:if>
</xsl:template>

Attention, certaines vues de services/contenus destinées aux zone de droite, ajoutaient un <div class="col-md-6 col-xl-12 col-print-12">. Il a été supprimé puisque mal placé (et maintenant reporté sur le zone item dans le gabarit).
Recherchez "col-md-6 col-xl-12 col-print-12" dans vos vues de services surchargées ou propre à votre application. Si vous en trouvez, il faut certainement supprimer ce div englobant.

Vérifiez le rendu de la page d'accueil et des pages intérieures sur tous les supports (destkop, tablette, mobile)

Lien vers le ticket JIRA associé: https://issues.ametys.org/browse/SKINCARDS-214