Export release-8976@8405b986

Gemfile

@@ -20,7 +20,7 @@ gem 'syslog'
 gem 'activerecord-postgres_enum', '~> 2.0'
 gem 'acts_as_list'
 gem 'awesome_nested_set', '~> 3.4'
-gem 'fx', '~> 0.8.0'
+gem 'fx', '~> 0.9.0'
 gem 'groupdate', '~> 6.0'
 gem 'json-schema'
 gem 'paper_trail', '~> 16.0'

Gemfile.lock

@@ -321,9 +321,9 @@ GEM
     fugit (1.11.1)
       et-orbi (~> 1, >= 1.2.11)
       raabro (~> 1.4)
-    fx (0.8.0)
-      activerecord (>= 6.0.0)
-      railties (>= 6.0.0)
+    fx (0.9.0)
+      activerecord (>= 7.0)
+      railties (>= 7.0)
     gherkin (2.12.2)
       multi_json (~> 1.3)
     glob (0.4.1)
@@ -963,7 +963,7 @@ DEPENDENCIES
   delayed (~> 0.4)
   drb
   factory_bot_rails (~> 6.0)
-  fx (~> 0.8.0)
+  fx (~> 0.9.0)
   gon (~> 6.4)
   grape (~> 1.6)
   grape-entity
@@ -1093,4 +1093,4 @@ RUBY VERSION
    ruby 3.3.5p100
 
 BUNDLED WITH
-   2.6.3
+   2.6.2

Rakefile

@@ -17,16 +17,6 @@ Xikolo::Web::Application.load_tasks
 namespace :ci do
   desc 'Setup service for CI'
   task setup: %w[assets:i18n:export db:drop:all db:create:all db:schema:load]
-
-  begin
-    require 'rspec/core/rake_task'
-    desc 'Run specs for CI'
-    RSpec::Core::RakeTask.new(:spec) do |t|
-      t.rspec_opts = '--tag ~gen:2'
-    end
-  rescue LoadError
-    # noop
-  end
 end
 
 namespace :api do

app/assets/components/navigation/tabs.ts

@@ -2,7 +2,7 @@
  * Navigation::Tabs
  */
 
-import isMobile from '../../util/media-query';
+import { isScreenSizeSmall } from '../../util/media-query';
 import ready from '../../util/ready';
 
 const setExpanded = (
@@ -34,7 +34,7 @@ const initToggleButton = (button: Element, tabNavigation: Element) => {
   });
 
   // Hide navigation per default on small devices
-  if (isMobile()) {
+  if (isScreenSizeSmall()) {
     setExpanded(false, content, button, showText);
   }
 };

app/assets/course/popover/popover.js

@@ -6,6 +6,7 @@ import 'jquery';
 import Cookies from 'js-cookie';
 import ready from 'util/ready';
 import I18n from 'i18n/i18n';
+import { isScreenSizeSM } from 'util/media-query';
 
 ready(() => {
   const popovers = document.querySelectorAll(
@@ -26,7 +27,7 @@ ready(() => {
 
     popoverTarget
       .popover({
-        placement: 'right',
+        placement: isScreenSizeSM() ? 'top' : 'right',
         title: I18n.t('components.popover.title'),
         content: popover.dataset.content,
         trigger: 'manual',

app/assets/stylesheets/_grid-settings.scss

@@ -30,6 +30,7 @@ $breakpoint-xl: 2560px;
 \*----------------------------------------------------*/
 :root {
   --breakpoint-s: #{$breakpoint-s};
+  --breakpoint-sm: #{$breakpoint-sm};
 }
 
 // Breakpoint for tablet portrait and up

app/assets/stylesheets/components/_disclosure_widget.scss

@@ -2,6 +2,16 @@
   padding: 10px;
   background-color: $gray-50;
 
+  &--light {
+    padding: 10px 10px 0 0;
+    background-color: transparent;
+
+    .disclosure-widget__summary {
+      color: $gray-500;
+      font-size: $font-size-xs;
+    }
+  }
+
   // Remove the disclosure triangle for WebKit browsers
   summary::-webkit-details-marker {
     display: none;
@@ -16,16 +26,18 @@
       display: none;
     }
     .disclosure-widget__summary--opened {
-      display: block;
+      display: flex;
     }
   }
 
   &__summary {
+    display: flex;
+    align-items: center;
     cursor: pointer;
-  }
 
-  &__summary > * {
-    display: inline;
+    &--opened {
+      display: none;
+    }
   }
 
   & > div {

app/assets/stylesheets/components/_section_progress.scss

@@ -16,6 +16,7 @@
       &__items {
         display: flex;
         flex-wrap: wrap;
+        margin-bottom: 5px;
       }
 
       &__item {
@@ -179,4 +180,46 @@
   &__visited-items {
     display: flex;
   }
+
+  &__legend {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: flex-start;
+
+    .legend__item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+    }
+
+    .legend__icon {
+      min-width: 20px;
+      min-height: 20px;
+      margin-right: 10px;
+
+      background-color: $gray-100;
+
+      &--completed {
+        background-color: $success-500;
+      }
+
+      &--critical {
+        background: linear-gradient(to top, $error-500 20%, $gray-100 0);
+      }
+
+      &--warning {
+        background: linear-gradient(to top, $information-500 50%, $gray-100 0);
+      }
+
+      &--optional {
+        border: 1px, dashed, $gray-500;
+        background-color: $gray-50;
+      }
+
+      span {
+        margin-left: 5px;
+      }
+    }
+  }
 }

app/assets/util/media-query.ts

@@ -1,8 +1,13 @@
-const isMobile = () => {
+export const isScreenSizeSmall = () => {
   const breakpointSmall = getComputedStyle(document.body).getPropertyValue(
     '--breakpoint-s',
   );
   return window.matchMedia(`(max-width: ${breakpointSmall})`).matches;
 };
 
-export default isMobile;
+export const isScreenSizeSM = () => {
+  const breakpointSM = getComputedStyle(document.body).getPropertyValue(
+    '--breakpoint-sm',
+  );
+  return window.matchMedia(`(max-width: ${breakpointSM})`).matches;
+};

app/components/course/featured_course.html.slim

@@ -4,7 +4,8 @@ article.featured-course
 
   div
     = link_to @course.title, course_path(@course.course_code), class: 'featured-course__heading'
-    p.featured-course__text == course_abstract
+    .featured-course__text
+      == course_abstract
 
     .featured-course__actions
       = render Home::Course::DetailsButton.new(@course, type: :large)

app/components/course/learner_dashboard/section_progress/item.rb

@@ -50,7 +50,7 @@ def state
             item = case @item['content_type']
                      when 'quiz'
                        survey? ? Survey.new(@item) : Gradable.new(@item, percentage)
-                     when 'lti_exercise'
+                     when 'lti_exercise', 'peer_assessment'
                        Gradable.new(@item, percentage)
                      else
                        Other.new(@item)

app/components/course/learner_dashboard/section_progress/main.html.slim

@@ -23,6 +23,16 @@
         .section-material__items
           - items.each do |item|
             = render Course::LearnerDashboard::SectionProgress::Item.new(item, @course)
+
+        = render Global::DisclosureWidget.new(t(:'course.progress.legend.show'),
+          expanded_summary: t(:'course.progress.legend.hide'),
+          variant: :light,
+          icons: {opened: 'circle-info', closed: 'circle-info', style: :regular, closed_classes: 'mr5'}) do
+          .section-progress__legend
+            - legend_items.each do |item|
+              .legend__item
+                .legend__icon class="legend__icon--#{item[:class_modifier]}"
+                .legend__text = item[:text]
       - else
         p = t(:'course.progress.section_material_empty')
 

app/components/course/learner_dashboard/section_progress/main.rb

@@ -60,6 +60,16 @@ def items_visited
         def items_available
           @section_progress.dig('visits', 'total').presence || 0
         end
+
+        def legend_items
+          [
+            {class_modifier: 'completed', text: t(:'course.progress.legend.completed')},
+            {class_modifier: 'warning', text: t(:'course.progress.legend.warning')},
+            {class_modifier: 'critical', text: t(:'course.progress.legend.critical')},
+            {class_modifier: '', text: t(:'course.progress.legend.not_visited')},
+            {class_modifier: 'optional', text: t(:'course.progress.legend.optional')},
+          ]
+        end
       end
     end
   end

app/components/global/disclosure_widget.html.slim

@@ -1,11 +1,11 @@
-details.disclosure-widget
+details.disclosure-widget class=css_classes
   - if @summary.present?
     summary
-      .disclosure-widget__summary--closed
-        = render Global::FaIcon.new('chevron-right', style: :solid, css_classes: 'mr10')
+      .disclosure-widget__summary.disclosure-widget__summary--closed
+        = render Global::FaIcon.new(icons[:closed], style: icons[:style], css_classes: icons[:closed_classes])
         = @summary
-      .disclosure-widget__summary--opened
-        = render Global::FaIcon.new('chevron-down', style: :solid, css_classes: 'mr5')
+      .disclosure-widget__summary.disclosure-widget__summary--opened
+        = render Global::FaIcon.new(icons[:opened], style: icons[:style], css_classes: icons[:opened_classes])
         = expanded_summary
 
   div lang=@content_lang

app/components/global/disclosure_widget.rb

@@ -2,22 +2,44 @@
 
 module Global
   class DisclosureWidget < ApplicationComponent
-    def initialize(summary, content_lang: nil, expanded_summary: nil, visible: true)
+    def initialize(summary, content_lang: nil, expanded_summary: nil, visible: true, variant: :default, icons: {})
       @summary = summary
 
       @content_lang = content_lang
       @expanded_summary = expanded_summary
       @visible = visible
+      @variant = variant
+      @icons = icons
     end
 
     def expanded_summary
       @expanded_summary || @summary
     end
 
+    def icons
+      {
+        opened: @icons[:opened] || 'chevron-down',
+        closed: @icons[:closed] || 'chevron-right',
+        opened_classes: @icons[:opened_classes] || 'mr5',
+        closed_classes: @icons[:closed_classes] || 'mr10',
+        style: @icons[:opened_style] || :solid,
+      }
+    end
+
+    def css_classes
+      if @variant == :light
+        'disclosure-widget--light'
+      end
+    end
+
     private
 
     def render?
       @visible
     end
+
+    def variant
+      @variant if %w[default light].include?(@variant)
+    end
   end
 end

app/components/global/disclosure_widget_preview.rb

@@ -30,6 +30,18 @@ class DisclosureWidgetPreview < ViewComponent::Preview
     # ----------
     # The component can be present or not based on the `visible` parameter.
     # Try it out in the _params_ tab.
+    #
+    # Variant (default: :default)
+    # -------
+    # The component can be displayed in two variants:
+    # - `default` (dark background)
+    # - `light` (light background and smaller font size)
+    #
+    # Icons (optional)
+    # -----
+    # The component can be customized with different icons for opened and closed states.
+    # The default icons are `chevron-down` and `chevron-right`.
+    #
 
     def default
       render Global::DisclosureWidget.new(
@@ -82,6 +94,29 @@ def with_markdown_content
       end
     end
 
+    def light_variant
+      render Global::DisclosureWidget.new(
+        'I am less obtrusive',
+        variant: :light
+      ) do
+        'Here is a simple text content.'
+      end
+    end
+
+    def with_custom_icons
+      render Global::DisclosureWidget.new(
+        'Expand me!',
+        icons: {
+          opened: 'ellipsis',
+          opened_classes: 'mr10',
+          closed: 'ellipsis-vertical',
+          closed_classes: 'mr15',
+        }
+      ) do
+        'Here is a simple text content.'
+      end
+    end
+
     # @!endgroup
   end
 end

app/components/home/course_card.rb

@@ -179,8 +179,11 @@ def subtitles_for_course
 
       # Identify the best language for the user.
       if subtitle_languages.size > 1
-        subtitle_languages = LanguagePreferences.new(available_languages: subtitle_languages, user: @user,
-          request:).sort
+        subtitle_languages = LanguagePreferences.new(
+          available_languages: subtitle_languages,
+          user: @user,
+          request:
+        ).sort
       end
 
       # Display the available languages in the desired format.