Optimisation

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Optimisation

Message par roussinix le Ven 11 Déc 2015 - 13:02

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 Sad
- 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 Very Happy


Dernière édition par roussinix le Sam 19 Déc 2015 - 8:31, édité 1 fois

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Optimisation

Message par Feuilla' le Ven 11 Déc 2015 - 14:04

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 edit .
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>
:enreg: et ajout publier le template.
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Optimisation

Message par roussinix le Ven 11 Déc 2015 - 14:55

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
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Optimisation

Message par roussinix le Sam 12 Déc 2015 - 14:33

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



roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Optimisation

Message par Feuilla' le Mer 16 Déc 2015 - 8:20

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. Wink
Une autre question, quelle est la colonne à réduire ? (forum, messages, ...)
Merci.
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Optimisation

Message par roussinix le Mer 16 Déc 2015 - 8:44

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
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Optimisation

Message par roussinix le Sam 19 Déc 2015 - 8:31

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. Wink

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


roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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