-
Daniel Rainer authored491c1ded
mock-search.component.html 8.66 KiB
<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="java.png" alt="java" 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="java.png" alt="java" 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>
</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 -->