Detail view
This commit is contained in:
parent
6cafd880b0
commit
35cca26719
|
|
@ -0,0 +1,5 @@
|
|||
img {
|
||||
max-width: var(--max-width);
|
||||
margin-top: 1em;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
.message {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.message .picture-preview {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.picture-preview > * {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
object-fit: cover;
|
||||
background-color: lightgray;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.message .content-block {
|
||||
flex-grow: 1;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
:root {
|
||||
--max-width: 750px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
|
@ -9,40 +13,17 @@ body {
|
|||
|
||||
main {
|
||||
margin: 1em auto;
|
||||
max-width: 750px;
|
||||
max-width: var(--max-width);
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.message .picture-preview {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.picture-preview > * {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
object-fit: cover;
|
||||
background-color: lightgray;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.message .content-block {
|
||||
flex-grow: 1;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.message .content-block .metadata .name {
|
||||
.message .metadata .name {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.message .content-block .metadata .date {
|
||||
.message .metadata .date {
|
||||
color: #626262;
|
||||
}
|
||||
|
||||
.message .content-block .text {
|
||||
.message .text {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
<title>Picture Display</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="{% static "pictures/style.css" %}">
|
||||
{% block extend_head %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
{% extends "pictures/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block extend_head %}
|
||||
<link rel="stylesheet" href="{% static "pictures/detail.css" %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="message">
|
||||
<div class="metadata">
|
||||
<div class="name">De: {{ message.sender.display_name }}</div>
|
||||
<div class="date">{{ message.received_at }}</div>
|
||||
</div>
|
||||
{% for media in message.media_files.all %}
|
||||
<img src="{{ media.file.url }}" alt="Photo">
|
||||
{% endfor %}
|
||||
<p class="text">{{ message.content | linebreaks }}</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,11 +1,16 @@
|
|||
{% extends "pictures/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block extend_head %}
|
||||
<link rel="stylesheet" href="{% static "pictures/list.css" %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% for message in messages %}
|
||||
<div class="message">
|
||||
<div class="picture-preview">
|
||||
{% if message.media_files.first %}
|
||||
<img src="{{ message.media_files.first.file.url }}" alt="">
|
||||
<img src="{{ message.media_files.first.file.url }}" alt="Photo">
|
||||
{% else %}
|
||||
<div class="filler"></div>
|
||||
{% endif %}
|
||||
|
|
@ -15,7 +20,7 @@
|
|||
<div class="name">De: {{ message.sender.display_name }}</div>
|
||||
<div class="date">{{ message.received_at }}</div>
|
||||
</div>
|
||||
<div class="text">{{ message.content | linebreaks }}</div>
|
||||
<p class="text">{{ message.content | linebreaks }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@ from django.conf import settings
|
|||
from django.conf.urls.static import static
|
||||
from django.urls import path
|
||||
|
||||
from pictures.views import MessageListView
|
||||
from pictures.views import MessageDetailView, MessageListView
|
||||
|
||||
urlpatterns = [
|
||||
path("", MessageListView.as_view(), name="messages-list"),
|
||||
path("<int:pk>/", MessageDetailView.as_view(), name="messages-detail"),
|
||||
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
from django.shortcuts import render
|
||||
from django.views import generic
|
||||
|
||||
from pictures.models import Message
|
||||
|
|
@ -8,3 +7,9 @@ class MessageListView(generic.ListView):
|
|||
model = Message
|
||||
template_name = "pictures/messages-list.html"
|
||||
context_object_name = "messages"
|
||||
|
||||
|
||||
class MessageDetailView(generic.DetailView):
|
||||
model = Message
|
||||
template_name = "pictures/messages-detail.html"
|
||||
context_object_name = "message"
|
||||
|
|
|
|||
Loading…
Reference in New Issue