MOBILE-3034 course: Style module availability info

scripts/langindex.json

@@ -1654,6 +1654,7 @@
   "core.resourcedisplayopen": "moodle",
   "core.resources": "moodle",
   "core.restore": "moodle",
+  "core.restricted": "moodle",
   "core.retry": "local_moodlemobileapp",
   "core.save": "moodle",
   "core.search": "moodle",

src/assets/lang/en.json

@@ -1654,6 +1654,7 @@
     "core.resourcedisplayopen": "Open",
     "core.resources": "Resources",
     "core.restore": "Restore",
+    "core.restricted": "Restricted",
     "core.retry": "Retry",
     "core.save": "Save",
     "core.search": "Search",

src/core/course/components/module/core-course-module.html

@@ -19,13 +19,16 @@
             </div>
         </div>
     </div>
-    <div>
+    <div class="core-module-more-info">
         <ion-badge item-end *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor" text-wrap text-start>
             <core-format-text [text]="module.handlerData.extraBadge"></core-format-text>
         </ion-badge>
         <ion-badge item-end *ngIf="module.visible === 0 && (!section || section.visible)" text-wrap>{{ 'core.course.hiddenfromstudents' | translate }}</ion-badge>
         <ion-badge item-end *ngIf="module.visible !== 0 && module.isStealth" text-wrap>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-badge>
-        <ion-badge item-end *ngIf="module.availabilityinfo" text-wrap><core-format-text [text]="module.availabilityinfo"></core-format-text></ion-badge>
+        <div class="core-module-availabilityinfo" *ngIf="module.availabilityinfo" item-end>
+            <ion-badge text-wrap>{{ 'core.restricted' | translate }}</ion-badge>
+            <core-format-text [text]="module.availabilityinfo" text-wrap></core-format-text>
+        </div>
         <ion-badge item-end *ngIf="module.completiondata && module.completiondata.offline" color="warning" text-wrap>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-badge>
     </div>
     <core-format-text class="core-module-description" *ngIf="module.description" maxHeight="80" [text]="module.description"></core-format-text>

src/core/course/components/module/module.scss

@@ -51,6 +51,19 @@ ion-app.app-root core-course-module {
         }
     }
 
+    .core-module-more-info {
+        ion-badge {
+            @include text-align('start');
+        }
+
+        .core-module-availabilityinfo  {
+            font-size: 90%;
+            ul {
+                margin-block-start: 0.5em;
+            }
+        }
+    }
+
     .core-not-clickable:active,
     .core-not-clickable.activated {
         background-color: $list-background-color;

src/core/course/pages/section-selector/section-selector.scss

@@ -10,6 +10,6 @@ ion-app.app-root page-core-course-section-selector {
     }
 
     ion-badge {
-        text-align: left;
+        @include text-align('start');
     }
 }

src/lang/en.json

@@ -202,6 +202,7 @@
     "resourcedisplayopen": "Open",
     "resources": "Resources",
     "restore": "Restore",
+    "restricted": "Restricted",
     "retry": "Retry",
     "save": "Save",
     "search": "Search",