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

Move card linking to edit page

Browse source 
change style for card deletion blur
This commit is contained in:
Lilian 2023-02-07 19:35:53 +01:00
parent 4abed80b04
commit a8de987d5b
Signed by: enbyfoxen
GPG key ID: 007CA12D692829E1
3 changed files with 52 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -48,18 +48,13 @@
<br/>
<h3 class="text-center">Cards</h3>
@if (!cards.Any()) {
<div>
No linked cards found.
</div>
}
else {
@{
<div class="row justify-content-center">
@foreach (var card in cards) {
<div class="fake-card-wrapper m-2">
<div class="fake-card-wrapper blur-true m-2">
<div class="fake-card">
<div class="hover-overlay"></div>
<button type="button" class="btn btn-danger btn-lg hover-button">Delete</button>
<a class="btn btn-danger btn-lg hover-button">Delete</a>
<div class="face-card front">
<div class="chip">
<div>
@ -87,5 +82,35 @@ else {
</div>
</div>
}
<!-- Here we display a faded placholder card, with the add button at its center -->
<div class="fake-card-wrapper m-2">
<div class="fake-card">
<a class="btn btn-success btn-lg add-card-button" href="/LinkCard/@user.Id">Add Card</a>
<div class="face-card ghost-card front">
<div class="chip">
<div>
<div>
<div>
</div>
</div>
</div>
</div>
<h2 class="card-number">PLACEHOLDER</h2>
<h3 class="card-holder">PLACEHOLDER</h3>
<span class="validity">
<span class="small">VALID<br>THRU</span>
<span>01/2038</span>
</span>
<div class="fake-card-logo-top">
<img src="/img/afra.png" class="fake-card-logo-inner" alt="">
</div>
<div class="fake-card-logo-bottom">
<img src="/img/matecard.png" class="fake-card-logo-inner" alt="">
</div>
</div>
</div>
</div>
</div>
}

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

@ -67,10 +67,9 @@
<td> <!-- Displayed when in big layout -->
<div class="d-none d-md-flex btn-group btn-group-lg" role="group">
<!-- Make sure these buttons match the small/mobile layout ones below -->
<a class="btn px-auto btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50&euro;</a>
<a class="btn px-auto btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
<a class="btn px-auto btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</a>
<a class="btn px-2 btn-secondary text-nowrap" href="/LinkCard/@user.Id">Link card</a>
<a class="btn px-3 btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50&euro;</a>
<a class="btn px-3 btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
<a class="btn px-3 btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</a>
<a class="btn px-2 btn-primary" href="/EditUser/@user.Id">Edit</a>
</div>
<!-- Displayed when in compact/phone layout -->
@ -84,7 +83,6 @@
<a class="btn btn-lg btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50&euro;</a>
<a class="btn btn-lg btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
<a class="btn btn-lg btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</a>
<a class="btn btn-lg btn-secondary" href="/LinkCard/@user.Id">Link card</a>
<a class="btn btn-lg btn-primary" href="/EditUser/@user.Id">Edit</a>
</div>
</div>

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

@ -258,6 +258,17 @@ button.accept-policy {
margin-bottom: 60px;
}
.ghost-card {
filter:grayscale(100%) blur(4px);
}
.add-card-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
filter: grayscale(0%)
}
.hover-button {
position: absolute;
top: 50%;
@ -268,20 +279,13 @@ button.accept-policy {
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;
.fake-card-wrapper:hover.blur-true .face-card{
transition: 0.3s ease;
filter:blur(4px) grayscale(100%);
}