Optimisation

[roussinix]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Opera
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : Création du Forum
Lien du forum : http://testkpark.forumactif.org/

Description du problème

Bonjour,

Toujours dans la catégorie "Changement des intitulés", certains prennent trop de place par rapport au contenu. Dans la capture d'écran jointe, on simule ce qui se passe sur un petit écran (SmartPhone par exemple).

Le problème principal saute aux yeux : "Derniers messages" se retrouve à la ligne. Avec une constatation : Le titre est plus long que le contenu dans les 3 dernières colonnes.
- Pour "Sujets" : Pas grand chose à faire je pense
- Pour "Messages" : On peut remplacer par "MSG" (ou MSGs)
- Pour "Derniers messages" : on peut remplacer par "Dernier MSG" (pourquoi le pluriel d'ailleurs ?)

Après, avec un "max-width", on peut probablement réduire les 3 dernières colonnes à leur juste nécessaire en partant du principe que si c'est OK avec un écran de 800x600, ça sera OK avec un écran plus grand.

Merci d'avance

[Feuilla']

Bonjour,
en effet vous pouvez les noms des colonnes "Sujets", "Messages", "Derniers Messages", ... par un autre mot.
Allez dans Panneau d'administration (avancé) → Affichage → Templates → Général, puis ouvrez le template index_box .
Ligne 19, trouvez cette partie

Code:

                  <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                  <dd class="topics">{L_TOPICS}</dd>
                  <dd class="posts">{L_POSTS}</dd>
                  <dd class="lastpost"><span>{L_LASTPOST}</span></dd>

Remplacez les crochets et leur contenu par le texte, comme ceci :

Code:

                  <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                  <dd class="topics">{L_TOPICS}</dd>
                  <dd class="posts">MSGs</dd>
                  <dd class="lastpost"><span>Dernier MSG</span></dd>

et publier le template.
Bonne journée !

[roussinix]

Oui, ça marche pas mal, mais j'ai quasiment le même problème à l'étage suivant dans "topics_list_box" :

Code:

               <dd class="posts" style="padding-left:0; text-align:center; text-transform: none;">{topics_list_box.row.L_REPLIES}</dd>
               <dd class="views" style="text-transform: none;">{topics_list_box.row.L_VIEWS}</dd>
               <dd class="lastpost" style="text-align:center; text-transform: none;"><span>{topics_list_box.row.L_LASTPOST}</span></dd>


De plus, pour diminuer la largeur de la colonne :

Code:

dd.posts { width: 100px; }

Dans le CSS donne bien ce que je cherche, mais :

Code:

dd.lastpost { width: 400px; }
dd.topics { width: 150px; }

N'ont aucun effet. J'ai loupé quoi ?

[roussinix]

Pour préciser de façon visuelle, voila ce qui ce passe :
1- Sur un petit écran :


2- Sur un grand écran :


3- Ce que je voudrais dans tous les cas :


Avec les tableaux de la version phpBB2, j'aurais probablement eu moins de soucis, simplement en fixant la largeur des 3 colonnes de droite.

J'ai aussi exactement le même problème avec la liste des Topics dans les Forums

[Feuilla']

Re-Bonjour,
que voudriez-vous exactement ?
Cela irait-il si on donnait une largeur (ou une largeur maximale) à chaque colonne ?
Le CSS sera différent selon les besoins.
Une autre question, quelle est la colonne à réduire ? (forum, messages, ...)
Merci.
Bonne journée !

[roussinix]

J'ai essayé, mais peut-être pas avec le bon code :

Code:

dd.posts { width: 100px; }
dd.lastpost { width: 300px; }
dd.topics { width: 150px; }
dd.view { width: 100px; }

Par exemple, dans ma saisie d'écran 2), on vois que "MSGs" (dd.posts { width: 100px; }) réduit bien la colonne sur un grand écran, mais le même réglage sur tablette n'en tient pas compte, par contre, c'est la colonne Sujet qui est réduite ... et à moins de 150px comme indiqué dans le code.

J'ai l'impression qu'il y a des valeurs en "%" qui priment sur les miennes ... même si je rajoute "!important"

En résumé, ce que je n'arrive pas à faire, c'est ce qui est indiqué dans mon image 3 aussi bien pour la liste des catégories et forum que pour la liste des sujets

[roussinix]

Bon, j'y suis arrivé en utilisant la commande "Inspecter l'élément" du navigateur Opera (que j'ai découvert par hasard). Voici le code complet :

Code:

div.forabg                    { width: auto; }
div.forabg div.inner          { text-align: center; }
ul.topiclist                  { width: auto !important; }
ul.topiclist li.header        { text-align: center;  font-weight: bold; width: 100% !important; }
ul.topiclist li.header dl.icon { width: 100% !important; }
ul.topiclist dd.dterm          { padding-left: 62px; padding-right: 5px; min-height: 34px; font-size: 1.1em; text-transform: none; max-width: 50% !important; text-align: left; } /* Forums - Titre (Sujets) */
ul.topiclist dd.topics        { font-size: 1.1em !important; text-transform: none !important; font-weight: bold; max-width: 100px !important; }
ul.topiclist dd.posts          { font-size: 1.1em !important; text-transform: none !important; font-weight: bold; max-width: 100px !important; }
ul.topiclist dd.lastpost      { font-size: 1.1em !important; text-transform: none !important; font-weight: bold; text-align: left !important; max-width: 200px !important; }
ul.topiclist dt                { padding-left: 62px; padding-right: 5px; min-height: 34px; font-size: 1.1em; text-transform: none; }
ul.topics li.header dl.icon dt { padding-right: 62px; text-transform: none; font-weight: bold; font-size: 1.1em !important; }
li.header dt, li.header dd    { font-weight: bold !important; }
dd.views                      { font-size: 1.1em !important; text-transform: none !important; font-weight: bold; }
dd.lastpost                    { font-size: 1.1em !important; text-transform: none !important; font-weight: bold; text-align: left !important; }
ul.topiclist dt, ul.topics dt  { text-align: left; } /* Forums - Titre (Important & A lire) */


Il y a probablement des choses redondantes, mais ça marche parfaitement. Même sur un SmartPhone, l'affichage de l'index reste sur une seule ligne.

Merci à Feuilla' qui a tenté de m'aider. Je passe à résolu.