MOBILE-4616 course: Show availability section info in collapsed content

Author: crazyserver

src/core/features/course/components/course-section/course-section.html

@@ -22,9 +22,11 @@
         <ion-label class="ion-text-wrap">
             <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
                 <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id" />
+                <ion-icon *ngIf="section.availabilityinfo" name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
             </h2>
             <div *ngIf="section.visible === 0 && section.uservisible !== false">
-                <ion-badge color="warning">
+                <ion-badge color="secondary" class="ion-text-wrap">
+                    <ion-icon name="far-eye-slash" aria-hidden="true" />
                     {{ 'core.course.hiddenfromstudents' | translate }}
                 </ion-badge>
             </div>
@@ -33,20 +35,22 @@ <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
                     {{ 'core.notavailable' | translate }}
                 </ion-badge>
             </div>
-            <div *ngIf="section.availabilityinfo">
-                <ion-chip class="clickable">
-                    <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
-                    <ion-label>
-                        <core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id" />
-                    </ion-label>
-                </ion-chip>
-            </div>
         </ion-label>
         <ion-badge *ngIf="section.highlighted && highlightedName" slot="end">{{highlightedName}}</ion-badge>
     </ion-item>
 </ng-template>
 
 <ng-template #sectionContent>
+    <ion-item class="ion-text-wrap section-summary" *ngIf="section.availabilityinfo">
+        <ion-label>
+            <ion-chip>
+                <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
+                <ion-label>
+                    <core-format-text [text]="section.availabilityinfo" contextLevel="course" [contextInstanceId]="course.id" />
+                </ion-label>
+            </ion-chip>
+        </ion-label>
+    </ion-item>
     <ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
         <ion-label>
             <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id" />

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

@@ -1,6 +1,17 @@
+@use "theme/globals" as *;
+
 :host {
     .course-section {
         --inner-padding-end: var(--mdl-spacing-3);
+
+        ion-badge {
+            @include margin-horizontal(null, 4px);
+            font: var(--mdl-typography-body-font-sm);
+        }
+
+        h2 ion-icon {
+            @include margin-horizontal(4px, null);
+        }
     }
 
     &.collapsible {