sendnrw/gaseous-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New UI Styling Fixes (#426)

Browse Source 
Resolve some issues with how the new UI renders.
This commit is contained in:
Michael Green
2024-09-15 23:25:36 -07:00
committed by GitHub
parent c8140d7178
commit bfade006bd
4 changed files with 123 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
gaseous-server/wwwroot/index.html
View File

@@ -26,41 +26,63 @@
"/scripts/jquery.lazy.plugins.min.js", "/scripts/jquery.lazy.plugins.min.js",
"/scripts/moment-with-locales.min.js", "/scripts/moment-with-locales.min.js",
"/scripts/select2.min.js", "/scripts/select2.min.js",
"/scripts/filterformating.js",
"/scripts/gamesformating.js",
"/scripts/main.js",
"/scripts/modals.js", "/scripts/modals.js",
"/scripts/preferences.js", "/scripts/preferences.js",
"/scripts/account.js", "/scripts/account.js",
"/scripts/libraries.js", "/scripts/libraries.js",
"/scripts/notifications.js", "/scripts/notifications.js",
"/scripts/rominfo.js", "/scripts/rominfo.js",
"/scripts/uploadrom.js", "/scripts/uploadrom.js"
"/scripts/filterformating.js",
"/scripts/gamesformating.js",
"/scripts/main.js"
]; ];
let head = document.getElementsByTagName('head')[0]; let head = document.getElementsByTagName('head')[0];
// placeholder for global userProfile variable // placeholder for global userProfile variable
var userProfile; var userProfile;
</script>
</head>
// update script links <body>
for (let i = 0; i < scriptLinks.length; i++) { <!-- Background Images -->
let newScript = document.createElement('script'); <div id="bgImages"></div>
newScript.src = scriptLinks[i] + '?v=' + AppVersion; <div id="bgImage_Opacity"></div>
newScript.type = "text/javascript";
newScript.async = false;
head.appendChild(newScript); <!-- Notifications -->
} <div id="notifications_target"></div>
// update stylesheet links <!-- Page Banner -->
for (let i = 0; i < styleSheets.length; i++) { <div id="banner_target"></div>
let newLink = document.createElement('link');
newLink.rel = "stylesheet";
newLink.href = styleSheets[i] + '?v=' + AppVersion;
newLink.type = "text/css";
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) { async function LoadPageContent(page, targetDiv) {
@@ -83,66 +105,53 @@
backgroundImageHandler = new BackgroundImageRotator(); backgroundImageHandler = new BackgroundImageRotator();
} }
</script>
</head>
<body> async function startApp() {
<!-- Background Images --> await loadScriptsAndStyles();
<div id="bgImages"></div>
<div id="bgImage_Opacity"></div>
<!-- Notifications --> console.log("Starting Gaseous Games");
<div id="notifications_target"></div> 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 --> default:
<div id="banner_target"></div> // first run - load login page or redirect if user already logged in
<!-- Page Content --> await fetch('/api/v1.1/Account/Profile/Basic')
<div id="content"></div> .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"> // load page banner
// start the application await LoadPageContent('banner', 'banner_target');
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;
default: // load page content
// first run - load login page or redirect if user already logged in let pageSelection = getQueryString('page', 'string');
fetch('/api/v1.1/Account/Profile/Basic') if (!pageSelection) {
.then(async response => { pageSelection = GetPreference("DefaultHomePage", 'home');
if (response.ok) { }
// user is signed in - start setting up the application await LoadPageContent(pageSelection, 'content');
console.log("User is logged in"); } else {
userProfile = await response.json(); // user is not signed in - load login page
await LoadPageContent('login');
// load page banner
LoadPageContent('banner', 'banner_target');
// load page content
let pageSelection = getQueryString('page', 'string');
if (!pageSelection) {
pageSelection = GetPreference("DefaultHomePage", 'home');
} }
LoadPageContent(pageSelection, 'content'); })
} else { .catch(async (error) => {
// user is not signed in - load login page console.log(error);
LoadPageContent('login'); await LoadPageContent('login');
} });
}) break;
.catch((error) => { }
console.log(error);
LoadPageContent('login');
});
break;
} }
window.document.addEventListener('DOMContentLoaded', startApp);
</script> </script>
</body> </body>

2
gaseous-server/wwwroot/pages/modals/useredit.html
View File

@@ -3,7 +3,7 @@
<div class="section" style="flex-grow:1;"> <div class="section" style="flex-grow:1;">
<div class="section-header">General</div> <div class="section-header">General</div>
<div class="section-body"> <div class="section-body">
<table class="romtable"> <table class="romtable" cellspacing="0">
<tr class="romrow"> <tr class="romrow">
<th class="romcell">User Id</th> <th class="romcell">User Id</th>
<td id="user-id" class="romcell"></td> <td id="user-id" class="romcell"></td>

44
gaseous-server/wwwroot/styles/style.css
View File

@@ -134,7 +134,8 @@ h3 {
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-right: -50%; margin-right: -50%;
transform: translate(-50%, -50%); /* transform: translate(-50%, -50%); */
transform: translateX(-50%) translateY(calc(-50% - .5px));
min-width: 700px; min-width: 700px;
max-width: 1000px; max-width: 1000px;
width: 60%; width: 60%;
@@ -185,8 +186,8 @@ h3 {
.modal-window-tabs { .modal-window-tabs {
background-color: var(--modal-tabs-background-color); background-color: var(--modal-tabs-background-color);
backdrop-filter: blur(16px); /* backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); */
display: block; display: block;
flex-grow: 0; flex-grow: 0;
flex-shrink: 1; flex-shrink: 1;
@@ -237,8 +238,8 @@ h3 {
text-align: top; text-align: top;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
backdrop-filter: blur(16px); /* backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); */
} }
.modal-window-header { .modal-window-header {
@@ -2365,18 +2366,17 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 1px; gap: 1px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
} }
.loginwindow-logospace { .loginwindow-logospace {
background-color: var(--modal-tabs-background-color); background-color: var(--login-logospace-background);
width: 315px; width: 315px;
position: relative; position: relative;
} }
.loginwindow_loginspace { .loginwindow_loginspace {
background-color: var(--modal-window-background-color); background-color: var(--login-loginspace-background);
padding: 20px; padding: 20px;
flex-grow: 1; flex-grow: 1;
} }
@@ -2425,7 +2425,7 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no
font-size: 18pt; font-size: 18pt;
vertical-align: top; vertical-align: top;
/*color: #edeffa;*/ /*color: #edeffa;*/
color: white; color: var(--login-logospace-label);
margin-top: 8px; margin-top: 8px;
} }
@@ -2451,9 +2451,9 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no
.dropdown-content { .dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
background-color: var(--modal-background-color); background-color: var(--dropdown-background);
border-radius: var(--standard-radius); border-radius: var(--standard-radius);
border-color: var(--modal-border-color); border-color: var(--dropdown-border);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
overflow: hidden; overflow: hidden;
@@ -2465,15 +2465,13 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no
filter: drop-shadow(5px 5px 10px #000); filter: drop-shadow(5px 5px 10px #000);
-webkit-filter: drop-shadow(5px 5px 10px #000); -webkit-filter: drop-shadow(5px 5px 10px #000);
padding: 3px; padding: 3px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
cursor: default; cursor: default;
} }
/* Links inside the dropdown */ /* Links inside the dropdown */
.dropdown-content a, .dropdown-content a,
.dropdown-content span { .dropdown-content span {
color: white; color: var(--dropdown-menu-text-color);
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
@@ -2488,7 +2486,7 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no
/* Change color of dropdown links on hover */ /* Change color of dropdown links on hover */
.dropdown-content a: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) */ /* 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-radius: var(--standard-radius);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-color: rgba(173, 216, 230, 0.3); border-color: var(--profile-card-border);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
@@ -2681,7 +2679,7 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no
aspect-ratio: 4.17/1; aspect-ratio: 4.17/1;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-color: rgb(0, 0, 130); background-color: var(--profile-card-background-image);
} }
.profile-card-body { .profile-card-body {
@@ -2690,15 +2688,13 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
padding-bottom: 20px; padding-bottom: 20px;
background-color: rgba(173, 216, 230, 0.3); background-color: var(--profile-card-body-background);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
} }
.profile-card-display-name { .profile-card-display-name {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
color: white; color: var(--profile-card-display-name-text-color);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -2707,7 +2703,7 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no
.profile-card-quip { .profile-card-quip {
margin-top: 3px; margin-top: 3px;
font-style: italic; font-style: italic;
color: white; color: var(--profile-card-quip-text-color);
} }
.password-rules { .password-rules {
@@ -2806,8 +2802,6 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no
display: block; display: block;
background: var(--section-body-background); background: var(--section-body-background);
background: linear-gradient(0deg, var(--section-body-background-solid) 25%, rgba(255, 255, 255, 0) 100%); 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; padding: 5px;
vertical-align: bottom; vertical-align: bottom;
content: ""; content: "";

26
gaseous-server/wwwroot/styles/stylevars.css
View File

@@ -71,7 +71,7 @@
--button-blue-font-colour-disabled: var(--button-blue-font-colour); --button-blue-font-colour-disabled: var(--button-blue-font-colour);
/* select2 */ /* select2 */
--select2-background: var(--input-background); --select2-background: rgb(43, 43, 43);
--select2-background-disabled: var(--input-background-disabled); --select2-background-disabled: var(--input-background-disabled);
--select2-border: var(--input-border); --select2-border: var(--input-border);
--select2-border-hover: var(--input-border-hover); --select2-border-hover: var(--input-border-hover);
@@ -106,8 +106,28 @@
/* ------------------------------------------- */ /* ------------------------------------------- */
--modal-background-color: rgba(0, 0, 0, 0.4); --modal-background-color: rgba(0, 0, 0, 0.4);
--modal-border-color: rgba(255, 255, 255, 0.414); --modal-border-color: rgba(255, 255, 255, 0.414);
--modal-tabs-background-color: rgba(255, 255, 255, 0.2); --modal-tabs-background-color: rgb(100, 100, 100);
--modal-window-background-color: rgba(70, 70, 70, 0.6); --modal-window-background-color: rgb(79, 79, 79);
--modal-window-header-text-color: rgb(255, 255, 255); --modal-window-header-text-color: rgb(255, 255, 255);
--modal-window-header-background-color: rgb(56, 56, 56); --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);
} }