Newer
Older
<div class="col-sm-3" *ngFor="let result of mockResults">
<!-- cards -->
<div class="card" style="width: 410px; justify-content: center;">
<img class="card-img-top" src="{{result.imageURL}}" alt="result image" style="width: 100px; height: auto; margin-left: auto; margin-right: auto; padding-top: 15px; box-shadow: 3px;">
<div class="card-body">
<h5 class="card-title">{{result.title}}</h5>
<p class="card-text" style="text-align: left;">{{result.description}}</p>
</div>
<div class="card-body">
<!-- card rating-->
<div style="float: left; width: 100%; margin-bottom: 5px;">
<div style="float: left; padding-top: 15px;">
<p class="card-text">Rating</p>
</div>
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="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">Bookmark</p>
</div>
<div class="form-check" style="float: right; padding-right: 10px;">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1"></label>
</div>
</div> <!-- card bookmark end-->
</div>
<div class="card-body" style="text-align: center;">
<div class="container">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#myModal">Open course</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<img class="card-img-top" src="{{result.imageURL}}" alt="result image" style="width: 50px; height: auto; float: left;">
<h4 class="modal-title">{{result.title}}</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<p style="padding-bottom: 15px; text-align: justify;">{{result.description}}</p>
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
</div>
<div class="row">
<div class="col-6 col-md-4" style="margin-bottom: 15px;">
<p style="text-align: left;"><strong>Details</strong><hr></p>
<!-- modal rating-->
<div style="float: left; width: 100%; margin-bottom: 5px;">
<div style="float: left; padding-top: 15px;">
<p class="card-text">Rating</p>
</div>
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</div> <!-- modal rating end-->
<!-- modal bookmark-->
<div style="float: left; width: 100%; margin-bottom: 25px;">
<div style="float: left;">
<p class="card-text">Bookmark</p>
</div>
<div class="form-check" style="float: right; padding-right: 10px;">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1"></label>
</div>
</div> <!-- modal bookmark end-->
<button type="button" class="btn btn-outline-secondary" style="display: block; margin-bottom: 5px;" >Show hit details</button>
<button type="button" class="btn btn-outline-secondary" style="display: block;">Show all excerises </br> for this course</button>
</div>
<div class="col-12 col-md-8">
<p style="text-align: left;"><strong>Meta data</strong><hr></p>
<p style="text-align: left;">Program Language: Java
<br>Creator: Michael Breu
<br>Last update: 26.11.2020
<br>License: CCv2</p>
<a href="https://git-scm.com/" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: right;">Git</a>
</div>
<div class="col-6 col-md-4"></div>
<div class="col-12 col-md-8">
<p style="text-align: left;"><strong>Export options</strong><hr></p>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;">Export ArtTEMIS</a>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;">Export LaTeX</a>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;">Download file</a>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> <!-- Modal end-->
</div>
</div>
</div> <!-- card end-->
</div> <!-- col-sm-3 end -->