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

style: improve design and add logo

Browse Source 
- show data icons in thumbnails in data list items
- add app logo
- fix various visibility issues
This commit is contained in:
Jovan Krunić
2021-03-23 15:59:58 +00:00
parent 8b0978c7eb
commit 1a8660590f
31 changed files with 233 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,14 +2,14 @@
<span *ngIf="item.url; else imageNoUrl">
<a href="{{item.url}}">
<ion-thumbnail>
<img src="{{item.image}}" onerror="this.style.display = 'none'" />
<img src="{{item.image}}" onerror="this.style.display = 'none'; this.nextSibling.style.display='block'" />
<ion-icon name="newspaper-outline"></ion-icon>
</ion-thumbnail>
</a>
</span>
<ng-template #imageNoUrl>
<ion-thumbnail>
<img src="{{item.image}}" onerror="this.style.display = 'none'" />
<img src="{{item.image}}" onerror="this.style.display = 'none'; this.nextSibling.style.display='block'" />
<ion-icon name="newspaper-outline"></ion-icon>
</ion-thumbnail>
</ng-template>

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

@@ -7,24 +7,18 @@ ion-card-header a {
padding-left: 4px;
}
}
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;
height: auto;
img {
display: block;
}
ion-icon {
width: 100%;
height: 250px;
color: white;
display: none;
}
}