From 22f5eabe4945517ecf7e1b791af25d0b92fa4f8f Mon Sep 17 00:00:00 2001
From: Daniel Scalzi <d_scalzi@yahoo.com>
Date: Thu, 26 Apr 2018 03:49:45 -0400
Subject: [PATCH] Experimenting with the menu slide animation.
---
app/app.ejs | 3 +++
app/assets/css/launcher.css | 17 +++++++++++++++++
app/assets/js/scripts/landing.js | 23 +++++++++++++++++++++++
3 files changed, 43 insertions(+)
diff --git a/app/app.ejs b/app/app.ejs
index c9f95f92..28048478 100644
--- a/app/app.ejs
+++ b/app/app.ejs
@@ -13,6 +13,9 @@
#main {
height: calc(100% - 22px);
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
+ width: 100%;
+ position: absolute;
+ z-index: 10;
}
#main[overlay] {
filter: blur(3px) contrast(0.9) brightness(1.0);
diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index dda286b6..68139e2a 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -51,6 +51,8 @@ p {
/* Frame Bar */
#frameBar {
+ position: relative;
+ z-index: 100;
display: flex;
flex-direction: column;
background: rgba(1, 2, 1, 0.5);
@@ -890,10 +892,14 @@ p {
/* Main content container. */
#landingContainer {
height: 100%;
+ position: relative;
}
/* Upper content container. */
#landingContainer > #upper {
+ position: relative;
+ transition: 2s ease;
+ top: 0px;
height: 77%;
display: flex;
}
@@ -921,6 +927,9 @@ p {
background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
#landingContainer > #lower > #left {
+ position: relative;
+ transition: 2s ease;
+ top: 0px;
height: 100%;
width: 33%;
display: inline-flex;
@@ -934,16 +943,23 @@ p {
left: 50px;
}
#landingContainer > #lower > #center {
+ position: relative;
+ transition: 2s ease;
+ top: 0px;
height: 100%;
width: 34%;
display: inline-flex;
justify-content: center;
}
#landingContainer > #lower > #center #content {
+ transition: 2s ease;
position: relative;
top: 10px;
}
#landingContainer > #lower > #right {
+ position: relative;
+ transition: 2s ease;
+ top: 0px;
height: 100%;
width: 33%;
display: inline-flex;
@@ -1267,6 +1283,7 @@ p {
justify-content: center;
}
+/* Button which opens the server selection view. */
#server_selection_button {
background: none;
border: none;
diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js
index fe3f60e7..4c879fbc 100644
--- a/app/assets/js/scripts/landing.js
+++ b/app/assets/js/scripts/landing.js
@@ -101,6 +101,29 @@ server_selection_button.addEventListener('click', (e) => {
toggleOverlay(true, 'serverSelectContent')
})
+// Test menu transform.
+function slide_(up){
+ const lCUpper = document.querySelector('#landingContainer > #upper')
+ const lCLLeft = document.querySelector('#landingContainer > #lower > #left')
+ const lCLCenter = document.querySelector('#landingContainer > #lower > #center')
+ const lCLRight = document.querySelector('#landingContainer > #lower > #right')
+ const menuBtn = document.querySelector('#landingContainer > #lower > #center #content')
+
+ if(up){
+ lCUpper.style.top = '-200vh'
+ lCLLeft.style.top = '-200vh'
+ lCLCenter.style.top = '-200vh'
+ lCLRight.style.top = '-200vh'
+ menuBtn.style.top = '130vh'
+ } else {
+ lCUpper.style.top = '0px'
+ lCLLeft.style.top = '0px'
+ lCLCenter.style.top = '0px'
+ lCLRight.style.top = '0px'
+ menuBtn.style.top = '10px'
+ }
+}
+
// Update Mojang Status Color
const refreshMojangStatuses = async function(){
console.log('Refreshing Mojang Statuses..')