Black November

ATÉ 50% OFF

TÁ ACABANDO!

0 dias

0 horas

0 min

0 seg

3
respostas

erro na box do logout

no fim do curso, o unico aviso que não aparece na caixinha é o Logout, ele continua aparecendo em texto normal, pode-se perceber isso no fim do primeiro video do modulo 05, como concertar isso?

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
3 respostas

Olá Gustavo, como vai?

Você está enfrentando um problema com a exibição do alerta de logout no seu projeto Django. Isso pode ocorrer por algumas razões, mas vou te dar algumas dicas para tentar resolver.

  1. Verifique o Template: Certifique-se de que o template onde o alerta de logout deveria aparecer está configurado corretamente para exibir mensagens. Normalmente, você deve ter algo como:

    {% if messages %}
        {% for message in messages %}
            <div class="alert {{ message.tags }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
    
  2. Verifique as Tags de Mensagem: No seu arquivo de views, quando você adiciona a mensagem de logout, verifique se está usando a tag correta. Por exemplo:

    from django.contrib import messages
    
    messages.success(request, 'Você saiu com sucesso!')
    

    Certifique-se de que a tag (success, info, warning, error) que você está usando tem um estilo CSS associado no seu arquivo de estilos.

  3. CSS: Verifique se você tem o CSS necessário para estilizar as mensagens. Algo como:

    .alert {
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid transparent;
        border-radius: 4px;
    }
    .alert-success {
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
    }
    

    Ajuste de acordo com as classes que você está usando.

  4. Verifique o Contexto: Certifique-se de que o contexto do template está sendo passado corretamente e que as mensagens estão sendo adicionadas ao contexto de forma correta.

Essas são algumas dicas que podem ajudar a resolver o problema. Espero que uma dessas sugestões funcione para você!

Mas caso não funcione, peço que compartilhe comigo todo o seu projeto para eu analisar e testar.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

ainda não consegui resolver, aqui está meu projeto no github:

https://github.com/gustavoplr/first-website

Olá, Gustavo! Tudo bem?

Foram vários motivos e algumas coisas que vou trazer aqui não tem necessariamente a ver com o problema com o "alert", então não irei separar esses pontos e apresentar igualmente para não causar nenhuma confusão, além de que a motivação de todas essas alterações é deixar o seu código funcionando corretamente.

  1. Por algum motivo desconhecido, a mensagem enviada quando você realiza um login corretamente é "sucess" e não "success", logo a classe de estilização não está sendo aplicada por ter um nome diferente. Com isso, recomendo que altere o nome da classe no arquivo "style.css" para a forma mostrada abaixo:

    .alert-sucess {
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
    }
    
  2. No seu arquivo base.html, você está invocando a partials do "alert" que você criou, o que é desnecessário e acaba duplicando a mensagem, logo recomendo que retire. Deixando o bloco "body" dessa forma:

    <body>
        {% include 'partials/_menu.html' %}
        {% block content %}{% endblock %}
        {% include 'partials/_footer.html' %}
    </body>
    
  3. No seu arquivo _menu.html, você criou toda uma div para recriar o alert que você já hávia criado no partials, logo também não é necessária. Recomendo que apague ela e apenas importe o partials do "alert".

    Apague:

    {% for message in messages %}
        <div class="alert alert-primary">
            <p id="messages">{{ message }}</p>
        </div>
    {% endfor %}
    

    E deixe assim no lugar:

    {% include 'partials/_alerts.html' %}
    
  4. Por fim, a estilização do cabeçalho de busca estava meio estranha, e a classe de cabecalho estava sendo usada, mas não existia, então recomendo que substitua a classe cabecalho__busca pela que deixarei abaixo e adicione a de cabecalho antes dela. Dentro do arquivo "style.css":

.cabecalho {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 1.5rem 0 4rem 0;
}

.cabecalho__busca {
    align-items: center;
    border-radius: 10px;
    background: linear-gradient(45deg, #C98CF1,#7B78E5);
    display: flex;
    height: auto;
    justify-content: space-between;
    padding: 2px;
    width: auto; 
}

Pronto, ao fazer todas essas alterações o seu projeto deve estar funcionando como o mostrado em aula.

Fico à disposição em caso de dúvidas ou problemas!