Skip to content

Commit ea55778

Browse files
SergioRiberaSergioRibera
authored
Merge pull request #62 from Brayan-724/main
fix: Responsive books on /aprende
2 parents fde71ff + cf087d6 commit ea55778

File tree

3 files changed

+91
-84
lines changed

3 files changed

+91
-84
lines changed

‎src/components/aprende/books.rs

Lines changed: 87 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
use leptos::{component, view, IntoView};
1+
use leptos::{component, view, Children, IntoView};
2+
use std::collections::HashMap;
23

34
use crate::components::ButtonLink;
45

@@ -41,39 +42,20 @@ BookData {
4142
pub fn Books() -> impl IntoView {
4243
let book = |book: BookData| {
4344
view! {
44-
<section class="w-full md:w-1/2 lg:w-1/3 min-h-[28rem] px-8">
45-
<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]">
46-
{book
47-
.english
48-
.then_some(|| {
49-
view! {
50-
<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">
51-
<span class="sr-only text-black badge-content transition-all transform">
52-
"En Inglés"
53-
</span>
54-
</span>
55-
}
56-
})}
57-
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
58-
{book.name}
59-
</h1> <p class="container mx-auto">{book.description}</p>
60-
{(!book.complete)
61-
.then_some(|| {
62-
view! {
63-
<div class="flex gap-2 items-center bg-orange-200 rounded-md px-2 py-3">
64-
<p class="font-work-sans text-black text-sm">
65-
"ℹ️ Este Libro está marcado como incompleto"
66-
</p>
67-
</div>
68-
}
69-
})}
70-
<div class="mx-auto">
71-
<ButtonLink href=book.url size="big" class="max-w-fit">
72-
{book.url_name}
73-
</ButtonLink>
74-
</div>
75-
</div>
76-
</section>
45+
<Book
46+
title=book.name
47+
description=book.description
48+
link=book.url
49+
link_text=book.url_name
50+
incomplete=!book.complete
51+
>
52+
{book
53+
.english
54+
.then_some(|| {
55+
view! { <Badge color="teal">"En Inglés"</Badge> }
56+
})}
57+
58+
</Book>
7759
}
7860
};
7961

@@ -95,51 +77,23 @@ pub fn Books() -> impl IntoView {
9577
"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."
9678
</p>
9779
</div>
98-
<div class="flex flex-col md:flex-row justify-center items-center container mx-auto mb-16 md:mb-28 gap-4">
99-
<section class="w-full md:w-1/2 px-8">
100-
<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">
101-
<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">
102-
<span class="sr-only text-black badge-content transition-all transform ">
103-
"Recomendado"
104-
</span>
105-
</span>
106-
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
107-
"El Lenguaje de Programación Rust"
108-
</h1>
109-
<p class="container mx-auto">
110-
"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."
111-
</p>
112-
<div class="mx-auto">
113-
<ButtonLink href="https://rustlang-es.org/rust-book-es" size="big">
114-
"Ir a “El Libro”"
115-
</ButtonLink>
116-
</div>
117-
</div>
118-
</section>
119-
120-
<section class="w-full md:w-1/2 px-8 flex flex-col h-full">
121-
<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">
122-
<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">
123-
<span class="sr-only text-black badge-content transition-all transform ">
124-
"¡En Progreso!"
125-
</span>
126-
</span>
127-
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
128-
"Rust para C#/.NET Developers"
129-
</h1>
130-
<p class="container mx-auto">
131-
"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."
132-
</p>
133-
<div class="mx-auto">
134-
<ButtonLink
135-
href="https://rustlang-es.org/rust-para-dotnet-devs"
136-
size="big"
137-
>
138-
"Ir a la guía"
139-
</ButtonLink>
140-
</div>
141-
</div>
142-
</section>
80+
<div class="grid grid-cols-1 md:grid-cols-2 container mx-auto mb-16 md:mb-28 gap-4 h-fit">
81+
<Book
82+
title="El lenguaje de Programación Rust"
83+
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."
84+
link="https://rustlang-es.org/rust-book-es"
85+
link_text="Ir a “El Libro”"
86+
>
87+
<Badge color="teal">"Recomendado"</Badge>
88+
</Book>
89+
<Book
90+
title="Rust para C#/.NET Developers"
91+
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."
92+
link="https://rustlang-es.org/rust-para-dotnet-devs"
93+
link_text="Ir a la guía"
94+
>
95+
<Badge color="yellow">"¡En Progreso!"</Badge>
96+
</Book>
14397
</div>
14498

14599
<div class="container mx-auto mb-5">
@@ -150,9 +104,62 @@ pub fn Books() -> impl IntoView {
150104
"Estos son algunos otros libros que nos interesa compartir."
151105
</p>
152106
</div>
153-
<div class="flex flex-row flex-wrap w-full gap-y-6 justify-center items-center container mx-auto">
107+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full gap-y-6 container mx-auto">
154108
{books_list}
155109
</div>
156110
</section>
157111
}
158112
}
113+
114+
#[component]
115+
fn Book(
116+
#[prop(into)] title: String,
117+
#[prop(into)] description: String,
118+
#[prop(into)] link: String,
119+
#[prop(into)] link_text: String,
120+
#[prop(optional)] incomplete: bool,
121+
children: Children,
122+
) -> impl IntoView {
123+
view! {
124+
<article class="w-full h-full px-8">
125+
<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">
126+
{children()}
127+
<h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
128+
{title}
129+
</h1> <p class="container mx-auto text-pretty">{description}</p>
130+
{incomplete
131+
.then_some(|| {
132+
view! {
133+
<div class="flex gap-2 items-center bg-orange-200 rounded-md px-2 py-3">
134+
<p class="font-work-sans text-black text-sm">
135+
"ℹ️ Este Libro está marcado como incompleto"
136+
</p>
137+
</div>
138+
}
139+
})}
140+
<div class="mx-auto">
141+
<ButtonLink href=link size="big">
142+
{link_text}
143+
</ButtonLink>
144+
</div>
145+
</div>
146+
</article>
147+
}
148+
}
149+
150+
#[component]
151+
fn Badge(color: &'static str, children: Children) -> impl IntoView {
152+
let colors = HashMap::from([("teal", "bg-teal-500"), ("yellow", "bg-yellow-500")]);
153+
let color = (*colors.get(&color).expect("Unknown color")).to_string();
154+
155+
view! {
156+
<span class=format!(
157+
"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 {}",
158+
color,
159+
)>
160+
<span class="sr-only text-black badge-content transition-all transform">
161+
{children()}
162+
</span>
163+
</span>
164+
}
165+
}

‎src/components/button_link.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ pub fn ButtonLink(
3131
href=href
3232
target="_blank"
3333
class=format!(
34-
"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 {} {} {} {}",
34+
"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 {} {} {} {}",
3535
current_color,
3636
current_size,
3737
class,

‎src/components/cards/project_card.rs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,10 @@ pub fn ProjectCard(
5555
button_text.to_string()
5656
}}
5757

58-
</ButtonLink>
59-
<span class="px-1">
58+
</ButtonLink>
59+
<span class="px-1">
6060
<GithubIcon size=30/>
61-
</span>
61+
</span>
6262
</div>
6363
</a>
6464
</div>

0 commit comments

Comments
 (0)