lbell/pretty-google-calendar

Need better toolbar/title handling on small screens

Opened this issue · 5 comments

lbell commented

Removing the title from the center arbitrarily ain't great. Bumping buttons to the bottom could be confusing. The default squish is fugly:

image

What to do?

lbell commented

Slightly better solution:
image

mwguerra commented

Or something like that.
Screenshot 2022-11-04 at 4 19 36 AM
The custom CSS are on the style tags below. I hope this helps.

<div class="fc-header-toolbar fc-toolbar fc-toolbar-ltr" style="display: flex; flex-direction: column; gap: 4px;">
  <div class="fc-toolbar-chunk" style="width: 100%; display: flex; order: 3;">
    <div class="fc-button-group" style="flex: 1;">
      <button type="button" title="Anterior" aria-pressed="false" class="fc-prev-button fc-button fc-button-primary">
        <span class="fc-icon fc-icon-chevron-left"></span>
      </button>
      <button type="button" title="Próximo" aria-pressed="false" class="fc-next-button fc-button fc-button-primary">
        <span class="fc-icon fc-icon-chevron-right"></span>
      </button>
    </div>
    <button type="button" title="Hoje" disabled="" aria-pressed="false" class="fc-today-button fc-button fc-button-primary">Hoje</button>
  </div>
  <div class="fc-toolbar-chunk" style="order: 1; font-size: 10px;">
    <h2 class="fc-toolbar-title" id="fc-dom-1">4 de nov. de 2022 – 3 de nov. de 2023</h2>
  </div>
  <div class="fc-toolbar-chunk" style="width: 100%; display: flex; order: 2;">
    <div class="fc-button-group" style="width: 100%;">
      <button type="button" title="Mês" aria-pressed="false" class="fc-dayGridMonth-button fc-button fc-button-primary">Mês</button>
      <button type="button" title="Lista" aria-pressed="true" class="fc-listCustom-button fc-button fc-button-primary fc-button-active">Lista</button>
    </div>
  </div>
</div>
mwguerra commented

One possible CSS code for the style above is:

@media (max-width: 767px) {
  .fc-toolbar.fc-header-toolbar {
    display: flex;
    flex-direction: column; 
    gap: 4px;
  }

  .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk .fc-button-group {
    flex: 1;
  }

  .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk .fc-toolbar-title
  {
    font-size: 16px;
  }

  .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:has(.fc-button-group) {
    width: 100%; 
    display: flex; 
  }

  .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:has(.fc-toolbar-title) {
    order: 0; 
  }

  .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:has(.fc-button-group):nth-of-type(1) {
    order: 1;
  }
}

But it's your call. Fell free to use it or change it.
Best regards!

  • 👍1
neverthehood commented

There was a case about month title which dissappears on mobile:
https://wordpress.org/support/topic/month-labels-disappear-on-mobile

Is there a solution to reveal it back?

  • 👀1