MOBILE-3320 course: Add customization css options

src/core/components/progress-bar/progress-bar.scss

@@ -2,8 +2,11 @@
     display: flex;
     width: 100%;
 
+    --line-height: 40px;
+    --bar-margin: 16px 0;
+
     .core-progress-text {
-        line-height: 40px;
+        line-height: var(--line-height);
         font-size: 1rem;
         color: var(--text-color);
         width: 55px;
@@ -14,7 +17,7 @@
         -webkit-appearance: none;
         appearance: none;
         height: var(--height);
-        margin: 16px 0;
+        margin: var(--bar-margin);
         padding: 0;
         display: block;
         width: 100%;

src/core/features/course/components/format/format.scss

@@ -17,13 +17,14 @@
 
     .core-course-thumb {
         display: none;
-        height: 150px;
+        height: #{$core-courseimage-on-course-height};
         width: 100%;
         overflow: hidden;
         cursor: pointer;
         pointer-events: auto;
         position: relative;
         background: var(--ion-item-background);
+        border-bottom: 1px solid var(--gray);
 
         img {
             position: absolute;
@@ -34,6 +35,19 @@
         }
     }
 
+    @if ($core-show-courseimage-on-course) {
+        .core-course-thumb {
+            display: block;
+        }
+    }
+
+    @if ($core-hide-progress-on-course) {
+        .core-course-progress {
+            display: none;
+        }
+    }
+
+
     .core-button-selector-row {
         display: flex;
         core-combobox {

src/core/features/course/components/section-selector/section-selector.scss

@@ -1,17 +1,15 @@
-:host {
+@import '~theme/globals.scss';
-    core-progress-bar {
+core-progress-bar {
-        .core-progress-text {
+    --bar-margin: 8px 0 4px 0;
-            line-height: 24px;
+    --line-height: 20px;
-            position: absolute;
+}
-            top: -8px;
-            right: 10px;
-        }
-        progress {
-            margin: 8px 0 4px 0;
-        }
-    }
 
-    ion-badge {
+@if ($core-hide-progress-on-section-selector) {
-        text-align: start;
+    core-progress-bar {
+        display: none;
     }
-}
+}
+
+ion-badge {
+    text-align: start;
+}

src/core/features/course/components/section-selector/section-selector.ts

@@ -26,6 +26,7 @@ import { ModalController } from '@singletons';
 @Component({
     selector: 'core-course-section-selector',
     templateUrl: 'section-selector.html',
+    styleUrls: ['section-selector.scss'],
 })
 export class CoreCourseSectionSelectorComponent implements OnInit {
 

src/core/features/courses/components/course-progress/core-courses-course-progress.html

@@ -55,7 +55,8 @@
             </ion-button>
         </div>
     </ion-item>
-    <ion-item *ngIf="showAll && course.progress! >= 0 && course.completionusertracked !== false" lines="none">
+    <ion-item *ngIf="showAll && course.progress! >= 0 && course.completionusertracked !== false" lines="none"
+        class="core-course-progress">
         <ion-label>
             <core-progress-bar [progress]="course.progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
         </ion-label>

src/core/features/courses/components/course-progress/course-progress.scss

@@ -41,6 +41,18 @@
             }
         }
 
+        @if ($core-course-hide-thumb-on-cards) {
+            .core-course-thumb {
+                display: none;
+            }
+        }
+
+        @if ($core-course-thumb-on-cards-background) {
+            .core-course-thumb {
+                background: $core-course-thumb-on-cards-background !important;
+            }
+        }
+
         .core-course-additional-info {
             margin-bottom: 8px;
         }
@@ -86,6 +98,12 @@
                 width: 50px;
             }
         }
+
+        @if ($core-course-hide-progress-on-cards) {
+            .core-course-progress {
+                display: none;
+            }
+        }
     }
 
     button {

src/theme/globals.variables.scss

@@ -324,12 +324,13 @@ $core-side-blocks-max-width: 30% !default;
 $core-side-blocks-min-width: 280px !default;
 
 $core-combobox-color: $black !default;
+$core-combobox-background: $ion-item-background !default;
 $core-combobox-color-dark: $white !default;
+$core-combobox-background-dark: $ion-item-background-dark !default;
 $core-combobox-border-color: $primary !default;
 $core-combobox-border-color-dark: $primary-dark !default;
 $core-combobox-border-width: 3px !default;
 
-
 $core-selected-item-color: $primary !default;
 $core-selected-item-color-dark: $primary-dark !default;
 $core-selected-item-border-width: 5px !default;
@@ -358,6 +359,25 @@ $core-avatar-size:  44px !default;
 $core-send-message-input-background: $gray !default;
 $core-send-message-input-color: $black !default;
 
+$core-more-icon-color: null !default;
+$core-more-item-border: null !default;
+$core-more-hide-siteinfo: false !default;
+$core-more-hide-sitename: false !default;
+$core-more-hide-siteurl: false !default;
+
+$core-fixed-url: false !default;
+$core-dashboard-logo: false !default;
+$core-always-show-main-menu: false !default;
+
+$core-show-courseimage-on-course: false !default;
+$core-hide-progress-on-course: false !default;
+$core-courseimage-on-course-height: 150px !default;
+$core-hide-progress-on-section-selector: false !default;
+
+$core-course-hide-thumb-on-cards: false !default;
+$core-course-thumb-on-cards-background: null !default;
+$core-course-hide-progress-on-cards: false !default;
+
 $addon-calendar-event-category-color: $purple !default;
 $addon-calendar-event-course-color: $red !default;
 $addon-calendar-event-group-color: $yellow !default;
@@ -392,13 +412,3 @@ $addon-forum-highlight-color: $gray-lighter !default;
 
 $addon-forum-border-color-dark: $gray-dark !default;
 $addon-forum-highlight-color-dark: $gray-darker !default;
-
-$core-more-icon-color: null !default;
-$core-more-item-border: null !default;
-$core-more-hide-siteinfo: false !default;
-$core-more-hide-sitename: false !default;
-$core-more-hide-siteurl: false !default;
-
-$core-fixed-url: false !default;
-$core-dashboard-logo: false !default;
-$core-always-show-main-menu: false !default;

src/theme/theme.base.scss

@@ -462,7 +462,7 @@ img.large-avatar,
     margin-bottom: 10px;
     border-radius : 50%;
     padding: 4px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--gray);
     background-color: transparent;
 }
 

src/theme/theme.dark.scss

@@ -97,7 +97,7 @@
     --item-divider-color: #{$ion-item-divider-color-dark};
     --spacer-background: #{$core-spacer-background-dark};
 
-    --core-combobox-background: var(--ion-item-background);
+    --core-combobox-background: #{$core-combobox-background-dark};
     --core-combobox-color: #{$core-combobox-color-dark};
 
     --selected-item-color: #{$core-selected-item-color-dark};

src/theme/theme.light.scss

@@ -222,6 +222,7 @@
 
     --core-combobox-background: var(--ion-item-background);
     --core-combobox-color: #{$core-combobox-color};
+    --core-combobox-background: #{$core-combobox-background};
     --core-combobox-border-color: #{$core-combobox-border-color};
     --core-combobox-border-width: #{$core-combobox-border-width};