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

Feature/car details styles #28

Merged
merged 7 commits into from
Dec 18, 2023
Merged

Feature/car details styles #28

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bfefb13
Add background dynamic selector & configure btn
sergio-usma Dec 18, 2023
303cf89
Add background dynamic selector & configure btn styles
sergio-usma Dec 18, 2023
4d428c5
Add CarDetails component mobile version
sergio-usma Dec 18, 2023
faebb4e
Add Tesla logo in start corner
sergio-usma Dec 18, 2023
fdaf00e
FIX stylelint
sergio-usma Dec 18, 2023
b244a67
Merge branch 'development' into feature/car_details_styles
flemton Dec 18, 2023
980341a
Update CarDetails.jsx
flemton Dec 18, 2023
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
80 changes: 78 additions & 2 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@

.background-container::before {
height: 100vh;
content: "";
min-height: 450px;
content: '';
position: absolute;
top: 0;
left: 0;
Expand Down Expand Up @@ -42,6 +43,7 @@
width: 15rem;
background-color: #f5f5f5;
box-shadow: 0 0 10px rgba(8, 7, 16, 0.6);
z-index: 300;
}

.sidebar-menu-ul {
Expand Down Expand Up @@ -162,6 +164,33 @@
transform: translateX(5px);
}

.car-details-page {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
min-height: 450px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}

.car-details {
width: fit-content;
max-width: 300px;
}

.car-details-title {
line-height: 2rem;
}

.card-details-btn {
border-radius: 50px;
background-color: black;
}

@media screen and (max-width: 767px) {
.burger-menu {
display: flex !important;
Expand All @@ -186,8 +215,55 @@
text-align: start;
}

.car-details-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}

.car-details-container {
display: flex;
gap: 5%;
}

.car-details {
display: none !important;
min-width: 320px !important;
width: 80%;
max-width: 580px;
margin: 1rem 0 4.5rem 0 !important;
padding: 1rem 1rem 0.5rem 1rem !important;
}

.car-details-info {
position: absolute;
top: 20%;
left: calc(50% - 150px);
width: 300px;
text-align: center !important;
}

.car-details-info h2 {
transform: scale(1.4);
}

.car-details-info p {
transform: scale(1.1);
}

.car-details-table {
margin: 0 !important;
}

.card-details-btn {
position: absolute;
bottom: 1rem;
left: calc(50% - 160px);
width: 320px !important;
}

.rosetta {
display: none;
}

.card-model {
Expand Down
151 changes: 88 additions & 63 deletions src/components/CarDetails/CarDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,82 +2,106 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useNavigate } from 'react-router-dom';
import colorRosetta from './color-rosetta.png';
import Logo from '../Sidebar/Logo';

const CarDetails = ({ car }) => {
const CarDetails = ({ car, onGoBack }) => {
const navigate = useNavigate();
if (!car) {
return null;
}

return (
<>
<div className="car-details container-fluid bg-white rounded-3 p-3 shadow-4-strong">
<div className="text-end mt-2">
<h2 className="m-0">{car.name}</h2>
<p className="tiny-font">
£
{car.finance_fee}
{' '}
deposit upon any Car
</p>
<div
className="car-details-page"
style={{
backgroundImage: `url('${car.image_url}')`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
}}
>
<div
className="position-absolute top-0 start-0 m-4 rosetta"
>
<Logo />
</div>

<table className="table table-striped tiny-font mt-3 mb-2">
<tbody>
<tr>
<td>Finance Fee:</td>
<td className="text-end">
<div className="car-details bg-white rounded-3 p-3 shadow-4-strong me-4">
<div className="car-details-container">
<div className="text-end mt-2 car-details-info">
<h2 className="car-details-title mx-0 mt-2 ">{car.name}</h2>
<p className="tiny-font">
£
{car.finance_fee}
</td>
</tr>
<tr>
<td>Option to Purchase Fee:</td>
<td className="text-end">
£
{car.option_to_purchase_fee}
</td>
</tr>
<tr>
<td>Total Amount Payable:</td>
<td className="text-end" type="currency">
£
{car.total_amount_payable}
</td>
</tr>
<tr>
<td>Duration:</td>
<td className="text-end">
{car.duration}
{' '}
Months
</td>
</tr>
</tbody>
</table>
<p>
<span className="fw-bold m-0">5.29 APR</span>
&nbsp;Representative
</p>
deposit upon any Car
</p>
</div>

<div className="text-center mx-3 my-4">
<p className="fw-bold tiny-font">
Discover more models&nbsp;
<span>&#62;</span>
</p>
<img src={colorRosetta} alt="Example" />
</div>
<table className="table table-striped tiny-font mt-3 mb-2 car-details-table">
<tbody>
<tr>
<td>Finance Fee:</td>
<td className="text-end">
£
{car.finance_fee}
</td>
</tr>
<tr>
<td>Option to Purchase Fee:</td>
<td className="text-end">
£
{car.option_to_purchase_fee}
</td>
</tr>
<tr>
<td>Total Amount Payable:</td>
<td className="text-end">
£
{car.total_amount_payable}
</td>
</tr>
<tr>
<td>Duration:</td>
<td className="text-end">
{car.duration}
{' '}
Months
</td>
</tr>
</tbody>
<caption className="ms-3">
<span className="fw-bold m-0">5.29 APR</span>
&nbsp;Representative
</caption>
</table>
</div>

<div className="text-center mx-3 my-4 rosetta">
<p className="fw-bold tiny-font rosetta">
Discover more models&nbsp;
<span>&#62;</span>
</p>
<img src={colorRosetta} alt="Example" className="rosetta" />
</div>

<div className="text-center my-2">
<button className="btn btn-dark px-5 text-white" type="button">
Reserve
</button>
<div className="card-details-btn d-flex justify-content-between align-items-center w-75 m-auto">
<button className="btn text-btn-white" onClick={() => onGoBack()} type="button">
{' '}
<box-icon name="undo" color="#fff" />
</button>
<p className="text-white fw-semibold mb-1">Configure</p>
<button
className="btn text-white"
onClick={() => navigate(`/reserve/${car.id}`)}
type="button"
>
{' '}
<box-icon name="right-arrow-circle" color="#fff" />
</button>
</div>
</div>
</div>
<button
className="btn btn-toolbar text-btn-white rounded-back-btn fs-5"
onClick={() => navigate('/home')}
type="button"
>
&laquo;
</button>
</>
);
};
Expand All @@ -93,6 +117,7 @@ CarDetails.propTypes = {
total_amount_payable: PropTypes.number.isRequired,
duration: PropTypes.number.isRequired,
}),
onGoBack: PropTypes.func.isRequired,
};

CarDetails.defaultProps = {
Expand Down
34 changes: 23 additions & 11 deletions src/components/Sidebar/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,17 +45,29 @@ const Sidebar = () => {
</div>
</div>

<button
type="button"
onClick={handleClick}
className={`btn btn-dark align-self-end my-3 ${sidebarVisible ? 'sidebar-btn-container-show' : 'sidebar-btn-container-hidden mx-3'}`}
>
{sidebarVisible ? (
<box-icon name="left-arrow" color="#fff" />
) : (
<box-icon name="right-arrow" color="#fff" />
)}
</button>
<div>
<div
className={`position-absolute d-flex flex-column justify-content-between align-content-center pt-4 pb-3 w-100 ps-4 ${
sidebarVisible ? 'hide' : 'show'
}`}
>
<Logo />
</div>

<button
type="button"
onClick={handleClick}
className={`btn btn-dark align-self-end my-3 ${
sidebarVisible ? 'sidebar-btn-container-show' : 'sidebar-btn-container-hidden mx-3'
}`}
>
{sidebarVisible ? (
<box-icon name="left-arrow" color="#fff" />
) : (
<box-icon name="right-arrow" color="#fff" />
)}
</button>
</div>
</div>
</>
);
Expand Down