From de2c54b9c0b40013daf02ee80065631d980c073a Mon Sep 17 00:00:00 2001
From: Mohamed Jinas <j@live.mv>
Date: Sat, 22 Aug 2020 02:30:21 +0500
Subject: [PATCH] Today style fix

---
 resources/js/components/TodaysPick.vue | 214 ++++++++++++++-----------
 1 file changed, 123 insertions(+), 91 deletions(-)

diff --git a/resources/js/components/TodaysPick.vue b/resources/js/components/TodaysPick.vue
index 66a3691..3ee9204 100644
--- a/resources/js/components/TodaysPick.vue
+++ b/resources/js/components/TodaysPick.vue
@@ -1,98 +1,45 @@
 <template>
-    <div>
-        <div class="py-6 flex justify-center lg:justify-end md:justify-end">
-            <h3
-                class="text-gray-800 text-3xl MvAamu"
-                style="direction: rtl; font-weight: 100;"
-            >
-                މިއަދުގެ ޙުލާސާ
-            </h3>
-        </div>
-        <!-- featured section -->
-        <div
-            class="flex flex-wrap md:flex-no-wrap space-x-0 md:space-x-6 mb-5 border-b"
-        >
-            <!-- sub-main posts -->
-            <div class="md:w-4/7">
-                <div v-for="subarticle in subarticles" :key="subarticle.id">
-                    <a
-                        :href="'/article/' + subarticle.id"
-                        class="rounded w-full flex flex-col md:flex-row mb-10"
+    <div class="container mx-auto mb-5 border-b">
+        <div>
+            <h2 class="text-gray-800 text-3xl text-right mt-3 mb-2 MvAamu"
+                style="font-weight: 100;" 
                     >
-                        <div class="bg-white rounded px-4">
-                            <div
-                                class="md:mt-0 text-gray-800 font-semibold text-xl xl:text-md lg:text-md mb-2  text-right leading-8 sm:leading-9 md:leading-9 MvTyper hover:underline"
-                                v-text="subarticle.title"
-                                style="direction:rtl;"
-                            ></div>
+               މިއަދުގެ ޚުލާޞާ
+            </h2>
+        </div>
 
-                            <div class="flex justify-end items-center">
-                                <div>
-                                    <p
-                                        class="font-semibold text-gray-700 text-sm capitalize MvTyper"
-                                        v-text="subarticle.source.name"
-                                    ></p>
-                                </div>
-
-                                <img
-                                    :src="subarticle.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"
-                            >
-                                <p
-                                    class="text-gray-600 text-sm text-right mb-2 MvTyper"
-                                    style="direction:rtl;"
-                                >
-                                    {{
-                                        subarticle.published_date | dhivehiDate
-                                    }}
-                                </p>
-                            </div>
-
-                            <p
-                                class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600 MvTyper"
-                                style="direction:rtl;"
-                                v-text="subarticle.body[0]"
-                            ></p>
-                        </div>
-                        <img
-                            :src="subarticle.featured_image"
-                            class="block md:hidden lg:block rounded-md h-64 md:h-32 m-4 md:m-0"
-                        />
-                    </a>
+        <div class="flex md:-mx-4 flex-wrap md:px-0 flex-row-reverse">
+            <div class="w-full md:w-1/2 px-4 py-4">
+                <div>
+                    <img :src="article.featured_image" class="rounded" />
                 </div>
-            </div>
-
-            <!-- main post -->
-            <div
-                class="mb-4 lg:mb-0 p-4 lg:p-0 w-full md:w-4/7 relative rounded block"
-                v-if="article"
-            >
-                <a :href="'/article/' + article.id">
-                    <img
-                        :src="article.featured_image"
-                        class="rounded-md object-cover w-full h-3/4"
-                    />
-                </a>
-
-                <a :href="'/article/' + article.id">
-                    <h1
-                        class="text-gray-800 text-xl xl:text-md lg:text-md font-bold mt-2 mb-2 leading-9 hover:underline text-right MvTyper"
+                <div class="flex flex-col justify-end">
+                    <a
+                        :href="'/article/' + article.id"
+                        class="text-2xl md:text-3xl lg:text-3xl leading-11 text-gray-700 pb-4 pt-4 MvTyper font-semibold hover:underline"
                         style="direction:rtl;"
                         v-text="article.title"
-                    ></h1>
-                </a>
+                    ></a>
+                      <p
+                        class="ml-1 mb-4 text-gray-600 text-right MvTyper"
+                        style="direction:rtl;"
+                    >
+                        {{ article.body[0].slice(0,200) }}...
+                    </p>
+                </div>
+             
 
-                <div class="flex justify-end items-center">
+                <div class="flex justify-end items-center mt-3">
                     <div>
-                        <p
-                            class="font-semibold text-gray-700 text-sm capitalize MvTyper"
-                            v-text="article.source.name"
-                        ></p>
+                        <a
+                            :href="'/source/' + article.source.slug"
+                            class="hover:underline"
+                        >
+                            <p
+                                class="font-semibold text-gray-700 text-sm capitalize MvTyper"
+                                v-text="article.source.name"
+                            ></p>
+                        </a>
                     </div>
 
                     <img
@@ -112,8 +59,91 @@
                     </p>
                 </div>
             </div>
+
+            <div class="w-full md:w-1/4">
+                <div class="flex md:-mx-4 flex-wrap mb-7 md:px-0 rtl">
+                    <div
+                        class="w-1/2 md:w-full lg:w-full px-4 md:px-8 lg:px-8 py-4"
+                        v-for="subarticle in subarticles"
+                        :key="subarticle.id"
+                    >
+                        <div class="flex justify-end">
+                            <img
+                                :src="subarticle.featured_image"
+                                class="rounded"
+                            />
+                        </div>
+                        <div class="flex justify-end">
+                            <a
+                                :href="'/article/' + subarticle.id"
+                                class="text-md leading-9 font-semibold py-3 text-gray-700 MvTyper"
+                                v-text="subarticle.title"
+                                style="direction:rtl;"
+                            ></a>
+                        </div>
+
+                        <div class="flex flex-row-reverse justify-between mt-2">
+                            <div class="flex justify-end items-center">
+                                <div>
+                                    <p
+                                        class="font-semibold text-gray-600 text-sm capitalize MvTyper"
+                                        v-text="subarticle.source.name"
+                                    ></p>
+                                </div>
+
+                                <img
+                                    :src="subarticle.source.logo"
+                                    class="h-8 w-8 rounded-full ml-1 object-cover"
+                                />
+                            </div>
+
+                           
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="w-full md:w-1/4 px-4 py-4">
+                <ul
+                    style="list-style: none; float: right; padding: 0px;"
+                    class="mt-8 sm:mt-8 md:mt-0 lg:mt-0"
+                >
+                    <li
+                        class="pb-8"
+                        v-for="listarticle in listarticles"
+                        :key="listarticle.id"
+                    >
+                        <div class="flex justify-end">
+                            <a
+                                :href="'/article/' + listarticle.id"
+                                class="text-md leading-normal text-gray-800 pb-4 MvTyper text-right hover:underline"
+                                style="direction:rtl;"
+                                v-text="listarticle.title"
+                            >
+                            </a>
+                        </div>
+                        <div class="border-b mb-3"></div>
+                        <div class="flex justify-between items-center flex-row-reverse">
+                            <div class="flex items-end flex-col">
+                                 <a
+                                :href="'/source/' + listarticle.source.slug"
+                                class="hover:underline"
+                            >
+                                <span
+                                    class="MvTyper text-sm text-gray-600"
+                                    v-text="listarticle.source.name"
+                                ></span>
+                                 </a>
+                            </div>
+
+                            <div>
+                                <span class="MvTyper text-sm text-gray-600">{{listarticle.published_date | dhivehiDate}}</span>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
         </div>
-        <!-- end featured section -->
     </div>
 </template>
 
@@ -124,8 +154,9 @@ export default {
     name: "todays-pick",
     data() {
         return {
-            article: null,
-            subarticles: []
+            article: [],
+            subarticles: [],
+            listarticles: []
         };
     },
 
@@ -142,7 +173,8 @@ export default {
             .get("api/today")
             .then(response => {
                 this.article = response.data[0];
-                this.subarticles = response.data.slice(1, 5);
+                this.subarticles = response.data.slice(1, 3);
+                this.listarticles = response.data.slice(3, 7);
             })
             .catch(error => {
                 console.log(error);