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?
ATÉ 50% OFF
TÁ ACABANDO!
0 dias
0 horas
0 min
0 seg
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?
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.
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 %}
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.
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.
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.
ainda não consegui resolver, aqui está meu projeto no github:
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.
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;
}
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>
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' %}
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!