richie 2.34.1.dev39__py2.py3-none-any.whl → 2.34.1.dev45__py2.py3-none-any.whl

frontend/scss/objects/_course_glimpses.scss

@@ -57,10 +57,8 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
 
   position: relative;
   margin: $r-course-glimpse-gutter;
-  border-radius: $border-radius-lg;
-  box-shadow: r-theme-val(course-glimpse, base-shadow);
+
   min-width: 16rem;
-  overflow: hidden;
 
   @include media-breakpoint-up(sm) {
     @include sv-flex(1, 0, calc(50% - #{$r-course-glimpse-gutter * 2}));
@@ -83,8 +81,16 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     pointer-events: auto;
   }
 
-  &:hover,
-  &:focus-within {
+  &__body {
+    box-shadow: r-theme-val(course-glimpse, base-shadow);
+    border-radius: $border-radius-lg;
+    overflow: hidden;
+    transition: box-shadow 0.5s $r-ease-out;
+    z-index: 1;
+  }
+
+  &:hover &__body,
+  &:focus-within &__body {
     color: inherit;
     text-decoration: none;
     border: 0;
@@ -149,6 +155,7 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
   &__content {
     font-size: 0.9rem;
     color: r-theme-val(course-glimpse, content-color);
+    background: map-get(r-theme-val(course-glimpse, footer), 'background');
   }
 
   &__wrapper {
@@ -156,6 +163,9 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     display: flex;
     flex-direction: column;
     position: relative;
+    color: r-theme-val(course-glimpse, card-background);
+    border-radius: 0 0 $border-radius-lg $border-radius-lg;
+    background-color: r-theme-val(course-glimpse, card-background);
   }
 
   &__title,
@@ -322,9 +332,26 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
   border-bottom-left-radius: $border-radius-lg;
   border-bottom-right-radius: $border-radius-lg;
   font-size: 0.7rem;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  position: relative;
+  z-index: 0;
+  transition: transform 0.25s $r-ease-out;
 
-  &__date {
-    @include sv-flex(1, 0, auto);
+  &:after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: -15px;
+    height: 30px;
+    left: 0;
+    right: 0;
+    @include r-button-colors(r-theme-val(course-glimpse, footer), $apply-border: true);
+    z-index: -1;
+  }
+
+  &__column {
+    @include sv-flex(0, 130px, auto);
     display: flex;
     margin: 0;
     padding: 0.45rem 0;
@@ -335,7 +362,54 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     .icon {
       margin-right: 0.5rem;
     }
+
+    span {
+      display: inline-block;
+      max-width: 15ch;
+      font-variant-numeric: tabular-nums;
+    }
   }
+
+  &__price {
+    .offer-certificate__icon {
+      $visibility: r-theme-val(course-glimpse, offer-certificate-icon-visibility);
+      @if $visibility == hidden {
+        display: none;
+      }
+      visibility: $visibility;
+    }
+    .offer__icon {
+      $visibility: r-theme-val(course-glimpse, offer-icon-visibility);
+      @if $visibility == hidden {
+        display: none;
+      }
+      visibility: $visibility;
+    }
+
+    .offer__icon {
+      margin-right: 0;
+      & + .offer__price {
+        margin-left: 0.25rem;
+      }
+    }
+
+    .offer__price {
+      $visibility: r-theme-val(course-glimpse, offer-price-visibility);
+      @if $visibility == hidden {
+        display: none;
+      }
+      visibility: $visibility;
+      // Align vertically the price with the icon
+      margin-top: calc(1ex - 1cap);
+    }
+  }
+}
+
+.course-glimpse:hover .course-glimpse-footer,
+.course-glimpse:hover .course-glimpse__large-footer,
+.course-glimpse:focus-within .course-glimpse-footer,
+.course-glimpse:focus-within .course-glimpse__large-footer {
+  transform: translateY(4px);
 }
 
 //
@@ -346,3 +420,25 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     @include sv-flex(1, 0, calc(33.33333% - #{$r-course-glimpse-gutter * 2}));
   }
 }
+
+// Course Glimpse Variant according to the offer
+$offer-schemes: (
+  certificate: r-theme-val(course-glimpse, footer-offer-certificate),
+  free: r-theme-val(course-glimpse, footer-offer-free),
+  paid: r-theme-val(course-glimpse, footer-offer-paid),
+  partially_free: r-theme-val(course-glimpse, footer-offer-partially_free),
+  subscription: r-theme-val(course-glimpse, footer-offer-subscription),
+);
+
+@each $offer, $scheme in $offer-schemes {
+  @if $scheme != null {
+    .course-glimpse--offer-#{$offer} {
+      .course-glimpse-footer {
+        @include r-button-colors($scheme, $apply-border: true);
+        &:after {
+          background: map-get($scheme, 'background');
+        }
+      }
+    }
+  }
+}

richie/apps/core/templates/richie/icons.html

@@ -200,10 +200,25 @@
     <symbol id="icon-courses" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" stroke="currentColor">
       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
     </symbol>
-    
+
     <symbol id="icon-video-play" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <circle cx="12" cy="12" r="12" fill="#fff"/>
       <path fill-rule="evenodd" clip-rule="evenodd" d="m9.417 17.781 7.43-4.26c1-.574 1-1.504 0-2.077l-7.43-4.26c-1-.574-1.81-.105-1.81 1.048v8.5c0 1.153.81 1.622 1.81 1.05Z" fill="currentColor"/>
+    </symbol>
 
-  </defs>
+    <symbol id="icon-offer-paid" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path fill="currentColor" fill-rule="evenodd" d="M12 22.5c5.799 0 10.5-4.701 10.5-10.5S17.799 1.5 12 1.5 1.5 6.201 1.5 12 6.201 22.5 12 22.5Zm-5.184-9.52c0 .2.137.343.35.343h.783c.432 2.335 2.121 3.694 4.47 3.694 1.73 0 3.268-.734 3.845-2.107.082-.193.117-.385.117-.563 0-.495-.358-.81-.927-.81-.42 0-.646.191-.893.617-.446.886-1.236 1.195-2.15 1.195-1.221 0-2.087-.748-2.41-2.026h3.152c.213 0 .35-.144.35-.343 0-.213-.137-.343-.35-.343H9.878c-.014-.179-.02-.371-.027-.57.006-.172.013-.344.027-.508h3.275c.213 0 .35-.144.35-.344 0-.213-.137-.343-.35-.343H9.988c.323-1.298 1.188-2.067 2.417-2.067.9 0 1.675.378 2.135 1.25.254.426.502.618.934.618.536 0 .886-.316.886-.797 0-.22-.062-.453-.192-.68-.653-1.31-1.991-2.066-3.804-2.066-2.294 0-3.997 1.387-4.422 3.742h-.776c-.213 0-.35.13-.35.343 0 .2.137.344.35.344h.693a7.576 7.576 0 0 0 0 1.078h-.693c-.213 0-.35.13-.35.343Z" clip-rule="evenodd"/>
+    </symbol>
+
+    <symbol id="icon-offer-free" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path fill="currentColor" fill-rule="evenodd" d="M17.26 19.418A9.094 9.094 0 0 1 4.58 6.738l2.957 2.957c-.186.438-.324.92-.41 1.443h-.824c-.24 0-.377.128-.377.36 0 .217.136.353.377.353h.745c-.008.184-.016.368-.016.553 0 .224.008.44.024.649h-.753c-.24 0-.377.136-.377.36 0 .224.136.36.377.36h.84c.49 2.796 2.5 4.39 5.32 4.39 1.063 0 2.06-.239 2.866-.676l1.932 1.931ZM6.545 4.724a9.094 9.094 0 0 1 12.732 12.732l1.003 1.003A10.454 10.454 0 0 0 22.5 12c0-5.799-4.701-10.5-10.5-10.5-2.436 0-4.678.83-6.46 2.221l1.004 1.003Zm-2.569-.58L20.12 20.29a.703.703 0 0 1-1.011.977l-.843-.842A10.454 10.454 0 0 1 12 22.5C6.201 22.5 1.5 17.799 1.5 12c0-2.35.771-4.518 2.075-6.268l-.908-.908a.703.703 0 1 1 .994-.994l.314.314Zm13.154 11.165c.014-.087.02-.175.02-.262 0-.673-.504-1.113-1.313-1.113l-.081.001 1.374 1.374ZM9.325 7.506c.844-.559 1.88-.854 3.042-.854 2.099 0 3.645.793 4.462 2.235.184.304.272.617.272.921 0 .657-.48 1.074-1.233 1.074-.585 0-.898-.24-1.274-.785-.537-.858-1.29-1.17-2.147-1.17-.516 0-.962.128-1.332.368l-1.79-1.79Zm3.632 3.632.64.64c.08-.061.124-.158.124-.28 0-.232-.136-.36-.377-.36h-.387Zm-3.106 1.258c0-.127.004-.254.01-.378l1.034 1.034h-1.02a8.523 8.523 0 0 1-.024-.656Zm.145 1.377h1.62l1.924 1.924c-.333.136-.7.191-1.093.191-1.274 0-2.123-.769-2.451-2.114Z" clip-rule="evenodd"/>
+    </symbol>
+
+    <symbol id="icon-offer-partially_free" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path fill="currentColor" fill-rule="evenodd" d="M1.5 12c0 5.8 4.701 10.5 10.5 10.5S22.5 17.8 22.5 12a10.462 10.462 0 0 0-3.41-7.746A10.46 10.46 0 0 0 12 1.5C6.201 1.5 1.5 6.201 1.5 12ZM12 18.703v2.39a9.094 9.094 0 1 1 0-18.187v2.39a6.703 6.703 0 0 0 0 13.407ZM6.816 12.98c0 .2.137.343.35.343h.783c.432 2.335 2.121 3.694 4.47 3.694 1.73 0 3.268-.734 3.845-2.107.082-.193.117-.385.117-.563 0-.495-.358-.81-.927-.81-.42 0-.646.191-.893.617-.446.886-1.236 1.195-2.15 1.195-1.221 0-2.087-.748-2.41-2.026h3.152c.213 0 .35-.144.35-.343 0-.213-.137-.343-.35-.343H9.878c-.014-.179-.02-.371-.027-.57.006-.172.013-.344.027-.508h3.275c.213 0 .35-.144.35-.344 0-.213-.137-.343-.35-.343H9.988c.323-1.298 1.188-2.067 2.417-2.067.9 0 1.675.378 2.135 1.25.254.426.502.618.934.618.536 0 .886-.316.886-.797 0-.22-.062-.453-.192-.68-.653-1.31-1.991-2.066-3.804-2.066-2.294 0-3.997 1.387-4.422 3.742h-.776c-.213 0-.35.13-.35.343 0 .2.137.344.35.344h.693a7.576 7.576 0 0 0 0 1.078h-.693c-.213 0-.35.13-.35.343Z" clip-rule="evenodd"/>
+    </symbol>
+
+    <symbol id="icon-offer-subscription" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path fill="currentColor" fill-rule="evenodd" d="M15.932.66a.703.703 0 1 0-1.3.54l.299.717a10.5 10.5 0 0 0-9.834 17.995.703.703 0 1 0 .924-1.06 9.094 9.094 0 0 1 8.246-15.659l-.554.23a.703.703 0 1 0 .54 1.299l2.22-.922a.703.703 0 0 0 .38-.919l-.921-2.22Zm-3.275 3.881A7.487 7.487 0 0 0 8.96 18.844l.518-.215a1.406 1.406 0 0 1 1.865.83A7.487 7.487 0 0 0 15.04 5.156l-.518.215a1.406 1.406 0 0 1-1.865-.83ZM6.816 12.98c0 .2.137.343.35.343h.783c.432 2.335 2.121 3.694 4.47 3.694 1.73 0 3.268-.734 3.845-2.107.082-.193.117-.385.117-.563 0-.495-.358-.81-.927-.81-.42 0-.646.191-.893.617-.446.886-1.236 1.195-2.15 1.195-1.221 0-2.087-.748-2.41-2.026h3.152c.213 0 .35-.144.35-.343 0-.213-.137-.343-.35-.343H9.878c-.014-.179-.02-.371-.027-.57.006-.172.013-.344.027-.508h3.275c.213 0 .35-.144.35-.344 0-.213-.137-.343-.35-.343H9.988c.323-1.298 1.188-2.067 2.417-2.067.9 0 1.675.378 2.135 1.25.254.426.502.618.934.618.536 0 .886-.316.886-.797 0-.22-.062-.453-.192-.68-.653-1.31-1.991-2.066-3.804-2.066-2.294 0-3.997 1.387-4.422 3.742h-.776c-.213 0-.35.13-.35.343 0 .2.137.344.35.344h.693a7.576 7.576 0 0 0 0 1.078h-.693c-.213 0-.35.13-.35.343Zm2.171 10.74a.703.703 0 0 1-.919-.38l-.921-2.221a.703.703 0 0 1 .38-.92l2.22-.92a.703.703 0 0 1 .54 1.298l-.554.23A9.095 9.095 0 0 0 17.98 5.148a.703.703 0 1 1 .924-1.06A10.5 10.5 0 0 1 9.07 22.083l.298.718a.703.703 0 0 1-.38.919Z" clip-rule="evenodd"/>
+    </symbol>
 </svg>

richie/apps/courses/factories.py

@@ -446,10 +446,10 @@ class CourseRunFactory(factory.django.DjangoModelFactory):
     display_mode = models.CourseRunDisplayMode.DETAILED
     price_currency = "EUR"
     price = factory.Faker(
-        "pydecimal", min_value=1, max_value=100, left_digits=5, right_digits=2
+        "pydecimal", min_value=150, max_value=2000, left_digits=5, right_digits=2
     )
     certificate_price = factory.Faker(
-        "pydecimal", min_value=1, max_value=100, left_digits=5, right_digits=2
+        "pydecimal", min_value=50, max_value=200, left_digits=5, right_digits=2
     )
 
     # pylint: disable=no-self-use

richie/apps/courses/models/course.py

@@ -621,6 +621,26 @@ class Course(EsIdMixin, BasePageExtension):
         """
         return self.get_reverse_related_page_extensions("program", language=language)
 
+    @property
+    def best_course_run(self):
+        """
+        Returns the course run with the best state.
+        """
+        best_run = None
+        course_runs = self.course_runs.only(
+            "start", "end", "enrollment_start", "enrollment_end"
+        ).exclude(catalog_visibility=CourseRunCatalogVisibility.HIDDEN)
+
+        for course_run in course_runs:
+            state = course_run.state
+            if best_run is None or best_run.state["priority"] > state["priority"]:
+                best_run = course_run
+            if state["priority"] == CourseState.ONGOING_OPEN:
+                # We found the best state, don't waste more time
+                break
+
+        return best_run
+
     @property
     def state(self):
         """
@@ -631,16 +651,56 @@ class Course(EsIdMixin, BasePageExtension):
         # The default state is for a course that has no course runs
         best_state = CourseState(CourseState.TO_BE_SCHEDULED)
 
-        for course_run in self.course_runs.only(
-            "start", "end", "enrollment_start", "enrollment_end"
-        ).exclude(catalog_visibility=CourseRunCatalogVisibility.HIDDEN):
-            state = course_run.state
-            best_state = min(state, best_state)
-            if state["priority"] == CourseState.ONGOING_OPEN:
-                # We found the best state, don't waste more time
-                break
+        if self.best_course_run:
+            best_state = self.best_course_run.state
+
         return best_state
 
+    @property
+    def price_currency(self):
+        """
+        Returns the price currency of the course run with the best state.
+        """
+        if self.best_course_run:
+            return self.best_course_run.price_currency
+        return None
+
+    @property
+    def offer(self):
+        """
+        Returns the offer of the course run with the best state.
+        """
+        if self.best_course_run:
+            return self.best_course_run.offer
+        return None
+
+    @property
+    def price(self):
+        """
+        Returns the price of the course run with the best state.
+        """
+        if self.best_course_run:
+            return self.best_course_run.price
+        return None
+
+    @property
+    def certificate_offer(self):
+        """
+        Returns the certificate offer of the course run with the best state.
+        """
+        if self.best_course_run:
+            return self.best_course_run.certificate_offer
+        return None
+
+    @property
+    def certificate_price(self):
+        """
+        Returns the certificate price of the course run with the best state.
+        """
+        if self.best_course_run:
+            return self.best_course_run.certificate_price
+        return None
+
     def copy_relations(self, oldinstance, language=None):
         """
         This method is called for 2 types of copying:

richie/apps/courses/templates/courses/cms/fragment_course_glimpse.html

@@ -2,95 +2,126 @@
 {% comment %}Obviously, the context template variable "course" is required and must be a Course page extension{% endcomment %}
 
 {% with course_page=course.extended_object course_state=course.state main_organization_title=course.get_main_organization.extended_object.get_menu_title main_organization=course.get_main_organization course_variant=course_variant|default:'glimpse' %}
-<div class="course-{{ course_variant }}{% if course_page.publisher_is_draft is True %} course-{{ course_variant }}--draft{% endif %}">
-    <div aria-hidden="true" class="course-{{ course_variant }}__media">
-        <a tabindex="-1" href="{{ course_page.get_absolute_url }}">
-            {% get_placeholder_plugins "course_cover" course_page as cover_plugins or %}
-                <p class="course-{{ course_variant }}--empty">{% trans "Cover" %}</p>
-            {% endget_placeholder_plugins %}
-            {% blockplugin cover_plugins.0 %}
-                <img src="{% thumbnail instance.picture 300x170 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %}"
-                    srcset="
-                        {% thumbnail instance.picture 800x457 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 300w
-                        {% if instance.picture.width >= 1600 %},{% thumbnail instance.picture 1600x914 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
-                        {% if instance.picture.width >= 2400 %},{% thumbnail instance.picture 2400x1371 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}
-                    "
-                    sizes="300px"
-                    {# alt forced to empty string for a11y because the image does not carry more information than the course title #}
-                    alt=""
-                />
-            {% endblockplugin %}
-        </a>
-    </div>
-    <div class="course-{{ course_variant }}__content">
-        <div class="course-{{ course_variant }}__wrapper">
-            <h{{ header_level|default:3 }} class="course-{{ course_variant }}__title">
-                <a class="course-{{ course_variant }}__link" href="{{ course_page.get_absolute_url }}">
-                    <span class="course-{{ course_variant }}__title-text">{{ course_page.get_title }}</span>
-                </a>
-            </h{{ header_level|default:3 }}>
-            {% if main_organization %}
-                {% with organization_page=main_organization.extended_object %}
-                    {% get_placeholder_plugins "logo" organization_page as plugins or %}
-                    {% endget_placeholder_plugins %}
-                    {% blockplugin plugins.0 %}
-                        <div class="course-glimpse__organization-logo">
-                            <img src="{% thumbnail instance.picture 200x113 replace_alpha='#FFFFFF' upscale subject_location=instance.picture.subject_location %}"
-                                srcset="
-                                    {% thumbnail instance.picture 200x113 replace_alpha='#FFFFFF' upscale subject_location=instance.picture.subject_location %} 200w
-                                    {% if instance.picture.width >= 400 %},{% thumbnail instance.picture 400x225 replace_alpha='#FFFFFF' upscale subject_location=instance.picture.subject_location %} 400w{% endif %}
-                                    {% if instance.picture.width >= 600 %},{% thumbnail instance.picture 600x338 replace_alpha='#FFFFFF' upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
-                                    {% if instance.picture.width >= 800 %},{% thumbnail instance.picture 800x450 replace_alpha='#FFFFFF' upscale subject_location=instance.picture.subject_location %} 800w{% endif %}
-                                "
-                                {# alt forced to empty string for a11y because the image does not carry more information than the course title #}
-                                alt=""
-                            />
-                        </div>
-                    {% endblockplugin %}
+<div class="
+    course-{{ course_variant }}
+    course-{{ course_variant }}--offer-{{course.offer|default:'free'}}
+    {% if course_page.publisher_is_draft is True %} course-{{ course_variant }}--draft{% endif %}
+    {% if course.certificate_offer %} course-{{ course_variant }}--offer-certificate {% endif %}
+    ">
+    <div class="course-{{ course_variant }}__body">
+        <div aria-hidden="true" class="course-{{ course_variant }}__media">
+            <a tabindex="-1" href="{{ course_page.get_absolute_url }}">
+                {% get_placeholder_plugins "course_cover" course_page as cover_plugins or %}
+                    <p class="course-{{ course_variant }}--empty">{% trans "Cover" %}</p>
+                {% endget_placeholder_plugins %}
+                {% blockplugin cover_plugins.0 %}
+                    <img src="{% thumbnail instance.picture 300x170 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %}"
+                        srcset="
+                            {% thumbnail instance.picture 800x457 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 300w
+                            {% if instance.picture.width >= 1600 %},{% thumbnail instance.picture 1600x914 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
+                            {% if instance.picture.width >= 2400 %},{% thumbnail instance.picture 2400x1371 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}
+                        "
+                        sizes="300px"
+                        {# alt forced to empty string for a11y because the image does not carry more information than the course title #}
+                        alt=""
+                    />
+                {% endblockplugin %}
+            </a>
+        </div>
+        <div class="course-{{ course_variant }}__content">
+            <div class="course-{{ course_variant }}__wrapper">
+                <h{{ header_level|default:3 }} class="course-{{ course_variant }}__title">
+                    <a class="course-{{ course_variant }}__link" href="{{ course_page.get_absolute_url }}">
+                        <span class="course-{{ course_variant }}__title-text">{{ course_page.get_title }}</span>
+                    </a>
+                </h{{ header_level|default:3 }}>
+                {% if main_organization %}
+                    {% with organization_page=main_organization.extended_object %}
+                        {% get_placeholder_plugins "logo" organization_page as plugins or %}
+                        {% endget_placeholder_plugins %}
+                        {% blockplugin plugins.0 %}
+                            <div class="course-glimpse__organization-logo">
+                                <img src="{% thumbnail instance.picture 200x113 replace_alpha='#FFFFFF' upscale subject_location=instance.picture.subject_location %}"
+                                    srcset="
+                                        {% thumbnail instance.picture 200x113 replace_alpha='#FFFFFF' upscale subject_location=instance.picture.subject_location %} 200w
+                                        {% if instance.picture.width >= 400 %},{% thumbnail instance.picture 400x225 replace_alpha='#FFFFFF' upscale subject_location=instance.picture.subject_location %} 400w{% endif %}
+                                        {% if instance.picture.width >= 600 %},{% thumbnail instance.picture 600x338 replace_alpha='#FFFFFF' upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
+                                        {% if instance.picture.width >= 800 %},{% thumbnail instance.picture 800x450 replace_alpha='#FFFFFF' upscale subject_location=instance.picture.subject_location %} 800w{% endif %}
+                                    "
+                                    {# alt forced to empty string for a11y because the image does not carry more information than the course title #}
+                                    alt=""
+                                />
+                            </div>
+                        {% endblockplugin %}
+                    {% endwith %}
+                {% endif %} 
+                {% if main_organization_title %}
+                <div class="course-{{ course_variant }}__metadata course-{{ course_variant }}__metadata--organization">
+                    <svg role="img" aria-label="{% trans "Organization" %}" class="icon icon--small">
+                        <title>{% trans "Organization" %}</title>
+                        <use href="#icon-org" />
+                    </svg>
+                    <span class="title">{{ main_organization_title }}</span>
+                </div>
+                {% endif %}
+                <div class="course-{{ course_variant }}__metadata course-{{ course_variant }}__metadata--code">
+                    <svg role="img" aria-label="{% trans "Course code" %}" class="icon icon--small">
+                        <title>{% trans "Course code" %}</title>
+                        <use href="#icon-barcode" />
+                    </svg>
+                    <span>{% if course.code %}{{ course.code }}{% else %}-{% endif %}</span>
+                </div>
+            </div>
+
+            {% get_placeholder_plugins "course_icons" course_page as icon_plugins %}
+            {% if icon_plugins %}
+            <div class="course-{{ course_variant }}__icon">
+                {% with category_variant="badge" has_link=False %}
+                    {% render_plugin icon_plugins.0 %}
                 {% endwith %}
-            {% endif %} 
-            {% if main_organization_title %}
-            <div class="course-{{ course_variant }}__metadata course-{{ course_variant }}__metadata--organization">
-                <svg role="img" aria-label="{% trans "Organization" %}" class="icon icon--small">
-                    <title>{% trans "Organization" %}</title>
-                    <use href="#icon-org" />
-                </svg>
-                <span class="title">{{ main_organization_title }}</span>
             </div>
             {% endif %}
-            <div class="course-{{ course_variant }}__metadata course-{{ course_variant }}__metadata--code">
-                <svg role="img" aria-label="{% trans "Course code" %}" class="icon icon--small">
-                    <title>{% trans "Course code" %}</title>
-                    <use href="#icon-barcode" />
-                </svg>
-                <span>{% if course.code %}{{ course.code }}{% else %}-{% endif %}</span>
-            </div>
         </div>
-
-        {% get_placeholder_plugins "course_icons" course_page as icon_plugins %}
-        {% if icon_plugins %}
-        <div class="course-{{ course_variant }}__icon">
-            {% with category_variant="badge" has_link=False %}
-                {% render_plugin icon_plugins.0 %}
-            {% endwith %}
-        </div>
-        {% endif %}
-
-        {% block course_glimpse_footer %}
+    </div>
+    {% block course_glimpse_footer %}
         <div class="course-{{ course_variant }}-footer">
-            <div class="course-{{ course_variant }}-footer__date">
-                <svg role="img" aria-label="{% trans "Course date" %}" class="icon icon--medium">
+            <div class="course-{{ course_variant }}-footer__column course-{{ course_variant }}-footer__date">
+                <svg role="img" aria-label="{% trans "Course date" %}" class="icon icon--small">
                     <title>{% trans "Course date" %}</title>
                     <use href="#icon-calendar" />
                 </svg>
-                {{ course_state.text|capfirst }}
-                {% if course_state.datetime %}
-                    {{ course_state.datetime|date:"DATE_FORMAT" }}
+                <span>
+                    {{ course_state.text|capfirst }}
+                    {% if course_state.datetime %}
+                        {{ course_state.datetime|date:"DATE_FORMAT" }}</span>
+                    {% endif %}
+                </span>
+            </div>
+            <div class="course-{{ course_variant }}-footer__column course-{{ course_variant }}-footer__price">
+                {% if course.certificate_offer %}
+                    <svg role="img" aria-labelledby="offer-certificate-icon-title" class="offer-certificate__icon icon icon--medium">
+                        <title id="offer-certificate-icon-title">{% trans "This course offers a certification." %}</title>
+                        <use href="#icon-school" />
+                    </svg>
+                {% endif %}
+                <svg role="img" aria-labelledby="offer-icon-title" class="offer__icon icon icon--medium">
+                        {% if course.offer == 'paid' %}
+                            <title id="offer-icon-title">{% trans "Course requires a payment." %}</title>
+                        {% elif course.offer == 'subscription' %}
+                            <title id="offer-icon-title">{% trans "Course requires to be a subscriber or a paid member." %}</title>
+                        {% elif course.offer == 'partially_free' %}
+                            <title id="offer-icon-title">{% trans "More than half of the course is for free." %}</title>
+                        {% else %}
+                            <title id="offer-icon-title">{% trans "The entire course can be completed without cost." %}</title>
+                        {% endif %}
+                        <use href="#icon-offer-{{course.offer|default:'free'}}" />
+                </svg>
+                {% if course.offer != 'free' and course.price %}
+                    <span class="offer__price">{{ course.price|currency:course.price_currency }}</span>
                 {% endif %}
             </div>
         </div>
-        {% endblock course_glimpse_footer %}
-    </div>
+    {% endblock course_glimpse_footer %}
 </div>
 {% endwith %}
 {% endspaceless %}

richie/apps/courses/templatetags/extra_tags.py

@@ -10,6 +10,7 @@ from django.template.defaultfilters import stringfilter
 from django.template.loader import render_to_string
 from django.utils import translation
 
+import babel.numbers
 from classytags.arguments import Argument, MultiValueArgument
 from classytags.core import Options, Tag
 from classytags.utils import flatten_context
@@ -367,3 +368,26 @@ def trim(value):
     Remove whitespaces before and after a string.
     """
     return value.strip()
+
+
+@register.filter
+def currency(value: float, currency_code: str) -> str:
+    """
+    Format a number as a currency according to the current locale.
+
+    Args:
+        value: The numeric value to format
+        currency_code: The currency code (default: EUR)
+
+    Returns:
+        A properly formatted currency string with the appropriate symbol
+    """
+    try:
+        # Get the current language
+        language = translation.get_language() or settings.LANGUAGE_CODE
+        locale = language.replace("-", "_")
+
+        # Format the currency according to the locale
+        return babel.numbers.format_currency(float(value), currency_code, locale=locale)
+    except (ValueError, AttributeError, TypeError):
+        return value

richie/apps/search/forms.py

@@ -151,7 +151,17 @@ class CourseSearchForm(SearchForm):
                         "states": self.states,
                     },
                 }
-            }
+            },
+            "offer_fields": {
+                "script": {
+                    "id": "offer_fields",
+                    "params": {
+                        "languages": self.cleaned_data.get("languages") or None,
+                        "ms_since_epoch": arrow.utcnow().int_timestamp * 1000,
+                        "states": self.states,
+                    },
+                }
+            },
         }
 
     def get_queries(self):