Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: OCaml Planet layout (UI) #2734

Merged
merged 1 commit into from
Oct 1, 2024
Merged

fix: OCaml Planet layout (UI) #2734

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 24 additions & 25 deletions src/ocamlorg_frontend/pages/ocaml_planet.eml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
<% ); %>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading