[SI-LINDER-PARTNER-2][OSC] - Refonte du site Internet pour supporter le Responsive Design /* ATTENTION - le design du site ne peut pas être passé en doctype html (html 5) dans la révision 1 du design. bien qu'une révision 2 sera instanciée plus tard (l'année prochaine), il faudra se contenter de nombreux workaround en restant en HTML TRANSITIONAL 4.01 Du fait du nombre massif des éléments DE CETTE PAGE (et de ce qui en découlerait) qui seront à revoir pour transformer le design en design responsive.. .. il est alors plus judicieux de globaliser un TAG unique pour cette tâche pour ne pas alourdir de commentaires le code déjà suffisemment alourdi comme cela! En gros, ici, pour cette méga-tâche, je vais utiliser un format maison de commentaires pour cette tâche précise: --> pour en comprendre les méandres, voir le fichier /[!] - Saphyra-Interactive-TaskList-Explanations/[SI-LINDER-PARTNER-2][OSC]--semantic.php */ // <- [SI-LINDER-PARTNER-2][OSC] - Refonte du site Internet pour supporter le Responsive Design ?>set_snapshot(); tep_redirect(tep_href_link(FILENAME_LOGIN, '', 'SSL')); } require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_ADDRESS_BOOK); $breadcrumb->add(NAVBAR_TITLE_1, tep_href_link(FILENAME_ACCOUNT, '', 'SSL')); $breadcrumb->add(NAVBAR_TITLE_2, tep_href_link(FILENAME_ADDRESS_BOOK, '', 'SSL')); ?> > <?php echo TITLE; ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on déclare une petite variable, sous forme de tableau associatif, ce tableau servira à identifier la page (au lieu d'utiliser PHP_SELF etc..) et cette identification servira dans le nouveau fichier d'inclusion de design dynamique inclu en [2] c'est tout simple ! - 2/ inclusion du fichier PHP chargeur du design, ce sera à ce fichier inclu de décider quels assets (scripts, feuilles de styles, autres) charger! } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_1] $_SI__NewDesign = array( 'pageFilepath' => '/address_book.php' ); // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([2])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END require_once('--SI--2020DesignInitializer.php'); /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(isPage--AddressBook isResponsive--Main)]:{" ATTENTION (ne pas oublier cette ligne!) servira à cibler cette page précise dans un sélecteur css.. // [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_2] "} ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" on modifie la taille de cette cellule, qui est celle de gauche (avant) gérée via la constante PHP BOX_WIDTH de OSCommerce, (désormais), gérée par une valeur en dur, pourquoi? (1) la valeur initiale est gérée par une constante PHP, mais sa valeur... est aussi la modificatrice de la cellule de droite.. Ce qui pose problème quand on veut juste modifier celle de gauche et ne pas intervenir sur celle de droite, donc, ici, on modifie le echo BOX_WIDTH par une valeur fixée plus souple et enfin, on ajoute une classe pour pouvoir cibler cette cellule de tableau afin de la masquer en responsive ou autres ! // [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_3] "} ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SimpleTaskDescription]:{" on va ici juste ajouter un
qui englobera le tableau, et on donnera à ce
une classe CSS pour être en mesure de le cibler plus tard "} ?>
[SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" on ajoute un alignement à droite, comme ça, le texte est aligné là où il y a le bouton d'ajout d'adresse "} ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][AddClassDescription(alignTextRemark)]:{" on ajoute la classe de manière à styliser l'élément "} ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SimpleTaskDescription]:{" on va ici juste ajouter un qui pour refermer le div> ouvert après la fermeture
size('addressbook') > 0) { ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(--messageStackCell)]:{" perméttra plus tard de cibler le bloc de messages d'avertissement/erreur/succès du site "} ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(--pageAddressBookSubCellCategorySection)]:{" perméttra plus tard de cibler le bloc de catégories de sections "} ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(--pageAddressBookSubCellCategorySection)]:{" perméttra plus tard de cibler le bloc de catégories de sections "} ?>
[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ petits changements sur la structure et sur le texte sert uniquement à restyliser l'élément pour le centrer par exemple et le re-marger } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?>
output('addressbook'); ?>
[VTAB-TEAM-LINDER-PARTNER-1][OSC][AddClassDescription(--textAddressBook)]:{" on ajoute la classe de manière à styliser l'élément "} ?>
[SI-LINDER-PARTNER-2][OSC][AddClassDescription(--pageAddressBookSubCellCategorySectionDescription)]:{" perméttra plus tard de cibler le bloc de description de sections "} ?>
[SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" on ajoute une classe ici pour cibler le bloc plus tard, et on commente l'image, on rajoute un double-point et un espace après le texte "} ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(--pageAddressBookSubCellCategorySectionMainAdress)]:{" perméttra plus tard de cibler le bloc de description de sections "} ?>
: 
 '); ?>
, et on va pas y aller de mains-mortes: on va ajouter une classe à la ligne du tableau (..) cette classe servira à pouvoir cibler plus efficacement cette partie sensible du design, autant en affichage normal qu'en responsive on va aussi reformater la structure HTML, car là, c'est pas très lisible pour un développeur qui éditerai le code plus tard on utilisera différentes balises pour symboliser la valeur de l'élément listé avec des classes différentes, car certains doivent afficher des informations "statiques" d'autres dynamiques - 4/ on va aussi donner une classe à la cellule ici, de manière à forcer son style d'affichage visuel, sa taille aussi, on va la limiter à 80% de son conteneur parent - 5/ on place un ici afin de pouvoir restyliser précisemment CET élément, ce qui nous oblige à lui donner une classe pour l'occasion, ici on affiche l'indicateur d'état comme adresse principale - 6/ on va aussi donner une classe à la cellule ici, de manière à forcer son style d'affichage visuel, sa taille aussi, on va la limiter à 20% de son conteneur parent - 7/ on va aussi donner une classe à la cellule ici, de manière à le cibler plus tard - 8/ on place un ici afin de pouvoir restyliser précisemment CET élément, ce qui nous oblige à lui donner une classe pour l'occasion, ici on affiche l'indication de valeur de l'adresse - 9/ remplacement de l'ancien bouton (lien) ou (soumission), pour l'avoir désormais géré par UI Kit, mais aussi, avec une classe précise - 10/ exceptionnellement ici, on va utiliser un icone au lieu d'un texte, car, le texte est générique, et on peut s'en passer, un icone parlera bien mieux au client } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on va ajouter un tas de petites modifications, des classes, des styles, et peut-être du comportement à différents éléments de ce tableau à noter que ce tableau contient le contenu visuel de la page. - 2/ on va ajouter une classe au tableau (..
) cette classe servira à pouvoir cibler plus efficacement cette partie sensible du design, autant en affichage normal qu'en responsive - 3/ à la différence des autres pages, ici, on va restyliser chaque
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> ' . PRIMARY_ADDRESS . ''; ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> '); ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?>
[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on va revoir les éléments de boutons, tout simplement par ici - 2/ remplacement de l'ancien bouton (lien) ou (soumission), pour l'avoir désormais géré par UI Kit, mais aussi, avec une classe précise - 3/ exceptionnellement ici, on supprime l'ancienne classe smallText et on aligne à gauche le bouton - 4/ exceptionnellement ici, on supprime l'ancienne classe smallText et on aligne à droite le bouton [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique: - 1/ ajout du nouveau bouton vtab à la place de l'ancien bouton, géré par la fonction vtab_tep_button() qui se trouve dans le fichier vtab_html_output.php cela remplace l'étape [4] de la tâche [SI-LINDER-PARTNER-2][OSC] } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?>
du tableau "} ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" on ajoute une classe pour pouvoir cibler cette cellule de tableau afin de la masquer en responsive ou autres ! // [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_4] "} ?>
[SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" on ajoute un élément HTML et une classe pour pouvoir cibler cette zone afin de la styliser en responsive ou autres ! "} ?>