MOBILE-4081 theme: Reintroduce hide-detail class

This reverts commit be1bacba0c05a244240c4091884ee35e1178048f.

src/addons/mod/assign/components/index/addon-mod-assign-index.html

@@ -63,7 +63,7 @@
 
             <!-- Summary of submissions with draft status. -->
             <ion-item class="ion-text-wrap" *ngIf="assign.submissiondrafts && summary && summary.submissionsenabled"
-                [detail]="summary.submissiondraftscount" [button]="summary.submissiondraftscount"
+                [class.hide-detail]="!summary.submissiondraftscount" [detail]="true" [button]="summary.submissiondraftscount"
                 (click)="goToSubmissionList(submissionStatusDraft, !!summary.submissiondraftscount)">
                 <ion-label>
                     <h2>{{ 'addon.mod_assign.numberofdraftsubmissions' | translate }}</h2>
@@ -78,8 +78,8 @@
             </ion-item>
 
             <!-- Summary of submissions with submitted status. -->
-            <ion-item class="ion-text-wrap" *ngIf="summary && summary.submissionsenabled" [detail]="summary.submissionssubmittedcount"
+            <ion-item class="ion-text-wrap" *ngIf="summary && summary.submissionsenabled"
-                [button]="summary.submissionssubmittedcount"
+                [class.hide-detail]="!summary.submissionssubmittedcount" [detail]="true" [button]="summary.submissionssubmittedcount"
                 (click)="goToSubmissionList(submissionStatusSubmitted, !!summary.submissionssubmittedcount)">
                 <ion-label>
                     <h2>{{ 'addon.mod_assign.numberofsubmittedassignments' | translate }}</h2>
@@ -95,7 +95,7 @@
 
             <!-- Summary of submissions that need grading. -->
             <ion-item class="ion-text-wrap" *ngIf="summary && summary.submissionsenabled && !assign.teamsubmission"
-                [detail]="needsGradingAvailable" [button]="needsGradingAvailable"
+                [class.hide-detail]="!needsGradingAvailable" [detail]="true" [button]="needsGradingAvailable"
                 (click)="goToSubmissionList(needGrading, needsGradingAvailable)">
                 <ion-label>
                     <h2>{{ 'addon.mod_assign.numberofsubmissionsneedgrading' | translate }}</h2>

src/addons/mod/feedback/components/index/addon-mod-feedback-index.html

@@ -61,8 +61,8 @@
     <ion-list *ngIf="access && access.canviewanalysis && !access.isempty">
         <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)"></core-group-selector>
 
-        <ion-item class="ion-text-wrap" (click)="openAttempts()" [detail]="access.canviewreports && completedCount > 0"
+        <ion-item class="ion-text-wrap" (click)="openAttempts()" [class.hide-detail]="!(access.canviewreports && completedCount > 0)"
-            [button]="access.canviewreports && completedCount > 0">
+            [detail]="true" [button]="access.canviewreports && completedCount > 0">
             <ion-label>
                 <h2>{{ 'addon.mod_feedback.completed_feedbacks' | translate }}</h2>
             </ion-label>

src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html

@@ -65,7 +65,7 @@
 <!-- Template to render a list of conversations. -->
 <ng-template #attemptsTemplate let-attempts="attempts">
     <!-- "Header" of the table -->
-    <ion-item class="ion-text-wrap addon-mod_h5pactivity-table-header" [detail]="false">
+    <ion-item class="ion-text-wrap addon-mod_h5pactivity-table-header hide-detail" detail="true">
         <ion-label>
             <ion-row class="ion-align-items-center">
                 <ion-col class="ion-text-center">#</ion-col>

src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.html

@@ -19,7 +19,7 @@
     <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="users.length">
             <!-- "Header" of the table -->
-            <ion-item class="addon-mod_h5pactivity-table-header font-bold" [detail]="false">
+            <ion-item class="addon-mod_h5pactivity-table-header hide-detail font-bold" detail="true">
                 <ion-label>
                     <ion-row class="ion-align-items-center">
                         <ion-col class="ion-text-center" size="4">{{ 'core.user' | translate }}</ion-col>

src/addons/mod/quiz/components/index/addon-mod-quiz-index.html

@@ -52,7 +52,7 @@
         </ion-card-header>
         <ion-card-content role="table">
             <!-- "Header" of the table -->
-            <ion-item class="ion-text-wrap addon-mod_quiz-table-header detail-hide">
+            <ion-item class="ion-text-wrap addon-mod_quiz-table-header hide-detail" [detail]="true">
                 <ion-label role="rowgroup">
                     <ion-row class="ion-align-items-center" role="row">
                         <ion-col class="ion-text-center" *ngIf="quiz.showAttemptColumn" role="columnheader">

src/theme/theme.base.scss

@@ -1445,6 +1445,11 @@ ion-datetime.datetime-disabled {
     opacity: .8 !important;
 }
 
+// Hide details on items to align badges.
+ion-item.hide-detail {
+    --detail-icon-opacity: 0;
+}
+
 // Make links clickable when inside radio or checkbox items. Style part.
 @media (hover: hover) {
     ion-item.item-multiple-inputs:not(.item-rte):hover::part(native) {