Pied de page réactif facile

[Johani (Joe)]

J’ai poussé quelques correctifs.

Changements clés :

• le composant utilise désormais des variables CSS, il est donc compatible avec le mode sombre

• quelques corrections des requêtes média pour résoudre le bug signalé par @mbauman

• ajout d’un paramètre vous permettant de contrôler l’affichage ou non du pied de page sur les pages nécessitant une connexion

  

https://github.com/discourse/Discourse-easy-footer/commit/a694b1ba8e31d5b24b2d0fd8e2b6190bf987527b

@rolando

J’ai élargi mon .wrap (1200px) avec des requêtes média afin que, au-delà d’une certaine résolution, le forum soit plus large. Si j’active le pied de page réactif, le .wrap devient plus étroit (1100px), mais uniquement pour la « partie tableau », et non pour .d-header .wrap ni pour .footer, qui restent à (1200px). Dès que je désactive le pied de page réactif, tout redevient plus large (1200px) comme prévu.

La cause ici est la spécificité CSS. Votre CSS cible .wrap, ce qui fonctionne, mais ce composant possède également du CSS qui cible #main-outlet et lui ajoute certaines propriétés pour maintenir le pied de page en bas, même sur les pages courtes.

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

Le sélecteur #main-outlet est plus spécifique que votre sélecteur .wrap — car il est basé sur un ID —, il écrase donc vos styles.

Vous pouvez corriger cela en ajoutant ce CSS :

#main {
  #main-outlet {
    width: 1200px; // ou la largeur que vous souhaitez utiliser
  }
}

@Edward_Legaspi

Bonjour. Existe-t-il un moyen de limiter le nombre de colonnes du pied de page à 3 ?

Bien sûr, supprimez toutes les colonnes supplémentaires dont vous n’avez pas besoin dans les paramètres, et vous obtiendrez trois colonnes.

@PoojaPatel

Après la mise à jour, une erreur apparaît dans la console Chrome comme ci-dessous.

Je ne parviens pas à reproduire ce problème, mais l’erreur suggère que vos paramètres sont incorrects. Pouvez-vous vérifier à nouveau et vous assurer d’avoir suivi les instructions sous chaque paramètre ? Si votre problème persiste, pouvez-vous partager un lien vers le site où vous rencontrez le problème ?

---

J’ai fait un peu de nettoyage et supprimé les réponses concernant les bugs qui seront corrigés dès que vous mettrez à jour le composant. Si votre problème persiste, n’hésitez pas à en reparler.