Suppression de Unify et Bootstrap

Cette page ne doit être appliquée que si le script de migration assistée vous demande de passer la migration manuelle skin.20260212.INTRANETCards.RemoveUnifyAndBootstrap

La version 2.0.0 de la charte Intranet Cards supprime la dépendance aux librairies Unify et Bootstrap.

Structure des gabarits index et page-2-columns

La structure les gabarits index et page-2-columns, jusque là définie au moyen de classes bootstrap directement dans le code HTML est maintenant définie uniquement en CSS.

Si vous avez surchargé le template "main-zone" du gabarit "index" et/ou "page-2-column", vous devrez reporter les modifications suivantes:

pour le gabarit index

 Avant

 Après

<xsl:template name="main-zone">
        <div class="row">
            <div class="col-xl-8 col-print-8">
                <xsl:if test="$template != 'index'">
                    <xsl:call-template name="bread-crumb"/>
                </xsl:if>
                
                <a name="content"></a>
                <zone name="default" level="1"/>
            </div>
            <div class="col-xl-4 col-print-4 sidebar">
                <div class="row">
                    <zone name="right" level="2"/>
                
                    <zone name="syndication" level="2"/>
                </div>
            </div>
        </div>
</xsl:template>
 
<xsl:template name="main-zone">
        <div class="row">
            <div class="main-content">
                <xsl:if test="$template != 'index'">
                    <xsl:call-template name="bread-crumb"/>
                </xsl:if>
                
                <a name="content"></a>
                <zone name="default" level="1"/>
            </div>
            <div class="sidebar">
                <div class="row">
                    <zone name="right" level="2"/>
                    <zone name="syndication" level="2"/>
                </div>
            </div>
        </div>
</xsl:template>

pour le gabarit page-2-columns:

 Avant

 Après

<xsl:template name="main-zone">
        <xsl:if test="not($deactivateFOEditionToolbar = 'true')">
            <xsl:call-template name="fo-toolbar-page"/>
        </xsl:if>
                
        <div class="ametys-main-content-inner">
            <div class="ametys-main-content-body">
                <xsl:call-template name="bread-crumb"/>
                <xsl:call-template name="page-actions"/>
                
                <div class="row">
                  <div class="col-xl-8 col-print-8">
                        <a name="content"></a>
                        <zone name="default" level="1"/>
                    </div>
                  <div class="col-xl-4 col-print-4 sidebar">
                        <div class="row">
                            <zone name="aside" level="2"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </xsl:template>
 
<xsl:template name="main-zone">
        <xsl:if test="not($deactivateFOEditionToolbar = 'true')">
            <xsl:call-template name="fo-toolbar-page"/>
        </xsl:if>
                
        <div class="ametys-main-content-inner">
            <div class="ametys-main-content-body">
                <xsl:call-template name="bread-crumb"/>
                <xsl:call-template name="page-actions"/>
                
                <div class="row">
                    <div class="main-content">
                        <a name="content"></a>
                        <zone name="default" level="1"/>
                    </div>
                    <div class="sidebar">
                        <div class="row">
                            <zone name="aside" level="2"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </xsl:template>

Surcharge du fichier de variables _theme-variables.scss

Avant la suppression de bootstrap / unify, la css _theme-variables.scss était importée 2 fois (avant et après les css bootstrap/unify).
Ce n'est plus le cas maintenant.

Ce double import pouvait cacher des variables manquantes dans une déclinaison, avec pour conséquence maintenant par exemple, de voir des éléments aux couleurs de la charte noyau.

Pour corriger çà, vous pouvez:

  • soit définir les variables manquantes (il faut pas en rater)
  • soit (méthode conseillée) déplacer l'import de la scss noyau à la fin de votre fichier _theme-variables.scss. Toutes les variables définies dans la scss noyau sont maintenant définies avec la directive !default ce qui permet de faire cela et évite de devoir surcharger toutes les variables.

Classes CSS bootstrap dans vos fichiers XSL

Toutes les classes CSS bootstrap utilisées dans le HTML n'ont plus aucun effet.

Vous devez les rechercher dans vos XSL, sachant qu'il est difficile de les identifier car leur nom est hétérogène (flex-column,  colg-lg-12, mb-4, ...)

Voici un exemple de recherche à faire dans Eclipse en activant la case "Regular expression":

pt-0|pb-0|px-0|py-0|pb-4|px-3|col-xl-4|col-xl-8|col-lg-12|mb-0|mb-4|mr-2|mr-4|flex-column|inline-flex|flex-wrap|d-flex|rounded|text-uppercase|g-py-5|g-font-size|d-none|font-italic|font-bold|container-fluid|img-fluid|align-items|position-relative|list-inline|g-transform-none|bg-transparent

La liste est loin d'être exhaustive mais correspond à la plupart des classes qui étaient utilisées dans cette charte.

La plupart du temps, ces classes peuvent être supprimées du code HTML et le rendu sera identique, car ce sont les SCSS noyau qui prennent le relais.
Si vous voyez une différence de rendu il faudra modifier vos SCSS pour réappliquer le style apporté par la classe bootstrap manquante.

Par exemple, le code HTML/CSS suivant :

 HTML

 CSS

<div class="foo d-flex align-center mb-4">
</div>
 
.foo{
  color: $g-main-color;
  background-color: $primary;
}

devient

 HTML

CSS 

<div class="foo">
</div>
 
.foo{
 color: $g-main-color;
 background-color: $primary;
 display: flex;
 align-items: center;
 margin-bottom: 24px;
} 

Autres classes CSS qui ont été supprimées:

  • ametys-bg-header
  • ametys-bg-footer
  • ametys-bg-aside
  • ametys-mb-60
  • ametys-mb-30
  • ametys-mb-20

Recherchez ces classes à la fois dans vos XSL et SCSS. 

Si des occurrences sont trouvées, vérifiez le rendu et adaptez si besoin vos SCSS pour réappliquer le style manquant.

Dans tous les cas, cette mise à jour nécessite une vérification rigoureuse du rendu de tous les services / contenus / gabarits utilisés.
N'oubliez pas de vérifier les éléments cachés (dropdown, boite de dialogue, ...)

Ticket JIRA associé : https://issues.ametys.org/browse/SKINCARDS-303 

Retour en haut