Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use class for styling player search

Browse Source
This commit is contained in:
James Lyne 2022-01-17 12:20:33 +00:00
parent f9eb7b1fd2
commit 14e67571b2
2 changed files with 16 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/list/PlayerList.vue
View File

@ -15,7 +15,7 @@
--> -->
<template> <template>
<input v-if="filteredPlayers && search" id="players__search" type="text" name="search" <input v-if="filteredPlayers && search" class="section__search" type="text" name="search"
v-model="searchQuery" :placeholder="messagePlayersSearchPlaceholder" @keydown="onKeydown"> v-model="searchQuery" :placeholder="messagePlayersSearchPlaceholder" @keydown="onKeydown">
<RadioList v-if="filteredPlayers.length" :aria-labelledby="ariaLabelledby"> <RadioList v-if="filteredPlayers.length" :aria-labelledby="ariaLabelledby">
<PlayerListItem v-for="player in filteredPlayers" :key="player.name" :player="player"></PlayerListItem> <PlayerListItem v-for="player in filteredPlayers" :key="player.name" :player="player"></PlayerListItem>
@ -85,21 +85,3 @@ export default defineComponent({
} }
}); });
</script> </script>
<style lang="scss" scoped>
.players {
#players__search {
margin-bottom: 1.5rem;
padding: 0.5rem 1rem;
box-sizing: border-box;
width: 100%;
position: sticky;
top: 4.8rem;
z-index: 3;
& + .section__skeleton {
margin-top: 0;
}
}
}
</style>

15
src/components/sidebar/SidebarSection.vue
View File

@ -154,6 +154,21 @@ export default defineComponent({
} }
} }
.section__search {
margin-bottom: 1.5rem;
padding: 0.5rem 1rem;
box-sizing: border-box;
width: 100%;
position: sticky;
top: 4.8rem;
z-index: 3;
box-shadow: 0 1.5rem 0.5em var(--background-base);
& + .section__skeleton {
margin-top: 0;
}
}
.section__skeleton { .section__skeleton {
font-style: italic; font-style: italic;
color: var(--text-disabled); color: var(--text-disabled);