I’m following along a tutorial and, unfortunately, his code editor automatically indented everything when he copied/pasted a new <div> (Sigh) (In the second pic I cut off the top where it has LOGO in the top right on accident in the screenshot) The problem is i Room.html
This is what it currently looks like
This is what it should look like
Room.html File
{% extends 'main.html' %}
{% block content%}
<div class="room-container">
<div>
<style>
.room-container(
display: grid;
grid-template-columns: 3fr 1fr;
)
</style>
<div class="room-container">
<div>
<h1>{{room.name}}</h1>
<p>{{room.description}}</p>
<div class="comment-wrapper">
<h3> Conversations </h3>
<hr>
{% for message in room_messages %}
<div>
<a href="{% url 'delete-message' message.id %}">Delete</a>
<small>@{{message.user}} {{message.created|timesince}} ago </small>
<p>{{message.body}}</p>
<hr>
</div>
{% endfor %}
</div>
<div>
{% if request.user.is_authenticated %}
<div class="comment-for">
<form method="POST" action="">
{% csrf_token %}
<input type="text" name="body" placeholder="Comment here.." />
</form>
</div>
</div>
</div>
{% endif %}
<div>
<h3>Participants</h3>
<hr>
{% for user in participants %}
<div>
<p>@{{user.username}}</p>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
Main.html file
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-9'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>StudyBud</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
{% include 'navbar.html' %}
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li></li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% block content %}
{% endblock content %}
</body>
</html>
Navbar.html File
<a href="/">
<h1>LOGO</h1>
</a>
<form method="GET" action="{% url 'home' %}">
<input type="text" name="q" placeholder="Search Rooms..." />
</form>
{% if request.user.is_authenticated %}
<p>Hello {{ request.user }}</p>
<a href="{% url 'logout' %}">Logout</a>
{% else %}
<a href="{% url 'login' %}">Login</a>
{% endif %}
<hr>
Home.html*
from django.http import HttpResponse
from django.shortcuts import render, redirect
from django.contrib import messages
from django.contrib.auth.decorators import login_required
from django.db.models import Q
from django.contrib.auth.models import User
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.forms import UserCreationForm
from .models import Room, Topic, Message
from .forms import RoomForm
# Create your views here.
#
# rooms = [
# {'id':1, 'name':'Lets learn Python!'},
# {'id':2, 'name':'Design with me!'},
# {'id':3, 'name':'Front End Devs!'},
#]
def loginPage(request):
page = 'login'
if request.user.is_authenticated:
return redirect('home')
if request.method == 'POST':
password = request.POST.get('password').lower()
username = request.POST.get('username')
try:
user = User.objects.get(username=username)
except:
messages.error(request, 'User does not exist')
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
return redirect('home')
else:
messages.error(request, 'Username OR Password not Valid')
context = {'page': page}
return render(request, 'base/login_register.html', context)
def logoutUser(request):
logout(request)
return redirect('home')
def registerPage(request):
form = UserCreationForm()
if request.method == 'POST':
form = UserCreationForm(request.POST)
if form.is_valid():
user = form.save(commit=False)
user.username = user.username.lower()
user.save()
login(request, user)
return redirect('home')
else:
messages.error(request, 'An error occurred, try again.')
return render(request, 'base/login_register.html', {'form': form})
def home(request):
q = request.GET.get('q') if request.GET.get('q') != None else ''
rooms = Room.objects.filter(
Q(topic__name__icontains=q) |
Q(name__icontains=q) |
Q(Description__icontains=q)
)
topics = Topic.objects.all()
room_count = rooms.count
context = {'rooms': rooms, 'topics': topics, 'room_count': room_count}
return render(request, 'base/home.html', context)
def room(request, pk):
room = Room.objects.get(id=pk)
room_messages = room.message_set.all().order_by('-created')
participants = room.participants.all()
if request.method == "POST":
messages = Message.objects.create(
user = request.user,
room = room,
body = request.POST.get('body')
)
room.participants.add(request.user)
return redirect('room', pk=room.id)
context = {'room': room, 'room_messages': room_messages, 'participants': participants}
return render(request, 'base/room.html', context)
@login_required(login_url='login')
def createRoom(request):
form = RoomForm()
if request.method == 'POST':
form = RoomForm(request.POST)
if form.is_valid():
form.save()
return redirect('home')
context = {'form': form}
return render(request, 'base/room_form.html', context)
@login_required(login_url='login')
def updateRoom(request, pk):
room = Room.objects.get(id=pk)
form = RoomForm(instance=room)
if request.user != room.host:
return HttpResponse('You have no power here!')
if request.method == 'POST':
form = RoomForm(request.POST, instance=room)
if form.is_valid():
form.save()
return redirect('home')
context = {'form': form}
return render(request, 'base/room_form.html', context)
@login_required(login_url='login')
def deleteRoom(request, pk):
room = Room.objects.get(id=pk)
if request.user != room.host:
return HttpResponse('You have no power here!')
if request.method == 'POST':
room.delete()
return redirect('home')
return render(request, 'base/delete.html', {'obj': room})
@login_required(login_url='login')
def deleteMessage(request, pk):
message = Message.objects.get(id=pk)
if request.user != message.user:
return HttpResponse('You have no power here!')
if request.method == 'POST':
message.delete()
return redirect('home')
return render(request, 'base/delete.html', {'obj': message})
Room_form.html
{% extends 'main.html' %}
{% block content %}
<div>
<form method="POST" action="">
{% csrf_token %}
{{form.as_p}}
<input type="Submit" value="Submit">
</form>
</div>
{% endblock content %}
Advertisement
Answer
There’s a lot of problems with your room.html file. First off, you want to use curly braces in your CSS style definition. Next, you want to paste your html into a code editor and make sure all the div tags line up appropriately.
For now, though, this should work.
room.html
{% extends 'main.html' %}
{% block content%}
<!-- don't forget curly braces for css definitions-->
<style>
.room-container {
display: grid;
grid-template-columns: 3fr 1fr;
}
</style>
<div class="room-container">
<div>
<!-- this is 3fr region -->
<h1>{{room.name}}</h1>
<p>{{room.description}}</p>
<div class="comment-wrapper">
<h3> Conversations </h3>
<hr>
{% for message in room_messages %}
<div>
<a href="{% url 'delete-message' message.id %}">Delete</a>
<small>@{{message.user}} {{message.created|timesince}} ago </small>
<p>{{message.body}}</p>
<hr>
</div>
{% endfor %}
</div>
<div>
{% if request.user.is_authenticated %}
<div class="comment-for">
<form method="POST" action="">
{% csrf_token %}
<input type="text" name="body" placeholder="Comment here.." />
</form>
</div>
{% endif %}
</div>
</div>
<div>
<!-- this is 1fr region -->
<h3>Participants</h3>
<hr>
{% for user in participants %}
<div>
<p>@{{user.username}}</p>
</div>
{% endfor %}
</div>
</div>
{% endblock %}