Déplacer des champs de profil

[purple rain]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : /
Lien du forum : http://

Description du problème

Bonjour

Je remercie d'avance la ou les personnes qui prendront le temps de m'apporter une réponse

Je rencontre des difficultés pour déplacer un champ de profil.
J'aimerais effectivement mettre les champs de profil " âge " et " pronom irl " à la suite du rang se trouvant en dessous du pseudo du membre.

Voilà à quoi cela ressemble actuellement : https://i.servimg.com/u/f35/16/25/93/46/captur12.png

A savoir que je dispose d'un code javascript qui m'a permis de déplacer le champ Image sur le droite de l'entête, il s'agit de l'arrondi sur la capture d'écran.

J'ai tenté de modifier ce même code sans succès. Il s'agit d'un libre service, n'ayant aucune connaissance. Le voici :

Code:

// PLACEMENT : Sur les sujets

// [SPANISH] by Flerex
// https://flerex.dev/entradas/clases-unicas-a-los-campos-del-miniperfil

// Options, by Monomer
// Possibilité de déplacer un champs dans un autre élément

!function() {

 const settings = {
                semicolon: false, // true = met en place les (:) après un nom de champs
 cleanUp: true,
          
          // Option pour déplacer un champs dans un autre élément, laissez vide pour désactiver
          move: ['messages', 'name', 'pronoun-irl', 'fc', 'copyright', 'in-town-since',
                        'multinicks', 'dialogues', 'habits', 'triggers'], // Nom du champs en MINISCULE et SANS ACCENT (exemple : 'message') et séparer les champs à deux mots par un tiret (exemple : 'etat-civil')
          moveTo: '.secondTab', // élément dans lequel les champs seront déplacés
          
          moveLevel: ['age'],
          moveToLevel: '.post_age',
                
          // Déplacer le champ "image" en haut à droite
  moveImage: ['image'],
  moveToImage: '.post_image',
 },


 slugify = str => {
        const from = 'àáäâãåăæçèéëêǵḧìíïîḿńǹñòóöôœøṕŕßśșțùúüûǘẃẍÿź·/_,:;',
        to = 'aaaaaaaaceeeeghiiiimnnnooooooprssstuuuuuwxyz------',
        reg = new RegExp(from.split('').join('|'), 'g');

        return str.trim().toLowerCase()
         .replace(/\s+/g, '-')
         .replace(reg, c => to.charAt(from.indexOf(c)))
         .replace(/&/g, '-and-')
         .replace(/[^\w\-]+/g, '')
                .replace(/\-\-+/g, '-')
                .replace(/^-+/, '')
                .replace(/-+$/, '');
    },

    hideSemicolon = (label, name) => {
        if (label.firstElementChild)
            label.lastChild.remove();
        else
            label.textContent = name;
    },

    main = _ => {

     document.querySelectorAll('.user_field').forEach(p => {
     const labelcontainer = p.querySelector('.field_label'),
     label = labelcontainer.querySelector('.label'),
            name = label.textContent.replace(/ *: *$/, ''),
          slug = slugify(name);

     p.classList.add('field-' + slug);
          
          if(settings.move.includes(slug)) {
           p.closest('.post_profile').querySelector(settings.moveTo).appendChild(p);
          }
          
          if (settings.moveImage.includes(slug)) {
 p.closest('.post_row').querySelector(settings.moveToImage).appendChild(p);
  }

     if (settings.cleanUp) {
     labelcontainer.textContent = settings.semicolon ? name + ': ' : name;
     } else if (!settings.semicolon) {
                hideSemicolon(label, name)
     }
     });

    };

    document.addEventListener('DOMContentLoaded', main);
}();

Dans mon viewtopic_body, j'ai mis cela : https://i.servimg.com/u/f35/16/25/93/46/captur13.png

Bon je suis tout de même allée voir le nom des champs dans l'inspecteur : https://i.servimg.com/u/f35/16/25/93/46/captur14.png

Sincèrement, je ne sais pas trop quoi regarder, quoi mettre et où le mettre.

Si quelqu'un aurait la gentillesse de m'expliquer, merci encore !

[Toryudo]

Bonjour !

Ce sera difficile de résoudre le problème sans avoir accès au forum en question, il faudrait l'avoir sous les yeux pour mieux comprendre.
De plus, je vois que vous avez déjà modifié le script... et je ne suis pas sûr de ce que vous avez fait !

J'imagine que vous voulez que les champs "move" soient déplacés dans "moveTo", et que les champs "moveLevel" soient déplacés dans "moveToLevel". A première vue, il y a au moins 4 problèmes :
- je ne vois pas d'élément avec la class .secondTab dans vos captures d'écran
- je ne vois pas d'élément avec la class .post_profile dans vos captures d'écran
- vous tentez de déplacer un champ "pronoun-irl" alors que sur une capture d'écran, je vois un champ qui s'appelle "pronoun-inrp"
- je ne vois pas de code qui demanderait le déplacement des éléments présents dans la liste "moveLevel" dans "moveToLevel"

Le script sélectionne tous les éléments de class .user_field
Pour chaque élément, le script vérifie si celui-ci est présent dans la liste "move" : si c'est le cas, il le déplace dans un élément ".post_profile .secondTab".
Si vous voulez que de nouveaux éléments soient ajoutés dans cette .secondTab, il faut les ajouter dans la liste "move" et faire en sorte qu'un élément .secondTab existe dans un élément .post_profile (je ne vois aucun des deux sur votre capture d'écran, d'où le fait qu'ils ne soient peut-être pas déplacés).
Donc pour déplacer " âge " et " pronom irl " dans .secondTab, il faudrait ajouter ces deux éléments dans la liste de "move".

Maintenant, je vois que vous avez ajouté " âge " dans "moveLevel", donc peut-être que c'est un début de modification que vous avez écrit.
Si vous voulez que l'âge soit déplacé dans l'élément indiqué dans "moveToLevel", il faudra ajouter ce code :

Code:

if(settings.moveLevel.includes(slug)) {
  p.closest('.post_row').querySelector(settings.moveToLevel).appendChild(p);
}

Si vous voulez déplacer un champ " pronom irl " dans un autre élément encore, ce sera le même principe, à condition d'être sûr que l'élément s'appelle "pronom-irl" et pas "pronom-inrp".
Vous pouvez encore ajouter des champs "movePronom" et "moveToPronom", et trois autres lignes de code pour déplacer l’élément. Il reste juste à créer le <div> avec la class qui se trouvera dans "moveToPronom" dans le Template viewtopic_body, et le tour devrait être joué. Voici une proposition finale avec une class qu'on appellerait ".post_pronom" :

Code:

// PLACEMENT : Sur les sujets

// [SPANISH] by Flerex
// https://flerex.dev/entradas/clases-unicas-a-los-campos-del-miniperfil

// Options, by Monomer
// Possibilité de déplacer un champs dans un autre élément

!function() {

 const settings = {
          semicolon: false, // true = met en place les (:) après un nom de champs
          cleanUp: true,

          // Option pour déplacer un champs dans un autre élément, laissez vide pour désactiver
          move: ['messages', 'name', 'fc', 'copyright', 'in-town-since',
                        'multinicks', 'dialogues', 'habits', 'triggers'], // Nom du champs en MINISCULE et SANS ACCENT (exemple : 'message') et séparer les champs à deux mots par un tiret (exemple : 'etat-civil')
          moveTo: '.secondTab', // élément dans lequel les champs seront déplacés

          moveLevel: ['age'],
          moveToLevel: '.post_age',

          movePronom : ['pronoun-irl'],
          moveToPronom: '.post_pronoun',

          // Déplacer le champ "image" en haut à droite
          moveImage: ['image'],
          moveToImage: '.post_image',
 },

 slugify = str => {
        const from = 'àáäâãåăæçèéëêǵḧìíïîḿńǹñòóöôœøṕŕßśșțùúüûǘẃẍÿź·/_,:;',
        to = 'aaaaaaaaceeeeghiiiimnnnooooooprssstuuuuuwxyz------',
        reg = new RegExp(from.split('').join('|'), 'g');

        return str.trim().toLowerCase()
        .replace(/\s+/g, '-')
        .replace(reg, c => to.charAt(from.indexOf(c)))
        .replace(/&/g, '-and-')
        .replace(/[^\w\-]+/g, '')
                .replace(/\-\-+/g, '-')
                .replace(/^-+/, '')
                .replace(/-+$/, '');
    },

    hideSemicolon = (label, name) => {
        if (label.firstElementChild)
            label.lastChild.remove();
        else
            label.textContent = name;
    },

    main = _ => {

    document.querySelectorAll('.user_field').forEach(p => {
      const labelcontainer = p.querySelector('.field_label'),
            label = labelcontainer.querySelector('.label'),
            name = label.textContent.replace(/ *: *$/, ''),
            slug = slugify(name);

      p.classList.add('field-' + slug);

      // Déplacement des éléments move vers moveTo
      if(settings.move.includes(slug)) {
        p.closest('.post_profile').querySelector(settings.moveTo).appendChild(p);
      }

      // Déplacement des éléments moveLevel vers moveToLevel
      if(settings.moveLevel.includes(slug)) {
        p.closest('.post_row').querySelector(settings.moveToLevel).appendChild(p);
      }

      // Déplacement des éléments movePronom vers moveToPronom
      if(settings.movePronom.includes(slug)) {
        p.closest('.post_row').querySelector(settings.moveToPronom).appendChild(p);
      }

      // Déplacement des éléments moveImage vers moveToImage
      if (settings.moveImage.includes(slug)) {
        p.closest('.post_row').querySelector(settings.moveToImage).appendChild(p);
      }

      if (settings.cleanUp) {
        labelcontainer.textContent = settings.semicolon ? name + ': ' : name;
      } else if (!settings.semicolon) {
        hideSemicolon(label, name);
      }
    });

    };

    document.addEventListener('DOMContentLoaded', main);
}();

Faites bien toutes les vérifications, et je vous laisse me dire si ça fonctionne !

[purple rain]

Coucou !

Je suis désolée pour mes explications bancales et les erreurs de noms qui se sont glissées.
J'ai effectivement un profil sous l'avatar en deux onglets dans lesquels sont répartis les champs et je voulais en sortir certains pour les mettre dans l'entête sous le pseudonyme.

Malgré tout, ton explication était très claire et j'ai pu avoir le résultat escompté, ce qui rend très bien
Un GRAND merci pour avoir pris le temps de m'expliquer le fonctionnement.

J'ai un autre soucis pour deux champs qui ne se mettent pas sur la même ligne, est-ce préférable que je crée un autre sujet ?

Il s'agit des deux premiers de la liste qui restent l'un en dessous de l'autre au lieu d'être sur la même ligne. Cela ne fonctionnait pas avant que je ne commence à personnaliser mon profil avec du css et javascript. Pourtant sur un ancien forum, cela fonctionnait très bien :

https://i.servimg.com/u/f51/20/42/88/34/captur11.png
https://i.servimg.com/u/f51/20/42/88/34/captur10.png
https://i.servimg.com/u/f51/20/42/88/34/captur12.png

[Toryudo]

Bonjour !

Alors même chose, sans voir, difficile à dire.
Je peux imaginer que ce sont deux <div> sans CSS particulier, ce qui les oblige à être l'un en dessous de l'autre. Pour qu'ils soient l'un à côté de l'autre, il faudrait par exemple leur rajouter une propriété CSS "float: left". Si ça déforme un peu la suite de la page, il faudrait également les encapsuler tous les deux dans un <div>, rajouter un peu de CSS. Tout dépend du résultat souhaité et du résultat obtenu !

[purple rain]

C'est noté ! Je vais fouiner
Encore merci pour ton intervention et bon week-end en avance