Skip to content

fix: Responsive books on /aprende #62

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

Merged
merged 2 commits into from
Apr 29, 2024
Merged

fix: Responsive books on /aprende #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e01d4d8
fix: Responsive books on /aprende
Brayan-724 Apr 29, 2024
cf087d6
format
Brayan-724 Apr 29, 2024
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
167 changes: 87 additions & 80 deletions src/components/aprende/books.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
use leptos::{component, view, IntoView};
use leptos::{component, view, Children, IntoView};
use std::collections::HashMap;

use crate::components::ButtonLink;

Expand Down Expand Up @@ -41,39 +42,20 @@ BookData {
pub fn Books() -> impl IntoView {
let book = |book: BookData| {
view! {
<section class="w-full md:w-1/2 lg:w-1/3 min-h-[28rem] px-8">
<div class="relative group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] justify-between group transition-all transform min-h-[inherit]">
{book
.english
.then_some(|| {
view! {
<span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-blue-400 dark:border-slate-900 badge-container">
<span class="sr-only text-black badge-content transition-all transform">
"En Inglés"
</span>
</span>
}
})}
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
{book.name}
</h1> <p class="container mx-auto">{book.description}</p>
{(!book.complete)
.then_some(|| {
view! {
<div class="flex gap-2 items-center bg-orange-200 rounded-md px-2 py-3">
<p class="font-work-sans text-black text-sm">
"ℹ️ Este Libro está marcado como incompleto"
</p>
</div>
}
})}
<div class="mx-auto">
<ButtonLink href=book.url size="big" class="max-w-fit">
{book.url_name}
</ButtonLink>
</div>
</div>
</section>
<Book
title=book.name
description=book.description
link=book.url
link_text=book.url_name
incomplete=!book.complete
>
{book
.english
.then_some(|| {
view! { <Badge color="teal">"En Inglés"</Badge> }
})}

</Book>
}
};

Expand All @@ -95,51 +77,23 @@ pub fn Books() -> impl IntoView {
"Hemos dedicado tiempo y esfuerzo a adaptar libros al español, estamos orgullosos de compartir estos recursos, esperando que contribuyan al acceso y comprensión de valiosos conocimientos."
</p>
</div>
<div class="flex flex-col md:flex-row justify-center items-center container mx-auto mb-16 md:mb-28 gap-4">
<section class="w-full md:w-1/2 px-8">
<div class="relative group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] justify-between group transition-all transform">
<span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-teal-500 dark:border-slate-900 badge-container">
<span class="sr-only text-black badge-content transition-all transform ">
"Recomendado"
</span>
</span>
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
"El Lenguaje de Programación Rust"
</h1>
<p class="container mx-auto">
"Cariñosamente conocido como “el libro”, El Lenguaje de Programación Rust te dará una visión del lenguaje desde los principios básicos. Construirás unos cuantos proyectos por el camino y, al final, tendrás una comprensión sólida del lenguaje."
</p>
<div class="mx-auto">
<ButtonLink href="https://rustlang-es.org/rust-book-es" size="big">
"Ir a “El Libro”"
</ButtonLink>
</div>
</div>
</section>

<section class="w-full md:w-1/2 px-8 flex flex-col h-full">
<div class="group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between">
<span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-yellow-500 dark:border-slate-900 badge-container">
<span class="sr-only text-black badge-content transition-all transform ">
"¡En Progreso!"
</span>
</span>
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
"Rust para C#/.NET Developers"
</h1>
<p class="container mx-auto">
"La guía esta hecha por la misma Microsoft y es para desarrolladores experimentados en C#/.NET que exploran Rust. Ofrece una breve comparación, enlaces a recursos y respuestas rápidas."
</p>
<div class="mx-auto">
<ButtonLink
href="https://rustlang-es.org/rust-para-dotnet-devs"
size="big"
>
"Ir a la guía"
</ButtonLink>
</div>
</div>
</section>
<div class="grid grid-cols-1 md:grid-cols-2 container mx-auto mb-16 md:mb-28 gap-4 h-fit">
<Book
title="El lenguaje de Programación Rust"
description="Cariñosamente conocido como “el libro”, El Lenguaje de Programación Rust te dará una visión del lenguaje desde los principios básicos. Construirás unos cuantos proyectos por el camino y, al final, tendrás una comprensión sólida del lenguaje."
link="https://rustlang-es.org/rust-book-es"
link_text="Ir a “El Libro”"
>
<Badge color="teal">"Recomendado"</Badge>
</Book>
<Book
title="Rust para C#/.NET Developers"
description="La guía esta hecha por la misma Microsoft y es para desarrolladores experimentados en C#/.NET que exploran Rust. Ofrece una breve comparación, enlaces a recursos y respuestas rápidas."
link="https://rustlang-es.org/rust-para-dotnet-devs"
link_text="Ir a la guía"
>
<Badge color="yellow">"¡En Progreso!"</Badge>
</Book>
</div>

<div class="container mx-auto mb-5">
Expand All @@ -150,9 +104,62 @@ pub fn Books() -> impl IntoView {
"Estos son algunos otros libros que nos interesa compartir."
</p>
</div>
<div class="flex flex-row flex-wrap w-full gap-y-6 justify-center items-center container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full gap-y-6 container mx-auto">
{books_list}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No me convence mucho que esto sea grid, solo por un tema que prefiero que este centrado. No estoy seguro si se podria centrar usando grid.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hay que obtener una preview de esta PR para ver si no afecta a otras paginas igualmente

</div>
</section>
}
}

#[component]
fn Book(
#[prop(into)] title: String,
#[prop(into)] description: String,
#[prop(into)] link: String,
#[prop(into)] link_text: String,
#[prop(optional)] incomplete: bool,
children: Children,
) -> impl IntoView {
view! {
<article class="w-full h-full px-8">
<div class="h-full relative group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] justify-between group transition-all transform">
{children()}
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
{title}
</h1> <p class="container mx-auto text-pretty">{description}</p>
{incomplete
.then_some(|| {
view! {
<div class="flex gap-2 items-center bg-orange-200 rounded-md px-2 py-3">
<p class="font-work-sans text-black text-sm">
"ℹ️ Este Libro está marcado como incompleto"
</p>
</div>
}
})}
<div class="mx-auto">
<ButtonLink href=link size="big">
{link_text}
</ButtonLink>
</div>
</div>
</article>
}
}

#[component]
fn Badge(color: &'static str, children: Children) -> impl IntoView {
let colors = HashMap::from([("teal", "bg-teal-500"), ("yellow", "bg-yellow-500")]);
let color = (*colors.get(&color).expect("Unknown color")).to_string();

view! {
<span class=format!(
"absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 badge-container dark:border-slate-900 {}",
color,
)>
<span class="sr-only text-black badge-content transition-all transform">
{children()}
</span>
</span>
}
}
2 changes: 1 addition & 1 deletion src/components/button_link.rs
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you check that this does not break the style in other sites where it is used?

Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ pub fn ButtonLink(
href=href
target="_blank"
class=format!(
"tracking-wider font-work-sans border border-black dark:border-white flex items-center px-4 transition w-fit gap-x-4 sm:whitespace-nowrap max-w-[10rem] sm:max-w-none {} {} {} {}",
"tracking-wider text-center font-work-sans border border-black dark:border-white flex items-center px-4 transition w-fit gap-x-4 max-w-[10rem] sm:max-w-none {} {} {} {}",
current_color,
current_size,
class,
Expand Down
6 changes: 3 additions & 3 deletions src/components/cards/project_card.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,10 @@ pub fn ProjectCard(
button_text.to_string()
}}

</ButtonLink>
<span class="px-1">
</ButtonLink>
<span class="px-1">
<GithubIcon size=30/>
</span>
</span>
</div>
</a>
</div>
Expand Down
Loading