Champ Profil - sauvegarde du 21 dans l'après-midi ?

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonsoir,

pour une raison obscure, j'ai modifié un vieux code dont je n'ai plus la compréhension.
Résultat les champs profil sont désordonnées et je ne me souviens plus de ce que j'avais donné.

Hélas je ne peux pas faire un rollback en arrière complet puisque cela reviendrait à supprimer les messages de mes joueurs.





Est-il possible de faire en sorte de restaurer le panneau administrateur du champ "Profil" s'il vous plait ?

Merci,

belle soirée,

[Kaehlyth]

Petit UP.

[Toryudo]

Bonjour !

En théorie, d'après le tuto du fonctionnement des back-ups https://forum.forumactif.com/t267551-fonctionnement-des-sauvegardes-back-up, vous pouvez choisir l'option "Insérer uniquement le contenu perdu sans toucher au contenu actuel" présentée au point 3.3.2

Jamais tenté de mon côté, mais je pense que ça correspond à la situation ?

[Kaehlyth]

Bonjour,

pas du tout malheureusement. Le profil ayant été touché, renommé et déplacé, il s'agit d'un ajout ayant remplacé l'ancien contenu. Aussi le back-up ne permettrait que de rajouter ce qui a été supprimé mais pas renommé par exemple...


J'ai dû refaire mon CSS.

Et j'ai bien un script JS qui permet de gérer cela avec son CSS.
Le problème réside je pense à une corruption du code JS puisque tout s'affiche dans l'onglet "Statistiques". Qui est : class="comp comp-note is-active" et profile_notes

Code:

      <script type="text/javascript">$('nav').find('a').click(function(e) {
                              e.preventDefault();
    $('nav').find('a.active').removeClass('active');
    $(this).addClass('active');
    if($('a.active').is('.inventaire')) {
        $('span.is-active').css('left','20%');
    } else if($('a.active').is('.perso_stats')) {
        $('span.is-active').css('left','40%');
    } else if($('a.active').is('.perso_code')) {
        $('span.is-active').css('left','60%');
    } else if($('a.active').is('.note')) {
        $('span.is-active').css('left','80%');
    } else {
        $('span.is-active').css('left','0%');
    }
    if($('.inventaire').is('.active')) {
        $('.pages').find('.is-active').removeClass('is-active');
        $('.comp-inventaire').addClass('is-active');
    } else if($('.perso_stats').is('.active')) {
        $('.pages').find('.is-active').removeClass('is-active');
        $('.comp-stats').addClass('is-active');
    } else if($('.perso_code').is('.active')) {
        $('.pages').find('.is-active').removeClass('is-active');
        $('.comp-code').addClass('is-active');
    } else if($('.note').is('.active')) {
        $('.pages').find('.is-active').removeClass('is-active');
        $('.comp-note').addClass('is-active');
    } else {
        $('.pages').find('.is-active').removeClass('is-active');
        $('.comp-home').addClass('is-active');
    };
});</script>

Code:

/* ONGLETS */
.mess_pro_bloc_avatar{width: 204px;/*150px à l'origine*/}
.mess_pro_bloc_avatar a img{width: 83px;}
.contact_profil {position: relative;top: -100px;}
.mess_pro_bloc_avatar #container{position: relative;top: -120px /*-320px*/;}
.bouton-profil {margin-top: 3px;margin-left: -6px;}

.pages {position: relative;display: block;width: 100%;height: 292px /*190px*/;top: 80px /*-40px*/;z-index : 1; }
.pages .comp {position: relative;display: none;flex-direction: column;align-items: flex-start;
justify-content: flex-start;width: 100%;height: 103% /*100%*/;margin: 0;padding: 0 0 0px;background-color: rgba(86, 70, 50, 0.7);transform: translateX(0%);transition: 0.25s;animation: slideIn 0.25s ease;}

.comp-inventaire, .comp-stats, .comp-code, .comp-note{background: url(https://i.servimg.com/u/f44/20/41/07/60/fondli10.jpg); }

.pages .comp-home{background-color: unset;width: 150px /*200px*/;height: 190px /*220px*/;}
.pages .comp.is-active:hover .mess_pro_avatar_txt{opacity: 1;top: 0;}
.pages .comp.is-active {display: flex;}
.pages .comp header {position: relative;display: flex!important;align-items: center;justify-content: space-between;flex: 0 0 10%;width: 100%; /*170px*/min-height: 45px;/*padding: 10px 15px;*/}
.pages .comp header:before {position: absolute;content: '';top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(50, 65, 65, 0.8);z-index: 0;}
.pages .comp header h1 {margin: 0;padding: 0;color: #f5f5f5;font-family: "Cinzel Decorative";font-size: 17px;text-shadow: 1px 1px #324141;animation: headingSlide .5s linear;z-index: 1;}
.pages .comp section {position: relative;display: flex;flex-direction: column;flex: 0 1 auto;width: 100%;height: 250px /*200px*/;/*padding: 10px 15px 0;*/overflow: auto;}

@keyframes slideIn {0% {transform: translateX(-100%);} 100% {transform: translateX(0%);}}
@keyframes headingSlide {0% {transform: translateX(-100%);}50% {transform: translateX(30%);}75% {transform: translateX(-30%);}100% {transform: translateX(0);}}
@keyframes avatarSlide {0% {transform: translateY(-300%);} 100% {transform: translateY(0%);}}

.mess_pro_bloc_avatar #container nav {position: relative;top: 391px;display: flex;align-items: center;justify-content: center;width: 203px;height: 40px;
 background-color: #202020;overflow: hidden;z-index: 2;margin: 0 -3px;box-shadow: 0 0 10px #bfb4b5;}
.mess_pro_bloc_avatar #container nav span.is-active {position: absolute;top: 0;left: 0;width: 20%;height: 100%;background-color: whitesmoke;
 box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);transition: left 0.25s ease-in-out;z-index: 0;}
.mess_pro_bloc_avatar #container nav span.is-active:before {position: absolute;content: '';top: 0;left: 0;width: 100%;height: 5px;background-color: #daac53;z-index: 1;}
.mess_pro_bloc_avatar #container nav a {position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 25%;height: 100%;padding: 0;
 color: whitesmoke;text-decoration: none;}
.mess_pro_bloc_avatar #container nav a.active {color: #daac53;}
.mess_pro_bloc_avatar #container nav a > i {font-size: 18px;}
.mess_pro_bloc_avatar #container nav a > div {font-size: 12px;}
.comp-home .champs_profil{display: none;position: absolute;top: 0;}

.profile_inventaire .profile_inventaire_content,.profile_stats .profile_stats_content,.profile_code .profile_code_content{display: none;position: relative;top: 0;text-align: justify;margin-left: 8px;}
.profile_notes .profile_notes_content{display: none;position: relative;top: 0;text-align: justify;margin-left: 21px;}

.profile_inventaire .profile_inventaire_content:nth-child(1),
.profile_inventaire .profile_inventaire_content:nth-child(2),

.profile_stats .profile_stats_content:nth-child(3),
.profile_stats .profile_stats_content:nth-child(4),

.profile_code .profile_code_content:nth-child(5),
.profile_code .profile_code_content:nth-child(6),
.profile_code .profile_code_content:nth-child(7),
.profile_code .profile_code_content:nth-child(8),
.profile_code .profile_code_content:nth-child(9),
.profile_code .profile_code_content:nth-child(10),

.profile_notes .profile_notes_content:nth-child(11),
.profile_notes .profile_notes_content:nth-child(12),
.profile_notes .profile_notes_content:nth-child(13),
.profile_notes .profile_notes_content:nth-child(14),
.profile_notes .profile_notes_content:nth-child(15),
.profile_notes .profile_notes_content:nth-child(16),
.profile_notes .profile_notes_content:nth-child(17),
.profile_notes .profile_notes_content:nth-child(18),
.profile_notes .profile_notes_content:nth-child(19),
.profile_notes .profile_notes_content:nth-child(20)

{display: block;text-shadow: -1px 0 black, 0 1px black,1px 0 black, 0 -1px black;}

.profile_code .profile_code_content:nth-child(8) span.label,.profile_code .profile_code_content:nth-child(6) span.label{display: none;}

.profile_code .profile_code_content:nth-child(5) {
    position: absolute;
    left:1em;
    top: 2.7em;
}

.profile_code .profile_code_content:nth-child(6) {
    position: absolute;
    top: 5.6em;
    left: 1.7em;
}

.profile_code .profile_code_content:nth-child(7) {
    position: absolute;
    right:1em;
    top: 2.7em;
}

.profile_code .profile_code_content:nth-child(8) {
    position: absolute;
    top: 5.6em;
    right: 1.3em;
}

.profile_code .profile_code_content:nth-child(9) {
    position: absolute;
    right: 4.5em;
    top: 0.3em;
}
.profile_code .profile_code_content:nth-child(10) {
    position: absolute;
    right: 0.7em;
    top: 7.8em;
}
.profile_code .profile_code_content:nth-child(11){position: absolute;left: 70px;top: 1px;}
.profile_code .profile_code_content:nth-child(13){margin-top: 127px;}


.profile_inventaire_content ul,.profile_stats_content ul,.profile_code_content ul{list-style-type: none;margin-left: -35px;margin-right: 25px;width: 150px;color: #F8D285;}
.profile_inventaire_content ul li{background-color: rgba(86,70,50,0.7);border-radius: 5px;padding: 3px;margin: 3px -6px;width: 180px;}
.profile_stats_content ul li {margin: 3px 0px 4px -7px;background-color: rgba(86, 70, 50, 0.7);border-radius: 5px;padding: 3px;width: 180px;color: #F8D285;}
.profile_code_content ul li {background-color: rgba(86,70,50,0.7);border-radius: 5px;padding: 3px;margin: 3px -6px;width: 180px;}
.profile_inventaire_content ul li img,.profile_stats_content ul li img,.profile_code_content ul li img{height: 15px;}

.profile_code,.profile_notes{width: 100%;/*170px*/height: 200px;}
.profil_code{text-align: left !important;}

.profile_inventaire .profile_inventaire_content:nth-child(1) img{position: relative;left: 75px;bottom: -8px;}
.profile_inventaire .profile_inventaire_content:nth-child(2) img{position: relative;left: 75px;bottom: -8px;}
.profile_notes .profile_notes_content:nth-child(14) span.hover-content{position: relative;left: 35px;}/*-42px*/
.profile_notes .profile_notes_content:nth-child(15) span.hover-content{position: relative;left: 23px;}/*-53px*/
.profile_notes .profile_notes_content:nth-child(16) span.hover-content{position: relative;left: 26px;}/*-68px*/
.profile_notes .profile_notes_content:nth-child(17) span.hover-content{position: relative;left: 28px;}/*-39px*/
.profile_notes .profile_notes_content:nth-child(18) span.hover-content{position: relative;left: 16px;}/*-54px*/
.profile_notes .profile_notes_content:nth-child(19) span.hover-content{position: relative;left: 27px;}/*-78px*/
.profile_notes .profile_notes_content:nth-child(20) span.hover-content{position: relative;left: 20px;}/*-68px*/
.profile_notes .profile_notes_content:nth-child(21) span.hover-content{position: relative;left: 32px;}/*-50px*/
.profile_notes .profile_notes_content:nth-child(22) span.hover-content{position: relative;left: 26px;}/*-23px*/
.profile_notes .profile_notes_content:nth-child(23) span.hover-content{position: relative;left: 10px;}/*-56px*/
.profile_notes .profile_notes_content:nth-child(24) span.hover-content{position: relative;left: 17px;}/*-41px*/
.profile_notes .profile_notes_content:nth-child(25) span.hover-content{position: relative;left: 28px;}/*-58px*/

[Toryudo]

Bonjour !

En tant qu'invité, je pense que les informations ne sont pas visibles : pour moi, il n'y a rien nulle part
Est-ce que vous auriez un compte test ?

Ou alors, est-ce que vous pourriez afficher les informations du profil pour les invités ?

[Kaehlyth]

Bonjour Toryudo !

Ça marche, je vous fais ça !

[Toryudo]

Bonjour !

Alors, si je prends le CSS existant, il va y avoir deux choses à modifier.
Au niveau du Template viewtopic_body pour commencer :

Code:

<div class="comp comp-note">
   <header>
      <h1>Statistiques</h1>
   </header>
   <section>
      <div class="profile_notes">
      <!-- BEGIN profile_field -->
      <script type="text/javascript">document.write(`{postrow.displayed.profile_field.LABEL}`.replace(" : ",""));</script> <span class="hover-content">{postrow.displayed.profile_field.CONTENT}</span>
      <!-- END profile_field -->
     </div>
   </section>
</div>

Ici, deux choses à modifier. Il faut déjà ajouter un <div> avec une class .profile_note_content ; toutes les autres sections ont une class similaire, donc celle-ci va fonctionner de la même façon. De plus, d'après le CSS, il faut remplacer la class .profile_notes par .profile_note sans s à la fin :

Code:

<div class="comp comp-note">
   <header>
      <h1>Statistiques</h1>
   </header>
   <section>
      <div class="profile_note">
      <!-- BEGIN profile_field -->
      <div class="profile_note_content"><script type="text/javascript">document.write(`{postrow.displayed.profile_field.LABEL}`.replace(" : ",""));</script> <span class="hover-content">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR} </div>
      <!-- END profile_field -->
     </div>
   </section>
</div>

Avec ça, le HTML devient correct, il reste une chose à modifier dans votre feuille de CSS, au niveau de ces lignes :

Code:

.profile_inventaire .profile_inventaire_content, .profile_stats .profile_stats_content, .profile_code .profile_code_content {
  display: none;
  position: relative;
  top: 0;
  text-align: justify;
  margin-left: 8px;
}

On va se contenter d'ajouter la class .profile_note_content, pour que par défaut, tous les champs soient masqués :

Code:

.profile_inventaire .profile_inventaire_content, .profile_stats .profile_stats_content, .profile_code .profile_code_content, .profile_note_content {
  display: none;
  position: relative;
  top: 0;
  text-align: justify;
  margin-left: 8px;
}

Le reste de votre CSS s'occupera d'afficher les champs qui doivent être affichés dans cette section !

[Kaehlyth]

Bonjour Toryudo,



vous êtes un génie du mal. Mais du Mal qui fait les choses bien... Je crois que je m'enfonce. 

C'est étrange, dans le sens où je n'ai jamais touché ce code de base qui avait été pensé et innové par Mlle.Alys à l'époque. Peut-être qu'avec le temps faisant, les mises à jour (et vous allez me dire aussi mes NOMBREUX JS) il y a eu une révélation de ligne incorrecte ? 

En tout cas merci infiniment !!

J'aurai une dernière question avant de clore le sujet.
Si je souhaite ajouter des champs de profils, quelqu'ils soient, je vais devoir modifier entièrement le CSS, ou alors, si je l'entre dans la bonne class, il va s'intégrer naturellement  ?

Par exemple, "Bourse" ne va plus me servir, et je vais sûrement laisser "inventaire" tout seul. 
Mais si j'enlève l'option des messages, cela déforme et prend dans les autres catégories.

"Etrangement", la catégorie " Statistiques" qui était initialement déformée et que vous avez réparé, elle, ne bouge pas.
Serait-ce une histoire de div ? 

> En attendant, j'ai remis visible le champ de profil "Bourse" pour que ça reste harmonieux. 






Encore merci à vous, je vous offre pleins de cookies ! 
(Attention, peut-être un trojan s'y cachent  )

[Toryudo]

Bonjour !

D'après le Template, dans toutes les sections du profil, il y a techniquement tous les champs.
Tous les champs sont masqués par défaut, puis le CSS suivant s'occupe de ré-afficher les éléments masqués :

Code:

.profile_inventaire .profile_inventaire_content:nth-child(1),
.profile_inventaire .profile_inventaire_content:nth-child(2),

.profile_stats .profile_stats_content:nth-child(3),
.profile_stats .profile_stats_content:nth-child(4),

.profile_code .profile_code_content:nth-child(5),
.profile_code .profile_code_content:nth-child(6),
.profile_code .profile_code_content:nth-child(7),
.profile_code .profile_code_content:nth-child(8),
.profile_code .profile_code_content:nth-child(9),
.profile_code .profile_code_content:nth-child(10),

.profile_notes .profile_notes_content:nth-child(11),
.profile_notes .profile_notes_content:nth-child(12),
.profile_notes .profile_notes_content:nth-child(13),
.profile_notes .profile_notes_content:nth-child(14),
.profile_notes .profile_notes_content:nth-child(15),
.profile_notes .profile_notes_content:nth-child(16),
.profile_notes .profile_notes_content:nth-child(17),
.profile_notes .profile_notes_content:nth-child(18),
.profile_notes .profile_notes_content:nth-child(19),
.profile_notes .profile_notes_content:nth-child(20)

{display: block;text-shadow: -1px 0 black, 0 1px black,1px 0 black, 0 -1px black;}

Actuellement donc, vous avez les 20 champs dans les 5 sections.
Pris dans l'ordre, vous affichez donc :

• les champs 1 et 2 à l'intérieur de la section .profile_inventaire
  
• les champs 3 et 4 à l'intérieur de la section .profile_stats
  
• les champs 5 à 10 à l'intérieur de la section .profile_code_content
  
• les champs 11 à 20 à l'intérieur de la section .profile_notes

C'est grâce à la propriété CSS :nth-child(x) que vous affichez le champ n°x (dans l'ordre d'affichage), et je vois aussi que ces :nth-child(x) sont utilisés à d'autres endroits pour l'affichage particulier de certaines données du profil.

Donc, si vous créez un nouveau champ, tout dépend de ce que vous faites. Si vous le laissez en dernière position, ce champ deviendra le champ :nth-child(21), vous n'aurez plus qu'à ajouter du CSS pour indiquer dans quelle section il doit apparaitre. Si vous ajoutez ce champ et que vous le placez en position 10 par exemple, ça veut dire qu'il devient le nouveau :nth-child(10), et que tous les autres champs doivent être décalés de 1 (comprendre le :nth-child(10) précédent doit devenir le :nth-child(11), le :nth-child(11) doit devenir le :nth-child(12), etc.)

Enfin, si vous supprimez le champ 10 par exemple, même punition : il faut supprimer le :nth-child(10) et décaler le tous les :nth-child() qui arrivent après 10 (comprendre le :nth-child(11) devient le nouveau :nth-child(10), le :nth-child(12) devient le :nth-child(11), etc.)


Vous avez aussi la solution de ne pas supprimer le champ, mais de ne plus l'afficher.
Par exemple, si vous voulez ne plus afficher le champ 10, il suffit de supprimer ".profile_code .profile_code_content:nth-child(10)," du CSS ci-dessus. Le champ existera toujours, mais ne sera plus affiché dans le profil, et ça ne cassera pas le reste des champs. Bon, par contre, il existera toujours dans le profil normal et dans l'admin...

[Kaehlyth]

D'accord d'où le décalage, en fait, de tous les champs car le précédent nth11 devient automatiquement le 10 !

Ooohh...
Merci Toryudo, dès que je finis le travail, je regarde ça
Merci énormément.