[ADD] tweet section to person page

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">
+          <div class="__js-root twitter-carousel-root">
+            <ui-twitter-carousel>
               {% 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 }}"
+                <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"/>
-                  <h5 class="font-alt mb-2">{{ tweet.author_name }}</h5>
+                      <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>
-                  <p class="text-base leading-6 mb-2">{{ tweet.text }}</p>
-                  <a href="twitter.com/{{ tweet.author_username }}" class="hover:no-underline">
+                      </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>
               {% endfor %}
+            </ui-twitter-carousel>
           </div>
         </div>
       </section>