essetwide / material-walkthrough

A material tour (eg Inbox from Google).
https://essetwide.github.io/material-walkthrough/
Apache License 2.0
32 stars 10 forks source link

Zooming out of an element #14

Open menosprezzi opened 7 years ago

menosprezzi commented 7 years ago

Ao introduzir o walk para um elemento que tome grande porcentagem do tamanho da tela, seria interessante que o walk percebesse isto e tentasse concertar as medidas (para que caiba tanto o hole quanto o texto) aplicando um zoom out na tela. Porém, como o projeto utiliza de cálculos relativos à tela do usuário e não ao documento (na parte onde se calcula a posição do hole), o zoom executado via funções css destabiliza o walk (que continua achando que o elemento está em um lugar onde não esta). A saída para isso seria levar em consideração a porcentagem de correção de zoom para corrigir também o cálculo de posição quando necessário.

oliveirafilipe commented 7 years ago

Não seria mais simples apenas um hole quadrado? Isso seria mais simples e elegante, pois zoom out acaba afetando o visual da página, um zoom out mostraria as bordas brancas da página, foi até por isso que limitas-te o scroll para o tamanho do body

menosprezzi commented 7 years ago

Mas mesmo sendo quadrado, imagina um elemento que tome grande proporção da tela, como um botão grande no centro da tela (imagina isso no mobile. O nosso próprio site tem esse cenário). Se chamar um walk para lá, o tamanho do hole tomaria conta do espaço restante.

oliveirafilipe commented 7 years ago

É... :(

Mas ainda não sei se o zoom out seria o caminho

menosprezzi commented 7 years ago

A gente pode setar um tamanha máximo para o walkHole

oliveirafilipe commented 7 years ago

Poderia, mas ai o highlight não seria "efetivo". O foco ficaria em só uma parcela do target