Export release-8988@76e55a5a

.python-version

@@ -0,0 +1 @@
+3.13

Gemfile

@@ -69,7 +69,7 @@ gem 'rack-link_headers', '~> 2.2'
 gem 'rubyzip', '~> 2.4.0', require: 'zip'
 gem 'sanitize'
 gem 'simple_form', '~> 5.0'
-gem 'truncato'
+gem 'truncato', github: 'jgraichen/truncato', branch: 'fix/encoding'
 gem 'uuid4', '~> 1.4'
 gem 'xui-form', path: 'gems/xui-form'
 

Gemfile.lock

@@ -1,3 +1,12 @@
+GIT
+  remote: https://github.com/jgraichen/truncato.git
+  revision: b7df8f9d1fa2bfe8cab9b9036d2e812c0963d8b1
+  branch: fix/encoding
+  specs:
+    truncato (0.7.12)
+      htmlentities (~> 4.3.1)
+      nokogiri (>= 1.7.0, <= 2.0)
+
 PATH
   remote: clients/xikolo-account
   specs:
@@ -895,9 +904,6 @@ GEM
     tilt (2.5.0)
     timecop (0.9.10)
     timeout (0.4.3)
-    truncato (0.7.12)
-      htmlentities (~> 4.3.1)
-      nokogiri (>= 1.7.0, <= 2.0)
     ttfunk (1.8.0)
       bigdecimal (~> 3.1)
     typhoeus (1.4.1)
@@ -1080,7 +1086,7 @@ DEPENDENCIES
   terser (~> 1.1)
   tilt (~> 2.0)
   timecop
-  truncato
+  truncato!
   uuid4 (~> 1.4)
   view_component (~> 3.0)
   webmock

app/assets/stylesheets/_components.scss

@@ -21,6 +21,7 @@
 @import "components/markdown_editor";
 @import "components/meter";
 @import "components/section_progress";
+@import "components/bottom_navigation";
 @import "components/slider";
 @import "components/table_of_contents";
 @import "components/tile";

app/assets/stylesheets/components/_bottom_navigation.scss

@@ -0,0 +1,81 @@
+.bottom-navigation {
+  display: flex;
+  flex-direction: column;
+
+  &__items {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  &__text {
+    color: $gray-600;
+  }
+
+  &__icon {
+    font-size: $font-size-sm;
+  }
+
+  &__item {
+    display: flex;
+
+    max-width: 45%;
+    align-items: center;
+    margin: 20px 0;
+    text-align: right;
+
+    & > * {
+      margin-right: 10px;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      .bottom-navigation__title {
+        color: $link-color-hover;
+        text-decoration: underline;
+      }
+    }
+
+    .bottom-navigation__text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &--prev {
+      text-align: left;
+
+      .bottom-navigation__arrow {
+        order: 1;
+      }
+
+      .bottom-navigation__icon {
+        order: 2;
+      }
+
+      .bottom-navigation__text {
+        order: 3;
+      }
+    }
+
+    &--next {
+      // Pushes the item to the right side from a flexbox
+      margin-left: auto;
+    }
+  }
+
+  &__nav-text {
+    margin: 0;
+    color: $link-color;
+    font-weight: bold;
+  }
+
+  &__title {
+    display: none;
+
+    @include small {
+      display: inline;
+    }
+  }
+}

app/assets/stylesheets/components/_section_progress.scss

@@ -102,19 +102,25 @@
     grid-template-columns: auto;
     @include screen-size-sm-and-up {
       gap: 10px;
-      grid-template-columns: auto 200px;
+      grid-template-columns: auto 230px;
     }
   }
 
   &__statistic-item {
+    display: flex;
+    align-items: center;
     color: $gray-800;
     font-weight: bold;
+    gap: 5px;
   }
 
   &__statistic-item-data {
     display: flex;
     flex-wrap: wrap;
     gap: 5px;
+    @include screen-size-sm-and-up {
+      flex-wrap: nowrap;
+    }
   }
 
   &__titlebar {

app/assets/stylesheets/partials/_buttons.scss

@@ -351,9 +351,9 @@ a.btn {
 }
 
 /* ------------------------------------*\
-    $Next-Previous-Bar
+    $Quiz action(s)
 \*------------------------------------ */
-.next-previous-button-bar {
+.action-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -364,77 +364,15 @@ a.btn {
   }
 
   .filler-area,
-  .split-seq-nav-container {
+  .multi_action-container {
     width: 100%;
   }
-
-  .next-button {
-    text-align: right;
-  }
-
-  .previous-button {
-    text-align: left;
-  }
-
-  .next-prev-text {
-    color: $gray-600;
-
-    .next-prev {
-      margin: 0;
-      color: $link-color;
-      font-weight: bold;
-    }
-
-    .next-prev-title {
-      display: none;
-
-      @include small {
-        display: inline;
-      }
-    }
-  }
-
-  .next-button,
-  .previous-button {
-    display: flex;
-    max-width: 45%;
-    align-items: center;
-    margin: 20px 0;
-
-    & > * {
-      margin-right: 10px;
-    }
-
-    .xi-icon {
-      font-size: 1.5em;
-    }
-
-    &:hover,
-    &:active,
-    &:focus {
-      text-decoration: none;
-
-      .next-prev-text > * {
-        color: $link-color-hover;
-        text-decoration: underline;
-      }
-    }
-
-    .arrow {
-      font-size: 3rem;
-    }
-
-    &:before {
-      color: $gray-600;
-      font-size: 20px;
-    }
-  }
 }
 
 // The filler area lies (full-width) between both buttons and may be used
 // for action buttons and the like (i.e. take self-test)
 .filler-area,
-.split-filler-area {
+.multi-action-filler-area {
   height: $next-prev-height;
   border: 0;
   background: $primary-color;
@@ -470,12 +408,12 @@ a.btn {
   }
 }
 
-.split-filler-area {
+.multi-action-filler-area {
   display: inline-block !important;
   width: 50%;
 }
 
-.split-seq-nav-container {
+.multi_action-container {
   overflow: hidden;
   white-space: nowrap;
 }

app/components/course/bottom_navigation.html.slim

@@ -0,0 +1,10 @@
+nav.bottom-navigation__items
+  - items.each do |item|
+    = link_to item[:url], class: "bottom-navigation__item #{item[:css_modifier]}", data: item[:data]
+      .bottom-navigation__text
+        .bottom-navigation__nav-text = item[:text]
+        .bottom-navigation__title = item[:title]
+      .bottom-navigation__icon
+        = render Global::FaIcon.new(item[:icon])
+      .bottom-navigation__arrow
+        = render Global::FaIcon.new(item[:arrow_icon], style: :solid)

app/components/course/bottom_navigation.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Course
+  class BottomNavigation < ApplicationComponent
+    def initialize(course_id:, prev_item_id:, next_item_id:)
+      @course_id = course_id
+      @prev_item_id = prev_item_id
+      @next_item_id = next_item_id
+    end
+
+    def render?
+      @prev_item_id || @next_item_id
+    end
+
+    def items
+      [
+        item_data(@prev_item_id, 'prev').presence,
+        item_data(@next_item_id, 'next').presence,
+      ].compact
+    end
+
+    private
+
+    def item_data(item_id, type)
+      return if item_id.blank?
+
+      item = Item.find(item_id)
+      {
+        url: course_item_path(@course_id, item.id),
+        title: item.title,
+        text: t(:"items.show.#{type}_item"),
+        icon: Item::Icon.from_resource(item).icon_class,
+        arrow_icon: type == 'prev' ? 'chevron-left' : 'chevron-right',
+        data: {tooltip: item.title, 'lanalytics-event': {verb: "navigated_#{type}_item"}},
+        css_modifier: "bottom-navigation__item--#{type}",
+      }
+    rescue ActiveRecord::RecordNotFound
+      # do nothing
+    end
+  end
+end

app/components/course/bottom_navigation_preview.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Course
+  class BottomNavigationPreview < ViewComponent::Preview
+    include ActionView::Helpers::UrlHelper
+
+    def default
+      render ::Course::BottomNavigation.new(course_id: course.id,
+        prev_item_id: item(course.items.first.id).id,
+        next_item_id: item(course.items.third.id).id)
+    end
+
+    def next_only
+      render ::Course::BottomNavigation.new(course_id: course.id,
+        prev_item_id: nil,
+        next_item_id: item(course.items.second.id).id)
+    end
+
+    def prev_only
+      render ::Course::BottomNavigation.new(course_id: course.id,
+        prev_item_id: item(course.items.second_to_last.id).id,
+        next_item_id: nil)
+    end
+
+    private
+
+    def course
+      @course ||= Course.find_by(course_code: 'content-ab')
+    end
+
+    MockQuizItemPresenter = Struct.new(:id, :course_id, :section_id)
+
+    def item(id)
+      MockQuizItemPresenter.new(
+        id:,
+        course_id: course.id,
+        section_id: course.sections.first.id
+      )
+    end
+  end
+end

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

@@ -7,7 +7,7 @@
   div
     .section-progress__statistic-item
       = render Global::FaIcon.new(@icon)
-      = @label
+      span = @label
     .section-progress__statistic-item-data
       = render Global::Pill.new \
         points_scored || t(:'course.progress.statistics.empty_state_points'), size: :small

app/controllers/course/launch_controller.rb

@@ -14,7 +14,7 @@ def launch
       unless Login.external?
         add_flash_message :notice, t(:'flash.notice.login_to_enroll', course: course['title'])
       end
-      return redirect_to login_url
+      return redirect_external login_url
     end
 
     redirect_to auth_path(params[:auth])