Merge pull request #244 from noesya/event-add_to_calendar

Events : buttons add to calendar

assets/sass/_theme/_configuration.sass

@@ -147,6 +147,13 @@ $btn-border-radius: px2rem(4) !default
 $btn-border: 1px solid $color-text !default
 $btn-hover-background: $color-background-alt !default
 
+// Chip
+$chip-background: $color-background !default
+$chip-background-hover: $color-background-alt !default
+$chip-border: 1px solid $color-border !default
+$chip-border-radius: $btn-border-radius !default
+$chip-color: $color-text !default
+
 // Form
 $form-btn-color: $color-background !default
 $form-btn-background-color: $color-accent !default

assets/sass/_theme/_utils.sass

@@ -443,25 +443,24 @@ $space-unit: 4 !default
     src: $src
 
 @mixin sidebar
+    @include media-breakpoint-down(desktop)
+        padding: 0 half($grid-gutter-sm)
+        margin-bottom: $spacing3
     @include in-page-with-sidebar
-        @include media-breakpoint-down(desktop)
-            padding: 0 half($grid-gutter-sm)
-            margin-bottom: $spacing3
-        @include media-breakpoint-up(desktop)
-            @include container-margin-left
-            margin-top: 0
-            top: 0
-            left: 0
-            height: 100%
-            position: absolute
-            width: col-outside-container(4)
-            &:not(.paper-sidebar)> div
-                @include sticky($spacing1)
-            .toc-container
-                border-top: 1px solid $color-border
-                padding-top: $spacing1
-                position: static
-                margin-left: 0
+        @include container-margin-left
+        margin-top: 0
+        top: 0
+        left: 0
+        height: 100%
+        position: absolute
+        width: col-outside-container(4)
+        &:not(.paper-sidebar)> div
+            @include sticky($spacing1)
+        .toc-container
+            border-top: 1px solid $color-border
+            padding-top: $spacing1
+            position: static
+            margin-left: 0
 
 // Old browsers support
 

assets/sass/_theme/design-system/typography.sass

@@ -269,7 +269,19 @@ a,
         @include icon-block(link-blank-block, after)
     &:hover
         background: $btn-hover-background
-    
+
+.chip
+    @include meta
+    background: $chip-background
+    border: $chip-border
+    border-radius: $chip-border-radius
+    color: $chip-color
+    text-decoration: none
+    padding: space(1) space(4)
+    transition: background 0.3s
+    &:hover
+        background: $chip-background-hover
+
 .link-more
     @include link
     @include icon(arrow, before)

assets/sass/_theme/sections/events.sass

@@ -6,12 +6,13 @@
     .lead
         @include h3
         // Safe spacing if post is empty
-    .document-content
-        min-height: 350px
-        &::after
-            content: ''
-            display: block
-            height: 1px
+    @include media-breakpoint-up(desktop)
+        .document-content
+            min-height: 600px
+            &::after
+                content: ''
+                display: block
+                height: 1px
 
 .events__section
     .archive-link
@@ -27,21 +28,18 @@
             text-align: left
 
 .event-infos
-    margin-bottom: 0
-    @include meta
     @include list-reset
-    font-size: $table-body-size
     @include media-breakpoint-up(desktop)
         font-size: $table-body-size-desktop
+        padding-bottom: $spacing3
     .event-date
         text-transform: capitalize
     ul
         @include list-reset
     > li
         padding-top: $spacing0
-        padding-bottom: $spacing0
-        padding: 1rem 0
-        font-family: $body-font-family
+        &:not(:last-child)
+            padding-bottom: $spacing0
         > span
             @include meta
             color: $color-text-alt
@@ -52,11 +50,20 @@
             @include icon(arrow)
             &::before
                 padding-right: 0.3rem
-    a
-        @include link($color-accent)
     .events-categories
         display: flex
         gap: space(2)
+        a
+            @include link($color-accent)
+    .events-actions
+        align-items: start
+        display: flex
+        flex-direction: column
+        gap: space(1)
+        padding-bottom: 0
+        a
+            &::after
+                display: none
     .share
         a
             color: inherit

i18n/en.yml

@@ -151,9 +151,18 @@ diplomas:
   type: Type de diplôme
 events:
   archives: Previous events archive
+  add_to_calendar:
+    title: Add to calendar
+    ical: Download .ICS file
+    google: Google Calendar
+    office: Office 365
+    outlook: Microsoft Outlook
+    yahoo: Yahoo! Calendar
   category:
     one: Category
     other: Categories
+  date: Date
+  hour: Time
   none: No event
   next: Next event
   next_aria: Next event “{{ .Title }}”
@@ -162,6 +171,7 @@ events:
   from:
     day: From day
     hour: From hour
+  share: Partager sur
   to:
     day: To day
     hour: To hour

i18n/fr.yml

@@ -153,6 +153,13 @@ diplomas:
   type: Type de diplôme
 events:
   archives: Accéder aux archives des événements passés
+  add_to_calendar:
+    title: Ajouter à mon agenda
+    ical: Télécharger un fichier .ICS
+    google: Google Calendar
+    office: Office 365
+    outlook: Microsoft Outlook
+    yahoo: Yahoo! Calendar
   category:
     one: Catégorie
     other: Catégories
@@ -166,6 +173,7 @@ events:
   from:
     day: Date de début
     hour: Heure de début
+  share: Partager sur
   to:
     day: Jour de fin
     hour: Heure de fin

layouts/partials/events/event-infos.html

@@ -21,12 +21,35 @@
   {{ end }}
   {{ if .Params.events_categories }}
     <li>
-      <span>{{ i18n "events.category" (dict "Count" ( len .Params.events_categories )) }}</span>
+      <span>{{ i18n "events.category" ( len .Params.events_categories ) }}</span>
       {{ partial "events/categories.html" . }}
     </li>
   {{ end }}
   <li>
-    <span>{{ i18n "posts.share" }}</span>
+    <span>{{ i18n "events.share" }}</span>
     {{ partial "commons/share.html" . }}
   </li>
+
+  {{ with .Params.dates.add_to_calendar }}
+    {{ $links := . }}
+    <li class="events-actions">
+      <span>{{ i18n "events.add_to_calendar.title" }}</span>
+      {{- $types := slice "ical" "google" "office" "outlook" "yahoo" -}}
+      {{- range $type := $types -}}
+        {{ $label := i18n (printf "events.add_to_calendar.%s" $type) }}
+        {{ with index $links $type }} 
+          <a class="chip"
+            {{ if eq $type "ical" -}}
+              {{ printf `href="%s"` . | safeHTMLAttr }} download
+            {{ else }}
+              href="{{ . }}"
+              target="_blank"
+            {{ end }} >
+            {{- $label -}}
+          </a>
+        {{- end }}
+      {{- end }}
+  </li>
+  {{- end }}
+
 </ul>

layouts/partials/posts/post-infos.html

 <ul class="post-infos">
   {{ if .Params.posts_categories }}
     <li>
-      <span>{{ i18n "posts.categories" ( len .Params.posts_categories ) }}</span>
+      <span>{{ i18n "posts.category" ( len .Params.posts_categories ) }}</span>
       {{ partial "posts/categories.html" . }}
     </li>
   {{ end }}