/* * Correcao do comportamento de "duplo toque" nos cards de produto em dispositivos moveis (touch). * * Problema: os efeitos de realce do card (sombra, imagem hover e botao "Ver Mais") dependem das * regras ".product-card:hover" definidas em Views/Shared/_Search.cshtml (estilo inline) e em * wwwroot/css/home.css (carrosseis da home). Em navegadores touch, o primeiro toque no card e * interpretado como ":hover" (revelando esses elementos) e apenas o segundo toque dispara a * navegacao do link - por isso era necessario tocar duas vezes. * * Correcao: em viewports mobile, os elementos de realce ficam sempre visiveis (sem depender de * :hover), permitindo que o primeiro toque no card ja acione a navegacao do link normalmente. * O comportamento de hover no desktop (mouse) permanece inalterado. * * Este arquivo deve ser carregado depois de theme.min.css/home.css no do layout para que * tenha precedencia de cascata sobre as regras duplicadas. */ @media (max-width: 768px) { .product-card { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important; } .product-card .main-img { display: block !important; } .product-card .hover-img { display: block !important; } .product-card .product-footer { display: block !important; opacity: 1 !important; } .product-card .product-instalments { display: block !important; opacity: 1 !important; } } /* * Correcao do efeito de troca de imagem (hover) restrito apenas a area da imagem no desktop. * * Problema: a troca de imagem ao passar o mouse depende de ".img-hover-container:hover" (regra * definida em wwwroot/css/theme.css / theme.min.css), mas ".img-hover-container" e apenas o *
que envolve a imagem (gerado por HtmlHelpers.GetRouteImage), nao o card inteiro. Por * isso o realce do card (sombra, botao "Ver Mais") e a troca de imagem so ocorriam quando o mouse * passava exatamente sobre a imagem, gerando comportamento inconsistente com o restante do card. * * Correcao: a troca de imagem passa a ser controlada por ".product-card:hover", assim como os * demais efeitos de realce, disparando ao passar o mouse em qualquer parte do card. */ .product-card:hover .img-hover-alt { opacity: 1 !important; } .product-card:hover .img-hover-main { opacity: 0 !important; } /* * Correcao de cards sobrepondo uns aos outros na grade de resultados de busca (mais evidente no * layout de 2 colunas do mobile). * * Problema: Views/Shared/_Search.cshtml nao carrega wwwroot/css/home.css (que so e referenciado em * Views/Home/Index.cshtml). A regra global ".card-img-top" em wwwroot/css/theme.css so define * "width: 100%" no proprio elemento , mas nao restringe o tamanho das * dentro dele. Sem essa restricao, cada imagem de produto e renderizada no seu tamanho * natural (que varia de produto para produto), deixando os cards com alturas muito diferentes. * Como consequencia, quando um card fica mais alto que os demais da mesma linha, seu conteudo * transborda visualmente para dentro da linha seguinte, cortando/sobrepondo as imagens dos * proximos produtos. * * Correcao: restringe as imagens de produto (geradas por HtmlHelpers.GetRouteImage e pelo * Search.js) para caberem dentro do container ".card-img-top", preservando a proporcao original * (object-fit: contain), assim como ja e feito em wwwroot/css/home.css para a home. */ .card-img-top img, .card-img-top picture img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: auto; } /* * ".card-image-product" (wwwroot/css/theme.css) define apenas "min-height", sem "max-height". * Sem um limite superior, uma imagem de produto naturalmente mais alta que as demais faz o * container crescer alem da altura das outras imagens da mesma linha, o que arrasta o restante * do card para baixo e sobrepoe o card seguinte na grade responsiva (mobile). Fixamos a altura * do container para bater com o "min-height" existente, mantendo a imagem contida dentro dele. */ .card-image-product { max-height: 310px; overflow: hidden; } @media (max-width: 825px) { .card-image-product { max-height: 250px; } }