Retour : Page Principale > sommaire applications botaniques > eFlore mobile
Initialement, le css a été créé avec LESS et facilement compilable en .CSS avec la ligne de commande suivante (après installation du module du même nom) lancée dans le dossier contenant le fichier .less à compiler (le nom du .css est facultatif ; par défaut, prend le nom du fichier .less) :
et
La définition de styles se fait et s'utilise de la façon suivante :
et sera compilé en :
La définition de fonctions se fait et s'utilise de la façon suivante :
et sera compilé en
Aide pour les développeurs
Styles
Trois css (thème Tela, thème blanc et thème vert) réalisés avec BootStrap 2.3.2 sont disponibles ainsi que trois designs différents (agencement des éléments de la page). Ceux-ci ont été commentés dans la version 1046 du fichier fiche.tpl ; (les lignes ont été supprimées dans les versions suivantes). Le thème par défaut est pyracantha et le template associé est theme_pyracantha_niveau1.tpl.html.Initialement, le css a été créé avec LESS et facilement compilable en .CSS avec la ligne de commande suivante (après installation du module du même nom) lancée dans le dossier contenant le fichier .less à compiler (le nom du .css est facultatif ; par défaut, prend le nom du fichier .less) :
lessc app.less > app.css
QR Code
Le QR Code contenant le lien vers la fiche mobile est généré à partir de la PHP QR Code Generator Class développée par Shay ANDERSON Software sous licence GPL. Cette dernière permet d'enregistrer sous forme d'image un QR code à partir d'une URL et a été rajoutée dans la bibliothèque de eflore-consultation. L'URL complète sur l'espace de test est de la forme :www.tela-botanica.org/eflore-test/consultation/index_mobile.php?referentiel=bdtfx&niveau=1&module=mobile&action=fiche&num_nom=141&type_nom=nom_scientifique
L'URL-rewriting pose problème à la gestion des ancres de jQuery.
LESS
Pour utiliser LESS côté client, il faut inclure le fichier js correspondant. Celui-ci permet de définir des variables globales, des fonctions et les lignes de commentaires acceptées sont// pour une ligne simple
/* */ pour commenter plusieurs lignes.
La définition de styles se fait et s'utilise de la façon suivante :
.white-bg { background: white; }
body { .white-bg; }
body { background: white; }
La définition de fonctions se fait et s'utilise de la façon suivante :
//function margin-top avec une valeur par défaut pour le paramètre
.margin-top (@radius: 1em) { margin-top: @radius; }
//function shadow avec un paramètre obligatoire et trois par défaut
.shadow (@color:'', @decalage-x: 0pt, @decalage-y: 1px, @fondu: 1px) {
text-shadow: @decalage-x @decalage-y @fondu @color;
}
.titre {
.margin-top(1em); // Ă©quivaut Ă .margin-top;
.shadow(@orange);
}
.titre {
margin-top: 1em;
text-shadow: 0pt 1px 1px #ed7826;
}