From bfade006bd256b6c12e29916ee552b2f9dc61e86 Mon Sep 17 00:00:00 2001 From: Michael Green <84688932+michael-j-green@users.noreply.github.com> Date: Sun, 15 Sep 2024 23:25:36 -0700 Subject: [PATCH] New UI Styling Fixes (#426) Resolve some issues with how the new UI renders. --- gaseous-server/wwwroot/index.html | 151 ++++++++++-------- .../wwwroot/pages/modals/useredit.html | 2 +- gaseous-server/wwwroot/styles/style.css | 44 +++-- gaseous-server/wwwroot/styles/stylevars.css | 26 ++- 4 files changed, 123 insertions(+), 100 deletions(-) diff --git a/gaseous-server/wwwroot/index.html b/gaseous-server/wwwroot/index.html index 08312b8..519932d 100644 --- a/gaseous-server/wwwroot/index.html +++ b/gaseous-server/wwwroot/index.html @@ -26,41 +26,63 @@ "/scripts/jquery.lazy.plugins.min.js", "/scripts/moment-with-locales.min.js", "/scripts/select2.min.js", + "/scripts/filterformating.js", + "/scripts/gamesformating.js", + "/scripts/main.js", "/scripts/modals.js", "/scripts/preferences.js", "/scripts/account.js", "/scripts/libraries.js", "/scripts/notifications.js", "/scripts/rominfo.js", - "/scripts/uploadrom.js", - "/scripts/filterformating.js", - "/scripts/gamesformating.js", - "/scripts/main.js" + "/scripts/uploadrom.js" ]; let head = document.getElementsByTagName('head')[0]; // placeholder for global userProfile variable var userProfile; + + - // update script links - for (let i = 0; i < scriptLinks.length; i++) { - let newScript = document.createElement('script'); - newScript.src = scriptLinks[i] + '?v=' + AppVersion; - newScript.type = "text/javascript"; - newScript.async = false; + + +
+
- head.appendChild(newScript); - } + +
- // update stylesheet links - for (let i = 0; i < styleSheets.length; i++) { - let newLink = document.createElement('link'); - newLink.rel = "stylesheet"; - newLink.href = styleSheets[i] + '?v=' + AppVersion; - newLink.type = "text/css"; + + - head.appendChild(newLink); + +
+ + - - - -
-
+ async function startApp() { + await loadScriptsAndStyles(); - -
+ console.log("Starting Gaseous Games"); + console.log("App Version: " + AppVersion); + console.log("First Run Status: " + FirstRunStatus); + switch (FirstRunStatus) { + case 0: + case "0": + // first run - load first run wizard + await LoadPageContent('first', 'content'); + break; - - + default: + // first run - load login page or redirect if user already logged in - -
+ await fetch('/api/v1.1/Account/Profile/Basic') + .then(async response => { + if (response.ok) { + // user is signed in - start setting up the application + console.log("User is logged in"); + userProfile = await response.json(); - \ No newline at end of file diff --git a/gaseous-server/wwwroot/pages/modals/useredit.html b/gaseous-server/wwwroot/pages/modals/useredit.html index 5d3c7e8..aec0064 100644 --- a/gaseous-server/wwwroot/pages/modals/useredit.html +++ b/gaseous-server/wwwroot/pages/modals/useredit.html @@ -3,7 +3,7 @@
General
- +
diff --git a/gaseous-server/wwwroot/styles/style.css b/gaseous-server/wwwroot/styles/style.css index c33a2d3..4243ee9 100644 --- a/gaseous-server/wwwroot/styles/style.css +++ b/gaseous-server/wwwroot/styles/style.css @@ -134,7 +134,8 @@ h3 { top: 50%; left: 50%; margin-right: -50%; - transform: translate(-50%, -50%); + /* transform: translate(-50%, -50%); */ + transform: translateX(-50%) translateY(calc(-50% - .5px)); min-width: 700px; max-width: 1000px; width: 60%; @@ -185,8 +186,8 @@ h3 { .modal-window-tabs { background-color: var(--modal-tabs-background-color); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); + /* backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); */ display: block; flex-grow: 0; flex-shrink: 1; @@ -237,8 +238,8 @@ h3 { text-align: top; overflow-y: auto; overflow-x: hidden; - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); + /* backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); */ } .modal-window-header { @@ -2365,18 +2366,17 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no flex-direction: row; flex-wrap: nowrap; gap: 1px; - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); + } .loginwindow-logospace { - background-color: var(--modal-tabs-background-color); + background-color: var(--login-logospace-background); width: 315px; position: relative; } .loginwindow_loginspace { - background-color: var(--modal-window-background-color); + background-color: var(--login-loginspace-background); padding: 20px; flex-grow: 1; } @@ -2425,7 +2425,7 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no font-size: 18pt; vertical-align: top; /*color: #edeffa;*/ - color: white; + color: var(--login-logospace-label); margin-top: 8px; } @@ -2451,9 +2451,9 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no .dropdown-content { display: none; position: absolute; - background-color: var(--modal-background-color); + background-color: var(--dropdown-background); border-radius: var(--standard-radius); - border-color: var(--modal-border-color); + border-color: var(--dropdown-border); border-width: 1px; border-style: solid; overflow: hidden; @@ -2465,15 +2465,13 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no filter: drop-shadow(5px 5px 10px #000); -webkit-filter: drop-shadow(5px 5px 10px #000); padding: 3px; - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); cursor: default; } /* Links inside the dropdown */ .dropdown-content a, .dropdown-content span { - color: white; + color: var(--dropdown-menu-text-color); padding: 12px 16px; text-decoration: none; display: block; @@ -2488,7 +2486,7 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no /* Change color of dropdown links on hover */ .dropdown-content a:hover { - background-color: var(--modal-border-color); + background-color: var(--dropdown-border); } /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ @@ -2658,7 +2656,7 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no border-radius: var(--standard-radius); border-style: solid; border-width: 1px; - border-color: rgba(173, 216, 230, 0.3); + border-color: var(--profile-card-border); overflow: hidden; position: relative; } @@ -2681,7 +2679,7 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no aspect-ratio: 4.17/1; background-size: cover; background-position: center; - background-color: rgb(0, 0, 130); + background-color: var(--profile-card-background-image); } .profile-card-body { @@ -2690,15 +2688,13 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no padding-left: 10px; padding-right: 10px; padding-bottom: 20px; - background-color: rgba(173, 216, 230, 0.3); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); + background-color: var(--profile-card-body-background); } .profile-card-display-name { font-weight: bold; font-size: 16px; - color: white; + color: var(--profile-card-display-name-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -2707,7 +2703,7 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no .profile-card-quip { margin-top: 3px; font-style: italic; - color: white; + color: var(--profile-card-quip-text-color); } .password-rules { @@ -2806,8 +2802,6 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no display: block; background: var(--section-body-background); background: linear-gradient(0deg, var(--section-body-background-solid) 25%, rgba(255, 255, 255, 0) 100%); - backdrop-filter: blur(8px); - --webkit-backdrop-filter: blur(8px); padding: 5px; vertical-align: bottom; content: ""; diff --git a/gaseous-server/wwwroot/styles/stylevars.css b/gaseous-server/wwwroot/styles/stylevars.css index d8e8449..cba49fe 100644 --- a/gaseous-server/wwwroot/styles/stylevars.css +++ b/gaseous-server/wwwroot/styles/stylevars.css @@ -71,7 +71,7 @@ --button-blue-font-colour-disabled: var(--button-blue-font-colour); /* select2 */ - --select2-background: var(--input-background); + --select2-background: rgb(43, 43, 43); --select2-background-disabled: var(--input-background-disabled); --select2-border: var(--input-border); --select2-border-hover: var(--input-border-hover); @@ -106,8 +106,28 @@ /* ------------------------------------------- */ --modal-background-color: rgba(0, 0, 0, 0.4); --modal-border-color: rgba(255, 255, 255, 0.414); - --modal-tabs-background-color: rgba(255, 255, 255, 0.2); - --modal-window-background-color: rgba(70, 70, 70, 0.6); + --modal-tabs-background-color: rgb(100, 100, 100); + --modal-window-background-color: rgb(79, 79, 79); --modal-window-header-text-color: rgb(255, 255, 255); --modal-window-header-background-color: rgb(56, 56, 56); + + /* dropdown */ + /* ------------------------------------------- */ + --dropdown-background: rgb(0, 0, 0); + --dropdown-border: var(--modal-border-color); + --dropdown-menu-text-color: rgb(255, 255, 255); + + /* profile card */ + /* ------------------------------------------- */ + --profile-card-border: rgba(173, 216, 230, 0.3); + --profile-card-background-image: rgb(0, 0, 130); + --profile-card-body-background: rgb(133, 156, 163); + --profile-card-display-name-text-color: rgb(255, 255, 255); + --profile-card-quip-text-color: var(--profile-card-display-name-text-color); + + /* login */ + /* ------------------------------------------- */ + --login-logospace-background: rgba(100, 100, 100, 0.7); + --login-loginspace-background: rgba(79, 79, 79, 0.7); + --login-logospace-label: rgb(255, 255, 255); } \ No newline at end of file
User Id