MOBILE-3320 styles: Align badges when detail icon is always present

main
Pau Ferrer Ocaña 2021-06-29 13:42:09 +02:00
parent 42c849f44b
commit cbb8a986f7
7 changed files with 17 additions and 11 deletions

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -1,6 +1,5 @@
:host {
.addon-mod_h5pactivity-table-header {
--detail-icon-opacity: 0;
font-weight: bold;
}

View File

@ -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">

View File

@ -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;

View File

@ -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) {