Skip to content

Commit e9ae1fe

Browse files
frostmarkedfrostmarked
committed
[ci skip] ok, so no obvious plan. just trying to be creative
but at least a few steps forward regarding LAF
1 parent 854f93c commit e9ae1fe

23 files changed

+335
-217
lines changed

‎src/main/webapp/app/farm/cow/dam-details/dam-details.component.html‎

Lines changed: 92 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,101 @@
11
<div>
2-
<h2 id="page-heading">
2+
<h1 id="page-heading">
33
<span jhiTranslate="bonGatewayApp.farm.cow.dam-details.title"
4-
[translateValues]="{ earTagId: dam?.earTagId, familyname: dam?.name }">Dam X</span>
5-
</h2>
4+
[translateValues]="{ earTagId: dam?.earTagId, familyname: dam?.name! | titlecase }">Dam X</span>
5+
</h1>
66

7-
<div class="clearfix" *ngIf="loading$ | async">
8-
<div class="spinner-border spinner-border-sm float-right" role="status">
9-
<span class="sr-only">Loading...</span>
10-
</div>
11-
</div>
7+
<div>
8+
<div class="clearfix" *ngIf="loading$ | async">
9+
<div class="spinner-border spinner-border-sm float-right" role="status">
10+
<span class="sr-only">Loading...</span>
11+
</div>
12+
</div>
13+
<jhi-alert-error></jhi-alert-error>
14+
<jhi-alert></jhi-alert>
15+
</div>
1216

13-
<jhi-alert-error></jhi-alert-error>
17+
<article *ngIf="article$ | async as article" class="dam-article-container">
18+
<section *ngFor="let section of article.sections" class="dam-section">
19+
<h4 *ngIf="section?.title">{{ section?.title }}</h4>
20+
<p *ngIf="section?.ingress">{{ section?.ingress }}</p>
21+
<p *ngIf="section?.body">{{ section?.body }}</p>
1422

15-
<jhi-alert></jhi-alert>
23+
<figure *ngIf="section?.imageContentType" class="figure dam-section-figure">
24+
<img [src]="'data:' + section?.imageContentType + ';base64,' + section?.image" alt=""
25+
class="figure-img img-fluid">
26+
<figcaption *ngIf="section?.caption" class="figure-caption">{{section?.caption}}</figcaption>
27+
</figure>
28+
</section>
29+
</article>
1630

17-
<div *ngIf="dam" class="cow-container"
18-
[ngClass]="{
19-
'is-role-anonymous': dam?.visibility == 'ROLE_ANONYMOUS',
20-
'is-role-user': dam?.visibility == 'ROLE_USER',
21-
'is-role-admin': dam?.visibility == 'ROLE_ADMIN'
22-
}">
23-
<p>BORN: {{ dam!.birthDate | date:'yyyy-MM-dd' }}</p>
24-
<p>W0: {{ dam!.weight0 }} - W200: {{ dam!.weight200 }} - W365: {{ dam!.weight365 }}</p>
31+
<div class="row">
32+
<div class="col-lg-3">
33+
<div *ngIf="dam" class="dam-container" [jhiBonVisibilityClass]="dam?.visibility">
34+
<div class="dam-card card">
35+
<div class="card-header">
36+
<span jhiTranslate="bonGatewayApp.farm.cow.dam-details.dam-card.header">Data</span>
37+
</div>
38+
<div class="card-body">
39+
<p>
40+
<span jhiTranslate="bonGatewayApp.farm.cow.dam-details.dam-card.lineage">Lineage</span>
41+
<span>:</span>
42+
<a [routerLink]="['/farm', 'cow', 'linage', dam?.linageId]">{{ dam?.linageId }} {{ dam?.linageName! | titlecase }}</a>
43+
</p>
44+
<p>
45+
<span jhiTranslate="bonGatewayApp.farm.cow.dam-details.dam-card.born">BORN</span>
46+
<span>:</span>
47+
<span>{{ dam!.birthDate | date:'yyyy-MM-dd' }}</span>
48+
</p>
49+
<p>
50+
<span jhiTranslate="bonGatewayApp.farm.cow.dam-details.dam-card.w0">WO</span>
51+
<span>:</span>
52+
<span>{{ dam!.weight0 }}</span>
53+
<span>kg</span>
54+
</p>
55+
<p>
56+
<span jhiTranslate="bonGatewayApp.farm.cow.dam-details.dam-card.w200">W200</span>
57+
<span>:</span>
58+
<span>{{ dam!.weight200 }}</span>
59+
<span>kg</span>
60+
</p>
61+
<p>
62+
<span jhiTranslate="bonGatewayApp.farm.cow.dam-details.dam-card.w365">W365</span>
63+
<span>:</span>
64+
<span>{{ dam!.weight365 }}</span>
65+
<span>kg</span>
66+
</p>
2567

26-
<p *ngIf="matri$ | async as matri">
27-
<span>MATRI: </span>
28-
<a *ngIf="matri; else noMatri"
29-
[title]="'Matri' + matri?.earTagId"
30-
[routerLink]="['/farm', 'cow', 'dam', matri?.earTagId]">{{ matri?.earTagId }} {{ matri?.name }}</a>
31-
<ng-template #noMatri>{{ dam?.matriId }}</ng-template>
32-
</p>
33-
34-
<p *ngIf="patri$ | async as patri">
35-
<span>PATRI: </span>
36-
<a *ngIf="patri; else noPatri"
37-
[title]="'Patri' + patri?.earTagId"
38-
[routerLink]="['/farm', 'cow', 'sire', patri?.earTagId]">{{ patri?.earTagId }} {{ patri?.name }}</a>
39-
<ng-template #noPatri>{{ dam?.patriId }}</ng-template>
40-
</p>
41-
</div>
42-
43-
44-
<article *ngIf="article$ | async as article" class="dam-article-container">
45-
<section *ngFor="let section of article.sections" class="dam-section">
46-
<h4 *ngIf="section?.title">{{ section?.title }}</h4>
47-
<p *ngIf="section?.ingress">{{ section?.ingress }}</p>
48-
<p *ngIf="section?.body">{{ section?.body }}</p>
49-
50-
<figure *ngIf="section?.imageContentType" class="figure dam-section-figure">
51-
<img [src]="'data:' + section?.imageContentType + ';base64,' + section?.image" alt="" class="figure-img img-fluid">
52-
<figcaption *ngIf="section?.caption" class="figure-caption">{{section?.caption}}</figcaption>
53-
</figure>
54-
</section>
55-
</article>
56-
57-
<h3>Pictures</h3>
58-
59-
<div *ngFor="let pic of pictures$ | async" class="dam-item p-2">
60-
<figure class="dam-figure figure" [jhiBonVisibilityClass]="pic?.visibility">
61-
<img [jhiCowPicture]="pic"
62-
sizes="(min-width: 768px) 50vw, 100vw"
63-
alt="{{ pic?.caption }}"
64-
class="img-fluid" />
65-
</figure>
66-
</div>
68+
<p *ngIf="matri$ | async as matri">
69+
<span jhiTranslate="bonGatewayApp.farm.cow.dam-details.dam-card.matri">MATRI</span>
70+
<span>:</span>
71+
<a *ngIf="matri; else noMatri"
72+
[title]="'Matri ' + matri?.earTagId"
73+
[routerLink]="['/farm', 'cow', 'dam', matri?.earTagId]">{{ matri?.earTagId }} {{ matri?.name! | titlecase }}</a>
74+
<ng-template #noMatri>{{ dam?.matriId }}</ng-template>
75+
</p>
6776

77+
<p *ngIf="patri$ | async as patri">
78+
<span jhiTranslate="bonGatewayApp.farm.cow.dam-details.dam-card.patri">PATRI</span>
79+
<span>:</span>
80+
<a *ngIf="patri; else noPatri"
81+
[title]="'Patri ' + patri?.earTagId"
82+
[routerLink]="['/farm', 'cow', 'sire', patri?.earTagId]">{{ patri?.earTagId }} {{ patri?.name! | titlecase }}</a>
83+
<ng-template #noPatri>{{ dam?.patriId }}</ng-template>
84+
</p>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
<div class="col-lg-9">
90+
<div *ngFor="let pic of pictures$ | async" class="dam-item" [jhiBonVisibilityClass]="pic?.visibility">
91+
<figure class="dam-figure figure">
92+
<img [jhiCowPicture]="pic"
93+
src="http://populated.by.directive"
94+
sizes="(min-width: 992px) 75vw, 100vw"
95+
alt="{{ pic?.caption }}"
96+
class="img-fluid dam-img"/>
97+
</figure>
98+
</div>
99+
</div>
100+
</div>
68101
</div>

‎src/main/webapp/app/farm/cow/dam-details/dam-details.component.scss‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
@import 'src/main/webapp/content/scss/bon';
2+
3+
.dam-card {
4+
font-size: 1.4rem;
5+
}
6+
17
.dam-item {
28
&.is-role-user,
39
&.is-role-admin {
@@ -6,15 +12,7 @@
612
}
713

814
.dam-img {
9-
min-width: 200px;
10-
max-width: 400px;
11-
min-height: 200px;
12-
}
13-
14-
a > .dam-figure {
15-
font-size: 1.5rem;
16-
17-
&:hover {
18-
text-decoration: underline;
19-
}
15+
border: 2px solid $primary-color;
16+
padding: 3px;
17+
border-radius: 5px 5px 5px 5px/25px 25px 25px 5px;
2018
}

‎src/main/webapp/app/farm/cow/linage-details/linage-details.component.html‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,45 @@
11
<div>
2-
<h2 id="page-heading">
2+
<h1 id="page-heading">
33
<span jhiTranslate="bonGatewayApp.farm.cow.linage-details.title"
4-
[translateValues]="{ earTagId: linage?.earTagId, familyname: linage?.familyname }">Linage X</span>
5-
</h2>
4+
[translateValues]="{ earTagId: linage?.earTagId, familyname: linage?.familyname }">Linage X</span>
5+
</h1>
66

7-
<div class="clearfix" *ngIf="loading$ | async">
8-
<div class="spinner-border spinner-border-sm float-right" role="status">
9-
<span class="sr-only">Loading...</span>
7+
<div>
8+
<div class="clearfix" *ngIf="loading$ | async">
9+
<div class="spinner-border spinner-border-sm float-right" role="status">
10+
<span class="sr-only">Loading...</span>
11+
</div>
1012
</div>
13+
<jhi-alert-error></jhi-alert-error>
14+
<jhi-alert></jhi-alert>
1115
</div>
1216

13-
<jhi-alert-error></jhi-alert-error>
14-
15-
<jhi-alert></jhi-alert>
16-
1717
<article *ngIf="article$ | async as article" class="linage-article-container">
1818
<section *ngFor="let section of article.sections" class="linage-section">
1919
<h4 *ngIf="section?.title">{{ section?.title }}</h4>
2020
<p *ngIf="section?.ingress">{{ section?.ingress }}</p>
2121
<p *ngIf="section?.body">{{ section?.body }}</p>
2222

2323
<figure *ngIf="section?.imageContentType" class="figure linage-section-figure">
24-
<img [src]="'data:' + section?.imageContentType + ';base64,' + section?.image" alt="" class="figure-img img-fluid">
24+
<img [src]="'data:' + section?.imageContentType + ';base64,' + section?.image" alt=""
25+
class="figure-img img-fluid">
2526
<figcaption *ngIf="section?.caption" class="figure-caption">{{section?.caption}}</figcaption>
2627
</figure>
2728
</section>
2829
</article>
2930

30-
<h3>Descendants</h3>
31+
<h3><span jhiTranslate="bonGatewayApp.farm.cow.linage-details.descendants"
32+
[translateValues]="{ earTagId: linage?.earTagId, familyname: linage?.familyname }">Descendants</span></h3>
33+
3134
<div class="dam-container d-flex align-content-start flex-wrap">
3235
<div *ngFor="let dam of dams$ | async" class="dam-item p-2" [jhiBonVisibilityClass]="dam?.visibility">
33-
<a [title]="'Dam' + dam?.id" [routerLink]="['/farm', 'cow', 'dam', dam?.earTagId]">
36+
<a [title]="'Dam ' + dam?.earTagId" [routerLink]="['/farm', 'cow', 'dam', dam?.earTagId]">
3437
<figure class="dam-figure figure">
3538
<img [jhiCowPicture]="dam.picture$ | async"
36-
sizes="300px"
37-
alt="{{dam?.earTagId}} {{ dam?.familyname }}"
38-
class="dam-img figure-img img-fluid rounded">
39+
src="http://populated.by.directive"
40+
sizes="300px"
41+
alt="{{dam?.earTagId}} {{ dam?.familyname }}"
42+
class="dam-img figure-img img-fluid img-thumbnail">
3943
<figcaption class="dam-img-caption text-center">{{dam?.earTagId}} {{ dam?.familyname }}</figcaption>
4044
</figure>
4145
</a>

‎src/main/webapp/app/farm/cow/linage-details/linage-details.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
min-width: 200px;
1010
max-width: 400px;
1111
min-height: 200px;
12+
13+
&.img-thumbnail {
14+
border-color: theme-color('primary');
15+
}
1216
}
1317

1418
a > .dam-figure {

‎src/main/webapp/app/farm/cow/linage-list/linage-list.component.html‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,33 @@
11
<div>
2-
<h2 id="page-heading">
3-
<span jhiTranslate="bonGatewayApp.farm.cow.linage-list.title">Linages</span>
4-
</h2>
2+
<h1 id="page-heading">
3+
<span jhiTranslate="bonGatewayApp.farm.cow.linage-list.title">Linages</span>
4+
</h1>
55

6-
<div class="clearfix" *ngIf="loading$ | async">
7-
<div class="spinner-border spinner-border-sm float-right" role="status">
8-
<span class="sr-only">Loading...</span>
6+
<div>
7+
<div class="clearfix" *ngIf="loading$ | async">
8+
<div class="spinner-border spinner-border-sm float-right" role="status">
9+
<span class="sr-only">Loading...</span>
10+
</div>
11+
</div>
12+
<jhi-alert-error></jhi-alert-error>
13+
<jhi-alert></jhi-alert>
914
</div>
10-
</div>
1115

12-
<jhi-alert-error></jhi-alert-error>
13-
14-
<jhi-alert></jhi-alert>
15-
16-
<div class="linage-container d-flex align-content-start flex-wrap">
17-
<div *ngFor="let linage of linages$ | async" class="linage-item p-2" [jhiBonVisibilityClass]="linage?.visibility">
18-
<a [title]="'Linage' + linage?.earTagId" [routerLink]="['/farm', 'cow', 'linage', linage?.earTagId]">
19-
<figure class="linage-figure figure">
20-
<img [jhiCowPicture]="linage.picture$ | async"
21-
sizes="300px"
22-
alt="{{linage?.earTagId}} {{ linage?.familyname }}"
23-
class="linage-img figure-img img-fluid rounded">
24-
<figcaption class="linage-img-caption text-center">{{linage?.earTagId}} {{ linage?.familyname }}</figcaption>
25-
</figure>
26-
</a>
16+
<div class="linage-container d-flex align-content-start flex-wrap">
17+
<div *ngFor="let linage of linages$ | async" class="linage-item p-2"
18+
[jhiBonVisibilityClass]="linage?.visibility">
19+
<a [title]="'Linage' + linage?.earTagId" [routerLink]="['/farm', 'cow', 'linage', linage?.earTagId]">
20+
<figure class="linage-figure figure">
21+
<img [jhiCowPicture]="linage.picture$ | async"
22+
src="http://populated.by.directive"
23+
sizes="300px"
24+
alt="{{linage?.earTagId}} {{ linage?.familyname }}"
25+
class="linage-img figure-img img-fluid img-thumbnail">
26+
<figcaption
27+
class="linage-img-caption text-center">{{linage?.earTagId}} {{ linage?.familyname }}</figcaption>
28+
</figure>
29+
</a>
30+
</div>
2731
</div>
28-
</div>
2932

3033
</div>

0 commit comments

Comments
 (0)