From cbb8a986f78e5bbd8c36e02c4b24bd68302c2fa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 29 Jun 2021 13:42:09 +0200
Subject: [PATCH] MOBILE-3320 styles: Align badges when detail icon is always
 present

---
 .../components/index/addon-mod-assign-index.html       | 10 +++++++---
 .../components/index/addon-mod-feedback-index.html     |  4 +++-
 .../h5pactivity/pages/user-attempts/user-attempts.html |  2 +-
 .../h5pactivity/pages/user-attempts/user-attempts.scss |  1 -
 .../quiz/components/index/addon-mod-quiz-index.html    |  2 +-
 src/addons/mod/quiz/components/index/index.scss        |  4 ----
 src/theme/theme.base.scss                              |  5 +++++
 7 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/addons/mod/assign/components/index/addon-mod-assign-index.html b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
index d662546c1..ff8b08066 100644
--- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html
+++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
@@ -109,7 +109,8 @@
 
             <!-- Summary of submissions with draft status. -->
             <ion-item class="ion-text-wrap" *ngIf="assign.submissiondrafts && summary && summary.submissionsenabled"
-                [detail]="!showNumbers || summary.submissiondraftscount"
+                [class.hide-detail]="showNumbers && !summary.submissiondraftscount"
+                detail="true"
                 [button]="!showNumbers || summary.submissiondraftscount"
                 (click)="goToSubmissionList(submissionStatusDraft, !!summary.submissiondraftscount)">
                 <ion-label><h2>{{ 'addon.mod_assign.numberofdraftsubmissions' | translate }}</h2></ion-label>
@@ -124,7 +125,8 @@
 
             <!-- Summary of submissions with submitted status. -->
             <ion-item class="ion-text-wrap" *ngIf="summary && summary.submissionsenabled"
-                [detail]="!showNumbers || summary.submissionssubmittedcount"
+                [class.hide-detail]="showNumbers && !summary.submissionssubmittedcount"
+                detail="true"
                 [button]="!showNumbers || summary.submissionssubmittedcount"
                 (click)="goToSubmissionList(submissionStatusSubmitted, !!summary.submissionssubmittedcount)">
                 <ion-label><h2>{{ 'addon.mod_assign.numberofsubmittedassignments' | translate }}</h2></ion-label>
@@ -139,7 +141,9 @@
 
             <!-- Summary of submissions that need grading. -->
             <ion-item class="ion-text-wrap" *ngIf="summary && summary.submissionsenabled && !assign.teamsubmission && showNumbers"
-                [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></ion-label>
                 <ion-badge slot="end" color="primary">
diff --git a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
index e159aa314..bd6f3fa27 100644
--- a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
+++ b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
@@ -73,7 +73,9 @@
                 </ion-select-option>
             </ion-select>
         </ion-item>
-        <ion-item class="ion-text-wrap" (click)="openRespondents()" [detail]="access.canviewreports && completedCount > 0"
+        <ion-item class="ion-text-wrap" (click)="openRespondents()"
+            [class.hide-detail]="!(access.canviewreports && completedCount > 0)"
+            detail="true"
             [button]="access.canviewreports && completedCount > 0">
             <ion-label>
                 <h2>{{ 'addon.mod_feedback.completed_feedbacks' | translate }}</h2>
diff --git a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
index 776466587..01bcfe080 100644
--- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
@@ -63,7 +63,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="true">
+    <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>
diff --git a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.scss b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.scss
index 87902ea3e..82ba0a46c 100644
--- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.scss
+++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.scss
@@ -1,6 +1,5 @@
 :host {
     .addon-mod_h5pactivity-table-header {
-        --detail-icon-opacity: 0;
         font-weight: bold;
     }
 
diff --git a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
index 3e3838662..39e77b870 100644
--- a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
+++ b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
@@ -74,7 +74,7 @@
         </ion-card-header>
         <ion-card-content role="table">
             <!-- "Header" of the table -->
-            <ion-item class="ion-text-wrap addon-mod_quiz-table-header">
+            <ion-item class="ion-text-wrap addon-mod_quiz-table-header detail-hide">
                 <ion-label role="rowgroup">
                     <ion-row class="ion-align-items-center" role="row">
                         <ion-col class="ion-text-center" *ngIf="quiz.showAttemptColumn" role="columnheader">
diff --git a/src/addons/mod/quiz/components/index/index.scss b/src/addons/mod/quiz/components/index/index.scss
index c1958ffb6..abf80309f 100644
--- a/src/addons/mod/quiz/components/index/index.scss
+++ b/src/addons/mod/quiz/components/index/index.scss
@@ -1,10 +1,6 @@
 :host {
 
     .addon-mod_quiz-table {
-        .addon-mod_quiz-table-header {
-            --detail-icon-opacity: 0;
-        }
-
         ion-card-content {
             padding-left: 0;
             padding-right: 0;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 41eec733f..adb9cf7f8 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -881,6 +881,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:hover::part(native) {