Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-08-28 03:25:42 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(miieditor): new mii above purple outline

Browse Source
This commit is contained in:
Ash Monty
2022-07-30 14:41:23 +02:00
parent 37717f6572
commit 39fff07d07
3 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/assets/css/miieditor.css
View File

@@ -344,11 +344,23 @@ input[type="range"].invert {
border-radius: 24px;
}
.mii-comparison img.new-mii {
.mii-comparison .new-mii-wrapper {
position: relative;
transition: right 500ms, transform 500ms;
right: 0;
}
.mii-comparison .new-mii-wrapper::after {
position: absolute;
content: "";
display: block;
box-shadow: inset 0 0 0 8px var(--accent-shade-1);
border-radius: 24px;
margin: 0;
right: 0;
transition: right 500ms, transform 500ms;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.mii-comparison svg {
@@ -365,7 +377,7 @@ input[type="range"].invert {
.fade-out {
animation: fadeOut 0.5s forwards;
}
.mii-comparison img.new-mii.centered-mii-img {
.mii-comparison div.new-mii-wrapper.centered-mii-img {
position: absolute;
right: 50%;
transform: translateX(50%);

2
public/assets/js/miieditor.js
View File

@@ -241,7 +241,7 @@ document.querySelector('#saveTab #saveButton').addEventListener('click', (e) =>
}, 1500);
setTimeout(() => {
document.querySelector('.mii-comparison.confirmed .new-mii').classList.add('centered-mii-img');
document.querySelector('.mii-comparison.confirmed .new-mii-wrapper').classList.add('centered-mii-img');
}, 2000);

14
views/account/miieditor.handlebars
View File

@@ -515,12 +515,18 @@
<p class="save-prompt">Save Mii? This will permanently overwrite your current Mii.</p>
<div class="mii-comparison-animation-wrapper">
<div class="mii-comparison unconfirmed">
<img class="old-mii" src="" ></img>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="#888888" d="M4 15V9h8V4.16L19.84 12L12 19.84V15H4Z"></path></svg> <img class="new-mii" src="" ></img>
<img class="old-mii" src=""></img>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="#888888" d="M4 15V9h8V4.16L19.84 12L12 19.84V15H4Z"></path></svg>
<div class="new-mii-wrapper">
<img class="new-mii" src=""></img>
</div>
</div>
<div class="mii-comparison confirmed">
<img class="old-mii" src="" ></img>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="#888888" d="M4 15V9h8V4.16L19.84 12L12 19.84V15H4Z"></path></svg> <img class="new-mii" src="" ></img>
<img class="old-mii" src=""></img>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="#888888" d="M4 15V9h8V4.16L19.84 12L12 19.84V15H4Z"></path></svg>
<div class="new-mii-wrapper">
<img class="new-mii" src=""></img>
</div>
</div>
</div>
<button class="button primary" id="saveButton">Save!</button>