[calendar] view switch

components/CalendarExtra.vue

@@ -47,12 +47,12 @@
                 </p>
                 <p class="mb-0" v-else>
                     <a :href="`/calendar/${year.year}-overview.png`" target="_blank" rel="noopener" class="btn btn-outline-primary m-1">
-                        <Icon v="image"/>
-                        <T>calendar.image.overview</T>
+                        <Icon v="table"/>
+                        <T>calendar.view.grid</T>
                     </a>
                     <a :href="`/calendar/${year.year}-labels.png`" target="_blank" rel="noopener" class="btn btn-outline-primary m-1">
-                        <Icon v="image"/>
-                        <T>calendar.image.labels</T>
+                        <Icon v="list"/>
+                        <T>calendar.view.list</T>
                     </a>
                 </p>
             </div>

locale/_base/translations.suml

@@ -779,7 +779,8 @@ calendar:
     celebrating_month: 'is celebrated in'
     image:
         header: 'Download an image'
-        overview: 'Overview'
-        labels: 'Labels'
+    view:
+        grid: 'Grid view'
+        list: 'Events list'
     link: 'Link'
     full: 'Full calendar'

locale/de/translations.suml

@@ -762,7 +762,9 @@ calendar:
     celebrating_month: 'wird gefeiert im:'
     image:
         header: 'Bild herunterladen'
-        overview: 'Überschau'
-        labels: 'Etiketten'
+    # TODO
+    view:
+        grid: 'Grid view'
+        list: 'Events list'
     link: 'Link'
     full: 'Ganzer Kalender'

locale/en/translations.suml

@@ -780,7 +780,8 @@ calendar:
     celebrating_month: 'is celebrated in'
     image:
         header: 'Download an image'
-        overview: 'Overview'
-        labels: 'Labels'
+    view:
+        grid: 'Grid view'
+        list: 'Events list'
     link: 'Link'
     full: 'Full calendar'

locale/es/translations.suml

@@ -789,7 +789,9 @@ calendar:
     celebrating_month: 'se celebra en'
     image:
         header: 'Descargar una imagen'
-        overview: 'Vista general'
-        labels: 'Etiquetas'
+    # TODO
+    view:
+        grid: 'Grid view'
+        list: 'Events list'
     link: 'Enlace'
     full: 'Calendario completo'

locale/fr/translations.suml

@@ -784,7 +784,9 @@ calendar:
     celebrating_month: 'est célébrée en'
     image:
         header: 'Télécharger l''image'
-        overview: 'Vue générale'
-        labels: 'Étiquettes'
+    # TODO
+    view:
+        grid: 'Grid view'
+        list: 'Events list'
     link: 'Liens'
     full: 'Calendrier complet'

locale/gl/translations.suml

@@ -783,7 +783,9 @@ calendar:
     celebrating_month: 'celebra-se em'
     image:
         header: 'Baixar uma imagem'
-        overview: 'Visão geral'
-        labels: 'Etiquetas'
+    # TODO
+    view:
+        grid: 'Grid view'
+        list: 'Events list'
     link: 'Link'
     full: 'calendário completo'

locale/ja/translations.suml

@@ -779,7 +779,9 @@ calendar:
     celebrating_month: 'で祝われています'
     image:
         header: '画像をダウンロード'
-        overview: '概要'
-        labels: 'ラベル'
+    # TODO
+    view:
+        grid: 'Grid view'
+        list: 'Events list'
     link: 'リンク'
     full: 'カレンダー全体を見る'

locale/nl/translations.suml

@@ -649,6 +649,4 @@ flags:
     Trixic: 'Trixisch'
     Two_Spirit: 'Bispiritueel'
     Xenogender: 'Xenogender'
-    link: 'Link' # TODO
-    full: 'Full calendar' # TODO
 

locale/pl/events.js

@@ -9,7 +9,7 @@ module.exports = [
     new Event('Rocznica Dekryminalizacji Homoseksualności w Polsce (1932)', null, 9, day(1), EventLevel.Day, ['homosexual', 'gay']),
     new Event('Rocznica Rozpoczęcia Akcji „Hiacynt” (1985)', null, 11, day(15), EventLevel.Day, ['homophobia']),
     new Event('{https://www.facebook.com/429249150318/posts/10164869405325319=Polski Dzień Osób Niebinarnych}', 'Nonbinary', 3, day(9), EventLevel.Day, ['nonbinary']),
-    new Event('Dzień Pamięci Milo Mazurkiewicz', null, 5, day(6), EventLevel.Day, ['transgender', 'nonbinary']),
+    new Event('Dzień Pamięci Milo Mazurkiewicz', '_black-ribbon', 5, day(6), EventLevel.Day, ['transgender', 'nonbinary']),
 
     // one-off events
     new Event('{https://www.facebook.com/events/494846264855467=Parada Równości 2021 (Warszawa)}', 'LGBTQ', 6, dayYear(19, 2021), EventLevel.Day),

locale/pl/translations.suml

@@ -1622,7 +1622,8 @@ calendar:
     celebrating_month: 'obchodzimy'
     image:
         header: 'Ściągnij w formie obrazka'
-        overview: 'Przegląd'
-        labels: 'Etykietki'
+    view:
+        grid: 'Widok kalendarza'
+        list: 'Lista wydarzeń'
     link: 'Link'
     full: 'Pełen kalendarz'

locale/pt/translations.suml

@@ -785,7 +785,9 @@ calendar:
     celebrating_month: 'celebra-se em'
     image:
         header: 'Baixar uma imagem'
-        overview: 'Visão geral'
-        labels: 'Etiquetas'
+    # TODO
+    view:
+        grid: 'Grid view'
+        list: 'Events list'
     link: 'Link'
     full: 'calendário completo'

locale/ru/translations.suml

@@ -764,7 +764,9 @@ calendar:
     celebrating_month: 'празднуется'
     image:
         header: 'Скачать изображение'
-        overview: 'Краткое'
-        labels: 'Детальное'
+    # TODO
+    view:
+        grid: 'Grid view'
+        list: 'Events list'
     link: 'Ссылка'
     full: 'Полный календарь'

routes/calendar.vue

@@ -2,7 +2,7 @@
     <div v-if="year">
         <CommunityNav v-if="!basic"/>
 
-        <h2 class="d-flex justify-content-between">
+        <h2 class="d-flex justify-content-between flex-column flex-md-row">
             <span>
                 <Icon v="calendar-star"/>
                 <T>calendar.headerLong</T> <small class="text-muted">({{year.year}})</small>
@@ -13,6 +13,16 @@
                     <T>domain</T>/{{ config.calendar.route }}
                 </nuxt-link>
             </span>
+            <span v-else class="btn-group">
+                <button :class="['btn', labels ? 'btn-outline-primary' : 'btn-primary']" @click="labels = false">
+                    <Icon v="table"/>
+                    <T>calendar.view.grid</T>
+                </button>
+                <button :class="['btn', labels ? 'btn-primary' : 'btn-outline-primary']" @click="labels = true">
+                    <Icon v="list"/>
+                    <T>calendar.view.list</T>
+                </button>
+            </span>
         </h2>
 
         <CalendarBanner v-if="!basic && year.isCurrent()"/>