main: twitter uituning

main/models.py

-import locale
 from datetime import timedelta
 from functools import cached_property
 
@@ -25,7 +24,6 @@ from wagtail.core.models import Page
 from wagtailmetadata.models import MetadataPageMixin
 
 from elections2021.constants import REGION_CHOICES  # pozor, import ze sousedního modulu
-from shared.const import RICH_TEXT_DEFAULT_FEATURES
 from shared.forms import SubscribeForm
 from shared.models import (  # MenuMixin,
     ArticleMixin,
@@ -162,10 +160,19 @@ class MainHomePage(
 
     def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, args, kwargs)
-        tweet_list = Tweet.objects.order_by("-twitter_id")
+
+        twitter_username_list = [
+            username_data["value"] for username_data in self.twitter_usernames.raw_data
+        ]
+        tweet_list = Tweet.objects.username_list(twitter_username_list).order_by(
+            "-twitter_id"
+        )
+
         context["tweet_list"] = tweet_list[:4]
         context["show_next_tweet"] = len(tweet_list) > 4
+
         context["regions"] = REGION_CHOICES
+
         context["article_data_list"] = MainArticlePage.objects.filter(
             region__isnull=False
         ).order_by("-date")[:3]
@@ -196,7 +203,14 @@ class MainHomePage(
         return JsonResponse(data=data, safe=False)
 
     def get_twitter_response(self, request):
-        tweet_paginator = Paginator(Tweet.objects.order_by("-twitter_id"), 4)
+        twitter_username_list = [
+            username_data["value"] for username_data in self.twitter_usernames.raw_data
+        ]
+        tweet_qs = Tweet.objects.username_list(twitter_username_list).order_by(
+            "-twitter_id"
+        )
+        tweet_paginator = Paginator(tweet_qs, 4)
+
         tweet_page = tweet_paginator.get_page(request.GET.get("page", 1))
         context = {"tweet_list": tweet_page.object_list}
         html_content = render(
@@ -209,13 +223,14 @@ class MainHomePage(
         return JsonResponse(data=data, safe=False)
 
     def serve(self, request, *args, **kwargs):
-        if not request.META.get("HTTP_X_REQUESTED_WITH") == "XMLHttpRequest":
-            return super().serve(request, *args, **kwargs)
+        if request.META.get("HTTP_X_REQUESTED_WITH") == "XMLHttpRequest":
             if "region" in request.GET:
                 return self.get_region_response(request)
             else:
                 return self.get_twitter_response(request)
 
+        return super().serve(request, *args, **kwargs)
+
     @cached_property
     def newsletter_subscribe_url(self):
         return self.url + self.reverse_subpage("newsletter_subscribe")
@@ -378,13 +393,14 @@ class MainArticlesPage(
         return JsonResponse(data=data, safe=False)
 
     def serve(self, request, *args, **kwargs):
-        if not request.META.get("HTTP_X_REQUESTED_WITH") == "XMLHttpRequest":
-            return super().serve(request, *args, **kwargs)
+        if request.META.get("HTTP_X_REQUESTED_WITH") == "XMLHttpRequest":
             if "months" in request.GET:
                 return self.get_timeline_articles_response(request)
             if "page" in request.GET:
                 return self.get_articles_response(request)
 
+        return super().serve(request, *args, **kwargs)
+
     @staticmethod
     def get_empty_month_data(date_obj):
         return {
@@ -612,9 +628,9 @@ class MainPersonPage(ExtendedMetadataPageMixin, SubpageMixin, MetadataPageMixin,
         context["article_page_list"] = MainArticlePage.objects.filter(
             author_page=self.id
         )
-        context["tweet_list"] = Tweet.objects.filter(
-            author_username=self.twitter_username
-        )
+        context["tweet_list"] = Tweet.objects.username(self.twitter_username).order_by(
+            "-twitter_id"
+        )[:20]
         return context
 
     ### OTHERS

main/static/main/css/styles.css

@@ -2618,22 +2618,36 @@ p{
         border-color: #B3B3B3;
       }
 
-.twitter-carousel .slick-arrow {
+div.twitter-carousel div.slick-track {
+    display: flex;
+  }
+
+div.twitter-carousel div.slick-slide {
+    display: flex;
+    height: auto;
+    margin-right: 1rem;
+  }
+
+div.twitter-carousel div.slick-slide > div {
+      height: 100%;
+    }
+
+div.twitter-carousel .slick-arrow {
     right: 10%;
   }
 
 @media (min-width: 992px) {
 
-.twitter-carousel .slick-arrow {
+div.twitter-carousel .slick-arrow {
       right: 5%
   }
     }
 
-.twitter-carousel .slick-arrow:before, .twitter-carousel .slick-arrow:after {
+div.twitter-carousel .slick-arrow:before, div.twitter-carousel .slick-arrow:after {
       border-color: black;
     }
 
-.twitter-carousel .slick-arrow.slick-disabled:before, .twitter-carousel .slick-arrow.slick-disabled:after {
+div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .slick-arrow.slick-disabled:after {
         border-color: #B3B3B3;
       }
 

main/styleguide/source/_patterns/molecules/twitter-box.mustache

-<div class="mb-5 p-4 flex flex-col items-center text-center border border-grey-100 sm:mb-0">
+<div class="mb-5 p-4 flex flex-col items-center text-center border border-grey-100 h-full sm:mb-0">
   <div class="flex flex-row sm:flex-col items-center">
     <img class="rounded-full shadow-sm w-12 h-12 mb-4 sm:mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
          alt="user image"/>

main/styleguide/source/_patterns/templates/person.mustache

@@ -85,19 +85,19 @@
       </h2>
       <div class="__js-root twitter-carousel-root">
       <ui-twitter-carousel>
-        <div class="w-full flex max-w-xs">
+        <div class="w-full h-full flex max-w-xs">
           {{> molecules-twitter-box }}
         </div>
-        <div class="w-full flex max-w-xs">
+        <div class="w-full h-full flex max-w-xs">
           {{> molecules-twitter-box }}
         </div>
-        <div class="w-full flex max-w-xs">
+        <div class="w-full h-full flex max-w-xs">
           {{> molecules-twitter-box }}
         </div>
-        <div class="w-full flex max-w-xs">
+        <div class="w-full h-full flex max-w-xs">
           {{> molecules-twitter-box }}
         </div>
-        <div class="w-full flex max-w-xs">
+        <div class="w-full h-full flex max-w-xs">
           {{> molecules-twitter-box }}
         </div>
       </ui-twitter-carousel>

main/styleguide/source/css/molecules/carousels.pcss

@@ -194,7 +194,21 @@
   }
 }
 
-.twitter-carousel {
+div.twitter-carousel {
+  div.slick-track {
+    display: flex;
+  }
+
+  div.slick-slide {
+    display: flex;
+    height: auto;
+    margin-right: 1rem;
+
+    & > div {
+      height: 100%;
+    }
+  }
+
   .slick-arrow {
     right: 10%;
     @screen lg {

main/templates/main/includes/newsletter_section.html

@@ -18,8 +18,9 @@
                  placeholder="Tvůj email"/>
           <div class="checkbox form-field__control flex items-center mb-3">
             <input type="checkbox" id="checkbox_1" name="confirmed" required="">
-            <label class="text-xs font-alt font-light" for="checkbox_1">"Souhlasím se zpracováním osobních
-              údajů"</label>
+            <label class="text-xs font-alt font-light" for="checkbox_1">
+              Souhlasím se zpracováním osobních údajů
+            </label>
           </div>
           {% include 'main/includes/form_button_animated.html' with btn_text="Odebírat" %}
         </form>

main/templates/main/main_person_page.html

@@ -64,8 +64,8 @@
           <div class="__js-root twitter-carousel-root">
             <ui-twitter-carousel>
               {% for tweet in tweet_list %}
-                <div class="w-full flex max-w-xs">
-                  <div class="mb-5 p-4 flex flex-col items-center text-center border border-grey-100 sm:mb-0">
+                <div class="w-full h-full flex max-w-xs mr-2">
+                  <div class="mb-5 p-4 flex flex-col h-full items-center text-center border border-grey-100 sm:mb-0">
                     <div class="flex flex-row sm:flex-col items-center">
                       <img class="rounded-full shadow-sm w-12 h-12 mb-4 sm:mb-2"
                            src="{{ tweet.author_img_url }}"
@@ -87,6 +87,7 @@
         </div>
       </section>
     {% endif %}
+
     {% if article_page_list %}
       <section class="grid-container mb-4 xl:mb-20 justify-start">
         <div class="grid-content">
@@ -115,6 +116,7 @@
         </div>
       </section>
     {% endif %}
+
     {% for people_group in page.people %}
       <section class="grid-container person-grid-container mb-4 xl:mb-20 justify-start">
         <div class="grid-content-with-right-side">
@@ -146,7 +148,6 @@
               </div>
             {% endfor %}
           </div>
-
         </div>
       </section>
     {% endfor %}

twitter_utils/models.py

 from django.db import models
 
 
+class TweetQueryset(models.QuerySet):
+    def username(self, username):
+        return self.filter(author_username=username)
+
+    def username_list(self, username_list):
+        return self.filter(author_username__in=username_list)
+
+
 class Tweet(models.Model):
     """
     Model pro ukládání Tweetů getnutých v manage commandu update_tweets z API Twitteru.
@@ -15,3 +23,5 @@ class Tweet(models.Model):
     author_username = models.CharField(max_length=128, default="PiratskaStrana")
     text = models.TextField()
     twitter_id = models.CharField(max_length=32, unique=True)
+
+    objects = TweetQueryset.as_manager()

twitter_utils/services.py

@@ -54,7 +54,7 @@ class TweetDownloadService:
             start_time=timezone.now() - timedelta(days=self.days_back),
             tweet_fields=["author_id", "created_at"],
             user_fields=["name", "username"],
-        )  # 49022430
+        )
 
         return tweets_response.data