From fd8de82a89676c8410566804b0bb9b15a503ca95 Mon Sep 17 00:00:00 2001 From: Nathan Chapman Date: Wed, 27 Jul 2022 08:18:29 -0600 Subject: [PATCH] UI Fixes and updates --- src/accounts/views.py | 4 +- src/core/views.py | 11 ++++++ src/static/styles/main.css | 81 +++++++++++++++++++++++++++++--------- src/templates/base.html | 4 +- 4 files changed, 78 insertions(+), 22 deletions(-) diff --git a/src/accounts/views.py b/src/accounts/views.py index 083aa79..db2a79f 100644 --- a/src/accounts/views.py +++ b/src/accounts/views.py @@ -28,8 +28,8 @@ class AccountDetailView(LoginRequiredMixin, DetailView): def get_context_data(self, *args, **kwargs): context = super().get_context_data(*args, **kwargs) - context['posts'] = Post.objects.filter(author=self.object).order_by('-created_at') - context['comments'] = Comment.objects.filter(author=self.object).order_by('-created_at') + context['posts'] = Post.objects.filter(author=self.object).order_by('-updated_at')[:10] + context['comments'] = Comment.objects.filter(author=self.object).order_by('-updated_at')[:10] return context diff --git a/src/core/views.py b/src/core/views.py index bdf5828..eee8a56 100644 --- a/src/core/views.py +++ b/src/core/views.py @@ -81,6 +81,17 @@ class TopicDetailView(LoginRequiredMixin, DetailView): model = Topic pk_url_kwarg = 'topic_pk' + def get_queryset(self): + queryset = Topic.objects.all().prefetch_related( + models.Prefetch( + 'post_set', + queryset=Post.objects.filter( + topic=self.kwargs['topic_pk'] + ).order_by('-created_at').prefetch_related('comments') + ) + ) + return queryset + class TopicUpdateView(LoginRequiredMixin, SuccessMessageMixin, UpdateView): model = Topic diff --git a/src/static/styles/main.css b/src/static/styles/main.css index 4e2838a..9aec7e4 100644 --- a/src/static/styles/main.css +++ b/src/static/styles/main.css @@ -24,6 +24,7 @@ body { p { margin-top: 0; margin-bottom: 1rem; + text-rendering: optimizeLegibility; } a { color: inherit; @@ -41,6 +42,7 @@ h5 { text-transform: uppercase; font-weight: 700; line-height: 1.3; + text-rendering: optimizeLegibility; } h1 { margin-top: 0; @@ -144,11 +146,11 @@ textarea { box-sizing: border-box; font: inherit; font-family: 'PT Mono', monospace; - font-size: 2rem; + font-size: 2.5rem; padding: 0.5rem 1rem; width: 100%; resize: vertical; - line-height: 1.75; + line-height: 1.5; } @@ -167,8 +169,11 @@ input[type=submit], display: inline-block; } +button:hover, +input[type=submit]:hover, .action-button:hover { background-color: var(--color-highlight); + color: var(--color-blue); } @@ -181,6 +186,10 @@ main { padding: 0 1rem; } +article { + margin-bottom: 1rem; +} + /* ========================================================================== Header @@ -226,6 +235,10 @@ main { font-weight: bold; } +.messages { + font-weight: bold; +} + /* Breadcrumbs ========================================================================== */ @@ -267,11 +280,24 @@ main { justify-content: space-between; margin-bottom: 2rem; } + +@media screen and (max-width: 600px) { + .post__header { + flex-direction: column; + } +} + .post__content { - font-family: 'STIX Two Text'; - font-size: 2rem; + font-family: 'STIX Two Text', serif; + font-size: 2.5rem; margin-bottom: 4rem; - line-height: 1.75; + line-height: 1.5; +} + +@media screen and (max-width: 600px) { + .post__content { + font-size: 1.75rem; + } } .post__content h1, @@ -279,7 +305,7 @@ main { .post__content h3, .post__content h4, .post__content h5 { - font-family: 'STIX Two Text'; + font-family: 'STIX Two Text', serif; text-transform: unset; margin: 2em 0 1em; } @@ -303,7 +329,7 @@ main { .post__content blockquote { font-size: 0.875em; max-width: 80%; - margin: 0 auto 1rem; + margin: 0 auto 1em; } @@ -312,29 +338,42 @@ main { Comments ========================================================================== */ .comment { - margin: 2rem 0; + margin: 2em 0; background-color: var(--color-lightgrey); - padding: 1rem; + padding: 1em; } .comment__header { display: flex; justify-content: space-between; - line-height: 1.3; + line-height: 1.5; +} + +@media screen and (max-width: 600px) { + .comment__header { + flex-direction: column; + margin-bottom: 1rem; + } } .comment__content { - font-family: 'STIX Two Text'; - font-size: 2rem; + font-family: 'STIX Two Text', serif; + font-size: 2.5rem; /*max-width: 64ch;*/ } +@media screen and (max-width: 600px) { + .comment__content { + font-size: 1.75rem; + } +} + .comment__content h1, .comment__content h2, .comment__content h3, .comment__content h4, .comment__content h5 { - font-family: 'STIX Two Text'; + font-family: 'STIX Two Text', serif; text-transform: unset; margin: 2em 0 1em; } @@ -358,19 +397,25 @@ main { .comment__content blockquote { font-size: 1.75rem; max-width: 80%; - margin: 0 auto 1rem; + margin: 0 auto 1em; } .comment p { - line-height: 1.75; + line-height: 1.5; } .comment ul { - line-height: 1.75; + line-height: 1.5; } .comments__form textarea { font-family: 'PT Mono'; - font-size: 2rem; - line-height: 1.75; + font-size: 2.5rem; + line-height: 1.5; +} + +@media screen and (max-width: 600px) { + .comments__form textarea { + font-size: 1.75rem; + } } diff --git a/src/templates/base.html b/src/templates/base.html index b63dfb6..848253f 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -11,10 +11,10 @@ - + {% compress css %} - + {% endcompress %}