fix: OCaml Planet layout (UI) (#2734)

ocaml · Oct 1, 2024 · 8ff630f · 8ff630f
1 parent 0778f67
commit 8ff630f
Showing 1 changed file with 24 additions and 25 deletions.
diff --git a/src/ocamlorg_frontend/pages/ocaml_planet.eml b/src/ocamlorg_frontend/pages/ocaml_planet.eml
@@ -26,7 +26,7 @@ let render_blog_post (post : Data.Planet.entry) =
       <div class="flex justify-center w-100 items-center mt-4 md:mt-4">
         <% (match post with | BlogPost p -> %>
           <% (match p.preview_image with | None -> %>                 
-            <div class="w-full md:w-[300px]">
+            <div class="w-full lg:w-[300px]">
                 <a href="<%s p.url %>">
                   <div class="relative w-full h-[194px] overflow-hidden bg-event-5">
                     <div class="flex flex-col justify-center items-center z-10 absolute top-0 right-0 bottom-0 left-0">
@@ -38,12 +38,12 @@ let render_blog_post (post : Data.Planet.entry) =
                 </a>
             </div>
           <% | Some image -> %>
-              <div class="w-full md:w-[300px]">
+              <div class="w-full lg:w-[300px]">
                   <a href="<%s p.url %>"><img class="w-full" src="<%s image %>" alt=""></a>
               </div>   
           <% ); %>
         <% | Video v -> %>
-            <div class="w-full md:w-[300px]">
+            <div class="w-full lg:w-[300px]">
                 <a href="<%s v.url %>"><img class="w-full" src="<%s v.thumbnail %>" alt=""></a>
             </div>  
         <% ); %>
@@ -60,28 +60,7 @@ News_layout.single_column_layout
 <div class="bg-white dark:bg-dark-background py-12">
   <div class="container-fluid wide">
     <div class="grid grid:cols-1 lg:grid-cols-3 gap-4">
-        <div class="col-span-2">
-          <div class="h-max mt-2 border-primary dark:border-primary flex mb-4">
-            <form class="flex flex-col md:flex-row w-max gap-2" action="<%s Url.ocaml_planet %>" method="GET">
-                  <label for="category" class="sr-only mb-2 md:mb-0">Location</label>
-                  <%s! Forms.select
-                    ~attrs:{|id="category" name="category" onchange="this.form.submit()"|}
-                    ~options:([("All", "All"); ("Article", "Article"); ("Video", "Video")])
-                    ~selected:category
-                   "" %>
-            </form>
-          </div>
-          <div class="flex flex-col">
-            <%s! planet
-              |> List.map (fun (item : Data.Planet.entry) -> render_blog_post item )
-              |> String.concat "\n" ; %>
-          </div>
-          <div class="flex items-start">
-            <%s! Pagination.render pagination_info %> 
-          </div>
-
-        </div> 
-        <div class="col-span-1 lg:flex flex-col p-4 hidden">
+        <div class="col-span-1 lg:flex flex-col p-4 lg:order-2">
           <div class="border-b border-separator_20 dark:border-dark-separator_30 pb-4 mb-4">
             <p class="uppercase text-sm text-content dark:text-dark-content tracking-widest font-medium mb-2">Blog</p>
             <h1 class="font-bold text-2xl text-title dark:text-dark-title mb-2">The OCaml Planet</h1>
@@ -101,6 +80,26 @@ News_layout.single_column_layout
              </div>
           </div>
         </div>
+        <div class="col-span-2 lg:order-1">
+          <div class="h-max mt-2 border-primary dark:border-primary flex mb-4">
+            <form class="flex flex-col md:flex-row w-max gap-2" action="<%s Url.ocaml_planet %>" method="GET">
+                  <label for="category" class="sr-only mb-2 md:mb-0">Location</label>
+                  <%s! Forms.select
+                    ~attrs:{|id="category" name="category" onchange="this.form.submit()"|}
+                    ~options:([("All", "All"); ("Article", "Article"); ("Video", "Video")])
+                    ~selected:category
+                   "" %>
+            </form>
+          </div>
+          <div class="flex flex-col">
+            <%s! planet
+              |> List.map (fun (item : Data.Planet.entry) -> render_blog_post item )
+              |> String.concat "\n" ; %>
+          </div>
+          <div class="flex items-start">
+            <%s! Pagination.render pagination_info %> 
+          </div>
+        </div> 
     </div> 
   </div>
 </div>