Part 6: Styling and Optimizing the Frontend

Step 1: Add Static Files for Styling

Create a directory for static files in your app:

chat/static/chat/

Inside the chat/static/chat/ folder, create a styles.css file for your custom styles.

Step 2: Load Static Files in Templates

Ensure the staticfiles app is enabled in settings.py:

INSTALLED_APPS += [
    "django.contrib.staticfiles",
]

Define the static files directory in settings.py:

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']

Load the static files in your room.html and other templates:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Chat Room</title>
    <link rel="stylesheet" href="{% static 'chat/styles.css' %}">
</head>
<body>
    <!-- Page content here -->
</body>
</html>

Step 3: Style the Chat Room

Update styles.css with the following example styles:

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
}

h2 {
    text-align: center;
    color: #444;
    margin-top: 20px;
}

#chat-log {
    border: 1px solid #ccc;
    background: #fff;
    height: 400px;
    width: 80%;
    margin: 20px auto;
    overflow-y: auto;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#chat-message-input {
    display: block;
    width: 75%;
    margin: 10px auto;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#chat-message-submit {
    display: block;
    width: 10%;
    margin: 10px auto;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#chat-message-submit:hover {
    background-color: #45a049;
}

p {
    margin: 5px 0;
}

p.info {
    color: gray;
    font-style: italic;
}

p.message {
    color: black;
}

Step 4: Optimize the Chat Log

Add JavaScript to automatically scroll to the latest message:

<script>
    const chatLog = document.querySelector('#chat-log');

    chatSocket.onmessage = function(e) {
        const data = JSON.parse(e.data);

        if (data.message) {
            chatLog.innerHTML += (
                `<p class="message"><strong>${data.username}:</strong> ${data.message}</p>`
            );
        } else if (data.info) {
            chatLog.innerHTML += (
                `<p class="info">${data.info}</p>`
            );
        }

        // Auto-scroll to the bottom
        chatLog.scrollTop = chatLog.scrollHeight;
    };
</script>

Step 5: Add User List Styling

For the User List page, add a new user_list.html template or style it:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Users</title>
    <link rel="stylesheet" href="{% static 'chat/styles.css' %}">
</head>
<body>
    <h2>Online Users</h2>
    <ul id="user-list">
        {% for user in users %}
            <li>
                <a href="/room/{{ user.username }}/">{{ user.username }}</a>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

Update styles.css for the user list:

ul#user-list {
    list-style: none;
    padding: 0;
    width: 50%;
    margin: 0 auto;
}

ul#user-list li {
    padding: 10px;
    margin: 5px 0;
    background: #ddd;
    text-align: center;
    border-radius: 5px;
}

ul#user-list li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

ul#user-list li:hover {
    background: #ccc;
}

Step 6: Responsive Design

Make the chat interface responsive using media queries:

@media (max-width: 768px) {
    #chat-log {
        width: 95%;
        height: 300px;
    }

    #chat-message-input {
        width: 80%;
    }

    #chat-message-submit {
        width: 15%;
    }

    ul#user-list {
        width: 90%;
    }
}

Step 7: Test the Styling

Run the server and navigate to the User List and Chat Room pages:

python manage.py runserver

Django