AfRA/AfRApay
3
0
Fork 0
Code Issues 7 Pull requests Packages Projects Releases Wiki Activity

Add delete overlay and buttons for cards

Browse source
This commit is contained in:
Lilian 2023-02-07 17:07:35 +01:00
parent 2bb6bfba95
commit f7a961dfce
Signed by: enbyfoxen
GPG key ID: 007CA12D692829E1
2 changed files with 33 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
AfRApay.Web/Pages/EditUser.cshtml
View file

@ -27,17 +27,19 @@
<button type="submit" class="btn btn-danger" name="action" value="delete">Delete</button>
</form>
<br/>
<h3>Cards</h3>
<h3 class="text-center">Cards</h3>
@if (!cards.Any()) {
<div>
No linked cards found.
</div>
}
else {
<div class="row">
<div class="row justify-content-center">
@foreach (var card in cards) {
<div class="fake-card-wrapper">
<div class="fake-card-wrapper m-2">
<div class="fake-card">
<div class="hover-overlay"></div>
<button type="button" class="btn btn-danger hover-button">Delete</button>
<div class="face-card front">
<div class="chip">
<div>

28
AfRApay.Web/wwwroot/css/site.css
View file

@ -256,4 +256,32 @@ button.accept-policy {
.main-body {
margin-bottom: 60px;
}
.hover-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
transition: .5s ease;
z-index: 2;
}
.hover-overlay {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
border-radius: 15px;
transition: .5s ease;
background-color: #808080;
z-index: 1;
}
.fake-card-wrapper:hover .hover-button {
opacity: 1;
visibility: visible;
}
.fake-card-wrapper:hover .hover-overlay {
opacity: 0.75;
}