Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-20 00:23:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: use school-neutral news image fallback via css

Browse Source
This commit is contained in:
Jovan Krunić
2021-01-30 16:28:50 +01:00
parent 1f3d9ad5f0
commit bb94c71761
4 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/modules/news/page/news-item.html
View File

@@ -1,11 +1,17 @@
<ion-card>
<span *ngIf="item.url; else imageNoUrl">
<a href="{{item.url}}">
<img src="{{item.image}}" onError="this.src='../../assets/imgs/modules/news/placeholder.jpg';" />
<ion-thumbnail>
<img src="{{item.image}}" onerror="this.style.display = 'none'" />
<ion-icon name="newspaper-outline"></ion-icon>
</ion-thumbnail>
</a>
</span>
<ng-template #imageNoUrl>
<img src="{{item.image}}" onError="this.src='../../assets/imgs/modules/news/placeholder.jpg';" />
<ion-thumbnail>
<img src="{{item.image}}" onerror="this.style.display = 'none'" />
<ion-icon name="newspaper-outline"></ion-icon>
</ion-thumbnail>
</ng-template>
<ion-card-header>
<ion-card-subtitle *ngIf="item.datePublished">{{item.datePublished | amLocale: language | amDateFormat:'Do MMMM YYYY, HH:mm'}}

20
src/app/modules/news/page/news-item.scss
View File

@@ -7,6 +7,24 @@ ion-card-header a {
padding-left: 4px;
}
}
ion-card img {
ion-card ion-thumbnail img {
width: 100%;
z-index: 1;
position: absolute;
}
ion-card ion-thumbnail {
position: relative;
background: var(--placeholder-gray);
width: 100%;
min-height: 400px;
align-items: center;
margin: 0;
ion-icon {
position: absolute;
width: 100%;
height: 100%;
color: white;
display: block;
}
}