Caixas de informação Bbcode

Dev
6

Ok, consegui testar o suporte para 2 colunas. O código ainda é bastante básico/primitivo.

O código ATM tem apenas opções de float para Redbox.

// Testando float

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;
}

Ainda preciso adicionar outras opções de cores.

Como usar no Post

[wrap="redboxfl"]
# Infobox float

Testing float
[/Wrap]

[wrap="redboxfr"]
# Infobox float

Testing float
[/Wrap]
>
Text after
  • Nota: O “>” é necessário entre as linhas, pelo menos com o texto abaixo. Alternativamente, você poderia colocar o texto abaixo ao lado do “> Texto” da mesma forma que usei para o título da Infobox.
Screenshot Mobile

A imagem é uma captura de tela de um aplicativo móvel, mostrando um menu suspenso com quatro opções relacionadas a elementos flutuantes em um contexto digital. (Legenda por IA)
A imagem é uma captura de tela de um aplicativo móvel, mostrando um menu suspenso com quatro opções relacionadas a elementos flutuantes em um contexto digital. (Legenda por IA)864×1544 170 KB

@merefield, eu poderia adicionar algo a cada código atual no Op, algo como


&[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;
}

Para ter a opção de usar no post como? Confirmado, funciona!

[wrap="redbox" float="left"]
# Infobox float

Testing float
[/Wrap]
Screenshot Mobile

Esta imagem exibe uma captura de tela de um dispositivo móvel com uma lista de elementos flutuantes de nomes diferentes. (Legenda por IA)
Esta imagem exibe uma captura de tela de um dispositivo móvel com uma lista de elementos flutuantes de nomes diferentes. (Legenda por IA)862×1222 120 KB

O primeiro conjunto é apenas usando float left, 3 deles quebram automaticamente!

Acho que adicionei o código móvel com 44,5% de largura. Então, criei suporte para desktop com 3 colunas, talvez com largura definida para 25%?

Ou se você tiver uma solução melhor para permitir 2 colunas no celular com 3 ou 4 no desktop. Embora precise ter a largura ajustada de acordo com o número de colunas e mover colunas adicionais para a próxima linha se for no celular.

Talvez usar algo como grid da imagem ou código de masonry image?