CURSOS: estandarización botones y tags, añadido degradado. PROYECTOS:…

… Comienzo maquetación scss
CyberAula · May 9, 2024 · f634e3c · f634e3c
1 parent 3b7ac25
commit f634e3c
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 22 deletions.
diff --git a/app/courses/page.js b/app/courses/page.js
@@ -23,11 +23,11 @@ export default function Courses() {
         <h1>Courses</h1>
       </div>
       <main>
-        <section className="lg:m-28 md:m-14 sm:m-8">
-          <div>courses filter</div>
+        <section className="lg:mx-28 md:mx-14 sm:mx-8 lg:my-12 md:my-8 sm:my-4">
+
 
           <div className=" grid gap-4 md:grid-cols-2 sm:grid-cols-1">
-            {courses.map(({ date, gradient, title, description, route }) => {
+            {courses.map(({ date, gradient, edition, title, description, route }) => {
               return (
                 <div
                   key={title}
@@ -41,7 +41,7 @@ export default function Courses() {
                           <div>{date}</div>
                         </div>
                         <div className="year_tag">
-                          <div> Primera edición</div>
+                          <div> {edition}</div>
                         </div>
                         </div>
                         <div className="course_route">

diff --git a/app/projects/page.js b/app/projects/page.js
@@ -46,7 +46,7 @@ export default function Projects() {
 			                );
 			        	})}
 			        </section> */}
-        <section>
+        <section className="lg:mx-28 md:mx-14 sm:mx-8 lg:my-12 md:my-8 sm:my-4">
           <ProjectCard />
         </section>
       </main>

diff --git a/app/sass/partials/_courses.sass b/app/sass/partials/_courses.sass
@@ -30,16 +30,22 @@ $windowWidth: 100vw
         .year_tag 
             display: flex
             div
-                background-color: rgb(0, 0, 0,0.4)
+                background-color: rgb(0, 0, 0,0.3)
                 display: flex
                 align-items: center
                 padding: 1px 8px 
                 font-weight: 500
                 border-radius: 4px
         .course_route
             border: 1px solid white
-            border-radius: 4px
+            border-radius: 24px
             padding: 0.2rem 0.8rem 0.6rem 0.8rem
+            transition: 200ms ease-in-out
+            &:hover
+                background: white
+                transition: 200ms ease-in-out
+                @apply text-blue-950
+
             a 
                 display: flex
             svg
@@ -49,12 +55,13 @@ $windowWidth: 100vw
                 font-size: 1rem
                 margin-left: 0.6rem
 
+
 @media (min-width: 770px)
     .course
         display: flex
         color: white
         font-weight: 400
-        height: $windowHeight  /2.25
+        height: $windowHeight  /2.5
         overflow: hidden    
         .card_container_top
             height: 32px
@@ -85,32 +92,32 @@ $windowWidth: 100vw
                 transition: ease-in-out 300ms
                 opacity: 0
                 display: none
-                transform: translateY(64%)
+
                 margin-bottom: 0.6em
                 small
                     margin-top:0
                     display: block
-                    font-size: 0.85em
+                    font-size: 1.1rem
                     line-height: 1.4em
                     font-weight: 400
-                    max-height:80px
+                    max-height:160px
 
 
 
         &:hover 
             .course_text_block
-                transform: translateY(0%)
+
                 transition: ease-in-out 300ms
                 .course_description
                     position: relative
                     transition: ease-in-out 300ms
                     opacity: 1
-                    transform: translateY(0%)
+
                     max-height: $windowHeight/5
                     display: -webkit-box
                     small 
                         display: -webkit-box
-                        -webkit-line-clamp: 4
+                        -webkit-line-clamp: 6
                         -webkit-box-orient: vertical
                         overflow: hidden
                         text-overflow: ellipsis
@@ -144,7 +151,16 @@ $windowWidth: 100vw
         background: linear-gradient(to top, rgba(83,64,255,0.9) 0%, rgba(83,64,255,0.9) 30%, rgba(196,141,116,0.9) 100%), url($bg-img)
         background-size: contain
         background-position: center
-
+
+.bg-yellow-gradient
+    background: linear-gradient(225deg,  rgba(255,127,0,0.8748686974789917)0%, rgba(192,112,168,0.8860731792717087) 100%), url($bg-img) 
+    background-size: contain
+    background-position: center 
+    &:hover 
+        background: linear-gradient(180deg, rgba(255,127,0,0.8748686974789917) 0%,rgba(133,90,186,0.930891106442577) 70%), url($bg-img)
+        background-size: contain
+        background-position: center
+
 .course_main 
     position: relative
     width: 100%

diff --git a/app/sass/partials/_projects.sass b/app/sass/partials/_projects.sass
@@ -4,11 +4,12 @@
 .project_cards
     .filter_options
         display: flex
-
         button
             border-radius: 4px
             border-color: none
     .project_card
+        @apply bg-ca_blue-200
+        border-radius: 8px
         .year_and_cta
             display: flex
             .date

diff --git a/components/projectCard.js b/components/projectCard.js
@@ -18,16 +18,18 @@ export default function projectCards(props) {
     }
   };
   return (
-    <div className="project_cards">
-      <div className="filter_options">
+    <div>
+    <div className="filter_options flex">
         <button onClick={() => handleCategoryChange("all")}>All</button>
         <button onClick={() => handleCategoryChange("ind")}>Projects - individual</button>
         <button onClick={() => handleCategoryChange("erg")}>Educational Research Group (GIE/ERG)</button>
         <button onClick={() => handleCategoryChange("other")}>Other</button>
       </div>
+    <div className="project_cards md:grid md:grid-cols-2 md:gap-4">
+
       {projectCards.map(
         ({ date, route, title, subtitle, tags, category }, index) => (
-          <div key={index} className="project_card">
+          <div key={index} className="project_card mb-4 p-4 md:p-6">
             <div className="year_and_cta">
               <div className="date">{date}</div>
               <a href={route}>details</a>
@@ -41,5 +43,6 @@ export default function projectCards(props) {
         )
       )}
     </div>
+    </div>
   );
 }
diff --git a/constants/courses.js b/constants/courses.js
@@ -1,6 +1,7 @@
 export const mycourses = [	
 	{	"date": "2023",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "2º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
 		"title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web",
 		"description": "Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas.",
@@ -9,6 +10,7 @@ export const mycourses = [
     {
 		"date": "2023",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "2º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=378",
 		"title": "Desarrollo de aplicaciones con React y React Native",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas.",
@@ -17,30 +19,34 @@ export const mycourses = [
     {
 		"date": "2023",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "3º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=361",
 		"title": "Desarrollo de un Proyecto Fullstack con JavaScript",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
-	    "gradient": "bg-blue-gradient",
+	    "gradient": "bg-purple-gradient",
 	},
     {
 		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "3º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=194",
 		"title": "Desarrollo Backend con Node.js, Express y BBDDs",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
-		"gradient": "bg-purple-gradient",
+		"gradient": "bg-yellow-gradient",
 	},
 	{
 		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "11º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=256",
 		"title": "Desarrollo Frontend con HTML, CSS y JavaScript",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
-		"gradient": "bg-blue-gradient",
+		"gradient": "bg-yellow-gradient",
 	},
 	{
 		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos-png",
+		"edition": "4º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=267",
 		"title": "Gestión de proyectos software con Git y GitHub",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
@@ -49,6 +55,7 @@ export const mycourses = [
     {
 		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos.png",
+		"edition": "5º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=264",
 		"title": "Siete habilidades clave en la era digital",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
@@ -57,6 +64,7 @@ export const mycourses = [
     {
 		"date": "2018",
 		"logo": "/assets/img/courses/fondo-cursos-png",
+		"edition": "2º edición",
 		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=51",
 		"title": "Introducción a LINUX como entorno de desarrollo de sistemas software",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",