From 4ad341bf9b7b400cb0fc5d11eeaaef100408dc6d Mon Sep 17 00:00:00 2001
From: Istarengwa <lilian@thehackingproject.org>
Date: Fri, 13 Mar 2026 12:38:09 +0100
Subject: [PATCH] fix calendar for mobile version

---
 .../stylesheets/application.bootstrap.scss    | 198 ++++++++++++++++--
 app/views/events/index.html.erb               |  73 +------
 2 files changed, 194 insertions(+), 77 deletions(-)

diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
index d69d70a..8785d48 100644
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ b/app/assets/stylesheets/application.bootstrap.scss
@@ -377,6 +377,15 @@ footer h5{
   color: $color-text;
 }
 
+.simple-calendar nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-top: 0.5rem;
+}
+
 .simple-calendar table {
   table-layout: fixed;
   width: 100%;
@@ -391,6 +400,12 @@ footer h5{
   margin-bottom: 0;
 }
 
+.simple-calendar th,
+.simple-calendar td {
+  padding: 0.2rem !important;
+  vertical-align: top;
+}
+
 .simple-calendar .calendar-heading {
   text-align: center;
   margin-bottom: 1rem;
@@ -401,6 +416,18 @@ footer h5{
   font-weight: 700;
 }
 
+.simple-calendar th {
+  text-align: center;
+  white-space: nowrap;
+  word-break: normal;
+  overflow-wrap: normal;
+  font-size: clamp(0.68rem, 2.5vw, 0.95rem);
+}
+
+.simple-calendar td.day {
+  height: auto;
+}
+
 .simple-calendar .day-square {
   aspect-ratio: 1 / 1;
   width: 100%;
@@ -409,12 +436,59 @@ footer h5{
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
+  gap: 0.25rem;
+  min-height: clamp(3rem, 13vw, 5rem);
+  overflow: hidden;
 }
 
 .simple-calendar .day-number {
   font-weight: 700;
   font-size: 0.9rem;
   margin-bottom: 0.25rem;
+  line-height: 1;
+}
+
+.simple-calendar .calendar-events {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 0.25rem;
+}
+
+.simple-calendar .calendar-event {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  max-width: 100%;
+  color: $color-primary;
+  text-decoration: none;
+  border: 1.5px solid $color-primary;
+  border-radius: 999px;
+  padding: 0.16rem 0.45rem;
+  font-size: 0.72rem;
+  line-height: 1.15;
+  overflow: hidden;
+}
+
+.simple-calendar .calendar-event:hover,
+.simple-calendar .calendar-event:focus-visible {
+  background-color: rgba($color-primary, 0.08);
+}
+
+.simple-calendar .calendar-event__dot {
+  display: none;
+  width: 0.32rem;
+  height: 0.32rem;
+  border-radius: 999px;
+  background-color: currentColor;
+  flex: 0 0 auto;
+}
+
+.simple-calendar .calendar-event__title {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .simple-calendar .calendar-heading a {
@@ -439,46 +513,140 @@ footer h5{
   padding: 3px;
 }
 
+@media (max-width: 767.98px) {
+  .simple-calendar {
+    padding: 0.75rem;
+  }
+
+  .simple-calendar .calendar-title {
+    font-size: clamp(1.05rem, 5vw, 1.4rem);
+  }
+
+  .simple-calendar .calendar-heading {
+    margin-bottom: 0.7rem;
+  }
+
+  .simple-calendar .calendar-heading a:first-child::before,
+  .simple-calendar .calendar-heading a:last-child::before {
+    font-size: 0.9rem;
+    padding: 2px 6px;
+  }
+
+  .simple-calendar th {
+    font-size: 0.72rem;
+    padding: 0.12rem !important;
+  }
+
+  .simple-calendar td {
+    padding: 0.1rem !important;
+  }
+
+  .simple-calendar .day-square {
+    padding: 0.3rem;
+    min-height: clamp(2.8rem, 12vw, 4rem);
+  }
+
+  .simple-calendar .day-number {
+    font-size: 0.82rem;
+    margin-bottom: 0.05rem;
+  }
+
+  .simple-calendar .calendar-event {
+    width: 0.6rem;
+    height: 0.6rem;
+    padding: 0;
+    border-radius: 999px;
+    flex: 0 0 auto;
+    justify-content: center;
+  }
+
+  .simple-calendar .calendar-event__dot {
+    display: block;
+  }
+
+  .simple-calendar .calendar-event__title {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
 @media (min-width: 992px) {
   .simple-calendar {
-    width: min(700px, 90vw);
+    width: min(980px, 96vw);
     margin-inline: auto;
-    padding: 0.5rem;
+    padding: 0.75rem;
   }
 
   .simple-calendar .calendar-heading {
-    margin-bottom: 0.35rem;
+    margin-bottom: 0.6rem;
   }
 
   .simple-calendar .calendar-title {
-    font-size: 1rem;
+    font-size: 1.2rem;
   }
 
   .simple-calendar th {
-    font-size: 0.75rem;
-    padding: 0.1rem !important;
+    font-size: 0.9rem;
+    padding: 0.2rem !important;
   }
 
-  .simple-calendar td {
-    padding: 0.12rem !important;
+  .simple-calendar td.day {
+    height: 116px;
+    min-height: 116px;
+    padding: 0.2rem !important;
   }
 
   .simple-calendar .day-square {
     aspect-ratio: auto;
-    height: clamp(52px, 7vh, 72px);
-    min-height: 52px;
-    padding: 0.2rem;
+    height: 108px;
+    min-height: 108px;
+    padding: 0.35rem;
+    overflow-y: auto;
   }
 
   .simple-calendar .day-number {
-    font-size: 0.72rem;
-    margin-bottom: 0.1rem;
+    font-size: 0.82rem;
+    margin-bottom: 0.2rem;
+  }
+
+  .simple-calendar .calendar-events {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .simple-calendar .calendar-event {
+    width: 100%;
+    min-height: 0;
+    justify-content: flex-start;
+    font-size: 0.68rem;
+    padding: 0.1rem 0.35rem;
+  }
+
+  .simple-calendar .calendar-event__dot {
+    display: none;
+  }
+
+  .simple-calendar .calendar-event__title {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    clip: auto;
+    white-space: nowrap;
+    border: 0;
   }
 
   .simple-calendar .calendar-heading a:first-child::before,
   .simple-calendar .calendar-heading a:last-child::before {
-    font-size: 0.75rem;
-    padding: 1px 5px;
+    font-size: 0.82rem;
+    padding: 2px 6px;
   }
 }
 
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 8561a4a..9317419 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -9,63 +9,6 @@
                                   name: "Calendrier des événements",
                                   url_proc: ->(event) { event_url(event) })) %>
 <% end %>
-<% content_for :head do %>
-  <style>
-    @media (min-width: 992px) {
-      .simple-calendar {
-        width: min(980px, 96vw) !important;
-        margin-inline: auto !important;
-        padding: 0.75rem !important;
-      }
-
-      .simple-calendar .calendar-heading {
-        margin-bottom: 0.6rem !important;
-      }
-
-      .simple-calendar .calendar-title {
-        font-size: 1.2rem !important;
-      }
-
-      .simple-calendar th {
-        font-size: 0.9rem !important;
-        padding: 0.2rem !important;
-      }
-
-      .simple-calendar td.day {
-        height: 116px !important;
-        min-height: 116px !important;
-        padding: 0.2rem !important;
-      }
-
-      .simple-calendar .day-square {
-        height: 108px !important;
-        min-height: 108px !important;
-        aspect-ratio: auto !important;
-        padding: 0.35rem !important;
-        overflow-y: auto !important;
-      }
-
-      .simple-calendar .day-number {
-        font-size: 0.82rem !important;
-        margin-bottom: 0.2rem !important;
-        line-height: 1 !important;
-      }
-
-      .simple-calendar .day-square .btn {
-        font-size: 0.68rem !important;
-        padding: 0.1rem 0.35rem !important;
-        margin-top: 0.2rem !important;
-      }
-
-      .simple-calendar .calendar-heading a:first-child::before,
-      .simple-calendar .calendar-heading a:last-child::before {
-        font-size: 0.82rem !important;
-        padding: 2px 6px !important;
-      }
-    }
-  </style>
-<% end %>
-
 <div class="container py-4 mt-4">
   <h1 class="text-center mb-2"><%= @company_information.events_page_title_or_default %></h1>
   <p class="text-center mb-4"><%= @company_information.events_page_subtitle_or_default %></p>
@@ -74,11 +17,17 @@
     <%= month_calendar(events: @events) do |date, events| %>
       <div class="day-square">
         <div class="day-number"><%= date.day %></div>
-        <% events.each do |event| %>
-          <div>
-            <%= link_to event.title, event, class:"btn btn-outline-primary btn-sm mt-2" %>
-          </div>
-        <% end %>
+        <div class="calendar-events">
+          <% events.each do |event| %>
+            <%= link_to event,
+                        class: "calendar-event",
+                        title: event.title,
+                        aria: { label: "#{event.title} le #{l(date, format: :long)}" } do %>
+              <span class="calendar-event__dot" aria-hidden="true"></span>
+              <span class="calendar-event__title"><%= event.title %></span>
+            <% end %>
+          <% end %>
+        </div>
       </div>
     <% end %>