Portlet de calendário estendido. Problema de quebra de layout

[FernandoNasicimento]

Segue abaixo um erro de quebra de layout do portlet de calendário estendido.
Outro ponto verificado: Portlet não avança e nem retrocede entre as datas

Versão ::

[idgserpro]

Layout

1 - O erro de quebra de layout foi ocasionado pelo atualização de plone.app.event. É necessário customizar um javascript (veja mais sobre essa decisão plonegovbr/brasil.gov.portal#412 (comment)).

2 - O mês que ficava alinhado no centro do portlet agora fica alinhado à esquerda devido à atualização do collective.upload que utiliza o bootstrap e cria uma regra th com text-align: left:

https://github.com/collective/collective.upload/blob/45278693169d568da9205863ec6e03cd977884f5/webpack/app/upload.less#L6
https://github.com/distros/bootstrap-less/blob/f07af08fe8bdafb334df3d86e5e6790b842d4cbf/bootstrap/tables.less#L15
https://github.com/distros/bootstrap-less/blob/f07af08fe8bdafb334df3d86e5e6790b842d4cbf/bootstrap/tables.less#L15

collective.portlet.calendar já define a regra de centralizar o nome do mês, portanto iremos apenas fazer com que o registro do css do upload seja feito antes do css de collective.portlet.calendar (usando insert-before no cssregistry.xml) no nosso pacote e também com um upgradeStep.

Como esse problema ocorre devido ao uso do collective.upload, deve ser corrigido no brasil.gov.portal (pois collective.upload não é dependência de brasil.gov.agenda).

Funcionalidade próximo mês

Será feito um patch baseado em plone/Products.CMFPlone#2215 por não podermos atuar no namespace Plone. Basicamente, adicionando um str na variável path mencionada pelo @claytonc resolve o problema (e como em https://github.com/zopefoundation/Zope/blob/2.13.27/src/OFS/Traversable.py#L149 já é esperado um str, não vejo maiores problemas nesse patch enquanto não é feito e lançado upstream).

[idgserpro]

Acho que a implementação aqui não foi a mais correta: será necessário, no main.css, forçar uma regra caption,th{text-align:center} (ou similar) além de registrar o upload.css antes como já foi feito nesse relato, pois quando se está logado, o nome do mês continua alinhado à esquerda.

Falo isso porque o html renderizado é:

<table class="ploneCalendar" summary="Calendário">
<caption class="hiddenStructure">Junho</caption>
<thead>
<tr class="month">
<th colspan="7">
<a href="http://brasil.gov.portal-1.x:8080/Plone?month:int=5&amp;year:int=2018&amp;orig_query=" rel="nofollow" title="Mês anterior" id="calendar-previous" data-month="5" data-year="2018" class="kssCalendarChange kssattr-year-2018 kssattr-month-5 calendarPrevious">«</a>
Junho 2018
<a href="http://brasil.gov.portal-1.x:8080/Plone?month:int=7&amp;year:int=2018&amp;orig_query=" rel="nofollow" title="Próximo mês" id="calendar-next" data-month="7" data-year="2018" class="kssCalendarChange kssattr-year-2018 kssattr-month-7 calendarNext">»</a>
</th>
</tr>
<tr class="weekdays"><th scope="col">Do</th><th scope="col">Se</th><th scope="col">Te</th><th scope="col">Qu</th><th scope="col">Qu</th><th scope="col">Se</th><th scope="col">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td class="todaynoevent"><strong>11</strong></td>
<td class="event">
<strong>
<a href="http://brasil.gov.portal-1.x:8080/Plone/agenda/2018-06-12" title="Agenda">12</a></strong></td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</tbody>
</table>

Veja que o th está dentro do <tr class="month">, portanto a regra do portlet calendar em https://github.com/collective/collective.portlet.calendar/blob/1.0b2/collective/portlet/calendar/browser/calendar_styles/calendar.css#L20 que define o tr.month como center não irá funcionar pois na hierarquia css o th é filho do tr e, portanto, mais específico.

Acho que o ideal aqui seria, em https://github.com/plonegovbr/brasil.gov.portal/blob/3583d4c3dbff69e128c585f954eb8d3b615f976e/src/brasil/gov/portal/static/css/main.css#L1283, criar uma nova seção, "Portlet de calendário estendido", colocando a regra

.portletCalendarEx th {
    text-align: center;
}

@rodfersou e @agnogueira, favor expressarem suas opiniões. Precisamos resolver isso antes de sair um novo release 1.5.x.

[rodfersou]

eu usaria uma regra flexbox para corrigir a posição dos elementos.

[agnogueira]

@idgserpro Tranquilo pra mim esse enfoque se resolve o problema agora.
Mas acho que vale também alterar o CSS do calendar, para tornar a regra mais específica. Apesar de ser um erro específico na nossa seleção de produtos, mais gente pode encontrar esse problema quando utilizar em conjunto com o bootstraap.

[idgserpro]

@agnogueira Acha então que

.portletCalendarEx th {
    text-align: center;
}

Deveria ser adicionado em collective.portlet.calendar com essa justificativa, evitar conflito quando estiver usando bootstrap?

[rodfersou]

me parece a solução mais simples

[idgserpro]

De qualquer forma, precisamos adicionar aqui porque usar o último release de collective.portlet.calendar ainda não é possível.

[idgserpro]

Temos outro problema: ao atualizar um IDG 1.0.5 para as branches 1.x com essa correção, o portlet de agenda não cria mais os links para as agendas a não ser que eu dê um updateCatalog. Não sei se isso é um problema do Plone ou do collective.portlet.calendar. @hvelarde já viu algo parecido?

Antes do update catalog:

Depois do update catalog:

Código html do "evento" renderizado após o update catalog:

<td class="event">
    <strong>
        <a href="http://localhost:8080/Plone/agenda/2018-06-09" title="Agenda">9</a>
    </strong>
</td>

[hvelarde]

@idgserpro nunca vi, mas acho que pode estar relacionado com a atualização do plone.app.contenttypes.

[idgserpro]

O "erro" ocorre aqui: https://github.com/plone/Products.CMFPlone/blob/4.3.15/Products/CMFPlone/CalendarTool.py#L88

Sem rodar updateCatalog:

{'start': {'query': DateTime('2018/06/30 23:59:59 GMT-3'), 'range': 'max'}, 'end': {'query': DateTime('2018/06/01 00:00:00 GMT-3'), 'range': 'min'}, 'path': '/Plone/agenda', 'portal_type': ('Event', 'AgendaDiaria'), 'sort_on': 'start', 'review_state': ('published',)}

[]

Rodando updateCatalog:

{'start': {'query': DateTime('2018/06/30 23:59:59 GMT-3'), 'range': 'max'}, 'end': {'query': DateTime('2018/06/01 00:00:00 GMT-3'), 'range': 'min'}, 'path': '/Plone/agenda', 'portal_type': ('Event', 'AgendaDiaria'), 'sort_on': 'start', 'review_state': ('published',)}
[<Products.ZCatalog.Catalog.mybrains object at 0x7f98d7287db8>]

[idgserpro]

IDG 1.0.5

Atualizando do 1.0.5 para 1.5.2 (a ser lançado) mas sem rodar o upgradeStep de plone.app.contenttypes

Atualizando do 1.0.5 para 1.5.2 (a ser lançado) rodando o upgradeStep de plone.app.contenttypes

Atualizando do 1.0.5 para 1.5.2 (a ser lançado) rodando todos os upgradeSteps + um de teste em que ele executa catalog.catalog_object(obj) em Agenda, AgendaDiaria e Compromisso:

[idgserpro]

#97, plonegovbr/brasil.gov.portal#482 e collective/collective.portlet.calendar#10 criados.

@hvelarde não entendi muito bem o porquê de #82 (comment) (como você mesmo disse, devia ser plone.app.contenttypes e era mesmo), mas chamando o catalog_object o portlet volta a mostrar os itens.

[hvelarde]

vou avisando que esse pacote torna-se desnecessário no IDG 2.0.

[idgserpro]

Você está falando do collective.portlet.calendar?