From 2aa6eed2fc38256a426381cc1bb00e49daa5cb66 Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Mon, 27 Apr 2026 19:26:52 +0200
Subject: [PATCH 1/4] improve main page style

---
 club/templates/club/club_detail.jinja |  3 +--
 com/static/com/css/news-list.scss     | 30 +++++++++++++++------------
 com/templates/com/news_list.jinja     |  2 +-
 core/static/core/style.scss           |  2 +-
 4 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/club/templates/club/club_detail.jinja b/club/templates/club/club_detail.jinja
index 168c4b6c..14a5a384 100644
--- a/club/templates/club/club_detail.jinja
+++ b/club/templates/club/club_detail.jinja
@@ -26,10 +26,9 @@
     {% if club.logo %}
       <div class="club_logo"><img src="{{ club.logo.url }}" alt="{{ club.name }}"></div>
     {% endif %}
+    <h3>{{ club.name }}</h3>
     {% if page_revision %}
       {{ page_revision|markdown }}
-    {% else %}
-      <h3>{{ club.name }}</h3>
     {% endif %}
   </div>
 {% endblock %}
diff --git a/com/static/com/css/news-list.scss b/com/static/com/css/news-list.scss
index b53ff784..a1dcb966 100644
--- a/com/static/com/css/news-list.scss
+++ b/com/static/com/css/news-list.scss
@@ -3,6 +3,7 @@
 
 #news {
   display: flex;
+  gap: 1em;
 
   @media (max-width: 800px) {
     flex-direction: column;
@@ -26,12 +27,14 @@
   }
 
   h3 {
-    background: $second-color;
-    box-shadow: $shadow-color 1px 1px 1px;
-    padding: 0.4em;
+    --box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 3px 7px 2px;
+    background: lighten($second-color, 5%);
+    box-shadow: var(--box-shadow);
+    padding: .75rem;
     margin: 0 0 0.5em 0;
     text-transform: uppercase;
     font-size: 17px;
+    border-radius: 10px;
 
     &:not(:first-of-type) {
       margin: 2em 0 1em 0;
@@ -39,12 +42,11 @@
 
     .feed {
       float: right;
-      color: #f26522;
+      color: #e25512;
     }
   }
 
   @media screen and (max-width: $small-devices) {
-
     #left_column,
     #right_column {
       flex: 100%;
@@ -57,6 +59,7 @@
     max-height: 600px;
     overflow-y: scroll;
     overflow-x: clip;
+    margin-top: 1em;
 
     #load-more-news-button {
       text-align: center;
@@ -76,15 +79,11 @@
     font-size: 70%;
     margin-bottom: 1em;
 
-    h3 {
-      margin-bottom: 0;
-    }
-
     #links_content {
       overflow: auto;
       box-shadow: $shadow-color 1px 1px 1px;
       min-height: 20em;
-      padding-bottom: 1em;
+      padding: 1em;
 
       h4 {
         margin-left: 5px;
@@ -121,6 +120,8 @@
     }
 
     #birthdays_content {
+      box-shadow: $shadow-color 1px 1px 1px;
+      padding: 1em;
       ul.birthdays_year {
         margin: 0;
         list-style-type: none;
@@ -135,8 +136,7 @@
         }
 
         ul {
-          margin: 0;
-          margin-left: 1em;
+          margin: .5em 0 0 1em;
           list-style-type: square;
           list-style-position: inside;
           font-weight: normal;
@@ -150,9 +150,13 @@
   /* EVENTS TODAY AND NEXT FEW DAYS */
   .news_events_group {
     box-shadow: $shadow-color 1px 1px 1px;
-    margin-left: 1em;
+    margin-left: 0;
     margin-bottom: 0.5em;
 
+    @media screen and (max-width: $small-devices) {
+      margin-left: 3px;
+    }
+
     .news_events_group_date {
       display: table-cell;
       padding: 0.6em;
diff --git a/com/templates/com/news_list.jinja b/com/templates/com/news_list.jinja
index 2f6dc26e..975fb2ac 100644
--- a/com/templates/com/news_list.jinja
+++ b/com/templates/com/news_list.jinja
@@ -23,7 +23,7 @@
         <a target="#" href="{{ url("com:news_feed") }}"><i class="fa fa-rss feed"></i></a>
       </h3>
       {% if user.is_authenticated and (user.is_com_admin or user.memberships.board().ongoing().exists()) %}
-        <a class="btn btn-blue margin-bottom" href="{{ url("com:news_new") }}">
+        <a class="btn btn-blue" href="{{ url("com:news_new") }}">
           <i class="fa fa-plus"></i>
           {% trans %}Create news{% endtrans %}
         </a>
diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index b48aa7c1..67f03898 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -271,7 +271,7 @@ body {
 
   /*--------------------------------CONTENT------------------------------*/
   #content {
-    padding: 1em 1%;
+    padding: 1.5em 3%;
     box-shadow: $shadow-color 0 5px 10px;
     background: $white-color;
     overflow: auto;

From 4bd248f82720ec3d6ac20cabe719c45ea48af0c6 Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Mon, 27 Apr 2026 19:28:54 +0200
Subject: [PATCH 2/4] add transition to user whitelist input

---
 core/templates/core/fragment/user_visibility.jinja | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/templates/core/fragment/user_visibility.jinja b/core/templates/core/fragment/user_visibility.jinja
index ee78e907..b92901bf 100644
--- a/core/templates/core/fragment/user_visibility.jinja
+++ b/core/templates/core/fragment/user_visibility.jinja
@@ -18,7 +18,7 @@
     <span class="helptext">{{ form.is_viewable.help_text }}</span>
     {{ form.is_viewable.errors }}
   </fieldset>
-  <fieldset class="form-group" x-show="!isViewable">
+  <fieldset class="form-group" x-show="!isViewable" x-transition x-cloak>
     {{ form.whitelisted_users.as_field_group() }}
   </fieldset>
   <fieldset class="form-group">

From f88c061b02d4ead45a1fe452b9cf166e27d9be37 Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Tue, 28 Apr 2026 08:41:30 +0200
Subject: [PATCH 3/4] scss-ify eboutic.css

---
 eboutic/static/eboutic/css/eboutic.css       | 163 -------------------
 eboutic/static/eboutic/css/eboutic.scss      | 162 ++++++++++++++++++
 eboutic/templates/eboutic/eboutic_main.jinja |   8 +-
 3 files changed, 166 insertions(+), 167 deletions(-)
 delete mode 100644 eboutic/static/eboutic/css/eboutic.css
 create mode 100644 eboutic/static/eboutic/css/eboutic.scss

diff --git a/eboutic/static/eboutic/css/eboutic.css b/eboutic/static/eboutic/css/eboutic.css
deleted file mode 100644
index fe4b88aa..00000000
--- a/eboutic/static/eboutic/css/eboutic.css
+++ /dev/null
@@ -1,163 +0,0 @@
-#eboutic {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: flex-start;
-  column-gap: 20px;
-  margin: 0 20px 20px;
-}
-
-#eboutic-title {
-  margin-left: 20px;
-}
-
-#eboutic h3 {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-#basket {
-  min-width: 300px;
-  border-radius: 8px;
-  box-shadow:
-    rgb(60 64 67 / 30%) 0 1px 3px 0,
-    rgb(60 64 67 / 15%) 0 4px 8px 3px;
-  padding: 10px;
-}
-
-#basket h3 {
-  margin-top: 0;
-}
-
-@media screen and (max-width: 765px) {
-  #eboutic {
-    flex-direction: column-reverse;
-    align-items: center;
-    margin: 10px;
-    row-gap: 20px;
-  }
-  #eboutic-title {
-    margin-bottom: 20px;
-    margin-top: 4px;
-  }
-  #basket {
-    width: -webkit-fill-available;
-  }
-}
-
-#eboutic .item-list {
-  margin-left: 0;
-  list-style: none;
-}
-
-#eboutic .item-list li {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-#eboutic .item-row {
-  gap: 10px;
-}
-
-#eboutic .item-name {
-  word-break: break-word;
-  width: 100%;
-  line-height: 100%;
-  white-space: normal;
-}
-
-#eboutic .fa-plus,
-#eboutic .fa-minus {
-  cursor: pointer;
-  background-color: #354a5f;
-  color: white;
-  border-radius: 50%;
-  padding: 5px;
-  font-size: 10px;
-  line-height: 10px;
-  width: 10px;
-  text-align: center;
-}
-
-#eboutic .item-quantity {
-  min-width: 65px;
-  justify-content: space-between;
-  align-items: center;
-  display: flex;
-  gap: 5px;
-}
-
-#eboutic .item-price {
-  min-width: 65px;
-  text-align: right;
-}
-
-/*  CSS du catalogue  */
-
-#eboutic #catalog {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  row-gap: 30px;
-}
-
-#eboutic .category-header {
-  margin-bottom: 15px;
-}
-
-#eboutic .product-group {
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: 15px;
-  row-gap: 15px;
-}
-
-#eboutic .card.selected::after {
-  content: "🛒";
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  padding: 5px;
-  border-radius: 50%;
-  box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
-  background-color: white;
-  width: 20px;
-  height: 20px;
-  font-size: 16px;
-  line-height: 20px;
-}
-
-#eboutic .catalog-buttons {
-  display: flex;
-  justify-content: center;
-  column-gap: 30px;
-  margin: 30px 0 0;
-}
-
-#eboutic input {
-  all: unset;
-}
-
-#eboutic .catalog-buttons button {
-  min-width: 60px;
-}
-
-#eboutic .catalog-buttons form {
-  margin: 0;
-}
-
-@media screen and (max-width: 765px) {
-  #eboutic #catalog {
-    row-gap: 15px;
-    width: 100%;
-  }
-
-  #eboutic section {
-    text-align: center;
-  }
-
-  #eboutic .product-group {
-    justify-content: space-around;
-    flex-direction: column;
-  }
-}
diff --git a/eboutic/static/eboutic/css/eboutic.scss b/eboutic/static/eboutic/css/eboutic.scss
new file mode 100644
index 00000000..1e5ffa71
--- /dev/null
+++ b/eboutic/static/eboutic/css/eboutic.scss
@@ -0,0 +1,162 @@
+#eboutic-title {
+  margin-left: 20px;
+}
+
+#eboutic {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  column-gap: 20px;
+  margin: 0 20px 20px;
+
+  h3 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  #basket {
+    --box-shadow:
+    rgb(60 64 67 / 30%) 0 1px 3px 0,
+    rgb(60 64 67 / 15%) 0 4px 8px 3px;
+    min-width: 300px;
+    border-radius: 8px;
+    box-shadow: var(--box-shadow);
+    padding: 10px;
+    h3 {
+      margin-top: 0;
+    }
+  }
+
+  @media screen and (max-width: 765px) {
+    flex-direction: column-reverse;
+    align-items: center;
+    margin: 10px;
+    row-gap: 20px;
+
+    #eboutic-title {
+      margin-bottom: 20px;
+      margin-top: 4px;
+    }
+    #basket {
+      width: -webkit-fill-available;
+    }
+  }
+
+  .item-list {
+    margin-left: 0;
+    list-style: none;
+
+    li {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+  }
+
+  .item-row {
+    gap: 10px;
+  }
+
+  .item-name {
+    word-break: break-word;
+    width: 100%;
+    line-height: 100%;
+    white-space: normal;
+  }
+
+  .fa-plus,
+  .fa-minus {
+    cursor: pointer;
+    background-color: #354a5f;
+    color: white;
+    border-radius: 50%;
+    padding: 5px;
+    font-size: 10px;
+    line-height: 10px;
+    width: 10px;
+    text-align: center;
+  }
+
+  .item-quantity {
+    min-width: 65px;
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+    gap: 5px;
+  }
+
+  .item-price {
+    min-width: 65px;
+    text-align: right;
+  }
+
+/*  CSS du catalogue  */
+
+  #catalog {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    row-gap: 30px;
+  }
+
+  .category-header {
+    margin-bottom: 15px;
+  }
+
+  .product-group {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 15px;
+    row-gap: 15px;
+  }
+
+  .card.selected::after {
+    --box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
+    content: "🛒";
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    padding: 5px;
+    border-radius: 50%;
+    box-shadow: var(--box-shadow);
+    background-color: white;
+    width: 20px;
+    height: 20px;
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+  input {
+    all: unset;
+  }
+  .catalog-buttons {
+    display: flex;
+    justify-content: center;
+    column-gap: 30px;
+    margin: 30px 0 0;
+
+    button {
+      min-width: 60px;
+    }
+    form {
+      margin: 0;
+    }
+  }
+
+
+  @media screen and (max-width: 765px) {
+    #catalog {
+      row-gap: 15px;
+      width: 100%;
+    }
+
+    section {
+      text-align: center;
+    }
+
+    .product-group {
+      justify-content: space-around;
+      flex-direction: column;
+    }
+  }
+}
diff --git a/eboutic/templates/eboutic/eboutic_main.jinja b/eboutic/templates/eboutic/eboutic_main.jinja
index bad712a2..be53c9d0 100644
--- a/eboutic/templates/eboutic/eboutic_main.jinja
+++ b/eboutic/templates/eboutic/eboutic_main.jinja
@@ -15,7 +15,7 @@
 {% endblock %}
 
 {% block additional_css %}
-  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.css") }}">
+  <link rel="stylesheet" href="{{ static("eboutic/css/eboutic.scss") }}">
   <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
 {% endblock %}
 
@@ -168,9 +168,9 @@
       </section>
       {% for prices in categories %}
         {% set category = prices[0].product.product_type %}
-        <section>
-          <div class="category-header">
-            <h3>{{ category.name }}</h3>
+            <section>
+              <div class="category-header">
+                <h3>{{ category.name }}</h3>
             {% if category.comment %}
               <p><i>{{ category.comment }}</i></p>
             {% endif %}

From 2dbf4cff0544a6702e1e957eb07f6a10eae8d4ec Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Tue, 28 Apr 2026 12:15:11 +0200
Subject: [PATCH 4/4] add og tags to eboutic page

---
 eboutic/templates/eboutic/eboutic_main.jinja | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/eboutic/templates/eboutic/eboutic_main.jinja b/eboutic/templates/eboutic/eboutic_main.jinja
index be53c9d0..51945259 100644
--- a/eboutic/templates/eboutic/eboutic_main.jinja
+++ b/eboutic/templates/eboutic/eboutic_main.jinja
@@ -8,6 +8,14 @@
   {% trans %}The online shop of the association.{% endtrans %}
 {%- endblock %}
 
+{% block metatags %}
+  <meta property="og:url" content="{{ request.build_absolute_uri() }}" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Eboutic" />
+  <meta property="og:description" content="La boutique en ligne de l'AE" />
+  <meta property="og:image" content="{{ request.build_absolute_uri(static("core/img/logo_no_text.png")) }}" />
+{% endblock %}
+
 {% block additional_js %}
     {# This script contains the code to perform requests to manipulate the
     user basket without having to reload the page #}
@@ -168,9 +176,9 @@
       </section>
       {% for prices in categories %}
         {% set category = prices[0].product.product_type %}
-            <section>
-              <div class="category-header">
-                <h3>{{ category.name }}</h3>
+        <section>
+          <div class="category-header">
+            <h3>{{ category.name }}</h3>
             {% if category.comment %}
               <p><i>{{ category.comment }}</i></p>
             {% endif %}