Le module _alerte.php doit être placé juste après l'ouverture du body, avant le div id="page". Il faut également appliquer la classe "js-alerte" au body.
Un javascript gère l'ouverture et la fermeture temporisé du bandeau et un cookie de 24h.
La hauteur du bandeau d'alerte est fixée à 238px de façon à pouvoir gérer le padding du div id="page" et donc le calage des éléments suivants pour les états ouvert/fermé.
Cette hauteur est stockée dans une variable SASS dans le fichier /scss/includes/_alerte.scss.
Lorsque le breadcrumb est placé juste sous la barre de navigation, il faut lui appliquer un padding-left de 430px sans quoi les premiers liens se retrouvent sous le bloc logo du header et ne sont plus clicables pour les écrans supérieurs à 1250px...
Exemple sur la page photos (/scss/pages/photos.scss) :
.photos{
@media (min-width: 1250px){
#breadcrumb{
.breadcrumb{
padding-left: 430px;
}
}
}
}
La position du texte est gérée en appliquant au bloc "home-banner-inner" les classes "top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center" ou "bottom-right".
La couleur du texte est gérée en appliquant au même bloc "home-banner-inner" les classes "dark" (texte blanc) ou "light" (texte bleu foncé).
Composé de plusieurs modules, un widget et une pub (lien+image).
On peut placer des (image+lien) dans le slider "billetterie" en rajoutant des balises li de la forme suivante :
<li>
<a href="#" class="simple-link"><img src="img/jaime-visu-04.jpg" alt="" class="image-100"></a>
</li>
J'ai dû rajouter une petite couche de javascript pour assurer un affichage correct des visuels :/js/general.js fonction resiseSliders() :
Attention au format des visuels, en fonction de cleui-ci et des différents contextes responsive des marges rouges apparaissent autours... A déterminer précisément lorsque les widget classement et match seront intégrés.
Prend la largeur de son conteneur.
Hauteur fonction des éléments le constituant (taille typo, padding, margin,... variables selon mobile-tablet / desktop-large).
Prend par défaut la largeur et la hauteur de son conteneur (matches-stade.php conteneur class="fil-info", /scss/pages/_matches.scss).
La hauteur de la zone scrollable (bloc class="nano") est fixée à 70%.
On peut aussi forcer la hauteur du bloc class="nano" via css (edito.php, /scss/_edito.scss) ou via Javascript (index.php, /js/general.jsfonction heightBloc24Home() le bloc home-mosaique doit alors avoir un attribut id="js-mosaique").
Si ailleurs que dans la home-mosaique, à placer dans un bloc class="entrainement".
Prend toute la largeur de son conteneur.
Les différentes largeurs et positions dans le flux flex de la home-mosaique (responsive) sont gérés dans le fichier /scss/pages/_index.scss.
Attention: dans ce contexte, les visuels des news 2 et 3 doivent être à l'italienne (en longueur). Ce n'est pas le cas dans le code HTML statique du module présenté ici...
On détermine le type de push en ajoutant une classe "video", "edito" ou "photos" au bloc ".push".
Par défaut, le bloc push prend la taille du visuel, celui-ci prenant 100% du conteneur si la taille du bloc est fixée en pourcentage.
Mais on peut forcer la taille du bloc push en pourcentage de son conteneur : 100% en ajoutant la classe w-100, 50% : w-50, 1/3 : w-33 ou 25% : w-25.
Sur mobile, les pushes ainsi traités auront une largeur de 100%.
Pour assurer une mise en page par ligne, le conteneur des pushes doit avoir un display: flex. display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; flex-wrap: wrap;
Pré-requis : Conteneur en display: flex; Le push prendra alors la hauteur des autres enfants-flex. Si le push-joueur est seul dans le bloc, fixer la hauteur (ou min-height) du conteneur au moins à 270px pour que le rollover ne soit pas coupé en haut.
Attention : le visuel débordant de 34px vers le haut, le bloc précédent doit avoir un margin ou padding-bottom en conséquence.
Nous avons essayé de corriger à la fois notre animation offensive et défensive
Ulrich Ramé 29/04/2016
_boutique.php
/scss/includes/_boutique.scss
Doit être placé dans un conteneur à fond sombre car le background du bloc est transparent afin de laisser visible l'image de fond de la homepage. On peut aussi appliquer l'image de fond fixed au bloc comme dans cet exemple.
Boutique
Venez découvrir la boutique L'esprit girondins du Nouveau Stade de Bordeaux
Effet parallax sur image de background en appliquant la classe "js-parallax" aux blocs "entreprises" et "evenements" /js/general.js, fonction miniParallax()
Plus le visuel sera haut, plus l'effet sera important.
Doit être placé dans un conteneur à fond sombre car le background du bloc est transparent afin de laisser visible l'image de fond de la homepage. On peut aussi appliquer l'image de fond fixed au bloc comme dans cet exemple.
La liste des vidéos présente le même code HTML/CSS que le module /modules/_last-actus.php, /scss/includes/_last-actus.scss
Le bloc de pub et le bloc des actus sont deux éléments d'un parent flex.
Si pas de bloc pub, il faut bien penser à afficher 8 actus et à appliquer la classe "no-aside" au conteneur "equipes-flex" dans le code HTML (ceci a pour effet de changer la largeur des blocs de 33.33333% par défaut à 25%).
La liste des actus présente le même code HTML/CSS que le module /modules/_last-actus.php, /scss/includes/_last-actus.scss. On pourra en plus y placer des bloc "image+lien" : <li class="visu">
<a href="#" class="actu-item">
<img src="img/home-jeunes-centre-formation.jpg" alt="" class="image-100">
</a>
</li>
Le bloc de classements et le bloc des actus sont deux éléments d'un parent flex.
Si pas de bloc classement, il faut bien penser à afficher 8 actus et à appliquer la classe "no-aside" au conteneur "equipes-flex" dans le code HTML (ceci a pour effet de changer la largeur des blocs de 33.33333% par défaut à 25%).
Doit être placé dans un conteneur à fond sombre car le background du bloc est transparent afin de laisser visible l'image de fond de la homepage. On peut aussi appliquer l'image de fond fixed au bloc comme dans cet exemple.
La liste des actus présente le même code HTML/CSS que le module /modules/_last-actus.php, /scss/includes/_last-actus.scss. On pourra en plus y placer des bloc "image+lien" : <li class="visu">
<a href="#" class="actu-item">
<img src="img/home-jeunes-centre-formation.jpg" alt="" class="image-100">
</a>
</li>
Le bloc de classements et le bloc des actus sont deux éléments d'un parent flex.
Si pas de bloc classement, il faut bien penser à afficher 8 actus et à appliquer la classe "no-aside" au conteneur "equipes-flex" dans le code HTML (ceci a pour effet de changer la largeur des blocs de 33.33333% par défaut à 25%).
Effet parallax sur image de background en appliquant la classe "js-parallax" au bloc "discover" /js/general.js, fonction miniParallax()
Plus le visuel sera haut, plus l'effet sera important.
Et la légende fut
On fête les 20 ans de Bordeaux-Milan !
_jaime.php
/scss/includes/_jaime.scss
Effet parallax sur image de background en appliquant la classe "js-parallax" au bloc "jaime-banner" /js/general.js, fonction miniParallax()
Plus le visuel sera haut, plus l'effet sera important.
Largeur par défaut : 100% mais on peut jouer sur la largeur du bloc pour les cas spécifiques (comme sur la page joueur.php, /scss/pages/_joueur.scss) :
.joueur-social{
width: 100%;
@include tablet-to-large {
width: 49%;
}
}
Ou en appliquant les classes w-100, w-50, w-33 ou w-25 au bloc ".joueur-social".
Sur mobile, les pushes ainsi traités auront une largeur de 100%.
Par défaut, 100%
Gaëtan Laborde est sur :
Suivez-le !
w-25
Gaëtan Laborde est sur :
Suivez-le !
w-50
Gaëtan Laborde est sur :
Suivez-le !
_joueur-pub-maillot.php
/scss/includes/_joueur-pub-maillot.scss
La taille du bloc est géré par une image transparente du bon rapport ("images/joueur-pub-maillot-taille.png" 331x544) avec la classe "image-100" ce qui permet au bloc de garder toujours le bon rapport dans un conteneur responsive.
Pré-requis : Conteneur en display: flex; afin d'assurer un clear-fix correct aux blocs suivants dans le flux après le bloc flex.
Le calage des blocs est géré en flex.
Les noms des équipes n'étant jamais de la même longueur, c'est un petit javascript qui assure le centrage : /js/general.js, fonction centerBannerMatch();
Matchcenter
Bordeaux
Lorient
Samedi 7 mai 20h00Matmut Atlantique 37ème journée de ligue 1
Les visuels sont différents pour mobile, tablette et desktop. On utilise la balise <picture><source> et son attribut media.
<picture>
<source srcset="img/edito-banner-mobile.jpg" media="(max-width: 767px)">
<source srcset="img/edito-banner-tablet.jpg" media="(min-width: 768px) and (max-width: 1023px)">
<source srcset="img/edito-banner-desktop.jpg">
<img src="img/edito-banner-desktop.jpg" alt="" class="image-100 banner-bg">
</picture>
La position du texte est gérée en appliquant au bloc "edito-banner-inner" les classes "top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center" ou "bottom-right".
La couleur du texte est gérée en appliquant au même bloc "edito-banner-inner" les classes "dark" (texte blanc) ou "light" (texte bleu foncé).
État top-left
“ J’ai une bonne étoile. Maintenant, il n’y a plus de pression. J’ai vécu une saison très riche.”
État top-center
“ J’ai une bonne étoile. Maintenant, il n’y a plus de pression. J’ai vécu une saison très riche.”
État top-right
“ J’ai une bonne étoile. Maintenant, il n’y a plus de pression. J’ai vécu une saison très riche.”
État middle-left
“ J’ai une bonne étoile. Maintenant, il n’y a plus de pression. J’ai vécu une saison très riche.”
État middle-center
“ J’ai une bonne étoile. Maintenant, il n’y a plus de pression. J’ai vécu une saison très riche.”
État middle-right
“ J’ai une bonne étoile. Maintenant, il n’y a plus de pression. J’ai vécu une saison très riche.”
État bottom-left
“ J’ai une bonne étoile. Maintenant, il n’y a plus de pression. J’ai vécu une saison très riche.”
État bottom-center
“ J’ai une bonne étoile. Maintenant, il n’y a plus de pression. J’ai vécu une saison très riche.”
État bottom-right
“ J’ai une bonne étoile. Maintenant, il n’y a plus de pression. J’ai vécu une saison très riche.”
__edito-content.php
/scss/pages/_edito.scss
Composé des deux modules /modules/__edito-article.php et __edito-aside.php.
Deux ans de plus pour Jérôme Prior
Jérôme a prolongé son contrat de deux ans
CLUB - Vendredi 29 Juillet 2016 à 15h53
Jérôme Prior a signé une prolongation de contrat de deux ans aux Girondins. Le jeune gardien formé au club est désormais sous contrat jusqu’en juin 2020. Auteur d’une saison 2015-2016 prometteuse, il va pouvoir poursuivre sa progression dans la sérénité. Le club est heureux de pouvoir compter sur Jérôme lors des prochaines saisons
Formé au club
Jérôme Prior a prolongé son contrat aux Girondins ! Le jeune gardien formé au club s’est engagé pour deux saisons supplémentaires. Initialement sous contrat jusqu’en juin 2018, il est désormais à notre club jusqu’en juin 2020.
Bordelais depuis l’été 2012, Jérôme Prior a d’abord évolué avec les équipes du centre de formation. Il s’est fait connaître auprès des supporters en remportant la Coupe Gambardella en 2013 avec Enzo Crivelli, Théo Pellenard et Gaëtan Laborde.
Jérôme Prior lors du match Girondins_Saint-Étienne en 2015
Ses bonnes performances lui permettent de côtoyer épisodiquement le groupe professionnel la saison suivante avant de devenir 3ème gardien en 2014-2015. Son travail et sa progression incitent le club à lui faire signer son premier contrat professionnel à l’été 2015.
Deuxième gardien l’an passé, il est propulsé sur le devant de la scène lorsque Cédric Carrasso se blesse face à Reims lors de la 1ère journée de L1. Il débute face à Saint-Etienne lors de la 2ème journée puis enchaîne en Coupe d’Europe.
J’ai une bonne étoile. Maintenant, il n’y a plus de pression. J’ai vécu une saison très riche. Mon premier match en pro, j’ai failli être licencié, une altercation avec les supporters…J’ai appris, ça c’est sûr !
Durant toute la saison, Jérôme répond présent à chaque fois que l’on fait appel à lui. Doté d’un fort caractère, il a su se montrer performant sur le pré et a affiché de grosses qualités mentales pour s’accrocher quand il le fallait.
Avec 20 matches professionnels au compteur, il a prouvé qu’il pouvait jouer au plus haut niveau. Avec cette prolongation, Jérôme va pouvoir poursuivre sa progression dans la sérénité.
Le FC Girondins de Bordeaux est très heureux de pouvoir compter sur son jeune gardien lors des prochaines saisons !
#Prior2020
#MercatoFCGB
Partager sur
__edito-article.php
/scss/pages/_edito.scss
Deux ans de plus pour Jérôme Prior
Jérôme a prolongé son contrat de deux ans
CLUB - Vendredi 29 Juillet 2016 à 15h53
Jérôme Prior a signé une prolongation de contrat de deux ans aux Girondins. Le jeune gardien formé au club est désormais sous contrat jusqu’en juin 2020. Auteur d’une saison 2015-2016 prometteuse, il va pouvoir poursuivre sa progression dans la sérénité. Le club est heureux de pouvoir compter sur Jérôme lors des prochaines saisons
Formé au club
Jérôme Prior a prolongé son contrat aux Girondins ! Le jeune gardien formé au club s’est engagé pour deux saisons supplémentaires. Initialement sous contrat jusqu’en juin 2018, il est désormais à notre club jusqu’en juin 2020.
Bordelais depuis l’été 2012, Jérôme Prior a d’abord évolué avec les équipes du centre de formation. Il s’est fait connaître auprès des supporters en remportant la Coupe Gambardella en 2013 avec Enzo Crivelli, Théo Pellenard et Gaëtan Laborde.
Jérôme Prior lors du match Girondins_Saint-Étienne en 2015
Ses bonnes performances lui permettent de côtoyer épisodiquement le groupe professionnel la saison suivante avant de devenir 3ème gardien en 2014-2015. Son travail et sa progression incitent le club à lui faire signer son premier contrat professionnel à l’été 2015.
Deuxième gardien l’an passé, il est propulsé sur le devant de la scène lorsque Cédric Carrasso se blesse face à Reims lors de la 1ère journée de L1. Il débute face à Saint-Etienne lors de la 2ème journée puis enchaîne en Coupe d’Europe.
J’ai une bonne étoile. Maintenant, il n’y a plus de pression. J’ai vécu une saison très riche. Mon premier match en pro, j’ai failli être licencié, une altercation avec les supporters…J’ai appris, ça c’est sûr !
Durant toute la saison, Jérôme répond présent à chaque fois que l’on fait appel à lui. Doté d’un fort caractère, il a su se montrer performant sur le pré et a affiché de grosses qualités mentales pour s’accrocher quand il le fallait.
Avec 20 matches professionnels au compteur, il a prouvé qu’il pouvait jouer au plus haut niveau. Avec cette prolongation, Jérôme va pouvoir poursuivre sa progression dans la sérénité.
Le FC Girondins de Bordeaux est très heureux de pouvoir compter sur son jeune gardien lors des prochaines saisons !
Lorient
