Skip to content
This repository has been archived by the owner on Jul 3, 2024. It is now read-only.

Commit

Permalink
Issue #SB-10418 fix: Merge pull request #437 from raghav14/release-1.…
Browse files Browse the repository at this point in the history 
…13.0

Issue #SB-10418 fix: update content listener added in qr-result page.
  • Loading branch information
@swayangjit
swayangjit authored Feb 1, 2019
2 parents 71ce88a + 6c3e874 commit d1e4aca
Show file tree
Hide file tree
Showing 3 changed files with 310 additions and 136 deletions.
13 changes: 12 additions & 1 deletion src/pages/qr-code-result/qr-code-result.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,4 +60,15 @@ <h6 class="name font-size-20">{{content?.contentData?.name}}</h6>
</ion-card>
</div>

</ion-content>
</ion-content>

<ion-backdrop class="loading-backdrop" *ngIf="showLoading && !isDownloadStarted" text-center>
<div class="backdrop-container">
<ion-label>{{ 'LOADING_CONTENTS' | translate: {'%s': downloadProgress ? downloadProgress : 0} }}</ion-label>
<pb-horizontal [progress]="downloadProgress" isOnBoardCard="false"></pb-horizontal>
</div>

<div class="backdrop-footer">
<button ion-button small (click)="cancelDownload()">{{ 'CANCEL' | translate }}</button>
</div>
</ion-backdrop>
286 changes: 155 additions & 131 deletions src/pages/qr-code-result/qr-code-result.scss
View file
Original file line number Diff line number Diff line change
@@ -1,144 +1,168 @@
page-qr-code-result{
.card-container{
margin-bottom: 20px;
padding: 0 !important;
}

.P010{
padding:0 10px;
}

.PT0{
padding-top: 0 !important;
}

[dir="ltr"] .card-content-md, [dir="rtl"] .card-content-md{
padding: 5px !important;
}

.card.card-md {
border-radius: 4px;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff;
border: solid 0.5px #cccccc;
position: relative;
.card-content-md {
padding: 7px !important;
.card-container{
margin-bottom: 20px;
padding: 0 !important;
}
.button.button-block.button-block-md {
margin: 0;
border-radius: 0;
}

.badge {
@include padding(5px, 15px);
color: #333;
border-radius: 100px;
border: solid 0.5px #c6dbd8;
font-size: 11px;
@include margin(null, 10px, null, null);
}

.author {
font-size: 11px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #666666;
}

.size{
font-size: 11px;
color: #666666;
}

.name, .author{
margin-bottom: 5px;

.P010{
padding:0 10px;
}

.name{
// min-height: 48px;
display: -webkit-box;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 14px !important;
color: #333333;
min-height: 32px;

.PT0{
padding-top: 0 !important;
}

.bottom-fix{
position: absolute;
bottom: 0;

[dir="ltr"] .card-content-md, [dir="rtl"] .card-content-md{
padding: 5px !important;
}



.top {
min-height:15vh;
// background: #E9E9E9;
.img-container {
border: 1px solid #c6dbd8;
padding: 0 !important;
background: #E9E9E9;
min-height: 18vh;
max-height: 18vh;
border-radius: 4px;
img {
max-height: 100%;
margin: 0 auto;
width: auto;
transform: translateY(-56%);
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);

.card.card-md {
border-radius: 4px;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
background-color: #ffffff;
border: solid 0.5px #cccccc;
position: relative;
.card-content-md {
padding: 7px !important;
}
.button.button-block.button-block-md {
margin: 0;
border-radius: 0;
}

.badge {
@include padding(5px, 15px);
color: #333;
border-radius: 100px;
border: solid 0.5px #c6dbd8;
font-size: 11px;
@include margin(null, 10px, null, null);
}

.author {
font-size: 11px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #666666;
}

.size{
font-size: 11px;
color: #666666;
}

.name, .author{
margin-bottom: 5px;
}

.name{
// min-height: 48px;
display: -webkit-box;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 14px !important;
color: #333333;
min-height: 32px;
}

.bottom-fix{
position: absolute;
bottom: 0;
}



.top {
min-height:15vh;
// background: #E9E9E9;
.img-container {
border: 1px solid #c6dbd8;
padding: 0 !important;
background: #E9E9E9;
min-height: 18vh;
max-height: 18vh;
border-radius: 4px;
img {
max-height: 100%;
margin: 0 auto;
width: auto;
transform: translateY(-56%);
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
}

}
}

ul.breadcrumbs{
list-style: none;
padding: 0;
margin: 0;
li{
display: inline-block;
color: #007aff;
@extend .font-weight-bold;
font-size: 10px;
}


li:after{
content: '\003e';
color: #979797;
height: 0;
width: 0;
margin: 0 5px;
}
li:last-child:after{
content: none;
}

}
}

ul.breadcrumbs{
list-style: none;
padding: 0;
margin: 0;
li{
display: inline-block;
color: #007aff;
@extend .font-weight-bold;
font-size: 10px;

.custom-btn{
background-color: #0076FE;
}


li:after{
content: '\003e';
color: #979797;
height: 0;
width: 0;
margin: 0 5px;

.custom-btn.play .arrow-right{
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 14px solid #fff;
margin-right: 8px;
}

.loading-backdrop {
.backdrop-container {
width: 100%;
padding: 16px;
text-align: center;
position: absolute;
top: 50%;
margin-top: -50px;
}

.backdrop-footer {
position: absolute;
width: 100%;
bottom: 0;
padding-bottom: 16px;
}

background-color: #ffffff;
height: 100%;
z-index: 1000;
opacity: 1 !important;
}
li:last-child:after{
content: none;
}

}

.custom-btn{
background-color: #0076FE;
}

.custom-btn.play .arrow-right{
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 14px solid #fff;
margin-right: 8px;
}
}




Loading

0 comments on commit d1e4aca

Please sign in to comment.