diff --git a/main/templates/main/main_person_page.html b/main/templates/main/main_person_page.html index 1102ae3b0b496d1ec985bcd4a0256bb7c8f91d15..7f1eab6b669de3ba86767e9c11b7674b6b69175e 100644 --- a/main/templates/main/main_person_page.html +++ b/main/templates/main/main_person_page.html @@ -50,26 +50,33 @@ </section> </div> {% if tweet_list %} - <section class="grid-container no-max"> + <section class="grid-container no-max mr-0 person-twitter-section mb-4 xl:mb-20"> <div class="grid-content-with-right-side"> - <h2 class="head-4xl text-center xl:text-left"> + <h2 class="head-4xl text-left"> Aktuálně na Twitteru </h2> - <div class="mb-8 flex flex-wrap"> - {% for tweet in page.tweet_list %} - <div class="md:w-1/3 lg:w-1/4"> - <div class="p-4 flex flex-col items-center text-center border border-grey-100"> - <img class="rounded-full shadow-sm w-12 mb-2" src="{{ tweet.author_img_url }}" - alt="user image"/> - <h5 class="font-alt mb-2">{{ tweet.author_name }}</h5> - <small class="mb-4 text-turquoise-400">@{{ tweet.author_username }}</small> - <p class="text-base leading-6 mb-2">{{ tweet.text }}</p> - <a href="twitter.com/{{ tweet.author_username }}" class="hover:no-underline"> - <i class="ico--twitter text-turquoise-400 text-xl"></i> - </a> + <div class="__js-root twitter-carousel-root"> + <ui-twitter-carousel> + {% for tweet in page.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="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 }}" + alt="user image"/> + <div class="flex flex-col sm:flex-col"> + <h5 class="font-alt text-xl mb-2 sm:text-base">{{ tweet.author_name }}</h5> + <small class="mb-4 text-turquoise-400">@{{ tweet.author_username }}</small> + </div> + </div> + <p class="text-small sm:text-base leading-6 mb-2">{{ tweet.text }}</p> + <a href="twitter.com/{{ tweet.author_username }}" class="hover:no-underline" target="_blank"> + <i class="ico--twitter text-turquoise-400 text-xl"></i> + </a> + </div> </div> - </div> - {% endfor %} + {% endfor %} + </ui-twitter-carousel> </div> </div> </section>