Melhoria de usabilidade: botão de acesso ao arquivo/download (PDF) - Mobile

Olá!

Estou utilizando a última versão do plugin Tainacan Interface/Tainacan (2.8.1) e notei um problema de usabilidade na página de itens na minha instalação e gostaria de confirmar se é realmente assim

Problema: na versão MOBILE, o botão de acesso/download do arquivo (aquele que só aparece no hover) fica de difícil acesso

Note que o usuário no mobile não conseguirá entender exatamente que esse quadrado é, na verdade, um arquivo em PDF e que ele conseguirá visualizar clicando no botão que só aparece com um HOVER (que não é todo usuário que entende)

  1. Gostaria de confirmar se existe uma opção de REMOVER o efeito HOVER do botão e AUMENTA-LO, pois já ajudaria manter o botão SEMPRE visível

OU

  1. Adicionar realmente um botão que o usuário entenda que é cliclável, do clássico, bordas arredondadas, texto centralizado (como esse aqui de “criar tópico”, no caso do Tainacan seria “visualizar arquivo”)

Até mesmo REMOVER de vez esse preview do PDF, não mostrar mais e ter só um botão clássico para o usuário entender que ali é o arquivo, abre em uma nova aba e ele terá acesso. Acredito que fica mais simples para o leigo :clap:

Agradeço desde já e ótimo trabalho no Tainacan!

Olá @ddweb!

Acredito que esta seja uma discussão parecida com essa: Exibição do visualizador de PDF no mobile - #3 de thiagomonteiro.geo

Nós não temos muito controle sobre a aparência e posicionamento deste botão, ele é gerado pelo navegador mobile. De qualquer forma, tem um baita desafio aí que é detectarmos que a pessoa está em uma página de documento pdf, visualizando em um navegador mobile e sem suporte ao leitor nativo de PDF para não aplicar as classes que aplicamos que ajustam a proporção da área de documento. É isso que está fazendo seu documento como um todo vir cortado. Como ele é carregado dentro de um iframe não temos como ter certeza das dimensões, é sempre complicado.

Considerando que é complicado resolvermos algo que não temos controle, eu voltaria minha atenção pro que temos: o botão de download que o próprio Tainacan oferece. Hoje ele é só uma bolinha com ícone que aparece quando o usuário passa o mouse em cima. É portanto ruim pro mobile e não muito claro. Pessoalmente sempre me incomodei com isso. Deveria ser possível termos um rótulo nele, configurarmos este rótulo e definir se ele vai estar ou não sempre presente.

Estou abrindo uma issue para explorar isso, embora admito que deva demorar pra conseguir atacá-la :expressionless_face: :

Por hora embora não vá resolver seu incômodo uma sugestão que posso dar é explorar usar um valor de altura mínima do documento maior nas configurações do tema. Isso pelo menos deve cortar menos área do preview que você está enxergando nesta página.

Entendo perfeitamente, Mateus

Realmente, seria uma melhoria para a usabilidade. Talvez até ir pelo caminho mais simples: remover completamente o preview do PDF, pois o usuário já tem acesso a miniatura e o arquivo, para visualiza-lo, ser um botão clássico (clicou, abriu em nova aba)

O valor que você menciona seria aqui: “Altura máxima do documento (vh)”?

Se sim, já fiz testes. Aqui só muda no desktop

No mobile permanece da mesma maneira nos iPhone’s com iOS 26.1 que testei

O problema é que não temos uma forma fácil de detectarmos estas coisas programaticamente. São muitas variáveis (tipo do arquivo, tamanho da tela, navegador sendo usado) e potencialmente demandaria uma combinação de soluções front e backend. A galeria de mídias é um componente que precisa ser genérico o suficiente para vários formatos de arquivo e vários layouts visto que pode ser chamada pelos temas e pelos blocos gutenberg.

Sim seria esse. Acredito que mesmo mudando o iframe vai forçar uma proporção de 4:3. Porque mesmo a altura máxima sendo a tela inteira a largura não vai deixar crescer mais sem distorcer a proporção. Não vejo um caminho para isso sem um pouco de código em css agora.

1 curtida