New UI Styling Fixes (#426)

Resolve some issues with how the new UI renders.
2024-09-15 23:25:36 -07:00
parent c8140d7178
commit bfade006bd
4 changed files with 123 additions and 100 deletions
--- 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;
+    </script>
+</head>

-        // 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;
+<body>
+    <!-- Background Images -->
+    <div id="bgImages"></div>
+    <div id="bgImage_Opacity"></div>

-            head.appendChild(newScript);
-        }
+    <!-- Notifications -->
+    <div id="notifications_target"></div>

-        // 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";
+    <!-- Page Banner -->
+    <div id="banner_target"></div>

-            head.appendChild(newLink);
+    <!-- Page Content -->
+    <div id="content"></div>
+
+    <script type="text/javascript">
+        // start the application
+        let backgroundImageHandler = undefined;
+
+        async function loadScriptsAndStyles() {
+            // 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 LoadPageContent(page, targetDiv) {
@@ -83,66 +105,53 @@

            backgroundImageHandler = new BackgroundImageRotator();
        }
-    </script>
-</head>

-<body>
-    <!-- Background Images -->
-    <div id="bgImages"></div>
-    <div id="bgImage_Opacity"></div>
+        async function startApp() {
+            await loadScriptsAndStyles();

-    <!-- Notifications -->
-    <div id="notifications_target"></div>
+            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;

-    <!-- Page Banner -->
-    <div id="banner_target"></div>
+                default:
+                    // first run - load login page or redirect if user already logged in

-    <!-- Page Content -->
-    <div id="content"></div>
+                    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();

-    <script type="text/javascript">
-        // start the application
-        let backgroundImageHandler = undefined;
-        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
-                LoadPageContent('first', 'content');
-                break;
+                                // load page banner
+                                await LoadPageContent('banner', 'banner_target');

-            default:
-                // first run - load login page or redirect if user already logged in
+                                // load page content
+                                let pageSelection = getQueryString('page', 'string');

-                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();
-
-                            // load page banner
-                            LoadPageContent('banner', 'banner_target');
-
-                            // load page content
-                            let pageSelection = getQueryString('page', 'string');
-
-                            if (!pageSelection) {
-                                pageSelection = GetPreference("DefaultHomePage", 'home');
+                                if (!pageSelection) {
+                                    pageSelection = GetPreference("DefaultHomePage", 'home');
+                                }
+                                await LoadPageContent(pageSelection, 'content');
+                            } else {
+                                // user is not signed in - load login page
+                                await LoadPageContent('login');
                            }
-                            LoadPageContent(pageSelection, 'content');
-                        } else {
-                            // user is not signed in - load login page
-                            LoadPageContent('login');
-                        }
-                    })
-                    .catch((error) => {
-                        console.log(error);
-                        LoadPageContent('login');
-                    });
-                break;
+                        })
+                        .catch(async (error) => {
+                            console.log(error);
+                            await LoadPageContent('login');
+                        });
+                    break;
+            }
        }
+
+        window.document.addEventListener('DOMContentLoaded', startApp);
    </script>
 </body>
--- a/gaseous-server/wwwroot/pages/modals/useredit.html
+++ b/gaseous-server/wwwroot/pages/modals/useredit.html
@@ -3,7 +3,7 @@
        <div class="section" style="flex-grow:1;">
            <div class="section-header">General</div>
            <div class="section-body">
-                <table class="romtable">
+                <table class="romtable" cellspacing="0">
                    <tr class="romrow">
                        <th class="romcell">User Id</th>
                        <td id="user-id" class="romcell"></td>
--- 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: "";
--- 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);
 }