MOBILE-3833 badges: Fix missing expired overlay

main
Pau Ferrer Ocaña 2022-04-05 15:49:23 +02:00
parent f81ddb374d
commit cff39f065f
3 changed files with 39 additions and 17 deletions

View File

@ -1,21 +1,42 @@
:host .core-block-content ::ng-deep {
ul.badges {
list-style: none;
margin-left: 0;
margin-right: 0;
-webkit-padding-start: 0;
:host {
--badge-size: 100px;
--badge-container-size: 150px;
li {
position: relative;
display: inline-block;
padding-top: 1em;
text-align: center;
vertical-align: top;
width: 150px;
.core-block-content ::ng-deep {
.badge-name {
display: block;
padding: 5px;
ul.badges {
list-style: none;
margin: 0;
li {
position: relative;
display: inline-block;
text-align: center;
margin-top: 1em;
vertical-align: top;
width: var(--badge-container-size);
.badge-name {
display: block;
padding: 5px;
}
.badge-image {
width: var(--badge-size);
}
.expireimage {
content: 'expired';
background-image: url('/assets/img/expired.svg');
background-repeat: no-repeat;
background-size: var(--badge-size) var(--badge-size);
width: var(--badge-size);
height: var(--badge-size);
left: calc((var(--badge-container-size) - var(--badge-size)) /2);
top: 0;
position: absolute;
z-index: 2;
opacity: .85;
}
}
}
}

View File

@ -0,0 +1 @@
<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet"><title>Layer 1</title><path stroke="#fff" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="8" fill="none" d="M6.773 112.162L113.546 5.39l29.7 29.698L36.47 141.86z"/><path stroke-width="5" stroke="#bf3b08" fill="none" d="M7 112.066L113.066 6l29.34 29.34L36.342 141.408z"/><text stroke="#fff" fill="#bf3b08" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="72.605" y="79.727" font-size="20" font-family="Sans-serif" text-anchor="middle" font-weight="bold" transform="rotate(-45 74.918 71.252) scale(1.00967 1)">E X P I R E D</text></svg>

After

Width:  |  Height:  |  Size: 693 B

View File

@ -6,7 +6,7 @@
position: relative;
width: 100%;
height: 230px;
background: url('../../../../../assets/img/icons/h5p.svg') center top 25px / 100px auto no-repeat var(--core-h5p-placeholder-bg-color);
background: url('/assets/img/icons/h5p.svg') center top 25px / 100px auto no-repeat var(--core-h5p-placeholder-bg-color);
color: var(--core-h5p-placeholder-text-color);
.icon:not([color="success"]) {