diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index e67984e4..e95bcb29 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -1228,6 +1228,59 @@ body, button { font-size: 12px; } +/* Selected server content container */ +.settingsSelServContainer { + background: rgba(0, 0, 0, 0.25); + width: 75%; + border-radius: 3px; + display: flex; + justify-content: space-between; + margin: 15px 0px; +} + +/* Div which will be populated with the selected server's information. */ +.settingsSelServContent { + display: flex; + align-items: center; + justify-content: flex-start; + padding: 5px 0px; +} + +/* Wrapper container for the switch server button. */ +.settingsSwitchServerContainer { + display: flex; + align-items: center; + padding: 15px; +} + +/* Button to switch server configurations on the mods tab. */ +.settingsSwitchServerButton { + opacity: 0; + border: 1px solid rgb(255, 255, 255); + color: rgb(255, 255, 255); + background: none; + font-size: 12px; + border-radius: 3px; + font-family: 'Avenir Medium'; + transition: 0.25s ease; + cursor: pointer; + outline: none; +} +.settingsSwitchServerButton:hover, +.settingsSwitchServerButton:focus { + box-shadow: 0px 0px 20px rgb(255, 255, 255); + background: rgba(255, 255, 255, 0.25); +} +.settingsSwitchServerButton:active { + box-shadow: 0px 0px 20px rgb(187, 187, 187); + background: rgba(187, 187, 187, 0.25); + border: 1px solid rgb(187, 187, 187); + color: rgb(187, 187, 187); +} +.settingsSelServContainer:hover .settingsSwitchServerButton { + opacity: 1; +} + /* Remove spin button from number inputs. */ #settingsContainer input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; @@ -1638,59 +1691,6 @@ input:checked + .toggleSwitchSlider:before { * Settings View (Mods Tab) * * */ -/* Selected server content container */ -#settingsSelServContainer { - background: rgba(0, 0, 0, 0.25); - width: 75%; - border-radius: 3px; - display: flex; - justify-content: space-between; - margin: 15px 0px; -} - -/* Div which will be populated with the selected server's information. */ -#settingsSelServContent { - display: flex; - align-items: center; - justify-content: flex-start; - padding: 5px 0px; -} - -/* Wrapper container for the switch server button. */ -#settingsSwitchServerContainer { - display: flex; - align-items: center; - padding: 15px; -} - -/* Button to switch server configurations on the mods tab. */ -#settingsSwitchServerButton { - opacity: 0; - border: 1px solid rgb(255, 255, 255); - color: rgb(255, 255, 255); - background: none; - font-size: 12px; - border-radius: 3px; - font-family: 'Avenir Medium'; - transition: 0.25s ease; - cursor: pointer; - outline: none; -} -#settingsSwitchServerButton:hover, -#settingsSwitchServerButton:focus { - box-shadow: 0px 0px 20px rgb(255, 255, 255); - background: rgba(255, 255, 255, 0.25); -} -#settingsSwitchServerButton:active { - box-shadow: 0px 0px 20px rgb(187, 187, 187); - background: rgba(187, 187, 187, 0.25); - border: 1px solid rgb(187, 187, 187); - color: rgb(187, 187, 187); -} -#settingsSelServContainer:hover #settingsSwitchServerButton { - opacity: 1; -} - /* Main content container for the mod elements. */ #settingsModsContainer { width: 75%; diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js index deb7bcf2..19b5f6fd 100644 --- a/app/assets/js/scripts/landing.js +++ b/app/assets/js/scripts/landing.js @@ -146,7 +146,7 @@ function updateSelectedServer(serv){ ConfigManager.save() server_selection_button.innerHTML = '\u2022 ' + (serv != null ? serv.getName() : 'No Server Selected') if(getCurrentView() === VIEWS.settings){ - animateModsTabRefresh() + animateSettingsTabRefresh() } setLaunchEnabled(serv != null) } diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js index e86de97b..2181dda4 100644 --- a/app/assets/js/scripts/settings.js +++ b/app/assets/js/scripts/settings.js @@ -1056,33 +1056,37 @@ function bindShaderpackButton() { function loadSelectedServerOnModsTab(){ const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer()) - document.getElementById('settingsSelServContent').innerHTML = ` - -
- ${serv.getName()} - ${serv.getDescription()} -
-
${serv.getMinecraftVersion()}
-
${serv.getVersion()}
- ${serv.isMainServer() ? `
- - - - - - - - Main Server -
` : ''} + for(const el of document.getElementsByClassName('settingsSelServContent')) { + el.innerHTML = ` + +
+ ${serv.getName()} + ${serv.getDescription()} +
+
${serv.getMinecraftVersion()}
+
${serv.getVersion()}
+ ${serv.isMainServer() ? `
+ + + + + + + + Main Server +
` : ''} +
-
- ` + ` + } } // Bind functionality to the server switch button. -document.getElementById('settingsSwitchServerButton').addEventListener('click', (e) => { - e.target.blur() - toggleServerSelection(true) +Array.from(document.getElementsByClassName('settingsSwitchServerButton')).forEach(el => { + el.addEventListener('click', (e) => { + e.target.blur() + toggleServerSelection(true) + }) }) /** @@ -1095,13 +1099,13 @@ function saveAllModConfigurations(){ } /** - * Function to refresh the mods tab whenever the selected + * Function to refresh the current tab whenever the selected * server is changed. */ -function animateModsTabRefresh(){ - $('#settingsTabMods').fadeOut(500, () => { - prepareModsTab() - $('#settingsTabMods').fadeIn(500) +function animateSettingsTabRefresh(){ + $(`#${selectedSettingsTab}`).fadeOut(500, () => { + prepareSettings() + $(`#${selectedSettingsTab}`).fadeIn(500) }) } diff --git a/app/settings.ejs b/app/settings.ejs index 65a1796d..39dbf45d 100644 --- a/app/settings.ejs +++ b/app/settings.ejs @@ -122,13 +122,13 @@ Mod Settings Enable or disable mods.
-
-
+
+
-
-
- +
+
+
@@ -172,6 +172,16 @@ Java Settings Manage the Java configuration (advanced).
+
+
+ +
+
+
+ +
+
+
Memory