[Cherche gourou CSS] Blocs de code qui déforment le forum

Forum interne
#1

Salut,

J’ai remarqué (et je ne suis pas le seul :mrgreen:) que lorsqu’on poste du code avec des lignes trop longues, il déforme complètement le forum.
Exemple dans ce fil : discussion-hotspot-login-manager-t35909.html
La date du post, le bouton “citer” etc sont complètement barrés à droite, bref, c’est un peu chiant (et encore ce n’est que la partie émergée, hein ricardo :stuck_out_tongue:).

J’ai essayé de voir si on ne pouvait pas corriger ça facilement en CSS en limitant le

à la largeur de l’écran, mais il s’avère que c’est au dessus de mes forces…
Si un gourou CSS passe par là et arrivait à faire marcher quelque chose du genre “max-width: 100%” ça serait sympa, perso je ne connais pas assez bien le CSS pour y arriver sans complètement casser la mise en forme des autour.

En attendant, pour ceux qui voudraient corriger ça sur leur navigateur personnel, j’ai fait ce petit bout de CSS pour Stylish (extension Firefox/Iceweasel) :

@namespace url(http://www.w3.org/1999/xhtml); @-moz-document url-prefix("http://www.debian-fr.org/"), url-prefix("https://www.debian-fr.org/") { .codecontent { /* affiche des ascenseurs quand nécessaire */ overflow: auto !important; /* largeur maximum : à adapter à votre résolution écran */ max-width: 1600px !important; /* hauteur maximum : pas obligatoire, mais ça évite de se farcir des kilomètres de code pour aller au message suivant */ max-height: 600px !important; } }

Voici ce que ça donne une fois ce bout de script activé :

Bien entendu, l’idéal serait d’arriver à obtenir le même résultat (avec ou sans max-height, peu importe c’est du détail) mais en limitant la largeur du bloc à celle de son parent et non pas à une valeur arbitraire.

:006

#2

merci pour le contrib, j’ai fais en mode “fixe” optimisé pour du 1280x1024

#3

Je ne suis pas un spécialiste des css mais je me débrouille

Je propose juste de remplacer le max-width: 1600px !important;
par width: 95% comme ça c’est compatible avec toute les résolutions !
et les !important ne me semble pas nécessaire si debian-fr.org/styles/debian … esheet.css est directement éditer ligne 664

.codecontent { font-family: monospace !important; border: 1px; border-left: 4px solid #777; padding-left: 10px; background: #e1e1e1; color: black; font-size: 1.1em; overflow: auto; /*les scrollbar en auto*/ width: 95%; /*un peu moin que la largeur total*/ max-height: 30em; /*pour limiter la hauteur je préfère les em aux px pour ce genre de truc*/ }

Et tant qu’on y est est-ce une volontée que les liens ne ne se voient pas ? Selon moi mettre le lien en couleur et/ou souligné serais un + (si besoin je regarde comment faire mais je suis certain qu’il y a des gend bien plus qualifié que moi ici :smiley:)

#4

Merci à toi, au moins ça limitera les dégâts.

En plus pour ceux qui un écran plus large que 1280 et utilisent Stylish, rien ne nous empêche de forcer le max-width à une valeur plus grande adaptée à notre écran, donc je trouve aussi que c’est un bon compromis.

Edit : du coup le .quotecontent (citations) est affecté lui aussi, alors qu’il fonctionnait très bien avant… Il faudrait déplacer ta modif ligne 656 (bloc .codecontent, .quotecontent) au bloc .codecontent juste en dessous, ligne 668.
Edit2 : ce point est réglé

[quote=“snouf”]Je propose juste de remplacer le max-width: 1600px !important;
par width: 95% comme ça c’est compatible avec toute les résolutions ![/quote]
As-tu seulement testé ta proposition avant (que ce soit avec Stylish, Firebug ou autres trucs du même genre) ? Ça ne fonctionne pas.

#5

non cela ne fonctionne pas surement a cause d’une autre propriété float quelque part je pense.

le !important est très important pour forcer une police monospacée dans les quote.

#6

Mmmmh j’ai fait les teste depuis le webinspector d’epiphany-webkit je regarde ça de plus près demain.

PS : la modif que je propose ne devrait toucher que les bloc de code et pas le bloc de quote.
PS2 : pour le !important je ne parlais que de ceux proposé par syam

#7

Merci Ed :023
Énormeeeeeeeeeeeee gain de temps pour les modos quand on doit déplacer des messages, il n’y a plus cet ascenseur horizontal qui énerve un max.
Super :006

#8

et les liens ça donne quoi ?

J’ai mi par défaut underline, et j’ai viré partout ou ça me plait pas

#9

Apparemment, pas de changement pour les liens
Test :
https://www.debian-fr.org/regles-d-usage-du-forum-t28179.html

EDIT :
rien mais ptet que c’est à nous de le gérer ?

#10

Perso ça me va. J’aurais préféré avec un peu de couleur (cf. liens-moins-visibles-sans-le-soulignement-t30324.html#p359780) mais on va pas chipoter, déjà comme ça c’est plus visible.

Par contre je maintiens pour le .quotecontent ça fait bizarre sur les grands écrans :

Dommage, alors qu’il suffit de déplacer le max-width et consorts de quelques lignes, comme indiqué dans mon message précédent… :wink:

@Ricardo : fais un Ctrl+F5 pour forcer Firefox à recharger le CSS.

#11

En effet, je n’avais pas vidé le cache.
Impec comme ça pour moi.

EDIT :

[quote]@Ricardo : fais un Ctrl+F5 pour forcer Firefox à recharger le CSS.[/quote] F5 suffit amplement chez moi : KDE IW
avec Ctrl + Fx, je navigue entre les bureaux.

#12

oups :slightly_smiling:

Fixed

#13

Impecc. :023

#14

Les séparation des sous-forum ne sont plus en rouge.
“forum d’aide” "forum divers"
Perso, ça ne me dérange pas, juste pour info.

#15

[quote=“ricardo”]Les séparation des sous-forum ne sont plus en rouge.
“forum d’aide” “forum divers”[/quote]
Il me semble que c’était comme ça déjà, non ? En fait j’en suis à peu près sûr…

Oh sinon pour répondre au message d’Ed sources-du-forum-disponibles-t35974.html#p362818 (vu que je peux pas poster là-bas), à l’occase je jetterai un coup d’œil voir si je peux pas régler cette histoire de blocs de code de manière générique, adaptée à tous les écrans (à priori ça va être dur sans toucher au HTML, mais vu que les sources sont dispos maintenant… :mrgreen:)

#16

[quote=“syam”][quote=“ricardo”]Les séparation des sous-forum ne sont plus en rouge.
“forum d’aide” “forum divers”[/quote]
Il me semble que c’était comme ça déjà, non ? En fait j’en suis à peu près sûr…[/quote]J’ai donc dû rêver :wink:

#17

Mmmmh j’ai fait les teste depuis le webinspector d’epiphany-webkit je regarde ça de plus près demain.

PS : la modif que je propose ne devrait toucher que les bloc de code et pas le bloc de quote.
PS2 : pour le !important je ne parlais que de ceux proposé par syam
[/quote]
MMh désolé … j’aurais mieux fait de me couché hier soir :smiley: je regardais la mauvaise

:blush: … (inutile de ma donner la pioche je sais je m’enfonce).

Bon j’ai trouvé une solution, certe moins élégantes mais ça marche ! (testé avec iceweaseal + epiphany)

la section .codecontent
 .codecontent { font-family: monospace !important; border: 0px; border-left: 4px solid #777; padding-left: 10px; background: #e1e1e1; color: black; font-size: 1.1em; overflow: auto; max-height: 900px; max-width: 1350px; white-space: pre; }
Notez : le max-width est modifié, j’ai ajouté white-space: pre; pour supprimé les retours à la ligne automatique (pour le code je préfère mais c’est un choix perso)

Et, l’astuce est là : À ajouter tout à la fin de la feuille css

@media (max-width: 1600px) {
    .codecontent {
        max-width: 1150px;
    }
}
@media (max-width: 1400px) {
    .codecontent {
        max-width: 950px;
    }
}
@media (max-width: 1200px) {
    .codecontent {
        max-width: 750px;
    }
}
@media (max-width: 1000px) {
    .codecontent {
        max-width: 550px;
    }
}

Et le navigateur adapte la largeur de la div en fonction de la largeur du media (c’est à dire le fenêtre du navigateur)

#18

Ah oui tiens pas con ça. :mrgreen:
Juste une question : comment tu as calculé la différence entre la largeur de l’écran (@media) et celle du bloc de code ? Chez moi pour du 1920 de large, je peux faire tenir à l’aise un bloc de 1600px, donc tes largeurs me paraissent bien en deçà de ce qui est faisable. À moins que j’aie loupé un truc ? (je vois que tu sautes de 200 en 200, ça a peut-être un rapport… je pige pas trop comment fonctionne le max-width dans le @media)

PS: moi aussi je préfère le white-space: pre :mrgreen:

#19

J’ai calculé par tâtonnement :smiley: Chez moi ça passe à 200px de moins a ce moment là

Un pixel de moin et hop ! un marge de 199px de plus (ce qui fait une grosse marge)

#20

Sinon on intègre un truc beaucoup plus puissant en jquery ?