diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue index 60c582d..010243a 100644 --- a/src/components/tabs/WikiListTab.vue +++ b/src/components/tabs/WikiListTab.vue @@ -6,41 +6,48 @@
-
+ +
+ {{ $t('wiki.no-vehicles') }} +
@@ -148,23 +159,24 @@ export default defineComponent({ this.previewVehicle(vehicle); }, + resetSearchInput() { + this.searchedVehicleTypeName = ''; + }, + filterVehicles(v: IVehicle) { - if (this.searchedVehicleTypeName) - return v.type - .toLocaleLowerCase() - .includes(this.searchedVehicleTypeName.toLocaleLowerCase()); + if ( + this.searchedVehicleTypeName != '' && + !v.type.toLocaleLowerCase().includes(this.searchedVehicleTypeName.toLocaleLowerCase()) + ) + return false; - switch (this.filterType) { - case 'vehicles-all': - return true; - case 'vehicles-traction': - return isTractionUnit(v); - case 'vehicles-wagon': - return !isTractionUnit(v); + if ( + (this.filterType == 'vehicles-traction' && !isTractionUnit(v)) || + (this.filterType == 'vehicles-wagon' && isTractionUnit(v)) + ) + return false; - default: - return false; - } + return true; }, sortVehicles(v1: IVehicle, v2: IVehicle) { @@ -180,21 +192,6 @@ export default defineComponent({ case 'maxSpeed': return Math.sign(v1[this.sorterType] - v2[this.sorterType]) * direction; - // case 'cargoCount': - // return ( - // Math.sign( - // (!isTractionUnit(v1) ? v1.cargoTypes.length || -1 : -1) - - // (!isTractionUnit(row2.vehicle) ? row2.vehicle.cargoTypes.length || -1 : -1) - // ) * direction - // ); - - // case 'coldStart': - // return ( - // ((isTractionUnit(v1) && v1.coldStart ? 1 : -1) - - // (isTractionUnit(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) * - // direction - // ); - default: return v1.type.localeCompare(v2.type) * direction; } @@ -220,16 +217,29 @@ export default defineComponent({ gap: 0.5em; } -.actions > label { +.action { display: flex; flex-direction: column; - gap: 0.25em; + gap: 0.5em; - span { + label { color: #ccc; + position: relative; } } +.action.action-input label { + display: flex; + align-items: center; + justify-content: space-between; +} + +.reset-btn { + display: flex; + background-color: #161c2e; + border-radius: 0.25em; +} + .vehicles { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); @@ -290,6 +300,12 @@ export default defineComponent({ color: #ccc; } +.no-vehicles-warning { + text-align: center; + padding: 1em; + background-color: #161c2e; +} + @media screen and (max-width: $breakpointSm) { .actions-panel { align-items: stretch; diff --git a/src/locales/en.json b/src/locales/en.json index fdc7102..a8acb06 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -163,6 +163,7 @@ }, "wiki": { "title": "LIST OF AVAILABLE VEHICLES", + "no-vehicles": "No vehicles to show with the selected filters!", "labels": { "vehicles": "Vehicles", "sort-by": "Sort by", diff --git a/src/locales/pl.json b/src/locales/pl.json index a04f8b2..2853c51 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -163,6 +163,7 @@ }, "wiki": { "title": "LISTA DOSTĘPNYCH POJAZDÓW", + "no-vehicles": "Brak pojazdów do pokazania przy obecnych filtrach!", "labels": { "vehicles": "Pojazdy", "sort-by": "Sortuj wg", diff --git a/src/styles/global.scss b/src/styles/global.scss index b5c21fa..b273aab 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -115,6 +115,10 @@ button { &:hover { color: $accentColor; } + + &:focus-visible { + outline: 1px solid $accentColor; + } } [data-tooltip]:hover::after,