From eb9c1ce1a4dada7a3a8aaa450ec07438e4cb0ebc Mon Sep 17 00:00:00 2001 From: Michael Green <84688932+michael-j-green@users.noreply.github.com> Date: Tue, 2 Jan 2024 00:33:56 +1100 Subject: [PATCH] Improve UX (#244) * Removed insta-search and added a search button - closes #203 * Pagination is constrained to 5 pages on either side of the current page (10 page numbers displayed in total) - closes #223 * Reviewed all dialogs and made behaviour consistent - closes #225 --- gaseous-server/Classes/Roms.cs | 13 +- .../Controllers/V1.0/GamesController.cs | 7 +- gaseous-server/wwwroot/pages/EmulatorJS.html | 3 +- .../wwwroot/pages/dialogs/collectionedit.html | 2 +- .../pages/dialogs/platformmapedit.html | 6 +- .../wwwroot/pages/dialogs/userprofile.html | 56 +++-- gaseous-server/wwwroot/pages/emulator.html | 2 +- gaseous-server/wwwroot/pages/game.html | 125 ++++++---- gaseous-server/wwwroot/pages/home.html | 12 +- .../wwwroot/scripts/filterformating.js | 219 ++++++++++++------ .../wwwroot/scripts/gamesformating.js | 6 +- gaseous-server/wwwroot/scripts/main.js | 19 ++ gaseous-server/wwwroot/styles/style.css | 121 +++++++++- 13 files changed, 440 insertions(+), 151 deletions(-) diff --git a/gaseous-server/Classes/Roms.cs b/gaseous-server/Classes/Roms.cs index 39cfc7d..40e1c4c 100644 --- a/gaseous-server/Classes/Roms.cs +++ b/gaseous-server/Classes/Roms.cs @@ -15,7 +15,7 @@ namespace gaseous_server.Classes {} } - public static GameRomObject GetRoms(long GameId, long PlatformId = -1, int pageNumber = 0, int pageSize = 0) + public static GameRomObject GetRoms(long GameId, long PlatformId = -1, string NameSearch = "", int pageNumber = 0, int pageSize = 0) { GameRomObject GameRoms = new GameRomObject(); @@ -24,10 +24,17 @@ namespace gaseous_server.Classes Dictionary dbDict = new Dictionary(); dbDict.Add("id", GameId); + string NameSearchWhere = ""; + if (NameSearch.Length > 0) + { + NameSearchWhere = " AND Games_Roms.`Name` LIKE @namesearch"; + dbDict.Add("namesearch", '%' + NameSearch + '%'); + } + if (PlatformId == -1) { - sql = "SELECT Games_Roms.*, Platform.`Name` AS platformname FROM Games_Roms LEFT JOIN Platform ON Games_Roms.PlatformId = Platform.Id WHERE Games_Roms.GameId = @id ORDER BY Platform.`Name`, Games_Roms.`Name`"; + sql = "SELECT Games_Roms.*, Platform.`Name` AS platformname FROM Games_Roms LEFT JOIN Platform ON Games_Roms.PlatformId = Platform.Id WHERE Games_Roms.GameId = @id" + NameSearchWhere + " ORDER BY Platform.`Name`, Games_Roms.`Name` LIMIT 1000;"; } else { - sql = "SELECT Games_Roms.*, Platform.`Name` AS platformname FROM Games_Roms LEFT JOIN Platform ON Games_Roms.PlatformId = Platform.Id WHERE Games_Roms.GameId = @id AND Games_Roms.PlatformId = @platformid ORDER BY Platform.`Name`, Games_Roms.`Name`"; + sql = "SELECT Games_Roms.*, Platform.`Name` AS platformname FROM Games_Roms LEFT JOIN Platform ON Games_Roms.PlatformId = Platform.Id WHERE Games_Roms.GameId = @id AND Games_Roms.PlatformId = @platformid" + NameSearchWhere + " ORDER BY Platform.`Name`, Games_Roms.`Name` LIMIT 1000;"; dbDict.Add("platformid", PlatformId); } DataTable romDT = db.ExecuteCMD(sql, dbDict); diff --git a/gaseous-server/Controllers/V1.0/GamesController.cs b/gaseous-server/Controllers/V1.0/GamesController.cs index afe433d..678f37d 100644 --- a/gaseous-server/Controllers/V1.0/GamesController.cs +++ b/gaseous-server/Controllers/V1.0/GamesController.cs @@ -629,7 +629,6 @@ namespace gaseous_server.Controllers [Route("{GameId}/cover/image/{size}")] [ProducesResponseType(typeof(FileStreamResult), StatusCodes.Status200OK)] [ProducesResponseType(StatusCodes.Status404NotFound)] - [ResponseCache(CacheProfileName = "None")] public ActionResult GameCoverImage(long GameId, Communications.IGDBAPI_ImageSize size) { try @@ -661,7 +660,7 @@ namespace gaseous_server.Controllers }; Response.Headers.Add("Content-Disposition", cd.ToString()); - //Response.Headers.Add("Cache-Control", "public, max-age=604800"); + Response.Headers.Add("Cache-Control", "public, max-age=604800"); return File(filedata, contentType); } @@ -891,13 +890,13 @@ namespace gaseous_server.Controllers [ProducesResponseType(typeof(Classes.Roms.GameRomObject), StatusCodes.Status200OK)] [ProducesResponseType(StatusCodes.Status404NotFound)] //[ResponseCache(CacheProfileName = "5Minute")] - public ActionResult GameRom(long GameId, int pageNumber = 0, int pageSize = 0, long PlatformId = -1) + public ActionResult GameRom(long GameId, int pageNumber = 0, int pageSize = 0, long PlatformId = -1, string NameSearch = "") { try { Game gameObject = Classes.Metadata.Games.GetGame(GameId, false, false, false); - return Ok(Classes.Roms.GetRoms(GameId, PlatformId, pageNumber, pageSize)); + return Ok(Classes.Roms.GetRoms(GameId, PlatformId, NameSearch, pageNumber, pageSize)); } catch { diff --git a/gaseous-server/wwwroot/pages/EmulatorJS.html b/gaseous-server/wwwroot/pages/EmulatorJS.html index 2f60ae5..64adf78 100644 --- a/gaseous-server/wwwroot/pages/EmulatorJS.html +++ b/gaseous-server/wwwroot/pages/EmulatorJS.html @@ -1,4 +1,5 @@ -
+ +
diff --git a/gaseous-server/wwwroot/pages/dialogs/collectionedit.html b/gaseous-server/wwwroot/pages/dialogs/collectionedit.html index b414390..dc1ac18 100644 --- a/gaseous-server/wwwroot/pages/dialogs/collectionedit.html +++ b/gaseous-server/wwwroot/pages/dialogs/collectionedit.html @@ -579,7 +579,7 @@ var gameImage = document.createElement('img'); gameImage.className = 'game_tile_image game_tile_image_small'; if (gameItem.cover) { - gameImage.src = '/api/v1.1/Games/' + gameItem.id + '/cover/image'; + gameImage.src = '/api/v1.1/Games/' + gameItem.id + '/cover/image/cover_small'; } else { gameImage.src = '/images/unknowngame.png'; gameImage.className = 'game_tile_image game_tile_image_small unknown'; diff --git a/gaseous-server/wwwroot/pages/dialogs/platformmapedit.html b/gaseous-server/wwwroot/pages/dialogs/platformmapedit.html index 770614c..14d1f64 100644 --- a/gaseous-server/wwwroot/pages/dialogs/platformmapedit.html +++ b/gaseous-server/wwwroot/pages/dialogs/platformmapedit.html @@ -31,7 +31,7 @@ - Note: Standard directory naming uses the IGDB slug for the platform is not editable. + Note: Standard directory naming uses the IGDB slug for the platform and is not editable. @@ -58,7 +58,7 @@

Engine

- @@ -68,7 +68,7 @@

Core

- diff --git a/gaseous-server/wwwroot/pages/dialogs/userprofile.html b/gaseous-server/wwwroot/pages/dialogs/userprofile.html index bad8d34..b29b104 100644 --- a/gaseous-server/wwwroot/pages/dialogs/userprofile.html +++ b/gaseous-server/wwwroot/pages/dialogs/userprofile.html @@ -18,7 +18,7 @@ - @@ -34,17 +34,17 @@ - + - + - + @@ -71,6 +71,11 @@ + + + + +
-
+
\ No newline at end of file diff --git a/gaseous-server/wwwroot/scripts/filterformating.js b/gaseous-server/wwwroot/scripts/filterformating.js index 38155ca..9adeb2b 100644 --- a/gaseous-server/wwwroot/scripts/filterformating.js +++ b/gaseous-server/wwwroot/scripts/filterformating.js @@ -1,4 +1,6 @@ -function formatFilterPanel(targetElement, result) { +var existingSearchModel; + +function formatFilterPanel(targetElement, scrollerElement, result) { var panel = document.createElement('div'); panel.id = 'filter_panel_box'; @@ -14,7 +16,6 @@ containerPanelSearchField.id = 'filter_panel_search'; containerPanelSearchField.type = 'text'; containerPanelSearchField.placeholder = 'Search'; - containerPanelSearchField.setAttribute('onkeydown', 'executeFilterDelayed();'); containerPanelSearch.appendChild(containerPanelSearchField); panel.appendChild(containerPanelSearch); @@ -27,7 +28,8 @@ var containerPanelUserRatingCheckBox = document.createElement('input'); containerPanelUserRatingCheckBox.id = 'filter_panel_userrating_enabled'; containerPanelUserRatingCheckBox.type = 'checkbox'; - containerPanelUserRatingCheckBox.setAttribute('oninput', 'executeFilterDelayed();'); + containerPanelUserRatingCheckBox.className = 'filter_panel_item_checkbox'; + containerPanelUserRatingCheckBox.setAttribute('onclick', 'filter_panel_userrating_enabled_check();'); var ratingEnabledCookie = getCookie('filter_panel_userrating_enabled'); if (ratingEnabledCookie) { if (ratingEnabledCookie == "true") { @@ -46,10 +48,9 @@ containerPanelUserRatingMinField.id = 'filter_panel_userrating_min'; containerPanelUserRatingMinField.type = 'number'; containerPanelUserRatingMinField.placeholder = '0'; - containerPanelUserRatingMinField.setAttribute('onchange', 'executeFilterDelayed();'); - containerPanelUserRatingMinField.setAttribute('onkeydown', 'executeFilterDelayed();'); containerPanelUserRatingMinField.setAttribute('min', '0'); containerPanelUserRatingMinField.setAttribute('max', '100'); + containerPanelUserRatingMinField.setAttribute('oninput', 'filter_panel_userrating_value();'); containerPanelUserRating.appendChild(containerPanelUserRatingMinField); var containerPanelUserRatingMaxField = document.createElement('input'); @@ -60,10 +61,9 @@ containerPanelUserRatingMaxField.id = 'filter_panel_userrating_max'; containerPanelUserRatingMaxField.type = 'number'; containerPanelUserRatingMaxField.placeholder = '100'; - containerPanelUserRatingMaxField.setAttribute('onchange', 'executeFilterDelayed();'); - containerPanelUserRatingMaxField.setAttribute('onkeydown', 'executeFilterDelayed();'); containerPanelUserRatingMaxField.setAttribute('min', '0'); containerPanelUserRatingMaxField.setAttribute('max', '100'); + containerPanelUserRatingMaxField.setAttribute('oninput', 'filter_panel_userrating_value();'); containerPanelUserRating.appendChild(containerPanelUserRatingMaxField); panel.appendChild(containerPanelUserRating); @@ -96,6 +96,27 @@ targetElement.appendChild(panel); + var buttonsDiv = document.createElement('div'); + buttonsDiv.id = 'games_library_searchbuttons' + + // add filter button + var searchButton = document.createElement('div'); + searchButton.id = 'games_library_searchbutton'; + searchButton.setAttribute('onclick', 'executeFilter1_1();'); + searchButton.innerHTML = 'Apply'; + + buttonsDiv.appendChild(searchButton); + + // add reset button + var resetButton = document.createElement('div'); + resetButton.id = 'games_library_resetbutton'; + resetButton.setAttribute('onclick', 'resetFilters();'); + resetButton.innerHTML = 'Reset'; + + buttonsDiv.appendChild(resetButton); + + scrollerElement.appendChild(buttonsDiv); + // set order by values var orderByCookie = getCookie('games_library_orderby_select'); if (orderByCookie) { @@ -157,6 +178,7 @@ function buildFilterPanelHeader(headerString, friendlyHeaderString, showVisibleT header.appendChild(headerToggle); header.setAttribute('onclick', 'toggleFilterPanel("' + headerString + '");'); header.style.cursor = 'pointer'; + header.classList.add('filter_header_toggleable'); } header.appendChild(headerLabel); @@ -201,7 +223,6 @@ function buildFilterPanelItem(filterType, itemString, friendlyItemString, tags) filterPanelItemCheckBoxItem.className = 'filter_panel_item_checkbox'; filterPanelItemCheckBoxItem.name = 'filter_' + filterType; filterPanelItemCheckBoxItem.setAttribute('filter_id', itemString); - filterPanelItemCheckBoxItem.setAttribute('oninput' , 'executeFilter1_1();'); if (checkState == true) { filterPanelItemCheckBoxItem.checked = true; } @@ -252,50 +273,62 @@ function buildFilterTag(tags) { return boundingDiv; } +function filter_panel_userrating_enabled_check() { + var ratingCheck = document.getElementById('filter_panel_userrating_enabled'); + var minRatingValue = document.getElementById('filter_panel_userrating_min'); + var maxRatingValue = document.getElementById('filter_panel_userrating_max'); + + if (ratingCheck.checked == false) { + minRatingValue.value = ''; + maxRatingValue.value = ''; + } else { + minRatingValue.value = 0; + maxRatingValue.value = 100; + } +} + +function filter_panel_userrating_value() { + var ratingCheck = document.getElementById('filter_panel_userrating_enabled'); + var minRatingValue = document.getElementById('filter_panel_userrating_min'); + var maxRatingValue = document.getElementById('filter_panel_userrating_max'); + + if (minRatingValue.value || maxRatingValue.value) { + ratingCheck.checked = true; + } else { + ratingCheck.checked = false; + } +} + +function resetFilters() { + // clear name + document.getElementById('filter_panel_search').value = ''; + + // clear filter check boxes + var filterChecks = document.getElementsByClassName('filter_panel_item_checkbox'); + for (var i = 0; i < filterChecks.length; i++) { + filterChecks[i].checked = false; + } + + // fire checkbox specific scripts + filter_panel_userrating_enabled_check(); + + executeFilter1_1(); +} + function executeFilter1_1(pageNumber, pageSize) { + var freshSearch = false; + if (!pageNumber) { pageNumber = 1; + freshSearch = true; + existingSearchModel = undefined; } if (!pageSize) { pageSize = 30; } - // user ratings - var userRatingEnabled = document.getElementById('filter_panel_userrating_enabled'); - - var minUserRating = -1; - var minUserRatingInput = document.getElementById('filter_panel_userrating_min'); - if (minUserRatingInput.value) { - minUserRating = minUserRatingInput.value; - userRatingEnabled.checked = true; - } - setCookie(minUserRatingInput.id, minUserRatingInput.value); - - var maxUserRating = -1; - var maxUserRatingInput = document.getElementById('filter_panel_userrating_max'); - if (maxUserRatingInput.value) { - maxUserRating = maxUserRatingInput.value; - userRatingEnabled.checked = true; - } - setCookie(maxUserRatingInput.id, maxUserRatingInput.value); - - if (minUserRating == -1 && maxUserRating == -1) { - userRatingEnabled.checked = false; - } - - if (userRatingEnabled.checked == false) { - setCookie("filter_panel_userrating_enabled", false); - - minUserRating = -1; - minUserRatingInput.value = ""; - setCookie(minUserRatingInput.id, minUserRatingInput.value); - maxUserRating = -1; - maxUserRatingInput.value = ""; - setCookie(maxUserRatingInput.id, maxUserRatingInput.value); - } else { - setCookie("filter_panel_userrating_enabled", true); - } + var model; // get order by var orderBy = document.getElementById('games_library_orderby_select').value; @@ -309,36 +342,80 @@ function executeFilter1_1(pageNumber, pageSize) { } setCookie('games_library_orderby_direction_select', orderByDirectionSelect); - // build filter model - var ratingAgeGroups = GetFilterQuery1_1('agegroupings'); - var ratingIncludeUnrated = false; - if (ratingAgeGroups.includes("0")) { - ratingIncludeUnrated = true; - } + if (existingSearchModel == undefined || freshSearch == true) { + // user ratings + var userRatingEnabled = document.getElementById('filter_panel_userrating_enabled'); - var model = { - "Name": document.getElementById('filter_panel_search').value, - "Platform": GetFilterQuery1_1('platform'), - "Genre": GetFilterQuery1_1('genre'), - "GameMode": GetFilterQuery1_1('gamemode'), - "PlayerPerspective": GetFilterQuery1_1('playerperspective'), - "Theme": GetFilterQuery1_1('theme'), - "GameRating": { - "MinimumRating": minUserRating, - "MinimumRatingCount": -1, - "MaximumRating": maxUserRating, - "MaximumRatingCount": -1, - "IncludeUnrated": !userRatingEnabled - }, - "GameAgeRating": { - "AgeGroupings": ratingAgeGroups, - "IncludeUnrated": ratingIncludeUnrated - }, - "Sorting": { - "SortBy": orderBy, - "SortAscending": orderByDirection + var minUserRating = -1; + var minUserRatingInput = document.getElementById('filter_panel_userrating_min'); + if (minUserRatingInput.value) { + minUserRating = minUserRatingInput.value; + userRatingEnabled.checked = true; } - }; + setCookie(minUserRatingInput.id, minUserRatingInput.value); + + var maxUserRating = -1; + var maxUserRatingInput = document.getElementById('filter_panel_userrating_max'); + if (maxUserRatingInput.value) { + maxUserRating = maxUserRatingInput.value; + userRatingEnabled.checked = true; + } + setCookie(maxUserRatingInput.id, maxUserRatingInput.value); + + if (minUserRating == -1 && maxUserRating == -1) { + userRatingEnabled.checked = false; + } + + if (userRatingEnabled.checked == false) { + setCookie("filter_panel_userrating_enabled", false); + + minUserRating = -1; + minUserRatingInput.value = ""; + setCookie(minUserRatingInput.id, minUserRatingInput.value); + maxUserRating = -1; + maxUserRatingInput.value = ""; + setCookie(maxUserRatingInput.id, maxUserRatingInput.value); + } else { + setCookie("filter_panel_userrating_enabled", true); + } + + // build filter model + var ratingAgeGroups = GetFilterQuery1_1('agegroupings'); + var ratingIncludeUnrated = false; + if (ratingAgeGroups.includes("0")) { + ratingIncludeUnrated = true; + } + + model = { + "Name": document.getElementById('filter_panel_search').value, + "Platform": GetFilterQuery1_1('platform'), + "Genre": GetFilterQuery1_1('genre'), + "GameMode": GetFilterQuery1_1('gamemode'), + "PlayerPerspective": GetFilterQuery1_1('playerperspective'), + "Theme": GetFilterQuery1_1('theme'), + "GameRating": { + "MinimumRating": minUserRating, + "MinimumRatingCount": -1, + "MaximumRating": maxUserRating, + "MaximumRatingCount": -1, + "IncludeUnrated": !userRatingEnabled + }, + "GameAgeRating": { + "AgeGroupings": ratingAgeGroups, + "IncludeUnrated": ratingIncludeUnrated + }, + "Sorting": { + "SortBy": orderBy, + "SortAscending": orderByDirection + } + }; + + existingSearchModel = model; + } else { + existingSearchModel.Sorting.SortBy = orderBy; + existingSearchModel.Sorting.SortAscending = orderByDirection; + model = existingSearchModel; + } ajaxCall( '/api/v1.1/Games?pageNumber=' + pageNumber + '&pageSize=' + pageSize, diff --git a/gaseous-server/wwwroot/scripts/gamesformating.js b/gaseous-server/wwwroot/scripts/gamesformating.js index e04dd78..5b7b752 100644 --- a/gaseous-server/wwwroot/scripts/gamesformating.js +++ b/gaseous-server/wwwroot/scripts/gamesformating.js @@ -12,14 +12,16 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize) { console.log("Displaying page: " + pageNumber); console.log("Page size: " + pageSize); - window.scrollTo(0, 0); - var pageMode = GetPreference('LibraryPagination', 'paged'); if (pageNumber == 1 || pageMode == 'paged') { targetElement.innerHTML = ''; } + if (pageMode == 'paged') { + window.scrollTo(0, 0); + } + var pagerCheck = document.getElementById('games_library_pagerstore'); if (pageNumber == 1) { pagerCheck.innerHTML = "0"; diff --git a/gaseous-server/wwwroot/scripts/main.js b/gaseous-server/wwwroot/scripts/main.js index 847ee3d..cff1dfb 100644 --- a/gaseous-server/wwwroot/scripts/main.js +++ b/gaseous-server/wwwroot/scripts/main.js @@ -459,6 +459,25 @@ function SetPreference(Setting, Value) { ); } +function SetPreference_Batch(model) { + console.log(model); + ajaxCall( + '/api/v1.1/Account/Preferences', + 'POST', + function(result) { + for (var i = 0; i < model.length; i++) { + SetPreference_Local(model[i].setting, model[i].value.toString()); + } + }, + function(error) { + for (var i = 0; i < model.length; i++) { + SetPreference_Local(model[i].setting, model[i].value.toString()); + } + }, + JSON.stringify(model) + ); +} + function SetPreference_Local(Setting, Value) { if (userProfile.userPreferences) { var prefFound = false; diff --git a/gaseous-server/wwwroot/styles/style.css b/gaseous-server/wwwroot/styles/style.css index b8da098..3d620d3 100644 --- a/gaseous-server/wwwroot/styles/style.css +++ b/gaseous-server/wwwroot/styles/style.css @@ -198,6 +198,54 @@ h3 { /* margin-right: 10px; */ } +#games_library_searchbuttons { + position: sticky; + position: -webkit-sticky; + bottom: 0; + margin-top: 5px; + width: 200px; + z-index: 1; + background-color: #5d5d5d; +} + +#games_library_searchbutton { + position: sticky; + position: -webkit-sticky; + bottom: 0; + width: 180px; + height: 18px; + padding: 10px; + background-color: #352879; + color: white; + text-align: center; + font-family: Commodore64; + font-size: 16px; +} + +#games_library_searchbutton:hover { + cursor: pointer; + background-color: #6C5EB5; +} + +#games_library_resetbutton { + position: sticky; + position: -webkit-sticky; + bottom: 0; + width: 180px; + height: 18px; + padding: 10px; + background-color: #646464; + color: white; + text-align: center; + font-family: Commodore64; + font-size: 16px; +} + +#games_library_resetbutton:hover { + cursor: pointer; + background-color: #adadad; +} + #games_filter { width: 200px; @@ -217,6 +265,10 @@ h3 { background-color: #2b2b2b; } +.filter_header_toggleable:hover { + background-color: #000000; +} + .filter_panel_box { position: relative; padding: 10px; @@ -226,7 +278,7 @@ h3 { input[type='text'], input[type='number'], input[type="email"], input[type="password"], input[type="datetime-local"] { background-color: #2b2b2b; color: white; - padding: 5px; + padding: 4px; font-family: "PT Sans", Arial, Helvetica, sans-serif; font-kerning: normal; font-style: normal; @@ -235,7 +287,12 @@ input[type='text'], input[type='number'], input[type="email"], input[type="passw border-radius: 5px; border-width: 1px; border-style: solid; - border-color: lightgray; + /* border-color: lightgray; */ + border-color: #2b2b2b; +} + +input[type='text']:hover, input[type='number']:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="datetime-local"]:hover { + border-color: #939393; } input[id='filter_panel_search'] { @@ -841,8 +898,14 @@ div[name="properties_toc_item"]:hover,div[name="properties_user_toc_item"]:hover } .select2-container--default .select2-selection--multiple { - background-color: #2b2b2b !important; + background-color: #2b2b2b; color: white !important; + border: 1px solid #2b2b2b; + border-radius: 5px; +} + +.select2-container--default:hover, .select2-selection--multiple:hover { + border-color: #939393; } .select2-container--open .select2-dropdown--below, @@ -854,8 +917,23 @@ div[name="properties_toc_item"]:hover,div[name="properties_user_toc_item"]:hover border: 1px solid #2b2b2b; } -.select2-selection__choice { - background-color: #2b2b2b !important; +/* tag item */ +.select2-container--default .select2-selection--multiple .select2-selection__choice { + background-color: #575757 !important; + border: 1px solid #2b2b2b; + border-radius: 5px; +} + +/* tag item delete button */ +.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { + border-right: none; + background-color: #939393; + color: white; +} + +/* tag item label */ +.select2-container--default .select2-selection--multiple .select2-selection__choice__display { + background-color: #4e4e4e; } .select2-selection__choice__display { @@ -870,8 +948,24 @@ div[name="properties_toc_item"]:hover,div[name="properties_user_toc_item"]:hover background-color: #2b2b2b; color: white !important; border: 1px solid #2b2b2b; + border-radius: 5px; } +.select2-selection--single:hover, .select2-selection__rendered:hover { + border-color: #939393; +} + +.select2-container--default .select2-selection--single { + background-color: #2b2b2b; + color: white !important; + border: 1px solid #2b2b2b; + border-radius: 5px; +} + +/* .select2-container--default:hover, .select2-selection--single:hover { + border-color: #939393; +} */ + .select2-search__field { background-color: #2b2b2b; color: white; @@ -946,11 +1040,23 @@ button:disabled { } #emulator { + +} + +.emulator_partscreen { margin: 0 auto; width: 640px; padding-top: 100px; } +.emulator_fullscreen { + position: fixed; + left: 0px; + right: 0px; + bottom: 0px; + top: 40px; +} + #emulatorbios { margin: 0 auto; width: 640px; @@ -1163,16 +1269,17 @@ button:disabled { position: absolute; top: 0px; right: 0px; - text-align: center; + text-align: right; font-size: 10px; } .tagBoxItem { + display: block; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; - width: 10px; + min-width: 10px; height: 10px; background-color: darkslategray; color: white;