Infoboxes Bbcode

Dev
6

J’ai réussi à tester la prise en charge de 2 colonnes. Le code est encore assez basique/primitif.

Le code ATM n’a que des options flottantes pour Redbox.

// Test flottant

div[data-wrap="redboxfl"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
// *
      float: left;
      margin-right: 0.10em;
      width: 45.5% !important;
// *
      padding-left: 0.30em;
      padding-right: 0.30em;
      float: left;
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}
div[data-wrap="redboxfr"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
//*
      float: right;
      margin-left: 0.10em;
      width: 45.5% !important;
//*
      padding-left: 0.30em;
      padding-right: 0.30em;
      float: right;
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}

Il faut encore ajouter d’autres options de couleur.

Comment l’utiliser dans un post

[wrap="redboxfl"]
# Infobulle flottante

Test flottant
[/Wrap]

[wrap="redboxfr"]
# Infobulle flottante

Test flottant
[/Wrap]
>
Texte après
  • Note : Le “>” est requis entre les lignes au moins avec le texte ci-dessous. Alternativement, vous pourriez placer le texte ci-dessous à côté du “> Texte” de la même manière que je l’ai utilisé pour le titre de l’infobulle.
Capture d'écran mobile

La capture d'écran montre une application mobile, avec un menu déroulant proposant quatre options relatives aux éléments flottants dans un contexte numérique. (Légendé par l'IA)
La capture d'écran montre une application mobile, avec un menu déroulant proposant quatre options relatives aux éléments flottants dans un contexte numérique. (Légendé par l'IA)864×1544 170 KB

@merefield pourrais-je ajouter quelque chose à chaque code actuel dans l’Op, quelque chose comme


&[data-float="left"]{
      float: left;
      margin-left: 0.25em !important;
      width: 44.5% !important;
}
&[data-float="right"]{
      float: right;
      margin-right: 0.25em !important;
      width: 44.5% !important;
}

Pour avoir l’option d’utiliser dans le post comme ? Confirmé, ça marche !

[wrap="redbox" float="left"]
# Infobulle flottante

Test flottant
[/Wrap]
Capture d'écran mobile

Cette image montre la capture d'écran d'un appareil mobile avec une liste d'éléments flottants nommés différemment. (Légendé par l'IA)
Cette image montre la capture d'écran d'un appareil mobile avec une liste d'éléments flottants nommés différemment. (Légendé par l'IA)862×1222 120 KB

Le premier ensemble utilise simplement le flottant gauche, 3 d’entre eux s’enroulent automatiquement !

Je pense que j’ai ajouté le code mobile à 44,5% de largeur. Ensuite, je rends le bureau compatible avec 3 colonnes, peut-être avec une largeur définie à 25% ?

Ou si vous avez une meilleure solution pour permettre 2 colonnes sur mobile avec 3 ou 4 sur bureau. Bien qu’il faudrait que la largeur s’ajuste en fonction du nombre de colonnes et déplace les colonnes supplémentaires à la ligne suivante si sur mobile.

Peut-être utiliser quelque chose comme une grille à partir d’une image ou un code d’image de maçonnerie ?