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