br0kenpixel/ReZygisk
1
0
Fork 0
mirror of https://github.com/PerformanC/ReZygisk.git synced 2025-09-06 06:37:01 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

add: bottom slide animation for modal

Browse Source 
This commit will add animation for modal that commit from the bottom (quite goofy) and click animation for theme-switch language-switch and close-modal icon
This commit is contained in:
RainyXeon
2024-07-04 23:18:43 +07:00
committed by ThePedroo
parent cbcb236255
commit 1bdaeaf0ac
4 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
webroot/css/index.css
View File

@@ -29,7 +29,7 @@ a {
text-decoration: none !important;
}
.full_screen {
.load_screen {
position: fixed;
width: 100%;
height: 100%;
@@ -42,6 +42,16 @@ a {
align-items: center;
}
.full_screen {
position: fixed;
z-index: 10;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: top 0.25s ease-in-out;
}
.loader {
border: 6px solid var(--icon-bc);
border-top: 6px solid var(--icon);
@@ -104,7 +114,7 @@ a {
.list {
max-height: 25px;
overflow-y: hidden;
transition: max-height 0.25s ease-in-out;
transition: max-height 0.25s ease;
}
.full {
@@ -153,6 +163,14 @@ a {
background: var(--icon);
}
.icon_animation {
transition: transform 0.05s ease-in-out;
}
.icon_animation:active {
transform: scale(80%)
}
/* Card type */
.bright {
border: 5px solid var(--bright);

15
webroot/index.html
View File

@@ -15,14 +15,17 @@
</head>
<body id="main_body">
<!-- INFO: Loading screen -->
<div id="loading_screen" class="full_screen">
<div id="loading_screen" class="load_screen">
<div class="loader"></div>
</div>
<!-- INFO: Modal list -->
<div id="lang_modal" class="full_screen" style="display: none;">
<div id="lang_modal_close" class="close_icon" style="margin-top: 20px; margin-left: 20px;">
<img src="assets/close.svg">
<div id="lang_modal" class="full_screen" style="top: 100%;">
<div class="liste" style="margin-top: 20px; margin-left: 20px;">
<div style="margin-left: 20px;"></div>
<div id="lang_modal_close" class="close_icon icon_animation" style="margin-right: 20px; width: 40px; height: 40px;">
<img src="assets/close.svg">
</div>
</div>
<div style="padding-left: 25px;">
<h1 id="lang_modal_title">Choose your new language</h1>
@@ -36,10 +39,10 @@
<div class="header">
<div>ReZygisk</div>
<div style="display: flex; align-items: center;">
<div id="lang_switcher">
<div id="lang_switcher" class="icon_animation">
<img src="assets/lang.svg">
</div>
<div id="theme_switcher" style="margin-left: 10px;">
<div id="theme_switcher" class="icon_animation" style="margin-left: 10px;">
<img src="assets/dark.svg">
</div>
</div>

2
webroot/js/list/lang.js
View File

@@ -21,7 +21,7 @@ document.addEventListener('click', (event) => {
setNewLang(event.target.id)
target.style.display = 'none'
target.style.top = '100%'
localStorage.setItem('/cache/modal/language/state', 'closed')
localStorage.setItem('/system/language', event.target.id)
}, false)

4
webroot/js/modal/lang.js
View File

@@ -6,13 +6,13 @@ let sys_module_mode = localStorage.getItem('/cache/modal/language/state')
sys_module_mode = setData('closed')
button.addEventListener('click', () => {
target.style.display = 'block'
target.style.top = '0%'
sys_module_mode = setData('opened')
})
close_button.addEventListener('click', () => {
target.style.display = 'none'
target.style.top = '100%'
sys_module_mode = setData('closed')
})