chore(scenery): added grid layout to scenery top list; expanded to 40 items

This commit is contained in:
2026-04-16 02:49:38 +02:00
parent cdc188c5b0
commit 125b43be4a
+27 -15
View File
@@ -30,15 +30,23 @@
<ul v-else-if="currentListMode == 'likes'"> <ul v-else-if="currentListMode == 'likes'">
<li v-for="(value, i) in topLikesList"> <li v-for="(value, i) in topLikesList">
{{ i + 1 }}. miejsce - <b>{{ value.dispatcherName }}</b> - <div>
<b class="text--primary">{{ value.sumRate }} łapek</b> {{ t('scenery.top-list.place', i + 1) }} - <b>{{ value.dispatcherName }}</b>
</div>
<div>
<b class="text--primary">{{ t('scenery.top-list.like-count', value.sumRate) }}</b>
</div>
</li> </li>
</ul> </ul>
<ul v-else> <ul v-else>
<li v-for="(value, i) in topDispatchersList"> <li v-for="(value, i) in topDispatchersList">
{{ i + 1 }}. miejsce - <b>{{ value.dispatcherName }}</b> - <div>
<b class="text--primary">{{ value.count }} dyżurów</b> {{ t('scenery.top-list.place', i + 1) }} - <b>{{ value.dispatcherName }}</b>
</div>
<div>
<b class="text--primary">{{ t('scenery.top-list.dispatch-count', value.count) }}</b>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@@ -130,7 +138,7 @@ async function fetchTopDispatchersList() {
listState.value = Status.Data.Loading; listState.value = Status.Data.Loading;
const response = await apiStore.client.get( const response = await apiStore.client.get(
`api/getSceneryTop${currentListMode.value}By${currentListScope.value}?${currentListScope.value}=${searchedStationValue}` `api/getSceneryTop${currentListMode.value}By${currentListScope.value}?${currentListScope.value}=${searchedStationValue}&countLimit=40`
); );
if (currentListMode.value == 'dispatchers') { if (currentListMode.value == 'dispatchers') {
@@ -178,18 +186,22 @@ async function fetchTopDispatchersList() {
overflow: auto; overflow: auto;
} }
.rating-list-wrapper > ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
align-items: center;
gap: 0.65em;
padding-right: 0.5em;
}
.rating-list-wrapper > ul > li { .rating-list-wrapper > ul > li {
padding: 0.5em; display: flex;
margin: 1em 0.5em; justify-content: center;
align-items: center;
&:first-child { flex-direction: column;
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
padding: 0.25em;
background-color: #2b2b2b; background-color: #2b2b2b;
height: 100%;
} }
</style> </style>