gaugendre/picture-display
1
0
Fork 0
Code Issues Pull requests Releases Activity

Detail view

Browse source
This commit is contained in:
Gabriel Augendre 2021-01-24 16:01:36 +01:00
parent 6cafd880b0
commit 35cca26719
8 changed files with 71 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/pictures/static/pictures/detail.css Normal file
View file

@ -0,0 +1,5 @@
img {
max-width: var(--max-width);
margin-top: 1em;
border-radius: 10px;
}

22
src/pictures/static/pictures/list.css Normal file
View file

@ -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;
}

35
src/pictures/static/pictures/style.css
View file

@ -1,3 +1,7 @@
:root {
--max-width: 750px;
}
body { 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"; 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 { main {
margin: 1em auto; margin: 1em auto;
max-width: 750px; max-width: var(--max-width);
} }
.message { .message .metadata .name {
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 {
font-size: 120%; font-size: 120%;
} }
.message .content-block .metadata .date { .message .metadata .date {
color: #626262; color: #626262;
} }
.message .content-block .text { .message .text {
margin-top: 1em; margin-top: 1em;
} }

2
src/pictures/templates/pictures/base.html
View file

@ -7,6 +7,8 @@
<title>Picture Display</title> <title>Picture Display</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static "pictures/style.css" %}"> <link rel="stylesheet" href="{% static "pictures/style.css" %}">
{% block extend_head %}
{% endblock %}
</head> </head>
<body> <body>
<nav> <nav>

19
src/pictures/templates/pictures/messages-detail.html Normal file
View file

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

9
src/pictures/templates/pictures/messages-list.html
View file

@ -1,11 +1,16 @@
{% extends "pictures/base.html" %} {% extends "pictures/base.html" %}
{% load static %}
{% block extend_head %}
<link rel="stylesheet" href="{% static "pictures/list.css" %}">
{% endblock %}
{% block content %} {% block content %}
{% for message in messages %} {% for message in messages %}
<div class="message"> <div class="message">
<div class="picture-preview"> <div class="picture-preview">
{% if message.media_files.first %} {% 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 %} {% else %}
<div class="filler"></div> <div class="filler"></div>
{% endif %} {% endif %}
@ -15,7 +20,7 @@
<div class="name">De: {{ message.sender.display_name }}</div> <div class="name">De: {{ message.sender.display_name }}</div>
<div class="date">{{ message.received_at }}</div> <div class="date">{{ message.received_at }}</div>
</div> </div>
<div class="text">{{ message.content | linebreaks }}</div> <p class="text">{{ message.content | linebreaks }}</p>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}

3
src/pictures/urls.py
View file

@ -2,8 +2,9 @@ from django.conf import settings
from django.conf.urls.static import static from django.conf.urls.static import static
from django.urls import path from django.urls import path
from pictures.views import MessageListView from pictures.views import MessageDetailView, MessageListView
urlpatterns = [ urlpatterns = [
path("", MessageListView.as_view(), name="messages-list"), 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) ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

7
src/pictures/views.py
View file

@ -1,4 +1,3 @@
from django.shortcuts import render
from django.views import generic from django.views import generic
from pictures.models import Message from pictures.models import Message
@ -8,3 +7,9 @@ class MessageListView(generic.ListView):
model = Message model = Message
template_name = "pictures/messages-list.html" template_name = "pictures/messages-list.html"
context_object_name = "messages" context_object_name = "messages"
class MessageDetailView(generic.DetailView):
model = Message
template_name = "pictures/messages-detail.html"
context_object_name = "message"