Padding-bottom de ouf malade sur une vidéo dans un article

Le problème exposé dans ce sujet a été résolu.

Dans le dernier récap, la vidéo a un padding-bottom monstrueux qui rend les liens en-dessous non cliquables (et le texte non sélectionnable). En inspectant un peu le code source c’est dû à une règle un peu bizarre du .scss : .main .content-container .article-content .video-container .video-wrapper, .main .content-container .message-content .video-container .video-wrapper {position: relative; padding-bottom: 56.25%;}.

En regardant vite fait c’est la même chose sur les billets, aucune idée pour les tutos mais j’imagine que oui. Si on supprime la règle du padding-bottom, ça semble régler le problème.

Ah et d’ailleurs si c’est possible de mettre une alerte quand on quitte une page de rédaction sans avoir envoyé le message (en cliquant sur un lien par exemple), est-ce qu’il pourrait avoir une alerte nous demandant si on veut vraiment quitter la page et perdre ce qu’on a écrit ? J’ai failli perdre ce message en cherchant un billet, bon là ce n’est pas grave mais ça peut arriver quand on écrit des romans. :D

Edit : sinon en lisant le fichier .scss il y a du mathjax dedans, est-ce qu’il est devenu obsolète avec le passage au nouveau moteur de rendu ?

+1 -0

est-ce qu’il pourrait avoir une alerte nous demandant si on veut vraiment quitter la page et perdre ce qu’on a écrit ? J’ai failli perdre ce message en cherchant un billet, bon là ce n’est pas grave mais ça peut arriver quand on écrit des romans.

Tiens c’est marrant, à chaque fois que j’ai eu le problème, j’ai fais "précédent" et le site garde en mémoire ce que j’ai tapé au complet dans la zone de texte, très pratique et moins contraignant. (Je sais pas si c’est mon navigateur ?)

+2 -0

Oui pareil et j’ai récupéré mon message comme ça, mais une alerte pourrait toujours être plus pratique en particulier pour ceux qui ne connaissent pas cette astuce, à mon avis. On peut faire un vote sur ce message pour voir si les autres sont d’accord ou pas. :)

Alors le padding-bottom: 25%; padding-bottom: 56.25%; est une des règles CSS qui adaptent la taille des vidéos pour quand on est sur mobile (sinon ça déborde de l’écran). Ici il y a clairement un bug car les liens devraient être cliquable, et je soupçonne fortement le passage de l’ancien markdown au nouveau markdown car avant il n’y avait pas de problème.

Concernant le message d’avertissement quand on ferme un onglet et qu’il y a du texte, j’en ai déjà entendu parlé très récemment. Je pense que ça peut être une bonne chose, à minima sur les contenus mais pourquoi pas sur le forum. On peut envisager de le rendre désactivable dans les paramètres je pense, pour ceux que ça embêterait.

+2 -0

Oui pareil et j’ai récupéré mon message comme ça, mais une alerte pourrait toujours être plus pratique en particulier pour ceux qui ne connaissent pas cette astuce, à mon avis. On peut faire un vote sur ce message pour voir si les autres sont d’accord ou pas. :)

melepe

personnellement les alertes comme ça m’insupportent, il faudrait en faire une option à (dés)activer dans les paramètres si la proposition a du succès (en précisant que/comment c’est désactivable).

Alors le padding-bottom: 25%; est une des règles CSS qui adaptent la taille des vidéos pour quand on est sur mobile (sinon ça déborde de l’écran).

Situphen

Tu peux expliquer un peu plus ? Ici la règle est padding-bottom: 56.25%;, et sur mobile je vois pas la différence : https://imgur.com/a/6tUhTSV

@WinXaito : nope.

+0 -0

D’accord, et donc à quoi ça sert ? Je profite que tu sois là parce qu’il semble que ce soit toi qui a introduit ça : https://github.com/zestedesavoir/zds-site/commit/8e06431b41745096d0eb8f0ab579da49c3b92fe4 après le passage au nouveau markdown.

+0 -0

D’accord, et donc à quoi ça sert ?

Normalement le code que j’ai introduit devrait donner ce rendu, il faut donc trouver pourquoi actuellement on a un autre rendu et corriger ça :)

Ce n’est pas moi qui ait créé ce code de toute pièce, je l’ai lu dans plusieurs articles/tutoriels sur Internet et je trouve que ça rend mieux que simplement mettre une barre de défilement à l’horizontale.

+0 -0

D’accord, mais je comprends toujours pas.

Tu peux expliquer un peu plus ? Ici la règle est padding-bottom: 56.25%;, et sur mobile je vois pas la différence : https://imgur.com/a/6tUhTSV

cepus

Est-ce que c’est un hack pour un browser en particulier ?

+0 -0

Je me rappelle de à quoi ça sert, c’est pour garder la vidéo aux bonnes dimensions, c’est calculé avec la formule height / width * 100 ce qui donne 56.25 si on prend width=560px et height=315px (qui est la taille par défaut des iframes des vidéos Youtube. J’avais regardé et ça donnait le même résultat avec les autres players supportés donc je l’ai codé en dur dans le SCSS.

Est-ce que c’est un hack pour un browser en particulier ?

Ça fonctionne bien avec tous les navigateurs modernes je crois, pour Firefox et Chromium j’ai vérifié aujourd’hui et c’est le cas.

+1 -0

Je comprends toujours pas. Tu suggères wontfix ?

Non, on devrait avoir ce rendu et clairement on a autre chose actuellement. Il y a donc un problème dans l’implémentation sur ZDS qu’il faut corriger !

Edit : C’est tout bête, il manque le position: absolute; et le height: 100%; dans le code SCSS actuel. Je ne comprends pas pourquoi il n’est pas là car le commit de ma PR est correct.

Edit 2 : PR créée

+2 -0

Cool :D

J’ai eu le problème en lisant le tuto de @Dwayn sur les langues de la Terre du Milieu

Il n’y avait pas une feature pour enregistrer le message présent dans le textarea selon l’URL et de restaurer le message s’il n’avait pas été envoyer ?

WinXaito

Il me semble que oui. Voir Utiliser localSotrage pour retenir la frappe (github)

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte