Referencias artigo modo leitura Firefox #360
Conversation
…nar em modo leitura firefox
|
@paratiuid @alexxxmendonca fiquei na dúvida se isso vai para o site atual ou só quando for aplicado o design system |
|
@robertatakenaka eu não sei dizer. @paratiuid você sabe? |
|
@robertatakenaka penso que vá para a nova versão contendo o design system. Foi feito em cima dos novos modelos. |
|
@paratiuid preciso de uma ajuda para lidar com esta questão. Exemplo de Referências Autores, Ano e Notas numeradas Exemplo de Referências numeradas |
|
@paratiuid Nas notas há um problema que não está diretamente relacionado com este issue, no entanto, ocorre nas notas e nas referências. Quando há um link no texto, há uma quebra. Acho que tem a ver com o estilo que faz com que dentro deste contexto fique cada link em uma linha. Exemplo em anexo dqR6y8bPFVVQnxnFHY66ZZK.pt.3_0.html.zip Correto |
…tótipo da solução sugerida. Foi substituída a tag <ol> por uma <ul>. Foi removido o <style> com as classes css que já foram anexadas ao design system. Foram removidos os <scripts> desnecessários pois já foram incluídos no design system.
|
enviei uma atualização no arquivo artigo-ref-rascunho.html. Este arquivo é um protótipo da solução proposta. Neste arquivo foram removidos os estilos css que estavam na tag style e os scripts javascript que estavam na tag script. Analisando este arquivo, é possível verificar que somente o primeiro parágrafo da introdução exibe corretamente os tooltips azuis. Somente no primeiro parágrafo da introdução funciona corretamente pois o código de chamada do tooltip foi alterado nesse trecho de código e essa é a sugestão de melhoria. As tags sup que contém o link parra o item da lista, devem ser exibidas somente em modo leitura também. Foram removidos da nova lista sugerida o link de voltar com o ícone de seta. Entendemos que pode ocorrer mais de uma citação ao longo do corpo do artigo e por isso fica inviável saber para qual ponto voltar. Dessa meneira, entendemos que o usuário quando em modo leitura, pode usar a função voltar do próprio navegador para regressar ao seu ponto de leitura anterior. Foi substituída também a tag ol pela ul com o propósito de não exibir numeração. As demais listas de referências que apareceram desconfiguradas em outros arquivos, foram corrigidas no html com a inclusão da classe refList e outros ajustes pontuais. Portanto, todas as listagens de referências devem trazer a classe refList no ul. Acredito que a sugestão da criação de uma nova lista independentemente de haver ou não outras listas de referências no artigo possa ser um ponto polêmico. Portanto, acredido ser importante uma conversa para alinharmos este ponto. Abaixo, envio os arquivos relatados com problemas nas listagens de referência que foram ajustados no html. |
|
@paratiuid vc tinha visto este comentário? #360 (comment)
|
|
fiz o ajuste no arquivo missing_separator_between_authors_and_title.pt.3_0.html que segue anexado abaixo. Foram alterados somente os links do primeiro parágrafo da introdução. Este parágrafo contém um link referente a lista de notas (número 1) e contém também um link para a lista de referências ([LEITE; LACERDA, 2018]). Neste arquivo html eu juntei os itens de listagem li junto aos itens da listagem das referências. Somente dessa maneira o comportamento funcionou corretamente em modo leitura. O CSS e o JS responsáveis pelo comportamento foram atualizados diretamente no design system.
missing_separator_between_authors_and_title.pt.3_0 - review-31-01-2023.html.zip |
|
@paratiuid funciona como esperado, vou implementar |
|
@paratiuid estamos quase perfeito. Preciso de uma pequena ajuda. Lembrando que os números das notas são em laranja e os números das referências são em azul. No anexo, você encontrará a versão 3.0 e a atual. Em anexo, o documento cujos números das notas estão laranja e está perfeito! |
|
@robertatakenaka Para resolver, adicionei a classe ref-list no elemento pai do refList, da mesma forma que ocorre para os itens que devem ser exibidos em amarelo. A única diferença é que somando as classes xref e big ele colore de amarelo e deixando apenas a class xref ele mantém o padrão azul. Na imagem abaixo, o primeiro item é exibido em amarelo e os demais em azul. Segue o arquivo html alterado. O CSS foi ajustado diretamente no design system. |
O que esse PR faz?
Este PR adiciona um template (artigo-ref-rascunho.html) que contém instruções de como deve ser feita a alteração das referencias do corpo do artigo para que este passe a funcionar corretamente quando estiver no modo leitura do firefox.
Leia a explicação abaixo:
Arquivo:
htmlgenerator/affiliations/artigo-ref-rascunho.html
Linhas:
a partir da linha 254.
Explicação:
A partira da linha 254 inicia o parágrafo da introdução. Nesa único parágrafo que está visivel ao abrir o documento existem algumas referências.
Ao visualizar o código é possível observar que há alguns comentários indicados com as pontuações #1, #2...
Os códigos comentados mostram a forma antiga de como a referência é exibida no corpo do artigo. Logo abaixo está a forma nova sugerida. Essa nova forma remove o conteúdo da referência do corpo do html mas a mantém no title.
O que deve ser feito pela equipe SciELO?
Substituir a forma antiga da inclusão da referência pela nova.
Deve ser criado um script que passe por todas as referencias e substitua a forma antiga pela nova. Além da substituição é importante observar que é colocado um id #refId_1, #refId_2... no novo código. Esse id é responsável pela ancoragem da lista de referencias para o corpo do texto.
Outro ponto importante é que deve ser criada dinamicamente uma lista contendo as referências. Dessa forma, ao clicar sobre a referência em modo leitura, é feita a ancoragem para o item da lista e do item da lista novamente para o corpo do texto.
No arquivo artigo-ref-rascunho.html que é usado como exemplo aqui, a lista está localizada a partir da linha 653.
Pontos importantes:
1 - A lista que deve ser criada ficará visível somente em modo leitura. Isso é possível através da classe .articleReferenceFootNotes que está colocada no div articleSection (linha 653) que contém toda a lista. Essa classe CSS estará inserida diretamente no design system, não se fazendo necessário manter sua criação conforme consta nesse documento (artigo-ref-rascunho.html - linha 15) de exemplo.
*Para que seja possível testar, mantenha as classes CSS criadas das linhas 11 até 28 pois estas ainda não estão inseridas na última versão do scielo-design-system disponível para download.
2 - Por se tratar de um arquivo de exemplo, este contém scrits javascript necessários para exibir o bom funcionamento dos tooltips a fim de se fazer entender o funcionamento do ajuste. Estes scripts javascript estarão inseridos nos devidos scripts do design system e portanto não devem estar no corpo do artigo.
3 - Esta tarefa consiste apenas em substituir a forma antigo da chamada das referências e em criar a lista das referencias no final do artigo para que possam ser feitas as ancoragens tanto da referencia para a lista quanto da lista para a referencia no corpo do artigo.
Onde a revisão poderia começar?
htmlgenerator/affiliations/artigo-ref-rascunho.html
Acesse o arquivo citado acima no firefox para ver o comportamento em ação.
O arquivo apresentará apenas um parágrafo de texto no grupo introdução. Estas referencias mostradas nesse parágrafo devem ser exibidas normalmente no evento de mouseover quando estiver no modo padrão.
Para acessar o modo somente leitura do firefox, clique no ícone existente no lado direito da barra de endereços no navegador firefox.
Ao ativar o modo somente leitura será possível ver que as referencias do parágrafo introdução serão adicionado por um item sup 1, 2, 3... contendo um link que ancorará para o item de lista específico da referencia.
Como este poderia ser testado manualmente?
Siga os passos já citados anteriormente.
Algum cenário de contexto que queira dar?
Leia atentamente os textos colocado aqui neste PR a fim de entender o contexto de testes.
Screenshots
modo padrão
modo leitura
Quais são tickets relevantes?
#2512
scieloorg/opac#2512
Referências
Indique as referências utilizadas para a elaboração do pull request.