Merge pull request #101 from PyConColombia/issue-97

#97 Ajustar labels y estilos
PyConColombia · May 14, 2024 · 7c06f0a · 7c06f0a
2 parents 3c044ed + 3c88bc8
commit 7c06f0a
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 72 deletions.
diff --git a/src/app/[lang]/talks/[uniquepage]/Talk.js b/src/app/[lang]/talks/[uniquepage]/Talk.js
@@ -1,10 +1,15 @@
+'use client';
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import Image from 'next/image';
 import Link from 'next/link';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBullhorn } from '@fortawesome/free-solid-svg-icons';
+import { useI18n } from '@/contexts/I18nContext';
 
 import speakerList from '@/data/speakers.json';
 
@@ -17,54 +22,64 @@ const Talk = ({ talk, lang }) => {
   //   'text-border-blue'
   // ];
   const randomColor = (Math.random() * colorBorderSpeaker.length) | 0;
+  const i18nDictionary = useI18n();
 
   return (
     <section id="keynote">
       <div className="keynote-bg talk-content">
         <Container>
           <Row className="justify-content-center">
-            <Col xs={12}>
-              <div className="title-container">
-                <h1>{talk.submission}</h1>
-                <h2 className="title">
-                  <span className="bold">{talk.title[lang]}</span>
-                </h2>
-              </div>
-            </Col>
-            <Col xs={12}>
-              {talk.tags.map((tag) => (
-                <Link key={tag} href={`/${lang}/talks/tags/${tag}`}>
-                  <span className={`badge default ${tag}`}>{tag}</span>
-                </Link>
-              ))}
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={12}>
-              <div className="content content-left">
-                <h3>Authors</h3>
-                {talk.speakers.map((speaker) => {
-                  const speakerData = speakerList.find((s) => s.id === speaker);
-
-                  return (
-                    <Link key={speaker} href={`/${lang}/${speakerData.type}s/${speakerData.id}`}>
-                      <Image
-                        className={`img-keynote ${colorBorderSpeaker[randomColor]}`}
-                        src={`/images/${speakerData.type}/${speakerData.photo}`}
-                        alt="Speaker Image"
-                        width={300}
-                        height={300}
-                      />
+            <Col xs={12} md={10}>
+              <Row>
+                <Col xs={12}>
+                  <div className="title-container">
+                    <h2 className="title">
+                      <span className="bold">{talk.title[lang]}</span>
+                    </h2>
+                    <span className="talk-type">
+                      <FontAwesomeIcon icon={faBullhorn} />{' '}
+                      {i18nDictionary?.sections?.talks?.type[talk.submission]}
+                    </span>
+                  </div>
+                </Col>
+                <Col xs={12}>
+                  {talk.tags.map((tag) => (
+                    <Link key={tag} href={`/${lang}/talks/tags/${tag}`}>
+                      <span className={`badge default ${tag}`}>{tag}</span>
                     </Link>
-                  );
-                })}
-              </div>
-            </Col>
-            <Col xs={12}>
-              <div className="content content-left">
-                <h3>Description</h3>
-                <p>{talk.description[lang]}</p>
-              </div>
+                  ))}
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <div className="content content-left">
+                    <h3>Authors</h3>
+                    {talk.speakers.map((speaker) => {
+                      const speakerData = speakerList.find((s) => s.id === speaker);
+
+                      return (
+                        <Link
+                          key={speaker}
+                          href={`/${lang}/${speakerData.type}s/${speakerData.id}`}>
+                          <Image
+                            className={`img-keynote ${colorBorderSpeaker[randomColor]}`}
+                            src={`/images/${speakerData.type}/${speakerData.photo}`}
+                            alt="Speaker Image"
+                            width={300}
+                            height={300}
+                          />
+                        </Link>
+                      );
+                    })}
+                  </div>
+                </Col>
+                <Col xs={12}>
+                  <div className="content content-left">
+                    <h3>Description</h3>
+                    <p>{talk.description[lang]}</p>
+                  </div>
+                </Col>
+              </Row>
             </Col>
           </Row>
         </Container>

diff --git a/src/app/[lang]/talks/components/Card.js b/src/app/[lang]/talks/components/Card.js
@@ -18,9 +18,9 @@ const Card = ({ talkData, index, lang, langMapping }) => {
     <Row className="keynote-card talk-card justify-content-center">
       <Col xs={12}>
         <Link href={`/${lang}/talks/${talkData.id}`}>
-          <h3>
+          <h4>
             {talkData.title[lang]} ({langMapping && langMapping[talkData?.spoken_language]})
-          </h3>
+          </h4>
         </Link>
       </Col>
       <Col xs={12}>

diff --git a/src/app/[lang]/talks/components/Talks.js b/src/app/[lang]/talks/components/Talks.js
@@ -32,36 +32,42 @@ const Talks = ({ lang, talksList, defaultTag, allTags }) => {
         <Container>
           <Row className="justify-content-center">
             <Col xs={12} md={4}>
-              <Form.Group controlId="formBasicSelect">
-                <Form.Label>Filter</Form.Label>
-                <Form.Control
-                  as="select"
-                  value={tagFilter}
-                  onChange={(e) => {
-                    setTagFilter(e.target.value);
-                  }}>
-                  <option value="all">All</option>
-                  {allTags &&
-                    allTags.map((tag) => (
-                      <option key={tag} value={tag}>
-                        {tag}
-                      </option>
-                    ))}
-                </Form.Control>
-              </Form.Group>
+              <div className="filter-container">
+                <Form.Group controlId="formBasicSelect">
+                  <Form.Label>{i18nDictionary?.sections?.talks?.filter}</Form.Label>
+                  <Form.Control
+                    as="select"
+                    value={tagFilter}
+                    onChange={(e) => {
+                      setTagFilter(e.target.value);
+                    }}>
+                    <option value="all">{i18nDictionary?.sections?.talks?.tags?.all}</option>
+                    {allTags &&
+                      allTags.map((tag) => (
+                        <option key={tag} value={tag}>
+                          {i18nDictionary?.sections?.talks?.tags?.[tag] || tag}
+                        </option>
+                      ))}
+                  </Form.Control>
+                </Form.Group>
+              </div>
             </Col>
           </Row>
           <Row className="justify-content-center">
-            {talks.map((talk, index) => (
-              <Col xs={12} md={6} key={talk.id}>
-                <Card
-                  talkData={talk}
-                  index={index}
-                  lang={lang}
-                  langMapping={i18nDictionary?.languages}
-                />
-              </Col>
-            ))}
+            <Col xs={12} md={10}>
+              <Row>
+                {talks.map((talk, index) => (
+                  <Col xs={12} md={6} key={talk.id}>
+                    <Card
+                      talkData={talk}
+                      index={index}
+                      lang={lang}
+                      langMapping={i18nDictionary?.languages}
+                    />
+                  </Col>
+                ))}
+              </Row>
+            </Col>
           </Row>
         </Container>
       </div>

diff --git a/src/data/dictionaries/en.json b/src/data/dictionaries/en.json
@@ -21,7 +21,22 @@
       "description": "We are the new voices"
     },
     "talks": {
-      "title": "Talks"
+      "title": "Talks",
+      "filter": "Filter",
+      "tags": {
+        "all": "All",
+        "artificial-intelligence": "Artificial Intelligence",
+        "core-python": "Core Python",
+        "data-science": "Data Science",
+        "machine-learning": "Machine Learning",
+        "deep-learning": "Deep Learning",
+        "web-development": "Web Development",
+        "scientific-computing": "Scientific Computing"
+      },
+      "type": {
+        "workshop": "Workshop",
+        "talk": "Talk"
+      }
     },
     "team": {
       "title": "Team"

diff --git a/src/data/dictionaries/es.json b/src/data/dictionaries/es.json
@@ -21,7 +21,19 @@
       "description": "Somos las nuevas voces"
     },
     "talks": {
-      "title": "Ponencias"
+      "title": "Ponencias",
+      "filter": "Filtrar",
+      "tags": {
+        "all": "Todos",
+        "artificial-intelligence": "Inteligencia Artificial",
+        "core-python": "Core Python",
+        "data-science": "Ciencia de los datos",
+        "deep-learning": "Deep Learning"
+      },
+      "type": {
+        "workshop": "Taller",
+        "talk": "Ponencia"
+      }
     },
     "team": {
       "title": "Equipo"

diff --git a/src/styles/partials/_general.sass b/src/styles/partials/_general.sass
@@ -67,6 +67,24 @@ nav
             font-weight: 300
             padding: 20px 0
 
+    .dropdown-menu
+        padding: 5px
+        .dropdown-item
+            padding: 10px 15px
+
+            &:hover
+                background-color: variables.$purple
+                border-radius: 8px
+
+select
+    background: transparent !important
+    color: variables.$white !important
+    border: 2px solid variables.$fuchsia !important
+    &.form-control
+        &:focus
+            box-shadow: none
+            outline: none
+
 #loader
     background-color: variables.$main-bg-color
     color: variables.$main-text-color

diff --git a/src/styles/partials/_talk.sass b/src/styles/partials/_talk.sass
@@ -52,6 +52,9 @@
     .border-purple
         border: 10px solid variables.$border-purple
 
+.talk-card
+    margin: 20px 0 !important
+
 .talk-content
     .content
         padding-bottom: 25px
@@ -65,3 +68,18 @@
             width: auto
             height: auto
             margin: 10px
+
+    .talk-type
+        border: 1px solid variables.$pink
+        border-radius: 13px
+        color: variables.$pink
+        font-size: 20px
+        font-style: normal
+        font-weight: 400
+        letter-spacing: 2.5px
+        line-height: 31px
+        margin: 40px auto
+        padding: 5px 25px
+
+.filter-container
+    margin-bottom: 20px