avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 23 Oct 2018 - 18:42
Hm il a du y avoir un souci quelque part qu'on saura jamais lol.

Je viens de remarquer que ton bloc parent a une classe, le qeel est unique sur une page donc on va transformer QEELbox en id. C'est aussi parce que certains scripts fonctionne mieux avec les id.

Ce qu'on va donc utiliser pour remplacer le texte des variables FA est la méthode replace()
Voici un exemple que tu peux tester sur ton lien CodePen.

Code:
document.getElementById('QEELbox').innerHTML = document.getElementById('QEELbox').innerHTML.replace(/Ils sont ensemble/,
      ' Here they are');
On va donc sélectionner l'id du document où il y aura le changement avec la méthode getElementById() et on va remplacer le texte dans replace (). Le texte actuel est toujours entre slash et le nouveau texte entre les guillemets ' '.
Certains mettre l'id directement sur l'élément HTML où on va faire le remplacement mais je préfère prendre l'id de tout le QEEL parce que ça me permet de faire tous mes remplacements à la suite dans le même script plutôt que de refaire toute la ligne document.getElementById etc. Pour ce faire c'est simple, il suffit d'ajouter une méthode replace() à la fin de celle qui la précède.

Code:
document.getElementById('QEELbox').innerHTML = document.getElementById('QEELbox').innerHTML.replace(/Ils sont ensemble/,
      ' Here they are ').replace(/Joyeux anniversaire/, '');

J'ai rien mis entre les guillemets ce qui va juste supprimer la phrase Joyeux anniversaire.
Ah et sache qu'en JS les majuscules et minuscules comptent, donc si jamais tu mets par exemple "id" au lieu de "Id" c'est foutu lol, le script ne fonctionnera pas.

Voilà c'est tout :3


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 23 Oct 2018 - 20:34
Voila du coup !

J'ai laissé le texte par défaut pour quand il y a pas d'anniversaire, histoire de pas avoir de case vide dans ces cas là, mais sinon quand il y en a un (j'en ai mis aujourd'hui et demain sur mon forum pour voir, haha) il n'y a que le pseudo (et l'age) des personnes.

Je me demandais du coup, quand on met plusieurs scripts js, est-ce qu'on doit mettre tout les scripts dans une seule balise ou mettre une balise par script (comme j'ai fait) c'est bon ? J'imagine que les deux fonctionnent et tu sais que je suis partisante du "tant que ça marche osef un peu si c'est mal", mais est-ce qu'il y a une façon "mieux" que l'autre ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 23 Oct 2018 - 22:49
Comme tu le sais, traditionnellement, il était d'usage de mettre la balise script dan head tout comme style pour le CSS. Pour ce faire j'imagine qu'il sera plus logique de mettre tout le code JS dans une seule et même balise.
Actuellement il est plutôt recommandé de la placer en fin du document juste avant /body, là encore je ne vois pas l'intérêt d'avoir plusieurs balises à la fin mais une suffira.

Cependant, ici on code des templates et on a souvent l'habitude de mettre le JS de chaque partie dans le template qui correspond. Du coup si tu vas tout mettre à la fin du template ou du moins à la fin de la partie codée on peut procéder conventionnellement et tout mettre dans une seule balise, surtout s'il y a personne qui va passer modifier ou changer des choses à ton code JS.
Personnellement, je ne suis pas calée en JS, j'ai souvent peur de faire des erreurs et je dois dire que j'en fais. Souvent je suis perdue et dans 50% des cas, mon JS ne fonctionne pas du premier coup. C'est pourquoi je mets chaque script directement après la partie qui le concerne et du coup je dois mettre à chaque fois une balise script logiquement. Je ne mets pas le tout à la fin, je me dis que je ne suis pas avant /body de toute façon alors autant ne pas m'embrouiller. Si j'avais codé ce qeel par exemple j'aurais mis le JS des onglets juste avant la div fermante du bloc QEELflex2. ça me permettra de vite retrouver la partie que je veux si jamais je voulais le réutiliser ou le corriger.
En gros la convention est de mettre une seule balise mais si ton code est partagé ici et là, logiquement tu auras besoin de plusieurs. C'est exactement comme le CSS, soit tu fais des fiches et chacune aura sa propre balise style soit tu mets le tout dans une balise que tu mettras dans head.
Il y a une autre alternative que j'utilise aussi, c'est comme mettre le CSS dans la feuille de style, parfois pour ne pas charger mon template ou encore pour garder mon script à portée de main, je l'enregistre en tant que page .js dans le PA > Modules > ajouter un script etc. Là je peux lui mettre un titre et tout.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 24 Oct 2018 - 0:58
Hum, d'accord. Je vais laisser en balises séparés alors mais en mettant chaque script après la partie qu'il concerne. Ça me donne ça du coup, et je crois que c'est terminé ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 24 Oct 2018 - 12:42
Si ça te semble mieux ainsi c'est bon, tu n'es pas obligée de faire la même chose que moi.

J'ai juste une dernière remarque. Le gras du conteur des messages/sujets/membres est juste esthétique. On utilise strong pour mettre en évidence quelque chose d'important. De plus tu as déjà une span autour des nombres du coup c'est facile de sélectionner cette partie en CSS.
Alors plutôt que de mettre en gras avec strong et devoir ajouter du CSS pour la colo etc avec .QEELflex3 strong, pourquoi ne pas mettre directement .QEELflex3 span et y ajouter le font-weight, ça me semble plus cohérent.

Notre QEEL est fini. Maintenant on va faire la même chose que pour les catégories et essayer de comprendre les autres parties du template. Je vais donc te demander de localiser dans le template la partie relative aux liens : Sujets actifs du jour, Top 20 des posteurs du jour, Top 20 des posteurs du forum, Supprimer les cookies du forum.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 26 Oct 2018 - 19:47
Je t'avoue qu'avoir chaque script dans une balise séparée me rassure, pour éviter de s'y perdre ou de les confondre, tout comme mettre tous les scripts à la fin, histoire que tout soit ensemble et qu'on les retrouve mieux. Mais en même temps, mettre trois balises script à la suite me parait étrange alors... Je crois que faire comme toi en mettant le script après la partie concernée est la meilleure solution pour moi x'3

Pour les liens que tu m'a demandé alors, si je me trompe pas, c'est un peu au dessus du QEEL, enfin le deuxième tabeau au dessus du QEEL (entre les lignes 66 et 89 sur mon template), on a ce tableau à :

Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>
Là dedans, on a ceci qui correspond aux trois premiers liens (sujets actifs du jour, top 20 poster du jour et top 20 posteurs du forum) :
Code:
<a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
Et le truc juste en dessous pour les cookies :
Code:
<!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 27 Oct 2018 - 13:54
C'est le bon tableau, bravo.
Ce qui nous intéresse ici c'est les liens et les boucles qui vont avec.
Pour marquer comme lu il faut absolument la boucle avec user_logged_in, parce qu'on peut pas marquer comme lu logiquement si on est pas connecté déjà.
Pour les cookies, il y a deux variables. La variable et le lien que tu as mis à deux boucles, on a le switch_on_index et la boucle normal delete_cookies. Mais si tu vas un peu plus haut, juste après mark read, tu verras une deuxième mention pour les cookies. Là il n'y a qu'une seule boucle (delete_cookies).
Je dois avouer que je ne suis pas sûre de la fonction de cette partie, même en la supprimant ça change rien.
Je la garde quand même au cas où, on sait jamais avec FA lol.

Bref, comme on a fait pour les liens des catégories, je veux bien que tu mets en forme les liens du QEEL.
Tu peux faire comme tu veux, on s'en fout, je veux juste voir comment tu vas gérer le HTML.
Si ça peut t'aider tu peux voir un exemple sur mon forum test Qeel pour Caro


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 2 Nov 2018 - 20:16
Désolée, je suis un peu en retard, mais je fais ça aussi vite que possible, ce week-end !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 6 Nov 2018 - 14:43
Coucou,

D'accord pas de soucis :3


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 7 Nov 2018 - 19:12
Voilà !


J'ai mis en dessous du QEEL plutôt qu'au dessus parce que je trouvais ça plus sympa.
Oh et j'ai pas mis le premier truc des cookies qui est un peu avant dont tu as parlé, j'avais peur qu'il affiche un truc qui faut pas du coup...

Voila donc mon code, que j'ai ajouté juste après le QEEL (après le END disable_viewonline) (et bien sûr, j'ai supprimé le tableau plus haut)
Code:
<div class="QEELliensflex">
        <!-- BEGIN switch_user_logged_in -->
    <div><span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span></div>
 <!-- END switch_user_logged_in -->
    <div><a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a></div>
    <div><a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a></div>
    <div><a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a></div>
        <!-- BEGIN switch_on_index -->
           <!-- BEGIN switch_delete_cookies -->
    <div><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></div>
           <!-- END switch_delete_cookies -->
        <!-- END switch_on_index -->
</div>
  
J'ai géré tout avec une flexbox du coup, voila mon css
Code:
.QEELliensflex {
  display:flex;
  justify-content: center;
  margin:5px auto 0;
  width:100%;
}

.QEELliensflex div {
  margin:0 1%;
  text-align:center;
  background:#fff9f6;
  padding:5px;
  text-transform:uppercase;
  font-family: Arial;
  font-size:15px;
}
.QEELliensflex div:first-child {
  margin-left:0;
}
.QEELliensflex div:last-child {
  margin-right:0;
}

.QEELliensflex a {
  color:#edcac2;
}
.QEELliensflex a:hover {
  color:#ce7c69;
}
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 9 Nov 2018 - 10:58
C'est parfait. Tu peux déjà utiliser ton code ou le mettre en LS si tu veux.

Je te laisse examiner le reste du code du template, peux-tu deviner à quoi sert la partie restante ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 10 Nov 2018 - 20:58
Yup, je vais le mettre en LS ! ^^

Pour le reste du template, alors, ce qu'il y a avant le QEEL, ça a l'air d'être les formulaires de connexion rapide, et le tableau tout à la fin, c'est pour la légende des images new/no new/lock je crois.
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 10 Nov 2018 - 22:35
Oui mais d'abord on a la boucle du JS sur la ligne 1
Le premier tableau est de la ligne 2 à 17, on a la partie qui gère la PA et donc ce qu'on met dans Affichage > Généralités

Code:
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

On a donc une boucle pour le tout, la première partie pour le titre et ensuite la 2ème pour le contenu.

Ce qui suit est en effet un formulaire de connexion avec mot de passe ou via les réseaux sociaux, etc. Et la légende à la fin du template donc là c'est bon.

Te sens-tu plus à l'aise avec ce template ? As-tu des questions ?
Veux-tu refaire un QEEL ou bien on passe à autre chose ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 10 Nov 2018 - 23:53
D'accord, je comprends :3

Je crois que je suis plus à l'aise oui, mais j'ai bien envie d'essayer de refaire un autre QEEL pour m'exercer encore. J'crois que j'aime bien les QEEL ! x'3
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 11 Nov 2018 - 15:41
C'est une bonne chose alors :p

Je vais te faire faire Cet exercice alors, parce que ça serait bien de tester quelque chose de responsive, qui prendra toute la largeur et aussi d'intégrer l'avatar du dernier inscrit pour être un peu plus à l'aise avec les scripts. En plus tu peux t'amuser avec le flex qui rend la tache plus simple.

Maintenant que tu sais utiliser les propriétés du flexbox, on va aussi utiliser le modèle en border-box.
D'habitude, les paddings et bordure s'ajoutent à la largeur et la hauteur pour donner les dimensions réelles de notre boite, ce modèle par défaut est appelé le content-box.
Quand on a une maquette graphique par exemple, le graphiste va uniquement nous donner la largeur et hauteur totales de chaque bloc. Nous serons donc obligés de calculer les valeurs du width et height pour correspondre au schéma.
Autrement, on va changer le modèle de boite de façon à ce que les paddings et bordures soient automatiquement déduites de la valeur mentionnée dans width et height. Ce qui veut dire que le bloc aura respectivement une largeur et une hauteur égales à width et height spécifiés en CSS.
Pour ce faire on utilise la déclaration :
Code:
box-sizing: border-box;

Les codeurs professionnels déclarent le type de modèle qu'ils ont adopté au début dans le sélecteur universel avec la réinitialisation des marges et paddings par défaut.
Donc si je vais par exemple coder tout le forum, tu verras au début de mon code

Code:
* {
box-sizing: border-box;
margin: 0 auto;
padding: 0;
}
(auto dépendra si mon design est centré ou non)

Je ne sais pas si tu as déjà vu un de mes codages, mais pour coder une partie d'un forum, j'associe la class du bloc parent de mon code au sélecteur universel pour ne pas déranger le code des autres. Sinon ça va faire buguer le reste s'il est codé en content-box (valeur par défaut du box-sizing)

Voilà c'est tout pour l'utilité du box-sizing, si tu as des questions n'hésite pas.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 11 Nov 2018 - 22:13
Wooh, il a l'air compliqué ce QEEL ! DX

Ça veut dire quoi responsive exactement ?

Le box-sizing, je m'en souviens, j'avais eu quelques petits soucis avec ça lors de ma participation au COTM peu de temps après mon arrivé sur le forum, on m'avait expliqué que c'est parce que Epicode est en border-box alors que mon forum de test est en content-box, donc ça s'affichait pas comme je voulais quand je mettait le code sur Epicode et j'avais dû ajouter un box-sizing:content-box directement dans mon code pour régler le soucis.

D'ailleurs du coup, ça veut dire qu'il vaut mieux toujours prévoir le box-sizing de notre code quand on fait du libre service, pour éviter ce genre de problème, non ?

@Reine des Ténèbres a écrit:mais pour coder une partie d'un forum, j'associe la class du bloc parent de mon code au sélecteur universel pour ne pas déranger le code des autres.
J'ai pas bien compris ce que tu voulais dire par là ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 11 Nov 2018 - 23:43
La valeur par défaut est normalement le content-box mais c'est vrai que si un forum est en border-box, les LS ne seront pas bien arrangées dessus. Du coup oui, c'est une déclaration à faire au début du code ainsi on est tranquille.
Pour le comment (la partie que tu n'as pas comprise), je fais comme ça perso, je prends le qeel en exemple :

Code:

#qeel, #qeel * {
   box-sizing: border-box;
}
Du coup tous les blocs à l'intérieur du conteneur #qeel seront en border-box.
ça aide surtout quand tu dois superposer deux choses pour un hover sur une image par exemple, ça t'évite de devoir calculer les dimensions avec le padding et tout ça.



avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 11 Nov 2018 - 23:54
Ah oui, ok, j'ai compris !

Mais t'as pas répondu à ma première question du coup, ça veut dire quoi exactement "responsive" ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 12 Nov 2018 - 0:03
J'ai édité mais vu que tu as répondu je vais juste l'écrire ici

Reine a écrit:
Edit : Ah j'ai oublié de répondre à ta première question. Un design responsive est un design qui s'adapte à tous les écrans en général. Ici le Qeel est en plein page donc on ne va pas fixer la largeur mais le faire en 100%. Ce serait bien si l'on peut mettre les autres blocs en flexible donc en pourcentage, comme ça le design ne changera pas sur les grands écrans comme sur les petits.
Ah et au fait, c'est un design probablement fait pour la modernbb. On va juste utiliser la largeur du bodyline du forum, optons pour un forum assez large, genre 1000px


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 278
Fidèle au poste !
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 12 Nov 2018 - 0:52
Okay, ça marche !

J'essais de commencer quelque chose sur Code Pen demain du coup :3
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mar 13 Nov 2018 - 23:53
OK je poste pour t'éviter un DP :3


Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum