From 807e1b1a1b1829be5d3bb4e9adf0a10d7fe2a99a Mon Sep 17 00:00:00 2001 From: Anusha Bhat Date: Tue, 17 Sep 2019 17:02:29 +0530 Subject: [PATCH 1/2] Fix testimonial responsive isse on home page --- src/assets/stylesheets/pages/_home.scss | 64 +++++++++++++++-- src/components/home/homeStyledComponents.js | 78 --------------------- src/components/home/testimonials.js | 39 ++++------- 3 files changed, 72 insertions(+), 109 deletions(-) diff --git a/src/assets/stylesheets/pages/_home.scss b/src/assets/stylesheets/pages/_home.scss index 29929a3c..2b4de645 100644 --- a/src/assets/stylesheets/pages/_home.scss +++ b/src/assets/stylesheets/pages/_home.scss @@ -581,7 +581,7 @@ text-decoration: none; text-decoration-color: #333333; font-size: 20px; - + color: #FFFFFF; &:hover{ color: #FFFFFF; @@ -771,12 +771,11 @@ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; /* number of lines to show */ - line-height: 20px; /* fallback */ - max-height: 100px; + padding-left: 1rem; + padding-right: 1rem; } - .read-more { button { background-color: #FFFFFF; @@ -794,12 +793,12 @@ position: relative; bottom: 5px; } - - + + .btn-secondary { // display: none; background-color: transparent; - + } } @@ -866,3 +865,54 @@ max-width: 100%; height: auto; } + +.testimonial-container { + display: grid; + grid-template-columns: 65% 35%; + grid-template-rows:65% 20% 15%; + grid-template-areas: + "row row" + "name designation" + ". designation"; +} + +.testimony { + grid-column: 1 / span 2; + grid-row: 1; + background: #EFEFEF; + border-radius: 12px 12px 12px 12px; + border-color: #D76964; + border: 0.5px; +} + +.testimonial-grid-item { + display: grid; +} + +.client-name { + grid-area: name; + grid-row: 2; + border-radius: 0 0 0 22px; + background: #D76964; + border-color: #D76964; + color: #fff; + align-content: center; + justify-content: center; +} + +.project-name { + grid-area: designation; + grid-row: 2 / span 3; + border-color: #AF5B57; + border-radius: 0 0 15px 15px; + background: #AF5B57; + align-items: center; + justify-content: center; + color: #fff; + font-size: 0.8rem; +} + +.quotes { + font-size: 3rem; +} + diff --git a/src/components/home/homeStyledComponents.js b/src/components/home/homeStyledComponents.js index b762c618..2bc4f3f5 100644 --- a/src/components/home/homeStyledComponents.js +++ b/src/components/home/homeStyledComponents.js @@ -24,84 +24,6 @@ export const InnovationHeading1 = styled.h1` margin: 2rem 0 3.5rem; ` -export const TestimonialBox = styled.div` - border-color: #D76964; - border: 0.5px; - height: 206px; - width: 295px; - border-radius: 12px 12px 12px 12px; - background: #EFEFEF; - margin-left: 60px; - z-index: 10; - position: relative; -` - -export const ClientNameBox = styled.div` - border-color: #D76964; - border: 0.5px; - height: 100px; - width: 228px; - border-radius: 22px 22px 22px 22px; - background: #D76964; - margin-left: 61px; - margin-top: -15%; - position: relative; - z-index: 9; -` - -export const ClientDesignationBox = styled.div` - border-color: #AF5B57; - border: 0.5px; - height: 100px; - width: 111px; - border-radius: 15px 15px 15px 15px; - background: #AF5B57; - margin-top: -11%; - position: relative; - z-index: 9; - left: 244px; - top: -23px; - display: flex; - align-items: flex-end; - justify-content: center; - padding-bottom: 24px; - - & span { - // width: 42px; - // height: 29px; - color: #fff; - font-size: 11px; - text-align: center; - } -` - -export const TestimonialBoxText = styled.span` - width: 254px; - height: 118px; - font-size: 12px; - color: #0D0D0D; - margin-left: 19px; - margin-right: 20px; - position: absolute; - top: 50px; - -` - -export const Quotes = styled.div` - height: 70px; - width: 20px; - font-size: 56px - position: relative; - right: 6px; -` - -export const ClientName = styled.span` - position: absolute; - bottom: 10px; - left: 20px; - color: #fff; -` - export const Circle = styled.div` height: 8px; width: 8px diff --git a/src/components/home/testimonials.js b/src/components/home/testimonials.js index af832190..b7aafdc6 100644 --- a/src/components/home/testimonials.js +++ b/src/components/home/testimonials.js @@ -1,16 +1,10 @@ -import React, { Fragment } from 'react' +import React from 'react' import { Button } from "reactstrap"; import { Link } from "react-router-dom"; import JoshCarousel from './carousel.js'; import { Heading1, - TestimonialBox, - TestimonialBoxText, - ClientDesignationBox, - ClientNameBox, - Quotes, - ClientName, } from "./homeStyledComponents.js" @@ -18,7 +12,7 @@ const Testimonials = (props) => { const { testimonialData } = props; const items = testimonialData.map(testimonial => { - return + return }) @@ -85,28 +79,25 @@ const Testimonials = (props) => { ) } -const Testimonial = (props) => { +const TestimonialGridItem = (props) => { const { description, clientName, designation, projectName } = props; - /** To adjust description in box, we are only 260 characters from the description */ - // const descriptionText = description.length > 280 ? `${description.substr(0, 280)}...` : description - return ( - - - ＂ - - {description} +
+
+
＂
+
{description}
- - - - {clientName} - - {designation}
{projectName} - +
+
+ {clientName} +
+
+ {designation}
{projectName} +
+
) } From ee2b55ae802e09b29b3ec6783a5db98b9fd5d514 Mon Sep 17 00:00:00 2001 From: Anusha Bhat Date: Tue, 17 Sep 2019 17:28:35 +0530 Subject: [PATCH 2/2] Add color and font-size to testimony --- src/assets/stylesheets/pages/_home.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/assets/stylesheets/pages/_home.scss b/src/assets/stylesheets/pages/_home.scss index 2b4de645..d11ab02a 100644 --- a/src/assets/stylesheets/pages/_home.scss +++ b/src/assets/stylesheets/pages/_home.scss @@ -773,6 +773,8 @@ -webkit-line-clamp: 6; /* number of lines to show */ padding-left: 1rem; padding-right: 1rem; + color: #000; + font-size: 0.9em; }