Enhanced the settings UI structure.

The left side of the settings UI now has a more comprehensive layout.
Settings tabs now scroll all the way to the frame bar. When the content is scrolled out of view, a drop shadow is displayed. This removes the awkward feel of content scrolling into nothing.
This commit is contained in:
Daniel Scalzi 2018-06-20 07:38:53 -04:00
parent 5a16416db5
commit e2e48f6444
No known key found for this signature in database
GPG Key ID: 5CA2F145B63535F9
3 changed files with 69 additions and 21 deletions

View File

@ -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;

View File

@ -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<navItems.length; i++){
if(navItems[i].hasAttribute('selected')){
navItems[i].removeAttribute('selected')
if(val.hasAttribute('rSc')){
val.onclick = (e) => {
if(val.hasAttribute('selected')){
return
}
const navItems = document.getElementsByClassName('settingsNavItem')
for(let i=0; i<navItems.length; i++){
if(navItems[i].hasAttribute('selected')){
navItems[i].removeAttribute('selected')
}
}
val.setAttribute('selected', '')
let prevTab = selectedTab
selectedTab = val.getAttribute('rSc')
document.getElementById(prevTab).onscroll = null
document.getElementById(selectedTab).onscroll = settingsTabScrollListener
$(`#${prevTab}`).fadeOut(250, () => {
$(`#${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)
})
}
})
}

View File

@ -13,6 +13,7 @@
<button class="settingsNavItem" rSc="settingsTabLauncher">Launcher</button>
<div class="settingsNavSpacer"></div>
<button class="settingsNavItem" rSc="settingsTabAbout">About</button>
<button class="settingsNavItem">Updates</button>
<div id="settingsNavContentBottom">
<div class="settingsNavDivider"></div>
<button id="settingsNavDone">Done</button>