From 8dd7a7d0ed90c827d906af931c9278ce65d8a8fc Mon Sep 17 00:00:00 2001
From: saysayo <sayobamigbade@gmail.com>
Date: Wed, 9 Aug 2023 12:49:26 +0100
Subject: [PATCH] fixed layout

---
 .../components/learn_components.eml           | 29 ++++++++++---------
 src/ocamlorg_frontend/pages/learn.eml         |  5 ++++
 src/ocamlorg_frontend/pages/outreachy.eml     |  3 --
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/ocamlorg_frontend/components/learn_components.eml b/src/ocamlorg_frontend/components/learn_components.eml
index 3cd1dab6d1..902fc570b0 100644
--- a/src/ocamlorg_frontend/components/learn_components.eml
+++ b/src/ocamlorg_frontend/components/learn_components.eml
@@ -17,31 +17,34 @@ class_
 let book_tile 
 books
 = 
-  <div class="flex flex-row gap-x-6">
+  <div class="flex flex-col gap-6 sm:flex-row">
     <% books |> List.rev |> List.iteri (fun index (item : Data.Book.t) -> if (index < 2) then ( %>  
         <div class="flex flex-col">
             <img src="<%s Ocamlorg_static.Media.url item.cover %>" 
-                    class="mt-2 h-48 w-32 md:w-56 md:h-80 border border-gray-200"
+                    class="mt-2 w-56 h-80 border border-gray-200 object-contain"
                     alt="">
             <%s! skill_tag item.difficulty "mt-2 grow-0 w-28" %>
-            <h4 class="h-16 w-56 mt-3 text-gray-700 text-lg font-normal leading-6"> <%s item.title %> </h4>
-            <p class="mt-3 text-gray-700 text-sm font-normal whitespace-normal max-w-xs">Suitable for complete beginners to programming</p>
+            <h4 class="mt-1 w-56 text-gray-700 text-lg font-normal leading-6"> <%s item.title %> </h4>
+            <p class="mt-1 text-gray-700 text-sm font-normal whitespace-normal max-w-xs">Suitable for complete beginners to programming</p>
         </div>
       <% ) else %> 
     <% ); %>
   </div>
 
-
+type link = {href : string; name : string}
 
 let books_content_block 
 books
+~(link : link )
 = 
-  <div class="w-full h-[42rem] bg-default md:w-1/2 md:pl-28">
-    <div class="pt-4 text-default text-sm text-left font-medium leading-7 tracking-widest"> Books </div>
-    <h2 class="mt-2 text-default text-2xl text-left font-normal leading-7"> Recommended Books </h2>
-    <%s! book_tile books %>
-    <a href="<%s! Url.books %>" class="flex gap-4 mt-4 text-primary-700 text-lg font-bold inline-flex items-center underline leading-10"> 
-      See all books
-      <%s! Icons.arrow_small_right "h-6 w-6" %>
-    </a>
+  <div class="w-full bg-default lg:w-1/2">
+    <div class="w-80 sm:w-full md:w-full mx-auto">
+      <div class="pt-4 text-default text-sm text-left font-medium leading-7 tracking-widest"> BOOK </div>
+      <h2 class="mt-2 text-default text-2xl text-left font-normal leading-7"> Recommended Books </h2>
+      <%s! book_tile books %>
+      <a href="<%s link.href %>" class="flex gap-4 mt-4 text-primary-700 text-lg font-bold inline-flex items-center underline leading-10"> 
+        <%s link.name %>
+        <%s! Icons.arrow_small_right "h-6 w-6" %>
+      </a>
+    </div>
   </div>
\ No newline at end of file
diff --git a/src/ocamlorg_frontend/pages/learn.eml b/src/ocamlorg_frontend/pages/learn.eml
index f714f56094..508f1aaf93 100644
--- a/src/ocamlorg_frontend/pages/learn.eml
+++ b/src/ocamlorg_frontend/pages/learn.eml
@@ -53,6 +53,11 @@ Learn_layout.render
       </div>
     </div>
   </div>
+  <div class="lg:grid lg:grid-cols-2">
+    <%s! Learn_components.books_content_block Data.Book.featured ~link:{href = Url.books; name = "See All Books"} %>
+    <div class="w-full bg-learn-area-light-blue h-[42rem] lg:w-1/2">
+    </div>
+  </div>
   <div class="mt-10 lg:mt-20 border-b border-gray-200 pb-10">
     <h3 class="font-bold">Papers</h3>
     <div class="mt-6 text-lighter text-lg">
diff --git a/src/ocamlorg_frontend/pages/outreachy.eml b/src/ocamlorg_frontend/pages/outreachy.eml
index 22e4389166..489fb10fac 100644
--- a/src/ocamlorg_frontend/pages/outreachy.eml
+++ b/src/ocamlorg_frontend/pages/outreachy.eml
@@ -44,7 +44,4 @@ Layout.render
             </div>
         <% ); %>
     </div>
-</div>
-<div>
-<%s! Learn_components.books_content_block Data.Book.featured %>
 </div>
\ No newline at end of file