From cfa4f66b8bf67ecbbdd7a28048c04045ed8dd8ab Mon Sep 17 00:00:00 2001 From: badain Date: Mon, 27 Apr 2020 21:59:43 -0300 Subject: [PATCH] melhorias de design (#25) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit melhora a navegação mobile do site --- css/custom.css | 63 +++++++++++++--- css/toc.css | 9 ++- img/icon_arrow_up.svg | 12 ++++ index.html | 56 +++++---------- informacoes.html | 36 +++++----- leitos.html | 163 +++++++++++++++++++++++------------------- midia.html | 4 +- municipios.html | 8 +-- perguntas.html | 4 +- progressao.html | 4 +- sobre.html | 4 +- 11 files changed, 209 insertions(+), 154 deletions(-) create mode 100644 img/icon_arrow_up.svg diff --git a/css/custom.css b/css/custom.css index e18d0064b4e..9f5c2f6d475 100644 --- a/css/custom.css +++ b/css/custom.css @@ -17,7 +17,7 @@ body { z-index: 1020; } -/* TYPE */ +/* NAVBAR: TYPE */ #navbarDropdown { font-family: 'Poppins', sans-serif; font-size: .9rem; @@ -31,17 +31,17 @@ body { text-align: center; } -/* TYPE: MENU RESTING */ +/* NAVBAR: MENU RESTING */ .navbar-light .navbar-nav .nav-link { color: rgba(0,0,0,.7); } -/* TYPE: MENU FOCUS */ +/* NAVBAR: MENU FOCUS */ .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: rgba(0,0,0,.9); } -/* TYPE: MENU ACTIVE */ +/* NAVBAR: MENU ACTIVE */ .destaque { color: #007bff; font-size: .9rem; @@ -85,7 +85,7 @@ body { } .navbar-brand { - margin-right: auto!important; /*Fixes logo on the rigth*/ + margin-right: auto!important; /*Fixes logo on the right*/ } .navbar-light .navbar-toggler { @@ -96,7 +96,7 @@ body { .navbar-logo { height: 33px!important; } - .nav-link { + .destaque { padding: .5rem 0.25rem!important; } } @@ -119,9 +119,15 @@ body { } } -/* PAGE TITLE & UPDATE DATE */ +/* GLOBAL: PAGE TITLE & UPDATE DATE */ .main-title { - margin-left: 1.3rem; + margin-left: 0.2rem; +} + +@media (min-width: 576px) { + .main-title { + margin-left: 1.3rem; + } } .display { font-size: 3rem; @@ -129,6 +135,7 @@ body { line-height: 1.2; display: inline-block; } + /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 767.98px) { .display { @@ -163,7 +170,7 @@ body { /* BUTTON */ .btn { - margin-top: .25rem; + margin-top: .5rem; } /* CARDS */ @@ -179,6 +186,15 @@ body { margin: 1rem!important; } +@media (max-width: 767.98px){ + .card-columns { + margin: 1rem .5rem!important; + } + .card { + padding: 1.25rem 1rem; + } +} + @media (min-width: 1200px) { .one { column-count: 1!important; @@ -228,6 +244,14 @@ body { padding-left: 0; } } +@media (max-width: 767.98px) { + .three-one { + margin: 1rem!important; + } + .four-one { + margin: 1rem!important; + } +} /* TOC: Auto margin for pages w/ toc */ @media (max-width: 1199.98px) { @@ -246,11 +270,11 @@ a.text-reset:hover { } .card.menu:hover { border-color: #007bff!important; - background-color: #f9f9f9; + background-color: #fdfdfd; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .card.selected { - border-color: #007bff!important; + border-color: #7abaff!important; } .card-body { padding: 0!important; @@ -331,6 +355,21 @@ a.text-reset:hover { } } +/* CARD HERO */ +.card-hero { + display: -ms-flexbox; + display: flex; + -ms-flex-align: start; + align-items: center; +} + +/* CARD TYPE */ +.text-justify { + margin-top: 1rem; + margin-bottom: 0; +} + +/* BADGES */ .badge-gray { color: #fff; background-color: #6c757d; @@ -340,6 +379,8 @@ a.text-reset:hover { color: #fff; background-color: #6610f2; } + +/* CHART LEGEND */ .card-chartLegend { display: -ms-flexbox!important; display: flex!important; diff --git a/css/toc.css b/css/toc.css index 9fea712c4a7..4a5e2b7c501 100644 --- a/css/toc.css +++ b/css/toc.css @@ -71,10 +71,16 @@ } .toc-title { - margin: 1rem 0 0 1.42rem; + margin: 1rem 0 0 .28rem; color: #212529; } + @media (min-width: 576px) { + .toc-title { + margin: 1rem 0 0 1.42rem; + } + } + h5{ padding-top: 100px!important; margin-top: -100px!important; } h6{ padding-top: 100px!important; margin-top: -100px!important; } @@ -85,6 +91,7 @@ @media (max-width: 767.98px) { .return { display: inline; + margin: 0 0 0 .3rem; } .card-title { display: inline; diff --git a/img/icon_arrow_up.svg b/img/icon_arrow_up.svg new file mode 100644 index 00000000000..df4e5b1b6b7 --- /dev/null +++ b/img/icon_arrow_up.svg @@ -0,0 +1,12 @@ + + + + + Arrow Up Right + + + \ No newline at end of file diff --git a/index.html b/index.html index f8f98db55cc..fb177530523 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> - + @@ -66,7 +66,7 @@ @@ -120,7 +120,8 @@

Visão Geral

+ +
@@ -129,72 +130,53 @@

Visão Geral

- -
Perguntas
- +
Perguntas

Respostas da nossa equipe para algumas das principais perguntas sobre COVID-19

- - -
+ -
+ +
Ícone que representa um gráfico
- -
Visão Detalhada
- +
Visão Detalhada

Investigue as análises do Observatório em detalhes e filtre os dados por estados do Brasil

- - - -
- + -
+ +
Ícone que representa um gráfico
- -
Análise do Noticiário
- +
Análise do Noticiário

Confira as aparições do Observatório na mídia e nossas análises diárias dos notíciarios no Brasil

- - - -
+
@@ -276,7 +258,10 @@
Dinâmicas de contágio 2

Neste relatório, associamos dados da rede de fluxos rodoviários e da demografia das microrregiões paulistas com os casos confirmados de COVID-19 atualizados em 04/04/2020 para gerar informações estratégicas sobre a - propagação geográfica da pandemia de SARS-CoV-2 no Estado de São Paulo. Identificamos microrregiões que podem + propagação geográfica da pandemia de SARS-CoV-2 no Estado de São Paulo. +

+

+ Identificamos microrregiões que podem atuar como núcleos propagadores da epidemia ou que têm alta vulnerabilidade a receber pessoas infectadas. Desta forma, atualizamos a identificação das microrregiões mais vulneráveis à propagação geográfica da pandemia do novo coronavírus (SARS-CoV-2) no estado de SP. @@ -303,7 +288,7 @@

Dinâmicas de contágio 2
Desenho do coronavírus -
+
Avanço da doença
 @@ -312,9 +297,6 @@
Avanço da doença
- -

Última atualização:

- diff --git a/informacoes.html b/informacoes.html index 30dd8e088eb..9367690f0cf 100644 --- a/informacoes.html +++ b/informacoes.html @@ -13,10 +13,10 @@ - + - + @@ -68,7 +68,7 @@ @@ -118,11 +118,11 @@

Informações Técnicas

-
+

Índice

-
+
@@ -131,15 +131,15 @@

Informações Técnicas

-
Fontes
↩ +
Fontes

Saiba mais sobre a origem dos dados utilizados em nossas análises

-
Fontes Principais
+
Fontes Principais

Utilizamos os registros das notificações de casos de COVID-19 divulgadas diariamente pelo Ministério da Saúde. A cada atualização na plataforma um programa automático de recuperação de dados nos envia os novos registros e dispara a atualização das análise e gráficos neste site.

-
Outras Fontes
+
Outras Fontes

  • Portal sobre Coronavírus da FIOCRUZ
    • @@ -158,7 +158,7 @@
    Outras Fontes
    -
    Estimativa do tempo de duplicação
    ↩ +
    Estimativa do tempo de duplicação

    No início das epidemias o número de infectados cresce exponencialmente, o que implica que o tempo para que o número de @@ -182,7 +182,7 @@

    Estimativa do te
    -
    Projeções de número de casos
    ↩ +
    Projeções de número de casos

    Com o modelo linear ajustado estimamos o número de casos para os próximos dias, e os intervalos de @@ -206,7 +206,7 @@

    Projeções de núme
    -
    Análise de erro das nossas previsões
    ↩ +
    Análise de erro das nossas previsões

    Última atualização: 05/04/2020

    @@ -241,7 +241,7 @@

    Análise de e
    -
    Série temporal dos tempos de duplicação
    ↩ +
    Série temporal dos tempos de duplicação

    Para avaliar o quanto o crescimento da epidemia varia ao longo do tempo, ajustamos o modelo linear para períodos de @@ -265,7 +265,7 @@

    Série te
    -
    Estimativa do Número de Reprodução da Epidemia
    ↩ +
    Estimativa do Número de Reprodução da Epidemia

    Em epidemiologia, uma das medidas mais importantes é o número reprodutivo basal ou razão de reprodução básica @@ -304,7 +304,7 @@

    Es
    -
    Como se estima o número de casos graves?
    ↩ +
    Como se estima o número de casos graves?

    Para calcular uma estimativa do número de casos graves a cada dia, utilizamos os dados de notificação de @@ -362,7 +362,7 @@

    Como se est
    -
    Referências
    ↩ +
    Referências
    1. Ane Cori (2019). EpiEstim: Estimate Time Varying Reproduction Numbers from Epidemic Curves. R @@ -404,17 +404,17 @@
      Referências
      -
      Notas
      ↩ +
      Notas
      1. Modelo linear generalizado Poisson (glm), com função de ligação logarítimica. ↩ + href="#estimativa-do-tempo-de-duplicação">
      2. No começo de Abril, a notificação de casos de síndrome gripal começou a ser registrada num sistema separado, chamado E-SUS VE, o que inclui casos leves. Profissionais de saúde são testados e se positivam - passam a casos confirmados nessa base. ↩ + passam a casos confirmados nessa base.
      diff --git a/leitos.html b/leitos.html index b45fe5a597c..e7625d7e720 100644 --- a/leitos.html +++ b/leitos.html @@ -14,7 +14,7 @@ integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> - + @@ -66,7 +66,7 @@ @@ -122,33 +122,36 @@

      Leitos

      -
      - Ícone que representa o leito de um hospital + Ícone que representa o leito de um hospital -
      +
      Modelando a ocupação dos leitos em São Paulo
      - -

      Em quanto tempo 100% dos leitos de São Paulo estariam ocupados com - COVID-19, sem distanciamento social?

      - -

      Última atualização:

      -

      No início da epidemia no município de São Paulo, a ocupação dos leitos com casos graves confirmados de COVID-19 era de 0.8% dos leitos totais (dados da base oficial de notificações SIVEP-GRIPE), e o número de casos da doença duplicava rapidamente (a cada 2.4 dias, estimado entre os dias 14 e 19 de - março). Usando estes dados, nosso modelo mostra que 100% dos leitos disponíveis em São Paulo seriam - ocupados por pacientes de COVID-19 em apenas 18 dias (dia 6 de abril) se nenhuma medida de - controle - de contágio tivesse sido tomada e o número de leitos se mantivesse constante (Fig. 1 e 2). A - simulação de leitos de UTI mostra resultados parecidos: sem nenhuma medida de controle, 100% dos - leitos de UTI seriam ocupados somente com pacientes de COVID-19 em apenas 14 dias (Fig. 3 e 4). + março). +

      + +
      + Em quanto tempo 100% dos leitos de São Paulo estariam ocupados com COVID-19, sem distanciamento social? +
      + +

      + Usando estes dados, nosso modelo mostra que 100% dos leitos disponíveis em São Paulo seriam + ocupados por pacientes de COVID-19 em apenas 18 dias (dia 6 de abril) se nenhuma medida de + controle de contágio tivesse sido tomada e o número de leitos se mantivesse constante (Fig. 1 e 2). +

      +

      + A simulação de leitos de UTI mostra resultados parecidos: sem nenhuma medida de controle, 100% dos + leitos de UTI seriam ocupados somente com pacientes de COVID-19 em apenas 14 dias + (Fig. 3 e 4).

      @@ -159,14 +162,11 @@
      Modelando a ocupação dos leitos em São Paulo
      -
      - Ícone que representa o leito de um hospital + Ícone que representa o contágio por proximidade -
      +
      Os efeitos do distanciamento social
      - -

      Por que modelar um cenário sem distanciamento social?

      -
      @@ -175,11 +175,23 @@
      Os efeitos do distanciamento social
      Nosso modelo representa um cenário do avanço da epidemia de COVID-19 no município de São Paulo, caso as medidas de distanciamento social não tivessem sido tomadas. Apesar de hipotético, este modelo nos permite explorar o que aconteceria no município de São Paulo caso estas medidas não tivessem sido - tomadas. Ao comparar os resultados do nosso modelo com a atual ocupação de leitos na cidade de São - Paulo, podemos quantificar quantos leitos (e vidas!) as medidas de distanciamento social salvaram + tomadas. +

      + + +
      + Por que modelar um cenário sem distanciamento social? +
      + +

      + Ao comparar os resultados do nosso modelo com a atual ocupação de leitos na cidade de São + Paulo, podemos quantificar quantos leitos (e vidas!) foram salvos pelas as medidas de distanciamento social (trabalho em andamento). A comparação é importante, por exemplo, para o gestor público ter as condições necessárias para tomar a melhor decisão em termos de administração e de política pública, - em especial em um momento de extrema gravidade como é o atual. Nosso modelo, apesar de hipotético, + em especial em um momento de extrema gravidade como é o atual. +

      +

      + Nosso modelo, apesar de hipotético, utiliza dados reais de número de leitos e de casos na cidade. Para representar o cenário sem medidas de distanciamento social, estimamos o tempo de duplicação da doença num período anterior a estas medidas em São Paulo (dias 14 a 19 de março, Fig. 1 e 2). @@ -202,12 +214,14 @@

      Figura 1
      DESCRIÇÃO ACESSÍVEL -

      Previsão da porcentagem de leitos hospitalares ocupados por - COVID-19 - no município de São Paulo entre os dias 15/03 e 13/04 em um cenário sem distanciamento social. A - linha e os pontos amarelos são os casos estimados pelo modelo, e os pontos pretos são os dados - observados de casos graves hospitalizados entre os dias 14 e 19/03 (dados da base oficial de - notificações SIVEP-GRIPE).

      +

      + + Previsão da porcentagem de leitos hospitalares ocupados por COVID-19 no município de São Paulo entre os dias 15/03 e + 13/04 em um cenário sem distanciamento social. A linha e os pontos amarelos são os casos estimados pelo modelo, e os + pontos pretos são os dadosobservados de casos graves hospitalizados entre os dias 14 e 19/03 (dados da base oficial + de notificações SIVEP-GRIPE). + +

      @@ -220,13 +234,14 @@
      Figura 1
      DESCRIÇÃO ACESSÍVEL -

      Versão em escala logarítmica da Fig 1. Previsão da porcentagem - (em escala - logarítmica) de leitos hospitalares ocupados por COVID-19 no município de São Paulo entre os - dias - 15/03 e 13/04 em um cenário sem distanciamento social. A linha e os pontos amarelos são os casos - estimados pelo modelo, e os pontos pretos são os dados observados de casos graves hospitalizados - entre os dias 14 e 19/03 (dados da base oficial de notificações SIVEP-GRIPE).

      +

      + + Versão em escala logarítmica da Fig 1. Previsão da porcentagem (em escala logarítmica) de leitos hospitalares + ocupados por COVID-19 no município de São Paulo entre os dias 15/03 e 13/04 em um cenário sem distanciamento social. + A linha e os pontos amarelos são os casos estimados pelo modelo, e os pontos pretos são os dados observados de casos + graves hospitalizados entre os dias 14 e 19/03 (dados da base oficial de notificações SIVEP-GRIPE). + +

      @@ -244,27 +259,30 @@
      Figura 2
      -
      - Ícone que representa o leito de um hospital + Ícone que representa um público de pessoas -
      +
      A redução do isolamento social
      - -

      É arriscado reduzir o isolamento social em municípios com mais de 50% dos - leitos disponíveis?

      + +
      + É arriscado reduzir o isolamento social em municípios com mais de 50% dos leitos disponíveis? +
      + -

      - Nosso modelo sugere que sim. Mesmo em cidades onde pacientes com COVID-19 ocupam atualmente uma +

      + Nosso modelo sugere que sim. Mesmo em cidades onde pacientes com COVID-19 ocupam atualmente uma porcentagem baixa dos leitos, a ocupação total de leitos pode ser atingida muito rapidamente sem medidas preventivas. Medidas preventivas, como o isolamento social, aumentam o tempo de duplicação - da doença e, portanto, diminuem a velocidade de ocupação dos leitos de hospitais. Iniciar as medidas - preventivas somente quando 50% dos leitos estiverem ocupados pode ser muito tarde, já que o número - de hospitalizados por COVID-19 aumenta exponencialmente, e os efeitos de medidas preventivas podem - demorar para afetar o número de hospitalizações por COVID-19. - + da doença e, portanto, diminuem a velocidade de ocupação dos leitos de hospitais. +

      +

      + Iniciar as medidas preventivas somente quando 50% dos leitos estiverem ocupados pode ser muito tarde, já que o + número de hospitalizados por COVID-19 aumenta exponencialmente, e os efeitos de medidas preventivas podem demorar + para afetar o número de hospitalizações por COVID-19.

    @@ -274,35 +292,30 @@
    A redução do isolamento social
    + -
    - Ícone que representa o leito de um hospital + Ícone que representa um hospital -
    -
    Quantos leitos existem na cidade de São Paulo? -
    - -

    Em quanto tempo 100% dos leitos de São Paulo estariam ocupados com - COVID-19, sem distanciamento social?

    +
    +
    Quantos leitos existem na cidade de São Paulo?

    - De acordo com o Cadastro Nacional de Estabelecimentos de Saúde (CNES) [Ref. 1], - a cidade de São - Paulo possui 4.205 leitos de UTI para adultos, dos quais 25% são SUS, e 27.847 leitos simples para - adultos dos quais 52% são SUS. Esses leitos estão disponíveis para pacientes com diversos tipos de - enfermidades. Até o momento, tem sido difícil saber com precisão quantos leitos estão disponíveis - exclusivamente para acolherem pessoas acometidas de COVID-19 ou Síndrome Respiratória Aguda Grave - (SRAG). Há informes oficiais que os gestores das redes hospitalares, tanto pública quanto privada, - suspenderam os chamados procedimentos eletivos (não urgentes), re-alocaram doentes entre - enfermarias, adequaram e ainda vêm adequando espaços físicos, dentro e fora dos hospitais, para - aumentar a disponibilidade de leitos para os casos de COVID-19 (Fonte: Secretaria Municipal de São - Paulo). - - + De acordo com o Cadastro Nacional de Estabelecimentos de Saúde (CNES) [Ref. 1], a cidade de São + Paulo possui 4.205 leitos de UTI para adultos, dos quais 25% são SUS, e 27.847 leitos simples para adultos dos quais + 52% são SUS. Esses leitos estão disponíveis para pacientes com diversos tipos de enfermidades. Até o momento, tem + sido difícil saber com precisão quantos leitos estão disponíveis exclusivamente para acolherem pessoas acometidas de + COVID-19 ou Síndrome Respiratória Aguda Grave (SRAG). +

    +

    + Há informes oficiais que os gestores das redes hospitalares, tanto pública quanto privada, suspenderam os chamados + procedimentos eletivos (não urgentes), re-alocaram doentes entre enfermarias, adequaram e ainda vêm adequando espaços + físicos, dentro e fora dos hospitais, para aumentar a disponibilidade de leitos para os casos de COVID-19.

    +

    Fonte: Secretaria Municipal de São Paulo

    diff --git a/midia.html b/midia.html index 39c96fb8615..672762d54fc 100644 --- a/midia.html +++ b/midia.html @@ -14,7 +14,7 @@ integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> - + @@ -66,7 +66,7 @@ diff --git a/municipios.html b/municipios.html index 36f4c6670b3..cedcadfb472 100644 --- a/municipios.html +++ b/municipios.html @@ -14,7 +14,7 @@ integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> - + @@ -66,7 +66,7 @@ @@ -263,7 +263,7 @@
    Hospitalizações em
    - @@ -280,7 +280,7 @@
    Hospitalizações em
    -

    Acesse a página informações +

    Acesse a página informações para saber mais sobre o método.

    Observatório COVID-19
    diff --git a/perguntas.html b/perguntas.html index 7e1cc99863f..ae23550782f 100644 --- a/perguntas.html +++ b/perguntas.html @@ -14,7 +14,7 @@ integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> - + @@ -66,7 +66,7 @@ diff --git a/progressao.html b/progressao.html index f37b30db376..d7f082a1bd1 100644 --- a/progressao.html +++ b/progressao.html @@ -14,7 +14,7 @@ integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> - + @@ -66,7 +66,7 @@ diff --git a/sobre.html b/sobre.html index 3f256ceff7a..6c3e833cc44 100644 --- a/sobre.html +++ b/sobre.html @@ -14,7 +14,7 @@ integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> - + @@ -66,7 +66,7 @@