From 35cca26719a705518290b9de4959ae9bc6e836f7 Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Sun, 24 Jan 2021 16:01:36 +0100 Subject: [PATCH] Detail view --- src/pictures/static/pictures/detail.css | 5 +++ src/pictures/static/pictures/list.css | 22 ++++++++++++ src/pictures/static/pictures/style.css | 35 +++++-------------- src/pictures/templates/pictures/base.html | 2 ++ .../templates/pictures/messages-detail.html | 19 ++++++++++ .../templates/pictures/messages-list.html | 9 +++-- src/pictures/urls.py | 3 +- src/pictures/views.py | 7 +++- 8 files changed, 71 insertions(+), 31 deletions(-) create mode 100644 src/pictures/static/pictures/detail.css create mode 100644 src/pictures/static/pictures/list.css create mode 100644 src/pictures/templates/pictures/messages-detail.html diff --git a/src/pictures/static/pictures/detail.css b/src/pictures/static/pictures/detail.css new file mode 100644 index 0000000..bec1a4c --- /dev/null +++ b/src/pictures/static/pictures/detail.css @@ -0,0 +1,5 @@ +img { + max-width: var(--max-width); + margin-top: 1em; + border-radius: 10px; +} diff --git a/src/pictures/static/pictures/list.css b/src/pictures/static/pictures/list.css new file mode 100644 index 0000000..3ac4f2e --- /dev/null +++ b/src/pictures/static/pictures/list.css @@ -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; +} diff --git a/src/pictures/static/pictures/style.css b/src/pictures/static/pictures/style.css index 649df61..1b40baa 100644 --- a/src/pictures/static/pictures/style.css +++ b/src/pictures/static/pictures/style.css @@ -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; } diff --git a/src/pictures/templates/pictures/base.html b/src/pictures/templates/pictures/base.html index 376618d..52b2f05 100644 --- a/src/pictures/templates/pictures/base.html +++ b/src/pictures/templates/pictures/base.html @@ -7,6 +7,8 @@ Picture Display + {% block extend_head %} + {% endblock %}