Evolution #133

Réorganisation des thèmes graphiques (skins)

Added by Grégory MARIGOT - TEICEE over 8 years ago. Updated over 7 years ago.

Status:Fermé Start date:12/20/2012
Priority:Normal Due date:
Assignee:Grégory MARIGOT - TEICEE % Done:

100%

Category:-
Target version:ProxyEPN 2.3
Version ProxyEPN:2.2

Description

Déplacer tous les éléments des thèmes graphiques (css, logo...) sous une même arborescence (web/skins/) afin de :
  • faciliter l'ajout en utilisant un dossier propre à chaque thème
  • étendre plus facilement les éléments gérés par les thèmes (marqueurs gmaps, favicons ?...)
  • utiliser le terme skin au lieu de theme pour mieux les différencier des thèmes d'atelier

Related issues

related to Evolution #152: Modernisation des skins avec bootstrap Fermé 09/12/2014

Associated revisions

Revision 593
Added by Grégory MARIGOT - TEICEE over 8 years ago

NEW #133: renommage des thèmes en skins (y compris bdd)
NEW #133: regroupement des éléments des skins sous web/skins/

Revision 595
Added by Grégory MARIGOT - TEICEE over 8 years ago

NEW #133: mise à jour des feuilles de styles (suite r593)

Revision 596
Added by Grégory MARIGOT - TEICEE over 8 years ago

NEW #133: intégration des icones de marqueurs gmaps dans les skins

Revision 598
Added by Grégory MARIGOT - TEICEE over 8 years ago

NEW #133: adaptation du marqueur sur le plan d'un EPN (suite r596)

History

Updated by Grégory MARIGOT - TEICEE over 8 years ago

  • Status changed from Nouveau to In Progress
  • % Done changed from 0 to 80

Nouvelle organisation des thèmes skins

Le nouveau sous-dossier "web/skins/" respecte l'arborescence suivante (ici pour le thème nommé proxyepn, chaque thème ayant son propre dossier regroupant l'intégralité des éléments le composant) :

/skins/
    /proxyepn/
        /screen.css
        /print.css
        /ui/
            /jquery-ui.css
            /images/
        /gfx/
            /logo.png
            /pin_epn.png
            /pin_myepn.png
            /pin_pat.png
            /pin_mypat.png
            /pin_shadow.png

Quelques précisions sur le contenu :
  • la feuille de style screen.css (facultative) surcharge source:proxyconcept/trunk/web/css/base_screen.css pour l'affichage à l'écran
  • la feuille de style print.css (facultative) surcharge source:proxyconcept/trunk/web/css/base_print.css pour la mise en page des impressions
  • Le dossier gfx devrait contenir tout autre élément graphique utilisé spécifiquement par les css du thème
  • Les images pin*.png sont les icones pour les marqueurs sur les cartes.
  • Le dossier ui provient du thème jQuery-UI associé.

A noter : Dorénavant une css de base pour l'impression est systématiquement chargée, comme c'est déjà le cas depuis peu pour la css générale. Ceci permet d'alléger/simplifier la personnalisation via les skins en n'ayant qu'à surcharger si besoin, plutôt que de devoir fournir des css complètes.

A propos du renommage

Il n'est pas toujours évident de pratiquer ce genre de renommage, qui de plus peut paraitre futile. Mais le terme theme étant déjà très utilisé dans l'application avec un réel sens pour les ateliers, c'était le moment où jamais pour différencier l'aspect purement habillage de l'application.

Mais il est bon de noter deux conséquences à ce renommage :

Modification de la base de données

Comme indiqué dans le fichier source:proxyconcept/trunk/data/fixtures/proxyepn-update-2.3.sql :

ALTER TABLE `structure_group` CHANGE `theme` `theme_skin` VARCHAR(50) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL 

Modification du fichier de configuration

L'option theme est naturellement remplacée par skin pour indiquer la liste des thèmes skins disponibles dans le fichier source:proxyconcept/trunk/apps/frontend/config/app.yml

Updated by Grégory MARIGOT - TEICEE over 8 years ago

  • % Done changed from 80 to 90

Révision des feuilles de styles

Au cours des dernières modifications, quelques petites retouches ont pu être apportées pour améliorer l'interface. Après avoir été quelque peu laissée de côté, la css alternative de la skin epnadmin a été complétée. Les styles pour l'impression ont aussi été revu pour l'occasion.

A noter également qu'un soucis avec IE et l'utilisation des menus déroulants à également été réglé (r590).

Updated by Grégory MARIGOT - TEICEE over 7 years ago

  • Status changed from In Progress to Résolu

Updated by Grégory MARIGOT - TEICEE over 7 years ago

  • % Done changed from 90 to 100

Updated by Grégory MARIGOT - TEICEE over 7 years ago

  • Status changed from Résolu to Fermé

Also available in: Atom PDF