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

Jump to bottom

Bugfix/s05/t223-revisar-pagina-de-detalhes-do-produto #65

Open
wants to merge 7 commits into
base: mfe-dev
Choose a base branch
from
Open

Bugfix/s05/t223-revisar-pagina-de-detalhes-do-produto #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
56101d6
layout corrigido
brunoF-Silva Dec 4, 2022
203180e
layout corrigido 2
brunoF-Silva Dec 4, 2022
b8ee24a
layout corrigido 3
brunoF-Silva Dec 4, 2022
13907f1
teste de background
brunoF-Silva Dec 5, 2022
370e5dd
atualizando a branch
brunoF-Silva Dec 5, 2022
2b5270e
Merge branch 'mfe-dev' into bugfix/S05/T223-revisar-pagina-de-detalhe…
brunoF-Silva Dec 11, 2022
57481b5
renomeado, scroll e dimensões corrigidos assim como tudo mais que eu …
brunoF-Silva Dec 11, 2022
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
52 changes: 38 additions & 14 deletions li-sense-app/src/_pages/ProductDetails/Product.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

.container-product{
width: 100%;
height: 75vh;
height: 500px;
display: flex;
padding: 10px;
gap: 1em;
Expand Down Expand Up @@ -141,10 +141,10 @@ hr.solid {
font-family: var(--body-fonts);
text-align: center;
font-size: 12px;

padding: 0px 10px;
margin: 0 auto;

display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
Expand All @@ -157,25 +157,33 @@ hr.solid {
font-size: 40px;
opacity: 0.5;
}
@media (max-width: 384px) {
.container-info-box {
margin: auto;
font-size: 10px;
display: block;

@media (max-width: 484px) {
.card-slider {
width: 60vw;
}
.productCard {
width: 17rem;
height: 25rem;
}
}


@media (max-width: 700px) {
.container-image-product {
padding: none;
padding: 0px 0px;
}
.container-product-details {
margin: 12px auto;
width: 90vw;
}
}

@media (max-width: 900px) {
@media (max-width: 1017px) {
.container-image-product{
padding-left: 10px;
padding-right: 10px;
}
.container-product {
display:block;
height: fit-content;
Expand All @@ -184,10 +192,26 @@ hr.solid {
margin: 12px auto;
width: 80vw;
}
.buy-button {
height: 60px;
width: 180px;
margin-top: 20px;
margin-bottom: 15px;
}
}

@media (max-width: 1140px) {
.field-info {
height: auto;
@media (max-width: 1039px) {
#type {
margin-top: 0px;
}
.container-sale-box {
margin-top: 0px;
padding-top: 10px;
}
}
.buy-button {
margin-top: 15px;
width: 180px;
}
}


11 changes: 5 additions & 6 deletions li-sense-app/src/_pages/ProductDetails/ProductDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,11 @@ export default function ProductDetails() {
const { currentProduct } = React.useContext(LisenseContext);
const slideLeft = () => {
var slider = document.getElementById("slider");
slider.scrollLeft = slider.scrollLeft - 500;
slider.scrollLeft = slider.scrollLeft - 250;
};

const slideRight = () => {
var slider = document.getElementById("slider");
slider.scrollLeft = slider.scrollLeft + 500;
slider.scrollLeft = slider.scrollLeft + 250;
};

const getProducts = (set) => {
Expand Down Expand Up @@ -104,11 +103,11 @@ export default function ProductDetails() {
/>
<div
id="slider"
className="w-full h-full overflow-x-scroll scroll whitespace-nowrap scroll-smooth scrollbar-hide"
className="w-full h-full overflow-x-hidden scroll whitespace-nowrap scroll-smooth scrollbar-hide"
>
{data.map((_value, key) => (
<div className=" d inline-block p-2 cursor-pointer overflow-y-auto" key={key}>
<Components.Card className="d" data={_value} key={key} />
<div className=" card-slider inline-block p-2 cursor-pointer overflow-y-auto" key={key}>
<Components.Card data={_value} key={key} />
</div>
))}
</div>
Expand Down