diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 63b070c..caf1178 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -886,22 +886,38 @@ body, button { background: rgba(0, 0, 0, 0.50); } +/* Drop shadow displayed when content is scrolled out of view. */ +#settingsContainer:before { + content: ''; + background: linear-gradient(rgba(0, 0, 0, 0.25), transparent); + width: 100%; + height: 5px; + position: absolute; + opacity: 0; + transition: opacity 0.25s ease; +} +#settingsContainer[scrolled]:before { + opacity: 1; +} + /* Left hand side of the settings UI, for navigation. */ #settingsContainerLeft { + padding-top: 4%; height: 100%; width: 25%; - padding: 5% 0px; box-sizing: border-box; } /* Settings navigation container. */ #settingsNavContainer { + height: 100%; display: flex; flex-direction: column; } /* Navigation header styles. */ #settingsNavHeader { + height: 15%; display: flex; justify-content: center; } @@ -911,15 +927,15 @@ body, button { /* Navigation items outer container. */ #settingsNavItemsContainer { - height: 100%; + height: 85%; display: flex; justify-content: center; - padding-top: 25%; box-sizing: border-box; } /* Navigation items content container. */ #settingsNavItemsContent { + height: 100%; display: flex; flex-direction: column; position: relative; @@ -956,14 +972,14 @@ body, button { /* Content container for the done button. */ #settingsNavContentBottom { position: absolute; - bottom: 20%; + top: 65%; } /* Settings navigational divider. */ .settingsNavDivider { width: 75%; - height: 0.5px; - background: rgba(255, 255, 255, 0.75); + height: 1px; + background: rgba(126, 126, 126, 0.57); margin-left: auto; margin-bottom: 25px; } @@ -997,7 +1013,6 @@ body, button { #settingsContainerRight { height: 100%; width: 75%; - padding-top: 5%; box-sizing: border-box; } @@ -1018,6 +1033,11 @@ body, button { box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50); } +/* Add spacing to the top of each settings tab. */ +.settingsTab > *:first-child { + margin-top: 5%; +} + /* Tab header shared styles. */ .settingsTabHeader { display: flex; diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js index 18f5a77..6e20962 100644 --- a/app/assets/js/scripts/settings.js +++ b/app/assets/js/scripts/settings.js @@ -142,27 +142,54 @@ function saveSettingsValues(){ let selectedTab = 'settingsTabAccount' +/** + * Modify the settings container UI when the scroll threshold reaches + * a certain poin. + * + * @param {UIEvent} e The scroll event. + */ +function settingsTabScrollListener(e){ + if(e.target.scrollTop > Number.parseFloat(getComputedStyle(e.target.firstElementChild).marginTop)){ + document.getElementById('settingsContainer').setAttribute('scrolled', '') + } else { + document.getElementById('settingsContainer').removeAttribute('scrolled') + } +} + /** * Bind functionality for the settings navigation items. */ function setupSettingsTabs(){ Array.from(document.getElementsByClassName('settingsNavItem')).map((val) => { - val.onclick = (e) => { - if(val.hasAttribute('selected')){ - return - } - const navItems = document.getElementsByClassName('settingsNavItem') - for(let i=0; i { + if(val.hasAttribute('selected')){ + return } + const navItems = document.getElementsByClassName('settingsNavItem') + for(let i=0; i { + $(`#${selectedTab}`).fadeIn({ + duration: 250, + start: () => { + settingsTabScrollListener({ + target: document.getElementById(selectedTab) + }) + } + }) + }) } - val.setAttribute('selected', '') - let prevTab = selectedTab - selectedTab = val.getAttribute('rSc') - $(`#${prevTab}`).fadeOut(250, () => { - $(`#${selectedTab}`).fadeIn(250) - }) } }) } diff --git a/app/settings.ejs b/app/settings.ejs index 561d952..9a59202 100644 --- a/app/settings.ejs +++ b/app/settings.ejs @@ -13,6 +13,7 @@
+