From 2240e6513856c55ea205cdb09ef0411a1ab58f28 Mon Sep 17 00:00:00 2001
From: Mohamed Jinas <j@live.mv>
Date: Mon, 10 Aug 2020 06:59:24 +0500
Subject: [PATCH] Dynamic Image and source names and image

---
 resources/js/components/TodaysPick.vue | 113 +++++++++++++------------
 1 file changed, 61 insertions(+), 52 deletions(-)

diff --git a/resources/js/components/TodaysPick.vue b/resources/js/components/TodaysPick.vue
index 511eb60..d7b6adf 100644
--- a/resources/js/components/TodaysPick.vue
+++ b/resources/js/components/TodaysPick.vue
@@ -14,18 +14,33 @@
         >
             <!-- sub-main posts -->
             <div class="md:w-4/7">
-               
                 <div
                     v-for="subarticle in subarticles"
                     :key="subarticle.id"
                     class="rounded w-full flex flex-col md:flex-row mb-10"
                 >
                     <div class="bg-white rounded px-4">
-                        <span
-                            class="text-green-700 text-md font-normal hidden md:block text-right"
-                            v-text="subarticle.source.name"
+                        <div
+                            class="md:mt-0 text-gray-800 font-semibold text-xl mb-2 text-right leading-8 MvAamu"
+                            v-text="subarticle.title"
                             style="direction:rtl;"
-                        ></span>
+                        ></div>
+
+                        <div class="flex justify-end items-center">
+                             <div>
+                                <p
+                                    class="font-semibold text-gray-700 text-sm capitalize MvTyper"
+                                    v-text="article.source.name"
+                                ></p>
+                            </div>
+
+                            <img
+                                :src="article.source.logo"
+                                class="h-10 w-10 rounded-full ml-1 object-cover"
+                            />
+
+                           
+                        </div>
 
                         <div
                             class="text-gray-600 text-md mt-1 flex justify-end items-center"
@@ -47,18 +62,11 @@
                             <span class="ml-1" v-text="article.readtime"></span>
                         </div>
 
-                        <div
-                            class="md:mt-0 text-gray-800 font-semibold text-xl mb-2 text-right"
-                            v-text="subarticle.title"
-                            style="direction:rtl;"
-                        ></div>
                         <p
-                            class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600"
-                        >
-                            Wonder matter now can estate esteem assure fat
-                            roused. Am performed on existence as discourse is.
-                            Pleasure friendly at marriage blessing or
-                        </p>
+                            class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600 MvTyper"
+                            style="direction:rtl;"
+                            v-text="subarticle.body.slice(0, 150)"
+                        ></p>
                     </div>
                     <img
                         :src="subarticle.featured_image"
@@ -78,52 +86,53 @@
                         class="rounded-md object-cover w-full h-3/4"
                     />
                 </a>
-                
-                   
 
                 <a href="#">
                     <h1
                         class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvAamu"
                         style="direction:rtl;"
                         v-text="article.title"
-                    >
-                    </h1>
+                    ></h1>
                 </a>
 
-                 <div class="flex justify-end items-center">
-
-                <img :src="article.source.logo"
-                  class="h-10 w-10 rounded-full mr-2 object-cover" />
-
-                <div>
-                  <p class="font-semibold text-gray-700 text-sm capitalize MvTyper" v-text="article.source.name"></p>
- 
-                </div>
-
-                </div>
-
-                 <div class="text-gray-600 text-md mt-4 flex justify-end items-center mb-3">
-                      <p class="text-gray-600 text-right">
-                    {{ article.published_date | moment("calendar") }}
-                    &#8210;
-                        </p>
-                        <span class="mr-1 ml-1" v-text="article.readtime"></span>
-                         <svg
-                            class="h-4 w-4"
-                            viewBox="0 0 443.294 443.294"
-                            fill="currentColor"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
-                            />
-                            <path
-                                d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
-                            />
-                        </svg>
+                <div class="flex justify-end items-center">
+                     <div>
+                        <p
+                            class="font-semibold text-gray-700 text-sm capitalize MvTyper"
+                            v-text="article.source.name"
+                        ></p>
                     </div>
 
-               
+                    <img
+                        :src="article.source.logo"
+                        class="h-10 w-10 rounded-full ml-1 object-cover"
+                    />
+
+                   
+                </div>
+
+                <div
+                    class="text-gray-600 text-md mt-4 flex justify-end items-center mb-3"
+                >
+                    <p class="text-gray-600 text-right">
+                        {{ article.published_date | moment("calendar") }}
+                        &#8210;
+                    </p>
+                    <span class="mr-1 ml-1" v-text="article.readtime"></span>
+                    <svg
+                        class="h-4 w-4"
+                        viewBox="0 0 443.294 443.294"
+                        fill="currentColor"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
+                        />
+                        <path
+                            d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
+                        />
+                    </svg>
+                </div>
             </div>
         </div>
         <!-- end featured section -->