From a2c88ef1f0405e598df198abb386cc3c44b91728 Mon Sep 17 00:00:00 2001 From: sleepndraw Date: Wed, 19 Jun 2024 16:08:44 +0200 Subject: [PATCH] maquetacion publicaciones --- app/research/page.js | 49 ++++++------ app/sass/components/_buttons.sass | 34 +++++---- app/sass/components/_inputs.sass | 51 +++++++++++++ app/sass/main.scss | 1 + app/sass/partials/_publications.sass | 86 ++++++---------------- app/sass/partials/_recentPublications.sass | 26 +++---- components/RecentPublications.js | 4 +- components/ResearchFilter.js | 2 +- 8 files changed, 137 insertions(+), 116 deletions(-) create mode 100644 app/sass/components/_inputs.sass diff --git a/app/research/page.js b/app/research/page.js index 62d7f4e..f15710e 100644 --- a/app/research/page.js +++ b/app/research/page.js @@ -78,20 +78,20 @@ export default function Research() { return (
-
+
- {doi ? ( - - ) : null} + {doi ? ( + + ) : null}
- ); })} diff --git a/app/sass/components/_buttons.sass b/app/sass/components/_buttons.sass index bc8dbd8..42ddfb9 100644 --- a/app/sass/components/_buttons.sass +++ b/app/sass/components/_buttons.sass @@ -17,18 +17,26 @@ svg align-self: center margin-right: 0.6rem - - +@mixin link-button + @include button + border: none + @apply text-gray-100 + &:hover + color: white + transition: 200ms ease-in-out + @apply text-ffdGreen-300 + text-decoration: underline + text-decoration-thickness: 1px @mixin button-load-more @include button - border-radius: 24px + font-size: $button padding: 0.5rem 1.2rem 0.7rem 1.4rem - color: $ca-blue-600 - background: $ca-blue-200 + background: transparent + @apply text-gray-100 cursor: pointer &:hover - background: $ca-blue-300 - color: $ca-blue-700 + @apply bg-gray-100 text-black + font-size: $xl-text transition: 200ms ease-in-out @mixin border-button-white @@ -57,16 +65,16 @@ background-color: $ca-blue-600 @mixin button-load-more - border-radius: 24px + border: 1px solid $gray-100 padding: 0.5rem 1.2rem 0.7rem 1.4rem - color: $ca-blue-900 - background: $ca-blue-200 + + @apply bg-transparent text-gray-100 border border-gray-100 cursor: pointer &:hover - background: $ca-blue-300 - color: #0e1131 - background: $ca-blue-300 + @apply bg-gray-100 text-black border border-gray-100 + transition: 200ms ease-in-out + @mixin invisible-button @include button diff --git a/app/sass/components/_inputs.sass b/app/sass/components/_inputs.sass new file mode 100644 index 0000000..383b2ad --- /dev/null +++ b/app/sass/components/_inputs.sass @@ -0,0 +1,51 @@ +@mixin select + select, + input + padding: 0.5rem 1rem 0.5rem 0.5rem + margin-right: 0.3rem + width: 100% + height: 3.2rem + font-family: $main_font + @apply text-gray-200 bg-gray-800 border border-gray-400 + &:focus + @apply text-gray-500 + // border: $ffd-blue-500 solid 1px + // filter: drop-shadow(0 0 0.5rem $ca-blue-300) + &:focus-within + @apply text-gray-500 + // border: $ffd-blue-500 solid 1px + // filter: drop-shadow(0 0 0.5rem $ca-blue-300) + outline: none + &:focus-visible + outline: none + &:active + outline: none + select + //width: 20.5rem + + @apply text-gray-200 + &:focus + // border: $ffd-blue-500 solid 1px + // filter: drop-shadow(0 0 0.2rem $ca-blue-300) + &:focus-within + // border: $ffd-blue-500 solid 1px + // filter: drop-shadow(0 0 0.5rem $ca-blue-300) + outline: none + &:focus-visible + outline: none + &:active + outline: none + option + @apply text-gray-400 + padding: 0 0.3rem 3rem 0.3rem + // border: 0px + // border-radius: 4px + #year + width: 8rem + #filter_year + width: auto + + + + + \ No newline at end of file diff --git a/app/sass/main.scss b/app/sass/main.scss index 2f6153e..97663e1 100644 --- a/app/sass/main.scss +++ b/app/sass/main.scss @@ -11,6 +11,7 @@ // components @import "components/_buttons.sass"; @import "components/_tags.sass"; +@import "components/_inputs.sass"; // partials @import "partials/_courses.sass"; diff --git a/app/sass/partials/_publications.sass b/app/sass/partials/_publications.sass index d4c67c3..6572060 100644 --- a/app/sass/partials/_publications.sass +++ b/app/sass/partials/_publications.sass @@ -5,6 +5,10 @@ @media (min-width: 150px) .research + display: flex + flex-direction: column + flex: 1 + .filters justify-content: space-between .filter @@ -23,6 +27,7 @@ min-height: 3rem align-content: center margin-right: 1rem + @apply mb-8 //width: 13rem justify-content: flex-end @@ -32,7 +37,8 @@ section gap: $spacing_md - + display: flex + flex-direction: column .load_more padding-top: $spacing_sm padding-bottom: 0 @@ -50,6 +56,7 @@ display: flex flex-wrap: wrap padding-bottom: $spacing_lg + margin-top: $spacing_lg border-bottom: solid 1px $ca-blue-200 justify-content: left .filter @@ -66,57 +73,11 @@ @apply text-gray-400 font-weight: $light border-radius: 0 - select, - input - padding: 0.5rem 1rem 0.5rem 0.5rem - margin-right: 0.3rem - width: 100% - height: 3.2rem - - - - - font-family: $main_font - @apply text-gray-200 bg-gray-800 border border-gray-400 - &:focus - @apply text-gray-500 - border: $ffd-blue-500 solid 1px - // filter: drop-shadow(0 0 0.5rem $ca-blue-300) - &:focus-within - @apply text-gray-500 - border: $ffd-blue-500 solid 1px - // filter: drop-shadow(0 0 0.5rem $ca-blue-300) - outline: none - &:focus-visible - outline: none - select - //width: 20.5rem - - @apply text-gray-200 bg-gray-800 border border-gray-400 - - - - &:focus - border: $ffd-blue-500 solid 1px - // filter: drop-shadow(0 0 0.2rem $ca-blue-300) - &:focus-within - border: $ffd-blue-500 solid 1px - // filter: drop-shadow(0 0 0.5rem $ca-blue-300) - outline: none - &:focus-visible - outline: none - option - @apply text-gray-400 - padding: 0 0.3rem 3rem 0.3rem - // border: 0px - // border-radius: 4px - #year - width: 8rem + @include select - #filter_year - width: auto + .papers - // display: flex + display: flex padding-left: 0px .paper @@ -164,18 +125,19 @@ font-weight: 400 .paper_link - @include icon-button-left - @include button - display: flex - flex-direction: row - //gap: $spacing_xsm - align-content: center - justify-content: left - margin-top: 0.6rem - a - @include big-border-button-blue - display: flex - align-content: center + @include icon-button-right + @include link-button + // @include button + // display: flex + // flex-direction: row + // //gap: $spacing_xsm + // align-content: center + // justify-content: left + // margin-top: 0.6rem + // a + + // display: flex + // align-content: center //margin-top: $spacing_sm diff --git a/app/sass/partials/_recentPublications.sass b/app/sass/partials/_recentPublications.sass index e887f1d..db5f95d 100644 --- a/app/sass/partials/_recentPublications.sass +++ b/app/sass/partials/_recentPublications.sass @@ -77,16 +77,16 @@ // este código está duplicado en publications. //habría que ver si se puede convertir en otro mixin .paper_link - @include icon-button-left - @include button - display: flex - flex-direction: row - //gap: $spacing_xsm - align-content: center - justify-content: left - margin-top: 0.6rem - a - @include big-border-button-blue - display: flex - align-content: center - //margin-top: $spacing_sm \ No newline at end of file + // @include icon-button-left + // @include button + // display: flex + // flex-direction: row + // //gap: $spacing_xsm + // align-content: center + // justify-content: left + // margin-top: 0.6rem + // a + // @include big-border-button-blue + // display: flex + // align-content: center + // //margin-top: $spacing_sm \ No newline at end of file diff --git a/components/RecentPublications.js b/components/RecentPublications.js index 27a48e0..df8ed3d 100644 --- a/components/RecentPublications.js +++ b/components/RecentPublications.js @@ -7,7 +7,7 @@ import { mypublications } from "../constants/publications"; import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"; import { useTranslation } from "react-i18next"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; +import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"; export default function RecentPublications(props) { const [papers, setPapers] = useState(mypublications); @@ -50,7 +50,7 @@ export default function RecentPublications(props) { href={doi} > {t("publications.button")} - + ) : null} diff --git a/components/ResearchFilter.js b/components/ResearchFilter.js index cf56bc1..3363c67 100644 --- a/components/ResearchFilter.js +++ b/components/ResearchFilter.js @@ -41,7 +41,7 @@ export default function Filters (props) { {years.map(y=>)} - {props.results === undefined ? null:

{t('publications.filter.text')} {props.results}

} + {props.results === undefined ? null:

{t('publications.filter.text')} {props.results}

} ) } \ No newline at end of file