Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix testimonial responsive issue on home page #109

Open
wants to merge 4 commits into
base: website-in-react
Choose a base branch
from
Open

Fix testimonial responsive issue on home page #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
807e1b1
Fix testimonial responsive isse on home page
Sep 17, 2019
ee2b55a
Add color and font-size to testimony
Sep 17, 2019
21b5a53
Merge branch 'website-in-react' into home-testimony
Oct 31, 2019
c19f73a
Merge branch 'website-in-react' into home-testimony
Oct 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 54 additions & 4 deletions src/assets/stylesheets/pages/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -771,12 +771,13 @@
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;
color: #000;
font-size: 0.9em;
}



.read-more {
button {
background-color: #FFFFFF;
Expand Down Expand Up @@ -865,7 +866,56 @@
height: auto;
}

.border-solid-left-1 {
.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;
}
.border-solid-left-1 {
border-left: 1px solid #fff;
}

Expand Down
78 changes: 0 additions & 78 deletions src/components/home/homeStyledComponents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
39 changes: 15 additions & 24 deletions src/components/home/testimonials.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,18 @@
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"


const Testimonials = (props) => {
const { testimonialData } = props;

const items = testimonialData.map(testimonial => {
return <Testimonial {...testimonial} key={testimonial.clientName} />
return <TestimonialGridItem {...testimonial} key={testimonial.clientName} />

})

Expand Down Expand Up @@ -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 (
<Fragment>
<TestimonialBox >
<Quotes><i>&#65282;</i></Quotes>
<TestimonialBoxText >
<span className="ellipsis">{description}</span>
<div className="testimonial-container mx-3">
<div className="testimonial-grid-item testimony">
<div className="quotes"><i>&#65282;</i></div>
<div className="ellipsis">{description}</div>
<Link to="/testimonials" className="read-more" >
<Button className="btn btn-outline-danger">
<span>Read More</span></Button>
</Link>
</TestimonialBoxText>
</TestimonialBox>
<ClientNameBox>
<ClientName>{clientName}</ClientName>
</ClientNameBox>
<ClientDesignationBox ><span>{designation}<br />{projectName}</span></ClientDesignationBox>
</Fragment>
</div>
<div className="testimonial-grid-item client-name">
{clientName}
</div>
<div className="testimonial-grid-item project-name pl-2">
{designation}<br /> {projectName}
</div>
</div>
)
}

Expand Down