AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Maxi optimiser la page du profil / feuille de personnage !

    TroisQuartsLicorne
    TroisQuartsLicorne
    FémininAge : 88Messages : 75

    le Ven 7 Juin 2019 - 2:32

    Maxi optimiser la page du profil / feuille de personnage !



    Salutation à vous ! Je suis de retour avec une autre demande / interrogation dont il me ferait plaisir de discuter avec vous et de trouver une solution pour arriver à mes fins. Voilà qu'aux grés de mes recherches de designs, j'ai découvert le coté anglophone de rpg sur forum avec des plateformes différentes ( mais de base relativement semblable. ) Certain de ces forums utilisent la page du profil membre comme une vraie belle fiche de personnage. Je trouve que ça a un côté pratico-pratique et cela maximiserais incroyablement l'utilité de cette page.


    Schéma(s) et Eléments


    Schémas : Je vous laisse ici deux exemple parmi tant d'autre :

    EXEMPLE 1
    EXEMPLE 2

    Version de votre forum : J'irais probablement en ModernBB


    Autres précisions ?


    Si vous observez l'exemple 1, la page du profil du membre est aux couleurs de son groupe. il y a des titres pertinents, des images personnalisables ( C'est un peu poussé à mon gout mais intéressant quand même ) des forme avec des couleurs personnalisables ( C'est des background-color ). Les informations du profils, je dirais " de base " et facile à déplacer son au début, dans un encadré sobre. On y trouve la phrase personnalisé, le rang, les liens, les contacts, et autres détails. Ensuite les images/couleurs choisis par le membre, puis viens la section à deux colonnes. À droite ce sont de petites section personnalisables, avec des titres précis et à gauche une grande section de texte libre, pour écrire ce qui est en lien avec chaque zone de ce profil ( pitch, personality, past. ) .

    L'exemple #2 est beaucoup plus simple mais tout aussi agréable visuellement ; liens du profil + 3 images personnalisables derrière le nom du personnage + Les informations de profil en bref dans la colonne de gauche et un très grand espace à droite pour écrire son bg.


    Comment est-ce que ?


    C'est cela que j'aimerais voir avec vous : Comment-est que l'on pourrait réaliser ce genre de design avec ce que nous donne le profil et la feuille de personnage de FA. Je ne sais pas trop par quel moyen il serait mieux de passer, mais le profil en mode "simple", les deux sont affichés sur la même page ( ce qui est plutot pratique ) - Comment ajouter des titres/section via la feuille de personnage, par exemple quand tout est stocké que dans deux variable qui loop - soit :

    {switch_rpg.rpg_fields.F_NAME}
    {switch_rpg.rpg_fields.F_VALUE_NEW}

    ( version sans "switch" directement sur la feuille de personnage en mode profil avancé. )

    La feuille de personnage est aussi séparé en 2 colonnes mais celle de gauche se place que les variables :

    {switch_rpg.rpg_fields_left.F_NAME}
    {switch_rpg.rpg_fields_left.F_VALUE_NEW}

    Celles-là semblent être liés qu'à une image de rang ou un truc comme ça. Je trouvais que la feuille de personnage pouvait être utile à cause des champs texte/liste mais ça crée des textarea boff. Par contre, la limite de caractère est beaucoup plus élevé que sur le profil. :hum:

    Est-ce que ça serait plus logique de passer que par la page de profil ? Ça serait pratique pour les liens d'images et tout ça. Comment alors, placer des titres et des sections ? Comment imposé du css à certain champs/valeurs ? Atteindre tout par css avec des nth-child ? Razz

    Ou encore, j'étais rendu à me dire que la technique de @Onyx pour les multiples personnage, avec une excelsheet à l'extérieur pour être utile ( bien que je trouve ça un peu intense de sortir du forum pour ajouter des info à son profil )

    Alors voilà, j'en viens à vous demander des idées, des astuces, un éclair de génie... peut-être l'un d'entre vous saura quoi faire, quoi placer, quoi scripter ou encore quoi ajouter/déplacer pour arriver à ce genre de profils ultra maximisé. :hum:


    Vous pouvez vous pratiquer sur mon profil test et observer un peu le code de base. :

    Après, vous pouvez aussi me dire que c'est trop fou et trop compliqué ! hahaha ! Razz

    J'attends vos réponses et suggestions !

    Au plaisir d'en discuter avec vous ! :omg:






     
    Onyx
    Onyx
    FémininAge : 25Messages : 3289

    le Sam 8 Juin 2019 - 3:22

    Salut!

    Puisque tu ne sembles pas vraiment savoir ce que tu veux précisément, je ne dirais pas que c'est une demande, plus une discussion (si tu veux parler des différentes possibilités) ou un work in progress (si c'est ton projet, mais que tu veux qu'on t'apporte de l'aide/commentaires de temps en temps).

    Sinon, ce que tu veux savoir : oui, ça se fait.
    L'affichage "Simple" est vraiment plus facile à manipuler, donc je le recommande fortement.

    Donc la base de la base, c'est d'aller se mettre toutes les variables (ou presque) dans des div/span avec des noms de class pour mieux les sélectionner.

    Pour les champs normaux du profil ainsi que les champs contacts, tu as de la chance, ils ont déjà des id propres à eux. Pour les voir, tu fais F12 (du moins avec Chrome), tu cliques sur le champ de ton choix et tu vas voir un truc du genre :
    Code:
    <dl id="field_id-1" class="left-box details" style="width: 80%;"></dl>
    Magique, ce champ a son propre id ! (c'est pareil partout).

    Sinon, pour bien manipuler le tout, il faudrait un peu de javascript.
    Si tu veux modifier quelque chose en profondeur, je te dirais de carrément créer des nouveaux blocs avec des id spécifiques dans ton template où on déplacera les éléments déjà existants dans l'ordre que tu veux. Ensuite, on supprime les blocs vides qui étaient là au départ et tu as ton profil 100% personnalisé.

    Étape 1 : On ne peut pas sélectionner "profil" dans les options de javascript, donc on mettrait "sur toutes les pages" et on créerait ce javascript
    Code:
    // On vérifie si on est sur un profil
    if (window.location.pathname.indexOf("/u") > -1) {
      $(function(){
     
        // Le reste du code

      });
    }

    Étape 2 : On récupère la couleur du groupe
    Code:
    // On vérifie si on est sur un profil
    if (window.location.pathname.indexOf("/u") > -1) {
      $(function(){
     
        // On récupère la couleur du groupe
        var groupcolor = $('#main-content').find('.page-title:first span:first').css('color');

      });
    }

    Étape 3 : On sélectionne un champ, on en crée un clone qu'on pourra déplacer ailleurs et on supprime le champ original (puisqu'on utilisera la copie lorsqu'on voudra la mettre ailleurs)
    Code:
    // On vérifie si on est sur un profil
    if (window.location.pathname.indexOf("/u") > -1) {
      $(function(){
     
        // On récupère la couleur du groupe
        var groupcolor = $('#main-content').find('.page-title:first > span:first').css('color');

        // On récupère le champ "Surnom", on le copie, puis on supprime le champ original
        // Ici, le champ "Surnom" est "field_id3"
        var champ_surnom = $('#field_id3').clone(true);
        $('#field_id3').remove();

      });
    }

    Étape 4 : On ajoute la copie du champ là où on veut le mettre. Ici, j'imagine que j'ai créé un bloc à part dans le template avec l'id "bloc_machin" et que j'y mets mes champs :
    Code:
    // On vérifie si on est sur un profil
    if (window.location.pathname.indexOf("/u") > -1) {
      $(function(){
     
        // On récupère la couleur du groupe
        var groupcolor = $('#main-content').find('.page-title:first > span:first').css('color');

        // On récupère le champ "Surnom", on le copie, puis on supprime le champ original
        // Ici, le champ "Surnom" est "field_id3"
        var champ_surnom = $('#field_id3').clone(true);
        $('#field_id3').remove();

        // Je déplace le champ surnom où je veux
        champ_surnom.appendTo('#bloc_machin');

      });
    }

    Bref, tu vois un peu le principe. Ici, je copie le champ au complet, mais je peux facilement juste copier le lien de l'avatar, le contenu d'un rang ou ajouter une couleur à un bloc. Les possibilités sont assez grandes.

    Si jamais l'idée de ce que tu veux se précise un peu plus, je suis là pour détailler un peu plus ^^

    Note : Mon machin excel est utilisé simplement pour pouvoir mettre des informations du style qui ne peut pas exister dans les champs du profil ou pour des multicomptes, ce ne serait pas très pertinent ici.



    TroisQuartsLicorne
    TroisQuartsLicorne
    FémininAge : 88Messages : 75

    le Sam 8 Juin 2019 - 19:46

    Maxi optimiser la page du profil / feuille de personnage ! Giphy

    Avant même de tester tout ça, je passe t'écrire un GROS MERCI ! Je me trouvais moi même pas très clair et je ne savais pas où mettre ce genre de demande. En plus, tu as bien compris que dans le fond, je voulais surtout savoir si c'était possible.

    Comme je bidouille seulement le JS, j'ai toujours cette impression que je manque un éventail de possibilité pour faire courber FA selon mon bon plaisir. Razz

    Bon ! Je vais regarder tout ça, commencer à l'appliquer et je reviens avec des résultats/questionnements !

    :hug2:



     
    TroisQuartsLicorne
    TroisQuartsLicorne
    FémininAge : 88Messages : 75

    le Dim 9 Juin 2019 - 3:43

    Bonsoir Onyx !

    Alors, ça fonctionne super bien !

    Je me demandais si ça serait pas plus rapide si je mettais le JS directement dans le template du profil ? Question que ça alourdisse pas trop tout le forum, bien que le code va finir par être long. :hum:

    Je serais prête pour plus de détails ! cheers

    Tu m'a fait récupérer la couleur du groupe, comment maintenant, je l'applique en css sur le profil ?

    Comment juste copier un lien, et l'appliquer sur un icon ( https://i.servimg.com/u/f58/19/67/62/93/710.png sur mon profil ) , par exemple ( tout en supprimant le nom du champ, garder que l'url de l'image et l'appliquer à la bonne place ) ?

    Pareil pour la couleur ! J'ai un champ avec un #hex : Comment récupérer que le contenu du champ et l'appliquer sur un background-color, par exemple.

    J'ai remarquée que, bon comme on copiait TOUT le champ ( nom + zone texte ) on copiait aussi du même coup le dd/dl/dt du html du field, ce qui fait un peu jurer l'apparence de tout ça ( le dd/dl/dt est pas toujours au même niveau, on dirait ) - Que me conseillerais tu de faire : De récupérer seulement le champs éditable ( pas son nom ) et de le mettre dans un span avec un id et mettre moi même le nom du champ dans le template ? Ou tu penses à une autre technique pour supprimer les dd/dl/dt ?

    Alors vas y , balance tout ! <3

    Voici la page test. Il n'y a pas de css, c'est laid, mais c'est pour tester :

    Et voici à quoi ressemblerais le template de profil maxi personnalisé ( sans le javascript du template.):



    Voici à quoi ressemblerais le JS pour ce que j'ai de testé :


    Il y a différente techniques et id, et classe. Dit moi ce que tu en penses ! :omg:

    Merci merci merci ! :joie:


    EDIT : Ya un bug bien intéressant qui se déroule en ce moment : Certaine info disparaissent totalement de la page. Autant certaine qui était déjà bien placé autant d'autre disparaissent quand je les changes de place. C'est vraiment mystérieux. :hum: ( Parce que, si je supprime le js et le remet, tout est nickel et re-fonctionne comme il faut )

    Parce que, tout y est toujours dans le profil :






     
    Onyx
    Onyx
    FémininAge : 25Messages : 3289

    le Mar 11 Juin 2019 - 2:17

    Salut!

    Pour le bug, quels champs sont les champs qui disparaissent exactement? Quel est leur id?

    Sinon, dans ton JS, tu as 2 fois ceci :
    Code:
    champ_pronom.appendTo('.M2_profil_intro_gauche');

    Et tu essaie de placer le champ bitcoin sans l'avoir copié, ça va mal Razz

    =============================================

    On ne place pas de javascript dans les templates, c'est pas bien é_è
    Grace au "if" au début du code, il y a un millième de micro-seconde utilisé pour dire "err, je suis sur un profil? oui? non?", cela ne ralentit pas le forum.
    Lorsqu'on est sur une autre page que le profil, le navigateur arrête de lire au if et passe à la prochaine étape sans se soucier du reste du javascript puisqu'il comprend que cela ne le concerne pas.

    =============================================

    Bon, ensuite, pour le reste, je me rends compte que je t'ai un peu compliqué la vie pour rien, j'avais oublié qu'on pouvait déplacer des champs sans d'abord les cloner, :siffle:

    À la place de faire :
    Code:
        // On copie un champ et on supprime la version originelle
        var champ_surnom = $('#field_id3').clone(true);
        $('#field_id3').remove();

        // J'ajoute la copie où je veux
        champ_surnom.appendTo('#bloc_machin');

    On peut juste faire :
    Code:
        // On sélectionne un champ et on le déplace
        var champ_surnom = $('#field_id3');
        champ_surnom.appendTo('#bloc_machin');

    Ou encore plus simple (mais un peu plus mélangeant à moins que tu ais une merveilleuse mémoire pour savoir ce qu'est field_id3 par coeur) :
    Code:
        //Je déplace le champ où je veux
        $('#field_id3').appendTo('#bloc_machin');

    =============================================

    Ensuite, pour ce qui est du "est-ce qu'on le copie en entier ou on va chercher le titre et la valeur individuellement", c'est un peu plus dur à dire...

    Ça dépend vraiment de ton choix. Si tu veux que l'utilisateur ou un Admin puisse modifier directement le champ, il faut le garder tel quel, donc le copier en entier (sinon le script qui permet de modifier les valeurs ne fonctionne pas).

    Si tu te dis "l'Admin n'a qu'à passer par le panneau d'administration et le joueur par son profil", ok, on peut facilement prendre seulement le titre du champ et la valeur du champ.

    Exemple :
    Code:
        // On on copie le label et la valeur d'un champ, puis on supprime le champ
        var champ_surnom_label = $('#field_id3').find('dt').html();
        var champ_surnom_content = $('#field_id3').find('dd .field_uneditable').html();
        $('#field_id3').remove()

        // On crée la structure qu'on veut pour notre nouveau champ
        champ_surnom_ajout = "<span class='nomclass'>" + champ_surnom_label + "</span><div class='nomclass2'>" +
    champ_surnom_content + '</div>';

        // On ajoute le champ où on veut
        champ_surnom_ajout.appendTo('#bloc_machin');

    La structure peut être comme tu veux, tu peux prendre seulement la valeur et mettre le nom du champ manuellement pour éviter le ":" même si tu veux :
    Code:
        // On copie la valeur d'un champ, puis on supprime le champ
        var champ_surnom_content = $('#field_id3').find('dd .field_uneditable').html();
        $('#field_id3').remove()

        // On crée la structure qu'on veut pour notre nouveau champ
        champ_surnom_ajout = "<span class='nomclass'>♥ Surnom ♥ </span><span class='nomclass2'>" +
    champ_surnom_content + '</span>';

        // On ajoute le champ où on veut
        champ_surnom_ajout.appendTo('#bloc_machin');

    =============================================

    Alors tout d'abord, voilà quelques actions que tu peux faire :
    Code:
        // On sélectionne un champ
        var nomdemavariable = $('#field_id1');

        // On crée une copie d'un champ
        var nomdemavariable = $('#field_id1').clone(true);

        // On copie le contenu de la valeur d'un champ (text, image, barre de vie, n'importe quoi)
        var nomdemavariable = $('#field_id1').find('dd .field_uneditable').html();

        // On copie le contenu du label d'un champ (le nom du champ)
        var nomdemavariable = $('#field_id1').find('dt').html();

        // On copie l'url du lien d'un champ contact
        var nomdemavariable = $('#field_id1').find('dd a:first').attr('href');

        // On copie l'url de l'image d'un champ
        var nomdemavariable = $('#field_id1').find('dd .field_uneditable img:first').attr('src');

        // On crée une image et on la place à quelque part
        var monimage = "<img url='"+ nomdemavariable +"' alt='Titre image' />";
        monimage.appendTo('#machin-bloc');

        // On supprime un champ
        $('#field_id1').remove();

        // On déplace un champ qui n'a pas de nom de variable (le champ s'ajoute à la fin)
        $('#field_id1').appendTo('#bloc_machin');

        // On déplace un champ qui n'a pas de nom de variable (le champ s'ajoute au tout début)
        $('#field_id1').prependTo('#bloc_machin');

        // On modifie l'url d'une image déjà existante à partir d'une variable
        NomVariableImageAModifier.attr('src', urldelimage);

        // On change le background d'un truc (couleur de groupe ou autre variable récupérée)
        $('#machin_bloc').css('background-color', groupcolor);

        // On change la couleur d'une bordure d'un truc (couleur de groupe ou autre variable récupérée)
        $('#machin_bloc').css('border-color', groupcolor);

        // On crée une phrase au milieu de laquelle il y a la valeur de "champ_nom" et de "champ_deteste" et on la met quelque part
        var montexte = "Bonjour, je m'appelle " + champ_nom + " et je déteste " + champ_deteste + ".";
        montexte.appendTo('#machin-bloc');

    Je crois que j'ai fait un peu le tour...

    À noter que si tu as des champs qui servent juste pour l'esthétique, c'est important de supprimer le champ après avoir copié la valeur.
    Par là, je veux dire que lorsque tu sélectionnes un champ et que tu le déplace, c'est correct, il est déplacé en entier, donc il ne reste rien derrière.
    Si tu copie la valeur d'un champ et que tu le mets ailleurs, il ne faut pas oublié que le champ original est toujours là. Par exemple, si tu copies la valeur de Couleur perso 1 et que tu t'en sers pour changer la couleur d'un truc, c'est ok. Mais ensuite, tu ne veux plus voir le champ de la couleur, donc c'est important d'utiliser remove() pour supprimer le champ en question.

    =============================================

    Aussi, si tu as des champs qui sont facultatifs, tu voudras peut-être mettre des validations (des if) dans ton code. L'intérêt, c'est qu'à la place d'avoir le navigateur qui lit tout le JS, le navigateur lit le JS, mais saute par-dessus les parties qui ne s'applique pas, donc cela permet de sauver des millisecondes de délai.

    Par exemple :
    Code:
        // On sélectionne un champ et on vérifie s'il existe
        var champ_surnom = $('#field_id3');
        if (champ_surnom) {

          // On copie le label et la valeur, puis on supprime le champ
          var champ_surnom_label = champ_surnom.find('dt').html();
          var champ_surnom_content = champ_surnom.find('dd .field_uneditable').html();
          champ_surnom.remove()

          // On crée la structure qu'on veut pour notre nouveau champ
          champ_surnom_ajout = "<span class='nomclass'>" + champ_surnom_label + "</span><div class='nomclass2'>" + champ_surnom_content + '</div>';

          // On ajoute le champ où on veut
          champ_surnom_ajout.appendTo('#bloc_machin');
        }
    Ici, on commence par vérifier si le champ avec l'id "field_id3" existe. Si non, on passe à la partie suivante sans rien faire. Si oui, on fait les actions d'après.

    Voilà pour aujourd'hui, je te laisse mijoter un peu ^^

    Tiens, voilà ton code en un tantinet plus court et avec les 2 erreurs que j'ai vu corrigé :
    Code:
    // On vérifie si on est sur un profil
    if (window.location.pathname.indexOf("/u") > -1) {
      $(function(){
     
        // On récupère la couleur du groupe
        var groupcolor = $('#main-content').find('.page-title:first > span:first').css('color');

        // On sélectionne les champs nécessaires
       
        var champ_docMedic = $('#field_id19');
        var champ_liens = $('#field_id18');

        var champ_pseudo = $('#field_id1');
        var champ_multi = $('#field_id5');
        var champ_nbmess = $('#field_id-6');
        var champ_discord = $('#field_id6');
        var champ_date = $('#field_id-4');

        var champ_img1 = $('#field_id7');
        var champ_img2 = $('#field_id8');
        var champ_img3 = $('#field_id9');

        var champ_colo1 = $('#field_id10');
        var champ_colo2 = $('#field_id11');
        var champ_colo3 = $('#field_id12');

    // INTRODUCTION
        var champ_ageperso = $('#field_id13');
        var champ_pronom = $('#field_id14');
        var champ_orientation = $('#field_id15');
        var champ_residence = $('#field_id16');
        var champ_bitcoin = $('#field_id-13');
        var champ_metier = $('#field_id2');
        var champ_hybrid = $('#field_id3');
        var champ_race = $('#field_id28');
        var champ_fa = $('#field_id20');
        var champ_infection = $('#field_id21');
        var champ_faceclaim = $('#field_id22');

        var champ_txtintro = $('#field_id17');
       

        // On déplace les champs
       
        champ_docMedic.appendTo('.M2_profil_top_liens');
        champ_liens.appendTo('.M2_profil_top_liens');

        champ_pseudo.appendTo('.M2_profil_top_droite');
        champ_multi.appendTo('.M2_profil_top_droite');
        champ_nbmess.appendTo('.M2_profil_top_droite');
        champ_discord.appendTo('.M2_profil_top_droite');
        champ_date.appendTo('.M2_profil_top_droite');
       
        champ_img1.appendTo('#profil_img1');
        champ_img2.appendTo('#profil_img2');
        champ_img3.appendTo('#profil_img3');
        champ_colo1.appendTo('#profil_couleur1');
        champ_colo2.appendTo('#profil_couleur2');
        champ_colo3.appendTo('#profil_couleur3');

    // INTRODUCTION
        champ_ageperso.appendTo('.M2_profil_intro_gauche');
        champ_pronom.appendTo('.M2_profil_intro_gauche');
        champ_orientation.appendTo('.M2_profil_intro_gauche');
        champ_residence.appendTo('.M2_profil_intro_gauche');
        champ_bitcoin.appendTo('.M2_profil_intro_gauche');
        champ_metier.appendTo('.M2_profil_intro_gauche');
        champ_hybrid.appendTo('.M2_profil_intro_gauche');
        champ_race.appendTo('.M2_profil_intro_gauche');
        champ_fa.appendTo('.M2_profil_intro_gauche');
        champ_infection.appendTo('.M2_profil_intro_gauche');
        champ_faceclaim.appendTo('.M2_profil_intro_gauche');

        champ_txtintro.appendTo('.M2_profil_intro_droite');

      });
    }

    PS : Je déplace dans Work in Progress demain puisque c'est toi qui fais le travail et que je ne fais que te donner les outils Wink



    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 10:50