Newer
Older
<div *ngIf="exercise" style="height: 100%;">
<div class="card">
<div class="card-body" style="display: flex; flex-direction: column;">
<img class="card-img-top" src="{{exercise.imageURL}}" alt="exercise image"
style="width: auto; max-width: 100%; max-height: 70px; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 5px; box-shadow: 3px;">
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<h5 class="card-title">{{exercise.title}}</h5>
<p class="card-text" style="text-align: left;">{{exercise.description}}</p>
<div style="margin-top: auto; width: 100%; padding-left: 30px; padding-right: 30px;">
<!-- card rating-->
<div style="margin-bottom: 20px;">
<div style="float: left;">
<p class="card-text" jhiTranslate="exercise.details.rating"></p>
</div>
<div class="star-container">
<span class="star"
*ngFor="let starNumber of [1,2,3,4,5]"
[ngClass]="{'star-marked': exercise.rating >= starNumber,
'star-unmarked': exercise.rating < starNumber}">
</span>
</div>
<!--<div class="rate">
<input type="radio" id="card-star5" name="rate" value="5" />
<label for="card-star5" title="text">5 stars</label>
<input type="radio" id="card-star4" name="rate" value="4" />
<label for="card-star4" title="text">4 stars</label>
<input type="radio" id="card-star3" name="rate" value="3" />
<label for="card-star3" title="text">3 stars</label>
<input type="radio" id="card-star2" name="rate" value="2" />
<label for="card-star2" title="text">2 stars</label>
<input type="radio" id="card-star1" name="rate" value="1" />
<label for="card-star1" title="text">1 star</label>
</div>-->
</div> <!-- card rating end-->
<!-- card bookmark-->
<div style="float: left; width: 100%;">
<div style="float: left;">
<p class="card-text" jhiTranslate="exercise.details.bookmark"></p>
</div>
<div class="form-check" style="float: right; padding-right: 10px;">
<input class="form-check-input" type="checkbox" value="" id="card-defaultCheck1">
<label class="form-check-label" for="card-defaultCheck1"></label>
</div>
</div> <!-- card bookmark end-->
<!-- Button to Open the Modal -->
<button type="button"
class="btn btn-outline-secondary"
style="margin-top: 20px;"
data-toggle="modal"
data-target="#myModal"
(click)="selectExercise()"
jhiTranslate="exercise.open">
</button>
</div>
</div>
</div>
</div>