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
This commit is contained in:
Michael Green
2024-01-02 00:33:56 +11:00
committed by GitHub
parent 7be1ec7080
commit eb9c1ce1a4
13 changed files with 440 additions and 151 deletions

View File

@@ -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';

View File

@@ -31,7 +31,7 @@
</td>
</tr>
<tr>
<td colspan="2"><strong>Note</strong>: Standard directory naming uses the IGDB slug for the platform is not editable.</td>
<td colspan="2"><strong>Note</strong>: Standard directory naming uses the IGDB slug for the platform and is not editable.</td>
</tr>
<tr>
<td>
@@ -58,7 +58,7 @@
<h4>Engine</h4>
</td>
<td>
<select id="mapping_edit_webemulatorengine" style="width: 100%;">
<select id="mapping_edit_webemulatorengine" data-minimum-results-for-search="Infinity" style="width: 100%;">
</select>
</td>
@@ -68,7 +68,7 @@
<h4>Core</h4>
</td>
<td>
<select id="mapping_edit_webemulatorcore" style="width: 100%;">
<select id="mapping_edit_webemulatorcore" data-minimum-results-for-search="Infinity" style="width: 100%;">
</select>
</td>

View File

@@ -18,7 +18,7 @@
</tr>
<tr>
<td>
<select id="profile_pref-LibraryPagination" data-pref="LibraryPagination" onchange="SavePrefValue_Value(this);">
<select id="profile_pref-LibraryPagination" data-pref="LibraryPagination" data-minimum-results-for-search="Infinity">
<option value="paged">Paged</option>
<option value="infinite">Infinite scrolling</option>
</select>
@@ -34,17 +34,17 @@
</tr>
<tr>
<td>
<input type="checkbox" id="profile_pref_LibraryShowGameTitle" data-pref="LibraryShowGameTitle" onchange="SavePrefValue_Checkbox(this);"><label for="profile_pref_LibraryShowGameTitle"> Show title</label>
<input type="checkbox" id="profile_pref_LibraryShowGameTitle" data-pref="LibraryShowGameTitle" data-minimum-results-for-search="Infinity"><label for="profile_pref_LibraryShowGameTitle"> Show title</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="profile_pref_LibraryShowGameRating" data-pref="LibraryShowGameRating" onchange="SavePrefValue_Checkbox(this);"><label for="profile_pref_LibraryShowGameRating"> Show rating</label>
<input type="checkbox" id="profile_pref_LibraryShowGameRating" data-pref="LibraryShowGameRating" data-minimum-results-for-search="Infinity"><label for="profile_pref_LibraryShowGameRating"> Show rating</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="profile_pref_LibraryShowGameClassification" data-pref="LibraryShowGameClassification" onchange="SavePrefValue_Checkbox(this);"><label for="profile_pref_LibraryShowGameClassification"> Show age classification badges</label>
<input type="checkbox" id="profile_pref_LibraryShowGameClassification" data-pref="LibraryShowGameClassification" onclick="updateDisplay(this.getAttribute('data-pref'), this.checked);"><label for="profile_pref_LibraryShowGameClassification"> Show age classification badges</label>
</td>
</tr>
<tr>
@@ -71,6 +71,11 @@
</table>
</td>
</tr>
<tr>
<td style="text-align: right;">
<button id="profile_pref_ok" value="OK" onclick="SavePrefs();">OK</button>
</td>
</tr>
</table>
</div>
<div id="properties_bodypanel_account" name="properties_profile_tab" style="display: none;">
@@ -183,20 +188,40 @@
}
}
function SavePrefValue_Checkbox(e) {
var ValueName = e.getAttribute("data-pref");
SetPreference(ValueName, e.checked);
function SavePrefs() {
var model = [];
updateDisplay(ValueName, e.checked);
model.push(SavePrefValue_Checkbox(document.getElementById('profile_pref_LibraryShowGameTitle')));
model.push(SavePrefValue_Checkbox(document.getElementById('profile_pref_LibraryShowGameRating')));
model.push(SavePrefValue_Checkbox(document.getElementById('profile_pref_LibraryShowGameClassification')));
model.push(SavePrefValue_Value(document.getElementById('profile_pref-LibraryPagination')));
model.push(
{
"setting": "LibraryGameClassificationDisplayOrder",
"value": JSON.stringify(SavePrefValue_ClassBadge(document.getElementById('profile_pref_LibraryPrimaryClassificationBadge')))
}
);
SetPreference_Batch(model);
executeFilter1_1(1);
closeDialog();
}
function SavePrefValue_Checkbox(e) {
var ValueName = e.getAttribute("data-pref");
return { "setting": ValueName, "value": e.checked.toString() };
}
function SavePrefValue_Value(e) {
var ValueName = e.getAttribute("data-pref");
SetPreference(ValueName, e.value);
executeFilter1_1(1);
return { "setting": ValueName, "value": e.value };
}
function updateDisplay(ValueName, ValueSetting) {
@@ -232,6 +257,7 @@
}
}
// save values
var model = [];
if (secondary.value == '-') {
@@ -239,10 +265,8 @@
} else {
model = [ primary.value, secondary.value ];
}
SetPreference('LibraryGameClassificationDisplayOrder', JSON.stringify(model));
executeFilter1_1(1);
return model;
}
function checkPasswordsMatch() {
@@ -320,4 +344,8 @@
ProfileSelectTab('general');
GetPrefInitialValues();
$('#profile_pref-LibraryPagination').select2();
$('#profile_pref_LibraryPrimaryClassificationBadge').select2();
$('#profile_pref_LibraryFallbackClassificationBadge').select2();
</script>