Transformando Laravel em PHP

[Frank K Hosaka]

O portal do Laravel oferece o projeto Chirps com dois dialetos, o Blade e o Inertia. O Inertia é para quem domina o JavaScript com o dialeto do Vue ou React, e o Blade é para quem não domina nada, esse é o meu caso.

Eu montei um código onde escrevi Teste1, Teste2 e Teste3. Eu esperava que um viesse debaixo do outro, mas no final o Teste3 ficou na mesma altura do Teste2.

A pergunta mais óbvia é: como compartilhar o meu problema com o Script Brasil?

A minha única saída foi transformar os arquivos layouts>app.blade.php e layouts>navigation.blade.php e transformar o meu problema em socorro.php:

<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen bg-gray-100">
<nav class="w-1/2 h-10 mx-auto bg-white border-b border-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-10">
        Teste1
        </div>
    </div>
    <div id=mensagem class="bg-gray-300">Teste2</div>
</nav>
Teste3

Consegui reduzir o problema em apenas dois: o HTML e o dialeto TailwindCSS.

Como eu não domino nenhum dos dois, usei o famoso método da tentativa e erro, ou seja, eu tirei o marcador <div> mais próximo do Teste1. E assim consegui colocar o Teste3 debaixo do Teste2, isso no PHP. Espero conseguir o mesmo resultado lá no Laravel.

[Frank K Hosaka]

O meu primeiro teste não deu certo. O meu erro é que eu não vi que haviam dois itens na primeira linha.

Tive que fazer a conversão Laravel -> PHP e consegui esse código:

<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen bg-gray-100">
<nav class="w-1/2 h-10 mx-auto bg-white border-b border-gray-100">
        <div class="flex justify-between h-10">
            <div>Teste1a</div>
            <div>Teste1b</div>
        </div>
    <div id=mensagem class="bg-gray-300">Teste2</div>
</nav>
Teste3
</div>

Para colocar o Teste3 debaixo do Teste2, tirei o "h-10" do TailwindCSS do <nav>. Vamos ver se dessa vez vai dar certo lá no Laravel.

[Frank K Hosaka]

Dessa vez deu certo! Consegui colocar o Teste3 debaixo da barra de navegação, o código completo do Teste3 segue adiante, o nome do arquivo é diario.blade.php, onde também consegui encontrar a classe "ps-5" do dialeto TailwindCSS, e com ele consegui afastar a coluna Valor da coluna Histórico que estava muito grudada um do outro.

<x-app-layout>
<script>mensagem.innerHTML="Lançamentos do dia {{$extrato[0]->dia}}"</script>
<table class="w-1/2 mx-auto">
<th class="text-left">Lçto<th colspan=2 class=text-left>Contas
<th>Valor<th class="text-left ps-5">Histórico
@foreach($extrato as $lcto)
<tr class="even:bg-white"><td>{{$lcto->lcto}}
<td>{{$lcto->contad}}<td>{{$lcto->contac}}
<td class="text-right">{{$lcto->valor}}
<td class=ps-5>{{$lcto->hist}}
@endforeach
</table>
</x-app-layout>

Editado Julho 20, 2023 por Frank K Hosaka