From 1c80c06107c859bfa487138829660a22de5c97d2 Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Wed, 26 Jan 2022 10:29:39 -0300 Subject: [PATCH 1/6] arreglar fuentes --- gatsby-config.js | 2 +- .../BitwayPage/Gallery/Gallery.scss | 6 +- .../BitwayPage/Paragraph/Paragraph.scss | 12 ++-- src/components/BlogPage/BlogContainer.scss | 6 ++ src/components/JobsPage/JobsPage.scss | 62 ++++++++++++++++--- src/components/ServiceCards/ServiceCards.scss | 17 +++-- .../ServicesPage/ServicesSection.scss | 4 +- src/templates/BlogItemDetail.scss | 30 +++++++-- 8 files changed, 113 insertions(+), 26 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 5ed9f87e..26639d1f 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -34,7 +34,7 @@ module.exports = { resolve: `gatsby-source-strapi`, options: { // apiURL: `http://lb-bitlogic-strapi-dev-48805770.sa-east-1.elb.amazonaws.com:1337`, - // apiURL: `https://strapi.bitlogic.io`, + //apiURL: `https://strapi.bitlogic.io`, apiURL: process.env.STRAPI_URL, queryLimit: 1000, collectionTypes: [ diff --git a/src/components/BitwayPage/Gallery/Gallery.scss b/src/components/BitwayPage/Gallery/Gallery.scss index 7ddfd139..d30356bb 100644 --- a/src/components/BitwayPage/Gallery/Gallery.scss +++ b/src/components/BitwayPage/Gallery/Gallery.scss @@ -20,7 +20,7 @@ .bitway-gallery { display: grid; grid-template-rows: 400px; - gap: 20px; + gap: 10px; overflow: hidden; } @@ -44,7 +44,7 @@ background: #1ECAD380; color: white; font-family: Roboto; - font-size: 45px; + font-size: 35px; font-style: normal; font-weight: 700; line-height: 51px; @@ -59,7 +59,7 @@ } .bitway-gallery-item-inner { - font-size: 25px; + font-size: 20px; } diff --git a/src/components/BitwayPage/Paragraph/Paragraph.scss b/src/components/BitwayPage/Paragraph/Paragraph.scss index 81ef9b7d..f495b174 100644 --- a/src/components/BitwayPage/Paragraph/Paragraph.scss +++ b/src/components/BitwayPage/Paragraph/Paragraph.scss @@ -9,7 +9,7 @@ font-weight: 400; line-height: 30px; letter-spacing: 0em; - text-align: left; + text-align: justify; } & > div > p { font-family: $primary-font; @@ -18,7 +18,7 @@ font-weight: 400; line-height: 30px; letter-spacing: 0em; - text-align: left; + text-align: justify; // padding: 0 80px 20px; & * { font-size: 20px; @@ -39,10 +39,10 @@ font-size: $large; font-style: normal; font-weight: 700; - line-height: 51px; + line-height: 40px; letter-spacing: 0em; text-align: center; - margin: 80px 0 45px; + margin: 40px 0 45px; & span { font-size: $large; background-color: $blue; @@ -71,7 +71,7 @@ font-weight: 400; line-height: 26px; letter-spacing: 0em; - text-align: left; + text-align: justify; } & > div > p { font-family: $primary-font; @@ -80,7 +80,7 @@ font-weight: 400; line-height: 26px; letter-spacing: 0em; - text-align: left; + text-align: justify; // padding: 0 20px 0px 0px; & * { font-size: 15px; diff --git a/src/components/BlogPage/BlogContainer.scss b/src/components/BlogPage/BlogContainer.scss index 031d9ac5..1a9cfef8 100644 --- a/src/components/BlogPage/BlogContainer.scss +++ b/src/components/BlogPage/BlogContainer.scss @@ -29,8 +29,10 @@ background-color: $blue; overflow: hidden; transform: skew(-20deg); + margin-left: 10px; p { + font-size: $medium; padding: 10px; margin-bottom: 0; color: $white; @@ -55,6 +57,10 @@ span { margin-top: 0; margin-left: 15px; + + p{ + font-size: $large; + } } } } diff --git a/src/components/JobsPage/JobsPage.scss b/src/components/JobsPage/JobsPage.scss index 187df634..e5695abd 100644 --- a/src/components/JobsPage/JobsPage.scss +++ b/src/components/JobsPage/JobsPage.scss @@ -1,12 +1,5 @@ @import "../../styles/global.scss"; -.cats-job-title { - a { - color: $title-jobs; - font-weight: 700; - } -} - .cats-multiselect{ &-label { color: $primary !important; @@ -40,8 +33,20 @@ > div { overflow-x: hidden !important; } + + &-title { + overflow: hidden; + a { + color: $title-jobs; + font-weight: 700; + font-size: $medium; + padding-bottom: 10px; + } + } + &-column-value { color: $primary !important; + font-size: $small; } &:hover { @@ -116,7 +121,42 @@ } } +.cats-mobile{ + &-column-name{ + font-size:$small; + } +} + @media (min-width: $breakpoint-tablet) { + + .cats-column-name { + span{ + font-size: $large; + } + } + .cats-job { + + &-title { + a { + font-size: $large; + } + } + + &-column-value { + font-size: $medium; + } + } + + .cats-mobile{ + &-column-name{ + font-size:$medium; + } + } + + .cats-multiselect-label{ + font-size: $large; + } + .widget-container { margin-top: 70px !important; } @@ -136,3 +176,11 @@ } } } + +@media (min-width: $breakpoint-desktop) { + .cats-job { + &-column-value { + font-size: $large; + } + } +} \ No newline at end of file diff --git a/src/components/ServiceCards/ServiceCards.scss b/src/components/ServiceCards/ServiceCards.scss index 5ceb3884..8c3b97b2 100644 --- a/src/components/ServiceCards/ServiceCards.scss +++ b/src/components/ServiceCards/ServiceCards.scss @@ -26,7 +26,7 @@ h6, p, span { - font-size: $second-large; + font-size: 30px; font-weight: $extra-bold; color: $blue; margin-bottom: 30px; @@ -57,7 +57,7 @@ justify-content: center; } &__title { - font-size: $large; + font-size: $medium; font-weight: $max-bold; text-align: center; max-width: 200px; @@ -70,7 +70,7 @@ } &__link { color: $blue; - font-size: $large; + font-size: $medium; font-weight: $max-bold; border-bottom: 4px solid $yellow; margin-bottom: 0; @@ -81,7 +81,7 @@ } } -@media (min-width: $breakpoint-tablet) { +@media (min-width: $breakpoint-desktop) { .ServiceCards { &__mainTitle { h1, @@ -99,5 +99,14 @@ &__intro { font-size: $medium; } + + &__link { + font-size: $large; + } + + &__title { + font-size: $large; + } } } + diff --git a/src/components/ServicesPage/ServicesSection.scss b/src/components/ServicesPage/ServicesSection.scss index 469227df..6d0cf3e2 100644 --- a/src/components/ServicesPage/ServicesSection.scss +++ b/src/components/ServicesPage/ServicesSection.scss @@ -10,6 +10,8 @@ p { color: $primary; font-size: $small; + text-align: justify; + margin-bottom: 10px; } } &__icon { @@ -20,7 +22,7 @@ color: $primary; font-weight: $bold; font-size: $medium; - margin-bottom: 45px; + margin-bottom: 25px; } &__block { @extend %border-shadowed; diff --git a/src/templates/BlogItemDetail.scss b/src/templates/BlogItemDetail.scss index 6fce87d1..9e6e63ef 100644 --- a/src/templates/BlogItemDetail.scss +++ b/src/templates/BlogItemDetail.scss @@ -42,15 +42,19 @@ em { font-size: $small; line-height: 24px; + text-align: justify; } - ul { - padding: 1rem; + ul, + ol { + padding: 0.5rem; margin-top: -1rem; + margin-left: 0; li { margin-left: 1rem; font-size: $small; + text-align: justify; &::marker { color: $blue; @@ -221,7 +225,14 @@ @media (min-width: $breakpoint-tablet) { .detail { &__description { - ul { + p, + strong, + em { + font-size: 18px; + } + + ul, + ol { li { font-size: 18px; } @@ -297,10 +308,21 @@ p, strong, em { - font-size: 18px; + font-size: $medium; line-height: 34px; } + ul, + ol { + li { + font-size: $medium; + } + } + + a { + font-size: $medium; + } + img { max-width: 85%; } From a533767f7dc0c02def7a89caef449bdebe3e6c08 Mon Sep 17 00:00:00 2001 From: Drina_Rincon Date: Wed, 26 Jan 2022 15:27:01 -0300 Subject: [PATCH 2/6] Agregar estilos en tablet a Cards de servicios --- gatsby-config.js | 4 ++-- src/components/Banners/BannerTop.scss | 5 +++-- src/components/Cards/Cards.scss | 11 ++++++++--- src/components/ServiceCards/ServiceCards.js | 2 +- src/components/ServiceCards/ServiceCards.scss | 2 +- .../SubModulesEdTech/SubmodulesEdTech.scss | 13 ++++++++++++- src/components/SubmoduleItems/SubModuleItem.scss | 10 +++++++++- src/templates/BlogItemDetail.scss | 9 ++++++++- 8 files changed, 44 insertions(+), 12 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 26639d1f..22441207 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -34,8 +34,8 @@ module.exports = { resolve: `gatsby-source-strapi`, options: { // apiURL: `http://lb-bitlogic-strapi-dev-48805770.sa-east-1.elb.amazonaws.com:1337`, - //apiURL: `https://strapi.bitlogic.io`, - apiURL: process.env.STRAPI_URL, + apiURL: `https://strapi.bitlogic.io`, + //apiURL: process.env.STRAPI_URL, queryLimit: 1000, collectionTypes: [ `banners`, diff --git a/src/components/Banners/BannerTop.scss b/src/components/Banners/BannerTop.scss index 0664b29d..7c55eeb6 100644 --- a/src/components/Banners/BannerTop.scss +++ b/src/components/Banners/BannerTop.scss @@ -25,13 +25,14 @@ &__txt { color: $white; - font-size: 15px; + font-size: $medium; padding: 23px 16px; font-weight: $normal; - line-height: 18px; + line-height: 25px; letter-spacing: 0em; text-align: center; margin: 20px 0 20px; + font-weight: bold; } } } diff --git a/src/components/Cards/Cards.scss b/src/components/Cards/Cards.scss index 96846776..ca9b54ba 100644 --- a/src/components/Cards/Cards.scss +++ b/src/components/Cards/Cards.scss @@ -8,7 +8,6 @@ &__title { color: $primary; font-weight: $max-bold; - font-size: $medium; line-height: $large; text-align: center; padding: 90px 5px 19px; @@ -16,6 +15,9 @@ flex-direction: column; align-items: center; gap: 20px; + h3{ + font-size: $medium; + } &-logo { margin: 0 0; } @@ -42,13 +44,14 @@ font-weight: $normal; font-size: 15px; line-height: 20px; + text-align: justify; } } &__submodules { background-color: none; color: $primary; position: relative; - padding: 0 45px; + padding: 0 10px; &__title { margin: 2em 0 30px 0; @@ -96,10 +99,12 @@ transform: translate(60%, 60%); } &__title { - font-size: $large; text-align: start; flex-direction: row; align-items: flex-end; + h3{ + font-size: $large; + } &-logo { width: 115px; display: flex; diff --git a/src/components/ServiceCards/ServiceCards.js b/src/components/ServiceCards/ServiceCards.js index c7f6ec44..abd7def7 100644 --- a/src/components/ServiceCards/ServiceCards.js +++ b/src/components/ServiceCards/ServiceCards.js @@ -18,7 +18,7 @@ const ServiceCards = ({ title, services }) => { } const servicios = services?.map((service, idx) => ( -
+
Date: Thu, 27 Jan 2022 16:16:08 -0300 Subject: [PATCH 3/6] modify queries for banners --- src/components/Banners/BannerActionCall.js | 3 +- src/components/Banners/BannerActionCall.scss | 4 +- src/components/Banners/BannerBgImage.js | 16 +- src/components/Banners/BannerISO.js | 13 +- src/components/Banners/BannerLogo.js | 26 ++-- src/components/Banners/BannerTop.js | 6 +- src/components/BitwayPage/BitwayContainer.js | 8 +- src/components/BlogPage/BlogContainer.js | 21 +-- src/components/EdTechPage/EdTechContainer.js | 11 +- .../HomePage/HomeContainer/HomeContainer.js | 51 ++++++- src/components/JobsPage/JobsPage.js | 4 +- .../ServicesPage/ServicesSection.js | 12 +- src/hooks/index.js | 2 + src/hooks/useBitwayPage.js | 28 ++++ src/hooks/useBlog.js | 22 +++ src/hooks/useEdTech.js | 52 ++++--- src/hooks/useHomePage.js | 144 ++++++++++++++++++ src/hooks/useJobsPage.js | 2 +- src/hooks/useServicePage.js | 58 +++++++ 19 files changed, 377 insertions(+), 106 deletions(-) create mode 100644 src/hooks/useServicePage.js diff --git a/src/components/Banners/BannerActionCall.js b/src/components/Banners/BannerActionCall.js index 7035e5b0..625f4e08 100644 --- a/src/components/Banners/BannerActionCall.js +++ b/src/components/Banners/BannerActionCall.js @@ -1,11 +1,10 @@ import React from "react" import { Link } from "gatsby" - import { getImage, GatsbyImage } from "gatsby-plugin-image" import "./BannerActionCall.scss" const BannerActionCall = ({ banner }) => { - const icon = getImage(banner?.logo?.localFile) + const icon = getImage(banner?.image?.localFile) return (
diff --git a/src/components/Banners/BannerActionCall.scss b/src/components/Banners/BannerActionCall.scss index 4b800aa5..d6848e68 100644 --- a/src/components/Banners/BannerActionCall.scss +++ b/src/components/Banners/BannerActionCall.scss @@ -18,7 +18,7 @@ max-width: 195px; } &__logo { - flex-basis: 80px; + flex-basis: 60px; padding-bottom: 30px; } &__title { @@ -67,7 +67,7 @@ margin-top: 7rem; } &__logo { - flex-basis: 135px; + flex-basis: 110px; padding-bottom: 65px; // transform: translateY(-10%); } diff --git a/src/components/Banners/BannerBgImage.js b/src/components/Banners/BannerBgImage.js index 4fa9dcea..f224026b 100644 --- a/src/components/Banners/BannerBgImage.js +++ b/src/components/Banners/BannerBgImage.js @@ -2,22 +2,18 @@ import React from "react" import { Link } from "gatsby" import { getImage } from "gatsby-plugin-image" import { BgImage } from "gbimage-bridge" -import { useBanner } from "../../hooks/index" import showdown from "showdown" import "./BannerBgImage.scss" import { useTheme } from "../../context/themeContext" const BannerBgImage = ({ banner }) => { - const dataBanner = useBanner() + const { theme } = useTheme() - const bannerSelected = dataBanner?.allStrapiBanners?.nodes.find( - ban => ban.strapiId === banner.id - ) - const { image, imageDarkMode, link, summary } = bannerSelected + const { bgImage, bgImageDarkMode, link, title } = banner - const titles = summary + const titles = title let converter = new showdown.Converter() let post = titles let html = converter.makeHtml(post) @@ -26,12 +22,12 @@ const BannerBgImage = ({ banner }) => { return { __html: html } } - const imagen = getImage(image?.localFile) - const imagenDM = getImage(imageDarkMode?.localFile) + const imagen = getImage(bgImage?.localFile) + const imagenDM = getImage(bgImageDarkMode?.localFile) return (
- {bannerSelected.type === "bgImage" ? ( + {banner.bgImage ? ( { - const dataBanner = useBanner() +const BannerISO = ({ banner }) => { - const bannerSelected = dataBanner?.allStrapiBanners?.nodes.find( - ban => ban.strapiId === banner.id - ) - const { logo, summary } = bannerSelected + const { title, subtitle, image, imageDarkMode } = banner - const titles = summary + const titles = subtitle let converter = new showdown.Converter() let post = titles let html = converter.makeHtml(post) @@ -31,7 +26,7 @@ const BannerISO = ({ banner, title }) => { >
- +
diff --git a/src/components/Banners/BannerLogo.js b/src/components/Banners/BannerLogo.js index 38f3eca5..e0b35557 100644 --- a/src/components/Banners/BannerLogo.js +++ b/src/components/Banners/BannerLogo.js @@ -7,21 +7,15 @@ import { useTheme } from "../../context/themeContext" import "./BannerLogo.scss" -const BannerLogo = ({ banner, title }) => { +const BannerLogo = ({ banner }) => { const { theme } = useTheme() + const { bgImage, bgImageDarkMode, image, imageDarkMode, title } = banner - const dataBanner = useBanner() - - const bannerSelected = dataBanner?.allStrapiBanners?.nodes.find( - ban => ban.strapiId === banner.id - ) - const { image, imageDarkMode, logo, logoDarkMode, summary } = bannerSelected - - const imagen = getImage(image?.localFile) - const logoImage = getImage(logo?.localFile) + const imagen = getImage(bgImage?.localFile) + const logoImage = getImage(image?.localFile) // Version Dark Mode - const imagenDM = getImage(imageDarkMode?.localFile) - const logoDM = getImage(logoDarkMode?.localFile) + const imagenDM = getImage(bgImageDarkMode?.localFile) + const logoDM = getImage(imageDarkMode?.localFile) return ( <> @@ -40,14 +34,14 @@ const BannerLogo = ({ banner, title }) => {

{title}

)} - - {summary ? ( +{/* + {title ? (
-

{summary}

+

{title}

- ) : null} + ) : null} */} ) } diff --git a/src/components/Banners/BannerTop.js b/src/components/Banners/BannerTop.js index 0da47be5..43bc26d4 100644 --- a/src/components/Banners/BannerTop.js +++ b/src/components/Banners/BannerTop.js @@ -6,11 +6,11 @@ import "./BannerTop.scss" import { useTheme } from "../../context/themeContext" const BannerTop = ({ banner }) => { - const { image, imageDarkMode, title, summary } = banner + const { bgImage, bgImageDarkMode, title, summary } = banner const { theme } = useTheme() - const imageBanner = getImage(image?.localFile) - const imageDM = getImage(imageDarkMode?.localFile) + const imageBanner = getImage(bgImage?.localFile) + const imageDM = getImage(bgImageDarkMode?.localFile) return (
diff --git a/src/components/BitwayPage/BitwayContainer.js b/src/components/BitwayPage/BitwayContainer.js index bb67396a..1359c469 100755 --- a/src/components/BitwayPage/BitwayContainer.js +++ b/src/components/BitwayPage/BitwayContainer.js @@ -15,13 +15,7 @@ const BitwayPage = () => { } = useBitwayPage() const sections = nodes[0]?.sections - - const bannerData = useBanner() - - const bannerActionCall = bannerData?.allStrapiBanners?.nodes.find( - banner => banner.page === "bitway" && banner.type === "actionCall" - ) - + const bannerActionCall = nodes[0]?.actionCallBanner const { pageTitle, pageDescription, pageKeywords } = nodes[0]?.SEO // vista desktop diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js index 45715857..b24c4f05 100644 --- a/src/components/BlogPage/BlogContainer.js +++ b/src/components/BlogPage/BlogContainer.js @@ -1,27 +1,20 @@ import React from "react" -import { useBanner, useBlog } from "../../hooks" - +import { useBlog } from "../../hooks" import Layout from "../../components/layout" import BlogGrid from "./BlogGrid/BlogGrid" import BlogArticle from "./BlogArticle/BlogArticle" - import { Seo, BannerActionCall } from "../index" import "./BlogContainer.scss" const Blog = () => { - const bannerData = useBanner() + const blogData = useBlog() + const data = blogData?.allStrapiBlogCategory?.nodes const dataArticles = blogData?.allStrapiArticle?.nodes - - const bannerBlog = bannerData?.allStrapiBanners?.nodes.find( - banner => banner.page === "blog" && banner.type === "bgColor" - ) - - const bannerActionCall = bannerData?.allStrapiBanners?.nodes.find( - banner => banner.page === "blog" && banner.type === "actionCall" - ) + const bannerActionCall = blogData?.allStrapiBlogPage?.nodes[0]?.actionCallBanner + const title = blogData?.allStrapiBlogPage?.nodes[0]?.title const filterArticle = data.map(category => dataArticles.filter(article => category.name === article.blog_category.name)) @@ -42,9 +35,9 @@ const Blog = () => { )} {data.length > 0 && (
- {bannerBlog && ( + {title && (
-

+

)} diff --git a/src/components/EdTechPage/EdTechContainer.js b/src/components/EdTechPage/EdTechContainer.js index 5e8b8b12..fcc0031d 100644 --- a/src/components/EdTechPage/EdTechContainer.js +++ b/src/components/EdTechPage/EdTechContainer.js @@ -1,5 +1,5 @@ import * as React from "react" -import { useEdTech, useBanner } from "../../hooks" +import { useEdTech } from "../../hooks" import { BannerTop, BannerActionCall, Seo } from "../index" import Layout from "../layout" @@ -9,17 +9,12 @@ import "./EdtechContainer.scss" const EdTech = () => { const data = useEdTech() - const bannerData = useBanner() const edTechs = data?.allStrapiEdteches?.nodes const content = edTechs.map(tech => ) - const bannerTop = bannerData?.allStrapiBanners?.nodes.find( - banner => banner.page === "edtech" && banner.type === "top" - ) - const bannerActionCall = bannerData?.allStrapiBanners?.nodes.find( - banner => banner.page === "edtech" && banner.type === "actionCall" - ) + const bannerTop = data?.allStrapiEdTechPage?.nodes[0].topBanner + const bannerActionCall = data?.allStrapiEdTechPage?.nodes[0].actionCallBanner const { pageTitle, diff --git a/src/components/HomePage/HomeContainer/HomeContainer.js b/src/components/HomePage/HomeContainer/HomeContainer.js index 802dd022..18f7cdaf 100644 --- a/src/components/HomePage/HomeContainer/HomeContainer.js +++ b/src/components/HomePage/HomeContainer/HomeContainer.js @@ -1,17 +1,34 @@ import * as React from "react" import { useHomePage } from "../../../hooks/index" import Layout from "../../layout" -import { Seo, CustomSection } from "../../index" +import { + Seo, + CustomSection, + BannerLogo, + BannerBgImage, + BannerISO, + ServiceCards, + EdTechCards, + PartnersSection, +} from "../../index" import "./HomeContainer.scss" const Home = () => { - const data = useHomePage() - - const homeSections = data?.allStrapiHome?.nodes[0]?.sections - const { pageTitle, pageDescription, pageKeywords } = data?.allStrapiHome?.nodes[0]?.pageMetadata || {} + const homeSections = data?.allStrapiHome?.nodes[0]?.sections + const { pageTitle, pageDescription, pageKeywords } = + data?.allStrapiHome?.nodes[0]?.pageMetadata || {} + const { + topHomeBanner, + infoImgBanner, + infoBgBanner, + infoBanner, + servicesBlock, + partnersBlock, + edtechBlock, + } = data?.allStrapiHome?.nodes[0] return ( @@ -22,9 +39,29 @@ const Home = () => { keywords={pageKeywords} /> )} - {homeSections && ( - + {topHomeBanner && } + {servicesBlock && ( + + )} + {edtechBlock && ( + + )} + {infoBgBanner && } + {infoImgBanner && } + {partnersBlock && ( + )} + {infoBanner && } + {homeSections && } ) } diff --git a/src/components/JobsPage/JobsPage.js b/src/components/JobsPage/JobsPage.js index 3b45abb8..54f2f475 100644 --- a/src/components/JobsPage/JobsPage.js +++ b/src/components/JobsPage/JobsPage.js @@ -8,7 +8,7 @@ import './JobsPage.scss' export default function JobsPage() { const jobsData = useJobsPage() - const banner = jobsData?.strapiJobsPage?.banner + const title = jobsData?.strapiJobsPage?.title const { pageTitle, pageDescription, pageKeywords } = jobsData?.strapiJobsPage?.pageMetadata || {} return ( @@ -20,7 +20,7 @@ export default function JobsPage() { keywords={pageKeywords} /> )} - +