[RÉSOLU] Ergonomie sur version smartphone

Salut
Je me permets juste un petit retour sur la version smartphone du forum.
La balise grise contenant le nombre de messages du topic se superpose avec le titre quand il est un peu long (ce qui est fréquent avec les balises "en cours" ou "résolu" rajoutées au début. Un petit coup de CSS pour la repositionner serait bienvenu je trouve.
Bravo en tout cas pour tout le boulot abattu sur le site depuis mes derniers posts il y a plus d'un an.

Tu pourrais faire une copie d’écran du souci [Vous devez être inscrit et connecté pour voir ce lien] ?

Merci

++

Bien entendu

Voilà un exemple:

[Vous devez être inscrit et connecté pour voir cette image]

J'ai fait quelques modifications mais il est très compliqué d'obtenir un résultat nickel sur toutes les pages du forum :

Dans une section le résultat est acceptable :

[Vous devez être inscrit et connecté pour voir cette image]



Sur la page d'accueil du forum c'est nettement moins probant :

[Vous devez être inscrit et connecté pour voir cette image]

Le problème étant que l'affichage du nombre de messages s'applique aussi bien à la page d'accueil qu'aux sections, il est (à priori) impossible de dissocier les deux, le code HTML et CSS ne faisant pas la distinction entre page d'accueil et section.

À suivre

++

Tu as tenté de coder la ligne "date" en width:100% et de coller un float: right; clear: both;sur la balise nombre de messages ?

Oui je viens d'essayer [Vous devez être inscrit et connecté pour voir ce lien] et ça ne change rien

Le code CSS qui gère l'affichage du nombre de messages :

Code:

.forum-statistics {
    background-color: #EBEBEB;
    color: #797979;
    display: block;
    border-radius: 3px;
    font-size: 12px;
    max-width: 100%;
    overflow: hidden;
    padding: 0 6px;
    position: absolute;
    right: 0;
    text-overflow: ellipsis;
    top: 0;
    white-space: nowrap;
    direction: ltr;
}

Il est en position absolue mais par rapport à quoi je l'ignore, du coup j'ai remplacé top: 0; par bottom: 0; dans la feuille de style CSS du forum pour qu'il s'affiche en bas plutôt qu'en haut et le résultat est celui qu'on peut voir sur les copies d'écran ci-dessus.

Bon au pire y'a la méthode gros bourrin : display: none; épicétou mais bon pour le coup on ne connaitra plus le nombre de messages

En tout cas j'ai diminué la taille de certaines polices (bien trop grosses pour les titres des sujets par exemple) et centré le titre des sections dans les encadrés bleus

++

Je te regarde après manger je te tiens au jus

Je ne sais pas pour les navigateurs Windows parce que je ne me suis pas intéressé à la question, mais Safari sur macOS peut simuler l'affichage mobile via le menu Développement / Passer en mode conception adaptive (le screenshot est obsolète mais permet de comprendre le principe) :

[Vous devez être inscrit et connecté pour voir cette image]

Un clic droit sur la page puis Inspecter l’élément et on peut faire des modifications en direct-live sur tout ce qui compose la page :

[Vous devez être inscrit et connecté pour voir cette image]

Bien évidemment les modifications ne sont pas persistantes, imaginez le bordel qu’on pourrait facilement faire sur n’importe quel site web 

Enfin bref c’est ce qui me permet de faire des essais très rapidement sans utiliser mon iPhone et avec les modifications appliquées en temps réel.

Mais bon je m'éloigne un peu là

++

Shadow tu pourrais me filer le code complet de la section entière en MP (titre, y compris)?. 
Si cette balise est positionnée en absolu, c'est obligatoirement par rapport à un ancêtre qui lui est positionné dans le flux, mais sans visibilité difficile de savoir.
Je ne vois pourquoi cette balise est ici en absolu, de prime abord :/ Un positionnement relatif serait bien plus simple à gérer et permettrait de le positionner plus facilement.
Autre chose, le max-width:100% dans le code précité... aucun intérêt...lol. C'est d'ailleurs une hérésie de le lire encore aujourd'hui.... On l'utilisait avant pour corriger (uniformiser) les rendu sur les navigateurs (essentiellement à cause de IE7). Par défaut les blocs utilisent toute la place disponible.
A+

Edit: oui je connais cette fonction, tu as aussi des sites qui le font très bien comme celui là par ex:
[Vous devez être inscrit et connecté pour voir ce lien]
Mais là, à la maison avec mon chromebook familial, je suis assez limité. Au pire je verrais çà demain du bureau sur dream.

Bonne soirée

Je vois ce que je peux faire dès que possible [Vous devez être inscrit et connecté pour voir ce lien] et un grand merci pour le coup de main, si on arrive à un résultat plus satisfaisant que le code par défaut de ForumActif tout le monde en profitera 

Pour info en position relative le message s’affiche sous le titre du sujet ou du sous-forum, et la pagination mobile se fait via du code JS.

J’en profite pour signaler que tout ce que j’ai mis en place sur le forum en terme de CSS n’est compatible qu’avec les versions récentes des navigateurs,  c’est déjà bien assez ch*ant à comprendre et à mettre en place quand on n’y connaît pas grand chose, alors y ajouter la compatibilité des versions préhistoriques des navigateurs non merci  

[Vous devez être inscrit et connecté pour voir ce lien] désolé pour le sujet de Centralisation des tables VPX qui s’affiche n’importe comment sur IE9, mais je n’ai trouvé aucune manip qui permette de faire afficher le sujet de la même façon sur toutes les plateformes...

T’as qu’a utiliser un vrai browser après tout     

++

Si je peux aider en off, c'est avec plaisir. Pour info, j'ai géré une boite de conception de sites web en auto entrepreneur durant 8 ans en plus de mon taff de juriste.
Des prises de tête avec les CSS j'en ai connu un paquet, mais il faut être honnête, avec l'avènement des bootstrap, c'est devenu quasi de l'histoire ancienne. Reste que Phpbb... c'est aussi ancien!
Vu que je peux rien vous apporter en terme de conception (comme vous avez déjà des électriciens, des ébénistes et j'en passe), là j'ai peut-être une chance de rendre un petit peu d'aide à la communauté quand j'ai un peu de temps libre.
Après, je propose juste hein, je m'impose pas
Bonne soirée

Edit: si tu n'es pas du métier, chapeau bas pour tout ce que tu as réussi à faire à ce jour

Rhoooooooo [Vous devez être inscrit et connecté pour voir ce lien],  fais comme tu peux, j'arrive à les trouver quand même dans la largeur immense !!!!!!     

[Vous devez être inscrit et connecté pour voir ce lien] : des heures à potasser W3Schools.com, Stackoverflow.com et forum.forumactif.com, du copier/coller suivi d'essais pas toujours concluants, ce qui m'a permis de comprendre certains mécanismes et leurs effets

Tiens dernier exemple en date pour le challenge, ce code JS trouvé sur forum.forumactif.com :

Code:

/*  Alerte valider message */
$(document).ready(function(){
  $(function(){
    if(!$("#text_editor_textarea")["sceditor"])return;
      var t=$("#text_editor_textarea").sceditor("instance");
    var empty=/^\s*$/.test(t.val());
    t.keyDown(function(e){
      if(empty&&!/^\s*$/.test(t.val())) {
        $(window).bind("beforeunload",function() {
          return"Vous avez commencé à écrire un message"});
      empty=false
    } else {
      if(!empty&&/^\s*$/.test(t.val())) {
      $(window).unbind("beforeunload");
      empty=true
    }
  }
});

$("form[name='post'][action='/post']").submit(function(){$(window).unbind("beforeunload")
})
})
});

Son rôle est d'afficher une alerte quand on quitte une page du forum sur laquelle on est en train d'écrire un message.
Il nous arrive tous par erreur de fermer le navigateur ou l'onglet alors qu'on est en train de taper un message, aboutissant à devoir recommencer 

Et bien ce code provoque sur mon Mac Mini et Safari une montée en flèche de la température du CPU et d'énormes ralentissements au point qu'arrivé en fin de ligne le bandeau défilant en haut du forum saccade à mort et les lettres que je saisis s'affichent 5 secondes plus tard 

Je t'envoie le maximum d'infos concernant la pagination mobile en MP



[Vous devez être inscrit et connecté pour voir ce lien] : IE powaaaaaa  

++

Bon j'ai rapidement jeté un oeil du bureau.

Plusieurs choses:

Code:

<div class="forum-content">
    <h3 style="padding-right: 100px;">Présentations</h3>
    <div class="forum-statistics">13612 Messages</div>
    <div class="forum-lastpost">[Info] Géolocalisation des mor...</div>
    <div class="forum-lastpost-time">Dernier message par 9sammy, Aujourd'hui à 13:57</div>
</div>

La div "forum-statistics" est ici traitée en seconde position dans le flux HTML, ce qui sous entend que si on la place en "relative" elle va se placer directement sous le dernier élément positionné ici le titre de section et non celui du sujet (H3) qui lui n'est pas positionné.

Plusieurs solutions existent pour résoudre le souci:

- réorganiser le code html de la page sous cette forme et positionner toutes les balises h3, lastpost et stat en "relative":

Code:

<div class="forum-content">
    <h3 style="padding-right: 100px;">Présentations</h3>
    <div class="forum-lastpost">[Info] Géolocalisation des mor...</div>
    <div class="forum-lastpost-time">Dernier message par 9sammy, Aujourd'hui à 13:57</div>
<div class="forum-statistics">13612 Messages</div>
</div>

Résultat on aura çà si on ajoute un ch'tit margin-top:5px.

[Vous devez être inscrit et connecté pour voir cette image]

On pourrait aussi la placer en bas à droite si besoin.

Evidemment ceci sous entend de pouvoir accéder au code html.


- On peut aussi envisager, sans toucher au code html du site, de réduire le titre du topic de 100% à 58% et de positionner la balise stats à sa droite qui elle sera codée à 40%. (comme avant mais bien codé cette fois )
Il sera nécessaire pour que cela fonctionne de manière cohérente et propre de réduire physiquement le titre du topic et d'afficher "..." au delà de x caractères, chose que, de mémoire, forum actif permet de faire via la console d'administration.

Cela pourrait de fait donner un truc dans le genre:

[Vous devez être inscrit et connecté pour voir cette image]

Attention je t'ai ici volontairement colorié le background du titre de sujet en gris clair pour te montrer sa taille max , tu vois ici qu'il existe un léger espace blanc avant la balise "statistics" qui équivaut à 2% de la largeur totale de la div : 100%-58%+40%=2%.

Dernière chose je ne comprends absolument pas ce:

Code:

<h3 style="padding-right: 100px;">Présentations</h3>

Un padding de 100px sur un titre qui fait 100% ? Aucun sens! Je ne sais pas qui a ajouté cette balise de style en dur (ou si elle existait au sein du thème à l'origine), mais elle ne sert ici à rien à part à alourdir le code inutilement.

Je reste à ta dispo pour en parler bien entendu.

A+ shadow.

Merci pour toutes ces infos [Vous devez être inscrit et connecté pour voir ce lien] je vais voir ce que je peux faire avec tout ça

Le code, qu'il soit HTML ou CSS, a été créé par les équipes de ForumActif :

[Vous devez être inscrit et connecté pour voir ce lien]

L'auteur du sujet est... Shadow et ça ne s'invente pas

Grosso modo c'est une option à cocher dans les options Templates du panneau admin et c'est tout.

++

Même si le sujet ne l’est pas vraiment et ne le sera probablement jamais, je le passe en résolu.

Il faut prendre et utiliser la version mobile pour ce qu’elle est : un moyen de consulter le forum sur un écran de petite taille, avec tous les inconvénients que cela engendre

++