| Scroll Ignore | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||
|
Concept
Le widget séparateur a pour but de faire de la mise en forme de la vue "Météo des services".
Il est possible de modifier les aspects suivants du widget séparateur :
- sa taille et sa position,
- la position du texte,
- son alignement horizontal,
- son texte et la taille de son texte,
- la couleur de son texte.
( voir la page Widget Séparateur - Édition visuelle - Météo, pour plus d'information sur l'édition )
Dans l'exemple ci-dessous, le widget séparateur est juste en dessous du widget "titre", et occupe toute la largeur de la vue.
| Panel | ||||
|---|---|---|---|---|
| ||||
|
Description
Le texte
Le comportement du texte suit les règles suivantes :
- le texte n'est pas limité en taille,
- mais si le texte n'a pas la place de s'afficher, il sera tronqué ( avec une "ellipsis" : une série de trois petits points ) pour éviter un retour à la ligne.
- il sera sur une seule ligne,
- la taille de la police va se définir automatiquement en fonction de la largeur de la vue ( Taille du navigateur, ou taille d'affichage dans un autre site web ) et du pourcentage de zoom de la police paramétré.
- Pour pouvoir être responsive, la taille de police du texte s'adapte à la taille de la vue afin de pouvoir être affichée sur toutes les tailles d'écran.
Cela permet une meilleure intégration dans le portail d'un site web.
Elle est adaptée de façon à pouvoir mettre environ 55 lettres en majuscules dans le texte avant que celui-ci ne dépasse ( si le pourcentage de zoom de la police est paramétré à 100% et que la taille de la partie gauche et droite font 10% de la vue ).
La police utilisée n'a pas de taille de caractère fixe, donc suivant les lettres présentes dans le texte, le nombre de caractères affichés pourra être différent de 55 ( pour des i minuscules par exemple ). - Shinken a volontairement fait le choix de se baser uniquement sur la taille de la vue et non celle du widget.
- Pour pouvoir être responsive, la taille de police du texte s'adapte à la taille de la vue afin de pouvoir être affichée sur toutes les tailles d'écran.
| Note | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Voici une liste de taille de "font" selon la taille du navigateur
|
Dans l'exemple 2:
- La valeur du texte du widget "séparateur" est trop longue pour qu'il puisse s'afficher en entier.
- La fin du texte est alors remplacée par "..." pour ne pas dépasser.
| Panel | ||||
|---|---|---|---|---|
| ||||
|
Dans les exemples 1 et 2, le widget "séparateur" est configuré pour prendre toute la largeur de la vue.
Dans l'exemple 3:
- La largeur du widget vaut 15 cases, pour un nombre total de 60 cases dans la grille.
| Panel | ||||
|---|---|---|---|---|
| ||||
|
Changement de l'alignement du texte
Le texte peut être aligné :
- au centre ( Par défaut ),
- à gauche,
- à droite.
Les 3 exemples ci-dessous montrent les 3 différents positionnements :
| Panel | ||||
|---|---|---|---|---|
| ||||
|
| Panel | ||||
|---|---|---|---|---|
| ||||
|
| Panel | ||||
|---|---|---|---|---|
| ||||
|
Dimension de la zone de texte
Le widget "séparateur" est divisé en trois parties :
| Panel |
|---|
|
| Scroll Ignore |
|---|
Par défaut, la partie gauche et droite utilise 10% chacune de la taille du widget.
- Le reste sera occupé par la partie réservée au texte.
Exemple 1 : Les valeurs de la taille définies pour la partie gauche et la partie droite sont paramétrées à 37% chacune :
- Les barres de séparations, se situant des deux côtés du texte du Widget, prennent la majeure partie de la taille de la page.
| Panel |
|---|
|
- Dans cet exemple, les barres de séparations, se situant des deux côtés du texte du widget, ne prennent qu'une petite partie de la taille de la page.
| Panel |
|---|
|
Exemple 3 : La partie de gauche n'est pas affichée et la valeur de la taille de la partie droite est paramétrée à 70% :
- Dans cet exemple, seule la barre de séparation se situant du côté droit du texte du widget prend une grande partie de la taille de la page.
| Panel |
|---|
|
Exemple 4 : La partie de droite n'est pas affichée et la valeur de la taille de la partie de gauche est paramétrée à 70%:
- Dans cet exemple, seule la barre de séparation se situant du côté gauche du texte du widget prend une grande partie de la taille de la page.
| Panel |
|---|
|
Changement de la couleur du texte
Chaque séparateur peut avoir sa propre couleur :
- La couleur par défaut du texte du widget "séparateur" est noir ( si non précisé ),
- mais la couleur par défaut pourra être changée par l'administrateur Shinken dans la configuration du module de météo des services.
Dans l'exemple suivant, la couleur du texte est en vert ( "text_color" : green ou "text_color" : #008000 ou "text_color" : rgb(0,128,0) ).
| Panel |
|---|
|
( voir la page Widget Séparateur - Édition JSON - Météo )
Comportement du widget lors d'un redimensionnement du navigateur
Exemples de redimensionnement
| Panel | ||||
|---|---|---|---|---|
| ||||
|
| Panel | ||||
|---|---|---|---|---|
| ||||
|
Affichage avec une Erreur et un Avertissement
| Panel |
|---|
|
...