Skip to content

Commit 2206f1e

Browse files
lauraloglauralog
committed
texto responsive + courses y tools
1 parent 78c6b90 commit 2206f1e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+101
-96
lines changed

‎app/courses/page.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,11 @@ export default function Tools(props) {
3232
</Text>
3333
</div>
3434
<Divider size="md"/>
35-
<section className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
35+
<section className="grid gap-8 md:grid-cols-2">
3636
{courses.map(({title, title_es, subtitle, description_en, description_es, date, edition, route}, key) => {
3737
return (
3838
<CourseCard
39+
// key={key}
3940
title = {title}
4041
title_es = {title_es}
4142
subtitle = {subtitle}

‎app/research/page.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,8 +185,9 @@ function ResearchPage() {
185185
}
186186
)}
187187
</section>
188+
<Divider size="sm"/>
188189

189-
<div className="mt-4 w-full flex justify-center">
190+
<div className="w-full flex justify-center">
190191
{papersFiltered.length > papersToShow && (
191192
<Button
192193
onClick={handleLoadMore}
@@ -202,6 +203,8 @@ function ResearchPage() {
202203
</Button>
203204
)}
204205
</div>
206+
<Divider size="sm"/>
207+
205208
</main>
206209
</div>
207210
);

‎app/tools/page.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default function Tools(props) {
5151
</Text>
5252
</div>
5353
<Divider size="md" />
54-
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
54+
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
5555
{tools.map(
5656
(
5757
{ title, description_en, description_es, route, img, github },

‎components/cards/PublicationCard.jsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Slot } from "@radix-ui/react-slot";
99
import { cva } from "class-variance-authority";
1010
import { cn } from "@/lib/utils";
1111

12+
1213
// Data
1314
import { useTranslation } from "react-i18next";
1415
import { researchlines } from "@/constants/researchlines";
@@ -104,49 +105,49 @@ const Card = React.forwardRef(
104105
<CardHeader className="flex flex-wrap">
105106
{Array.isArray(researchLine)
106107
? researchLine.map((researchline, index) => {
107-
let backgroundColorResearchLine;
108-
let textColorResearchLine;
108+
let researchLineColorStyles;
109109
let backgroundIcon;
110+
let iconSpacing;
110111
// coge solo la primera researchline para ponerle el fondo
111112
switch (deleteSpaces(researchline)) {
112113
case "data":
113-
backgroundColorResearchLine = "bg-data-500/40"; // Para la categoría 'data'
114+
researchLineColorStyles = "bg-data-500/40 text-data-300";
114115
backgroundIcon = "assets/img/icons/data_icon.svg";
115-
textColorResearchLine = "text-data-300";
116+
iconSpacing = "mb-[2px]"
116117
break;
117118
case "videoconference":
118-
backgroundColorResearchLine = "bg-videoconference-600/60"; // Para la categoría 'videoconference'
119+
researchLineColorStyles = "bg-videoconference-600/60 text-videoconference-200";
119120
backgroundIcon =
120121
"assets/img/icons/videoconference_icon.svg";
121-
textColorResearchLine = "text-videoconference-200";
122122
break;
123123
case "ai":
124-
backgroundColorResearchLine = "bg-ai-700/40"; // Para la categoría 'ai'
124+
researchLineColorStyles = "bg-ai-700/40 text-ai-400";
125125
backgroundIcon = "assets/img/icons/ai_icon.svg";
126-
textColorResearchLine = "text-ai-400";
126+
iconSpacing = "mb-.5"
127127
break;
128128
case "computing":
129-
backgroundColorResearchLine = "bg-networks-600/60";
129+
researchLineColorStyles = "bg-networks-600/60 text-networks-200";
130130
backgroundIcon = "assets/img/icons/networks_icon.svg";
131-
textColorResearchLine = "text-networks-200"; // Para la categoría 'ai'
131+
iconSpacing = "mb-.5"
132132
break;
133133
case "e-learning":
134-
backgroundColorResearchLine = "bg-eLearning-600/60";
134+
researchLineColorStyles = "bg-eLearning-600/60 text-eLearning-200";
135135
backgroundIcon = "assets/img/icons/e-learning_icon.svg";
136-
textColorResearchLine = "text-eLearning-200"; // Para la categoría 'ai'
136+
iconSpacing = "mb-1"
137137
break;
138138
default:
139-
backgroundColorResearchLine = "bg-gray-500"; // Valor por defecto si no hay coincidencia
139+
researchLineColorStyles = "bg-gray-500"; // Valor por defecto si no hay coincidencia
140+
iconSpacing = "mb-1"
140141
break;
141142
}
142143

143144
return (
144145
<Mybadge
145146
key={index}
146-
className={`pt-1.5 ${backgroundColorResearchLine} text-white ${textColorResearchLine} border-none tracking-widest`}
147+
className={`pt-1.5 ${researchLineColorStyles} text-white border-none tracking-widest`}
147148
>
148149
<Image
149-
className={"h-[16px] pr-2 mb-[2px]"}
150+
className={`pr-2 mb- ${iconSpacing}`}
150151
src={backgroundIcon}
151152
alt={"Research line icon"}
152153
fit="contain"
@@ -163,15 +164,15 @@ const Card = React.forwardRef(
163164
</CardHeader>
164165
<CardBody>
165166
<CardContent className="gap-1">
166-
<CardTitle level="h5" className="text-pretty xl:pr-4">{title}</CardTitle>
167+
<CardTitle level="h5" className="text-pretty">{title}</CardTitle>
167168
<div className="flex">
168-
<Text type="small" className="font-bold">
169+
<Text type="small" className="font-bold text-sm">
169170
{t(`research.filter.${category}`)}
170171
</Text>
171172
<span className="mx-2 mb-2">·</span>
172173
<Text type="small">{date && date[0]}</Text>
173174
</div>
174-
<Text className="text-gray-300/90 mb-4 lg:pr-16" type="p">
175+
<Text className="text-gray-300/90 mb-4 lg:pr-16" type="small">
175176
{author}
176177
</Text>
177178
<div className="flex flex-wrap gap-1.5">
@@ -180,11 +181,10 @@ const Card = React.forwardRef(
180181
return (
181182
<Mybadge
182183
key={index}
183-
size="xs"
184-
className="bg-[#000000] border-none text-gray-300"
184+
size="sm"
185+
className="bg-[#000000] border-none text-gray-300 capitalize"
185186
>
186-
{" "}
187-
{keyword}{" "}
187+
{keyword}
188188
</Mybadge>
189189
);
190190
})

‎components/cards/TeamCard.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const Card = React.forwardRef(
6161
)}
6262

6363
<CardContent className="flex flex-col items-start mb-3">
64-
<CardTitle level="h5" className="text-inherit text-center">
64+
<CardTitle level="h4" className="text-inherit text-center">
6565
{name}
6666
</CardTitle>
6767
{role && <CardDescription type="short-p">{role}</CardDescription>}

‎components/cards/courseCard.jsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
// icons
2424
import { ExternalLinkIcon } from "@radix-ui/react-icons";
2525

26+
2627
const Card = React.forwardRef(
2728
(
2829
{title, title_es, subtitle, description_en, description_es, date, category, route},
@@ -43,21 +44,22 @@ const Card = React.forwardRef(
4344

4445
return (
4546
<CustomCard
46-
className={'px-3 bg-cover bg-center bg-no-repeat border border-pink-400'}
47+
className={'p-6 bg-cover bg-center bg-no-repeat text-text bg-background-300 rounded-md'}
4748
style={{
4849
backgroundImage: "url('assets/fondos/background_image.png')",
4950
}}
5051
>
51-
<header className="flex w-full gap-2 items-center">
52-
<Mybadge variant="primary" size="md">
53-
{date}
54-
</Mybadge>
55-
<Mybadge variant="primary" size="md">
56-
{category}
57-
</Mybadge>
58-
<span className="spacer w-full" />
59-
<Button href={route} variant="ghost" size="lg">
60-
Ir al curso <ExternalLinkIcon className="w-5 h-5" />
52+
<header className="flex w-full justify-between items-center mb-2">
53+
<span className="w-fit flex justify-start gap-2">
54+
<Mybadge variant="secondary" className={'bg-background-600/50 text-white'}>
55+
{date}
56+
</Mybadge>
57+
<Mybadge variant="secondary" className={'bg-background-600/50 text-white'}>
58+
{category}
59+
</Mybadge>
60+
</span>
61+
<Button href={route} variant="ghost" size="lg" className="flex w-fit items-center px-10 py-0">
62+
Ir al curso<ExternalLinkIcon className="h-8 min-w-6"/>
6163
</Button>
6264
</header>
6365
{/* <Image
@@ -68,9 +70,9 @@ const Card = React.forwardRef(
6870
/> */}
6971
<CardBody>
7072
<CardContent>
71-
<CardTitle level="h5">{title_translation}</CardTitle>
73+
<CardTitle level="h4">{title_translation}</CardTitle>
7274
<CardSubtitle level="h6">{subtitle}</CardSubtitle>
73-
<CardDescription description={description_translation}></CardDescription>
75+
<CardDescription description={description_translation}/>
7476
{/* <div className={tagContainerClasses}>{renderTags(tags)}</div> */}
7577
</CardContent>
7678
</CardBody>

‎components/cards/toolCard.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const Card = React.forwardRef(
3636
}
3737

3838
return (
39-
<CustomCard>
39+
<CustomCard className="p-3 rounded-2xl border border-white">
4040
{img && (
4141
<Image
4242
src={process.env.PUBLIC_URL + img || "placeholder.jpg"}
@@ -45,10 +45,10 @@ const Card = React.forwardRef(
4545
fit="contain"
4646
/>
4747
)}
48-
<CardBody className="h-full sm:-mb-16"> {/* no quitar margin, está ajustando la altura */}
49-
<CardContent>
48+
<CardBody className="h-fit sm:h-full sm:-mb-20"> {/* no quitar margin, está ajustando la altura */}
49+
<CardContent className="h-fit md:h-full">
5050
<CardTitle>{title}</CardTitle>
51-
<CardDescription>{description_translation}</CardDescription>
51+
<CardDescription description={description_translation}/>
5252
</CardContent>
5353
</CardBody>
5454

@@ -76,4 +76,4 @@ const Card = React.forwardRef(
7676

7777
Card.displayName = "ToolCard";
7878

79-
export default Card;
79+
export default Card;

‎components/ui/Text.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const Text = React.forwardRef(({ type = "p", children, className, ...props }, re
3333
{/*"text-balance"*/},
3434
{
3535
" text-18 sm:text-base text-pretty": type === "p",
36-
"text-base sm:text-sm text-wrap leading-normal": type === "small",
36+
"text-base text-wrap leading-normal": type === "small",
3737
" text-18 sm:text-base": type === "short-p",
3838
},
3939
className

‎components/ui/button.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ const ButtonVariants = cva(
2929
},
3030
size: {
3131
default: "px-4 py-2 text-base ",
32-
sm: "px-3 py-1.5 text-sm font-semibold",
33-
lg: "px-5 py-2.5 text-lg",
32+
sm: "px-3 py-1.5 text-base md:text-sm font-semibold",
33+
lg: "px-5 py-2 text-lg",
3434
icon: "px-2.5 py-2.5 min-w-7 w-7 min-h-7 h-7",
3535
icon_sm:"w-6 h-6 min-w-6 min-h-6 p-0"
3636
},

‎components/ui/customCard.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,4 +191,4 @@ export {
191191
CardSubtitle,
192192
CardDescription,
193193
CardContent,
194-
};
194+
};

0 commit comments

Comments
 (0)