From d3a99bbabb1255f1d7a717bdee6c6a2e5c5583c0 Mon Sep 17 00:00:00 2001 From: yolit-bitlogic Date: Mon, 13 Sep 2021 17:33:14 -0300 Subject: [PATCH] Cambios en vista de articulos --- .../BlogPage/BlogArticle/BlogArticle.scss | 1 + src/components/BlogPage/BlogContainer.js | 2 +- src/hooks/useBanner.js | 2 +- src/hooks/useBlog.js | 2 +- src/templates/BlogItemDetail.js | 27 +-- src/templates/BlogItemDetail.scss | 154 ++++++++++++++++-- 6 files changed, 153 insertions(+), 35 deletions(-) diff --git a/src/components/BlogPage/BlogArticle/BlogArticle.scss b/src/components/BlogPage/BlogArticle/BlogArticle.scss index 1affed6f..e299bd60 100644 --- a/src/components/BlogPage/BlogArticle/BlogArticle.scss +++ b/src/components/BlogPage/BlogArticle/BlogArticle.scss @@ -11,6 +11,7 @@ &__image { width: 100%; height: 150px; + transition: opacity 3s ease-in; } &__description { diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js index 156695c5..8793ffe0 100644 --- a/src/components/BlogPage/BlogContainer.js +++ b/src/components/BlogPage/BlogContainer.js @@ -45,7 +45,7 @@ const Blog = () => { )} {data?.map((article, idx) => ( - {article?.article?.map((item, idx) => ( + {article?.articles?.map((item, idx) => ( { gatsbyImageData( quality: 100 formats: [AUTO, WEBP] - + placeholder: BLURRED ) } } diff --git a/src/hooks/useBlog.js b/src/hooks/useBlog.js index e3aec237..f2927efe 100644 --- a/src/hooks/useBlog.js +++ b/src/hooks/useBlog.js @@ -6,7 +6,7 @@ const useBlog = () => { allStrapiBlogCategory { nodes { name - article { + articles { title summary slug diff --git a/src/templates/BlogItemDetail.js b/src/templates/BlogItemDetail.js index 8ad3509a..4802cfb6 100644 --- a/src/templates/BlogItemDetail.js +++ b/src/templates/BlogItemDetail.js @@ -1,20 +1,21 @@ import React from "react" import { graphql } from "gatsby" +import showdown from "showdown" import Layout from "../components/layout" import { Seo } from "../components/index.js" import { BannerTop } from "../components/index.js" -import { getImage, GatsbyImage } from "gatsby-plugin-image" +// import { getImage, GatsbyImage } from "gatsby-plugin-image" import "./BlogItemDetail.scss" const BlogDetail = ({ data }) => { - const {title, description, image, author } = data?.allStrapiArticle?.nodes[0] + const { title, description, image } = data?.allStrapiArticle?.nodes[0] const bannerTop = { title, image } - let converter = author.summary - console.log(converter) + let converter = new showdown.Converter() + let html = converter.makeHtml(description) const ReplaceHtml = () => { - return { __html: description } + return { __html: html } } return ( @@ -25,7 +26,7 @@ const BlogDetail = ({ data }) => {

-

+ {/*
{author?.map(author => (
@@ -41,7 +42,7 @@ const BlogDetail = ({ data }) => {
))} -
+
*/}
{/*
@@ -79,18 +80,6 @@ export const query = graphql` } } } - author { - name - subTitle - summary - image { - localFile { - childImageSharp { - gatsbyImageData - } - } - } - } } } } diff --git a/src/templates/BlogItemDetail.scss b/src/templates/BlogItemDetail.scss index f199098a..b78494f9 100644 --- a/src/templates/BlogItemDetail.scss +++ b/src/templates/BlogItemDetail.scss @@ -13,9 +13,81 @@ &__description { margin-bottom: 2rem; - padding: 2rem 1.5rem; - box-shadow: 0px 4px 4px rgb(0 0 0 / 25%); - // border-radius: 18px; + padding: 2rem 1rem; + + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: $large; + em { + font-size: $large; + } + } + + p, + strong, + em { + font-size: $small; + line-height: 24px; + } + + ul { + padding: 1rem; + margin-top: -1rem; + + li { + margin-left: 1rem; + font-size: $small; + + &::marker { + color: $blue; + font-size: 1rem; + } + } + } + + a { + font-size: $small; + font-weight: $standard; + color: $blue; + + &:hover { + font-weight: $bold; + } + } + + img { + display: block; + max-width: 95%; + margin: 1.8rem auto 3rem; + border-radius: 3px; + box-shadow: 0px 4px 4px rgb(0 0 0 / 25%); + } + + blockquote { + p { + position: relative; + padding: 1rem; + border-left: 5px solid $blue; + background: $grey-light; + + strong { + display: flex; + justify-content: end; + align-items: center; + margin-top: 1.5rem; + margin-right: 1rem; + font-style: italic; + } + } + + :nth-child(even) { + border-left: 5px solid $yellow; + } + } } &__box-author { display: flex; @@ -132,13 +204,52 @@ @media (min-width: $breakpoint-tablet) { .detail { + &__description { + ul { + li { + font-size: 16px; + } + } + + a { + font-size: 18px; + } + + blockquote { + p { + padding-top: 2rem; + padding-left: 3rem; + padding-right: 1rem; + padding-bottom: 1rem; + + &:before { + content: "\201C"; + position: absolute; + top: 45px; + left: 10px; + font-size: 5em; + font-style: italic; + color: #e7e6e4; + z-index: 1; + font-family: "Sanchez"; + } + + strong { + font-size: 18px; + } + } + } + } + &__box-author { flex-direction: row; margin: 25px auto; } + &__box-author-image { flex-basis: 65%; text-align: center; + img { width: 145px; height: 145px; @@ -157,15 +268,37 @@ &__container { padding-left: 5rem; padding-right: 5rem; - - p { - font-size: 16px; - line-height: 28px; - } } &__description { padding: 4rem 5rem 3rem; + + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: 30px; + } + + p, + strong, + em { + font-size: 18px; + line-height: 34px; + } + + img { + max-width: 85%; + } + + blockquote { + p { + font-size: 17px; + line-height: 28px; + } + } } &__description-author { @@ -178,10 +311,6 @@ margin: 1.5rem; } - // &__box-author-image { - // flex-basis: 65%; - // } - &__box-autor-description { width: 100%; @@ -209,7 +338,6 @@ } &__blog-card-description { - p { line-height: 24px; }