MOBILE-2325 badges: Badges styles

main
Pau Ferrer Ocaña 2018-02-26 10:38:18 +01:00 committed by Dani Palou
parent 7b159b4a2f
commit 26e8ce83c4
2 changed files with 59 additions and 58 deletions

View File

@ -9,79 +9,79 @@
</ion-refresher> </ion-refresher>
<core-loading [hideUntil]="badgeLoaded"> <core-loading [hideUntil]="badgeLoaded">
<div class="list"> <ion-item-group>
<div class="item item-text-wrap item-avatar-center"> <ion-item text-wrap class="item-avatar-center">
<img *ngIf="badge.badgeurl" class="avatar" src="{{badge.badgeurl}}" core-external-content alt="{{badge.name}}" role="presentation"> <img *ngIf="badge.badgeurl" class="avatar" [src]="badge.badgeurl" core-external-content [alt]="badge.name">
<span *ngIf="badge.dateexpire && currentTime >= badge.dateexpire" class="badge badge-assertive"> <ion-badge color="danger" *ngIf="badge.dateexpire && currentTime >= badge.dateexpire">
{{ 'addon.badges.expired' | translate }} {{ 'addon.badges.expired' | translate }}
</span> </ion-badge>
</div> </ion-item>
</div> </ion-item-group>
<div class="list" *ngIf="user.fullname"> <ion-item-group *ngIf="user.fullname">
<div class="item item-divider"> <ion-item-divider color="light">
<h2>{{ 'addon.badges.recipientdetails' | translate}}</h2> <h2>{{ 'addon.badges.recipientdetails' | translate}}</h2>
</div> </ion-item-divider>
<div class="item"> <ion-item text-wrap>
<p class="item-heading">{{ 'core.name' | translate}}</p> <h2>{{ 'core.name' | translate}}</h2>
<p> <p>
<core-format-text watch="true" clean="true" [text]="user.fullname"></core-format-text> <core-format-text clean="true" [text]="user.fullname"></core-format-text>
</p> </p>
</div> </ion-item>
</div> </ion-item-group>
<div class="list"> <ion-item-group>
<div class="item item-divider"> <ion-item-divider color="light">
<h2>{{ 'addon.badges.issuerdetails' | translate}}</h2> <h2>{{ 'addon.badges.issuerdetails' | translate}}</h2>
</div> </ion-item-divider>
<div class="item" *ngIf="badge.issuername"> <ion-item text-wrap *ngIf="badge.issuername">
<p class="item-heading">{{ 'addon.badges.issuername' | translate}}</p> <h2>{{ 'addon.badges.issuername' | translate}}</h2>
<p> <p>
<core-format-text watch="true" clean="true" [text]="badge.issuername"></core-format-text> <core-format-text clean="true" [text]="badge.issuername"></core-format-text>
</p> </p>
</div> </ion-item>
<div class="item" *ngIf="badge.issuercontact"> <ion-item text-wrap *ngIf="badge.issuercontact">
<p class="item-heading">{{ 'addon.badges.contact' | translate}}</p> <h2>{{ 'addon.badges.contact' | translate}}</h2>
<p> <p>
<core-format-text watch="true" clean="true" [text]="badge.issuercontact"></core-format-text> <core-format-text clean="true" [text]="badge.issuercontact"></core-format-text>
</p> </p>
</div> </ion-item>
</div> </ion-item-group>
<div class="list"> <ion-item-group>
<div class="item item-divider"> <ion-item-divider color="light">
<h2>{{ 'addon.badges.badgedetails' | translate}}</h2> <h2>{{ 'addon.badges.badgedetails' | translate}}</h2>
</div> </ion-item-divider>
<div class="item" *ngIf="badge.name"> <ion-item text-wrap *ngIf="badge.name">
<p class="item-heading">{{ 'core.name' | translate}}</p> <h2>{{ 'core.name' | translate}}</h2>
<p>{{badge.name}}</p> <p>{{badge.name}}</p>
</div> </ion-item>
<div class="item item-text-wrap" *ngIf="badge.description"> <ion-item text-wrap *ngIf="badge.description">
<p class="item-heading">{{ 'core.description' | translate}}</p> <h2>{{ 'core.description' | translate}}</h2>
<p> <p>
<core-format-text watch="true" clean="true" [text]="badge.description"></core-format-text> <core-format-text clean="true" [text]="badge.description"></core-format-text>
</p> </p>
</div> </ion-item>
<div class="item item-text-wrap" *ngIf="course.fullname"> <ion-item text-wrap *ngIf="course.fullname">
<p class="item-heading">{{ 'core.course' | translate}}</p> <h2>{{ 'core.course' | translate}}</h2>
<p> <p>
<core-format-text watch="true" clean="true" [text]="course.fullname"></core-format-text> <core-format-text clean="true" [text]="course.fullname"></core-format-text>
</p> </p>
</div> </ion-item>
</div> </ion-item-group>
<div class="list"> <ion-item-group>
<div class="item item-divider"> <ion-item-divider color="light">
<h2>{{ 'addon.badges.issuancedetails' | translate}}</h2> <h2>{{ 'addon.badges.issuancedetails' | translate}}</h2>
</div> </ion-item-divider>
<div class="item" *ngIf="badge.dateissued"> <ion-item text-wrap *ngIf="badge.dateissued">
<p class="item-heading">{{ 'addon.badges.dateawarded' | translate}}</p> <h2>{{ 'addon.badges.dateawarded' | translate}}</h2>
<p>{{badge.dateissued | coreToLocaleString }}</p> <p>{{badge.dateissued | coreToLocaleString }}</p>
</div> </ion-item>
<div class="item item-text-wrap" *ngIf="badge.dateexpire"> <ion-item text-wrap *ngIf="badge.dateexpire">
<p class="item-heading">{{ 'addon.badges.expirydate' | translate}}</p> <h2>{{ 'addon.badges.expirydate' | translate}}</h2>
<p>{{badge.dateexpire | coreToLocaleString }}</p> <p>{{badge.dateexpire | coreToLocaleString }}</p>
</div> </ion-item>
</div> </ion-item-group>
</core-loading> </core-loading>
</ion-content> </ion-content>

View File

@ -14,15 +14,16 @@
<ion-list *ngIf="badges && badges.length" no-margin> <ion-list *ngIf="badges && badges.length" no-margin>
<a ion-item text-wrap *ngFor="let badge of badges" [title]="badge.name" (click)="loadIssuedBadge(badge.uniquehash)" [class.core-split-item-selected]="badge.uniquehash == badgeHash"> <a ion-item text-wrap *ngFor="let badge of badges" [title]="badge.name" (click)="loadIssuedBadge(badge.uniquehash)" [class.core-split-item-selected]="badge.uniquehash == badgeHash">
<img src="{{badge.badgeurl}}" alt="{{badge.name}}" item-start core-external-content> <ion-avatar item-start>
<span *ngIf="badge.dateexpire && currentTime >= badge.dateexpire" class="badge badge-assertive"> <img [src]="badge.badgeurl" [alt]="badge.name" item-start core-external-content>
{{ 'addon.badges.expired' | translate }} </ion-avatar>
</span>
<h2><core-format-text [text]="badge.name"></core-format-text></h2> <h2><core-format-text [text]="badge.name"></core-format-text></h2>
<p>{{ badge.dateissued | coreToLocaleString }}</p> <p>{{ badge.dateissued | coreToLocaleString }}</p>
<ion-badge item-end color="danger" *ngIf="badge.dateexpire && currentTime >= badge.dateexpire">
{{ 'addon.badges.expired' | translate }}
</ion-badge>
</a> </a>
</ion-list> </ion-list>
</core-loading> </core-loading>
</ion-content> </ion-content>
</core-split-view> </core-split-view>