nostr/hamstr
1
0
Fork 0
mirror of https://github.com/styppo/hamstr.git synced 2024-10-18 05:23:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make FollowingBox scrollable

Browse Source
This commit is contained in:
styppo 2023-01-20 19:49:31 +00:00
parent e2e072ec02
commit 946e5a098a
No known key found for this signature in database
GPG Key ID: 3AAA685C50724C28
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Sidebar/FollowingBox.vue
View File

@ -16,6 +16,7 @@
@click="goToProfile(contact.pubkey)"
/>
</div>
<div class="following-gradient"></div>
</div>
</div>
</template>
@ -54,9 +55,11 @@ export default {
background-color: rgba($color: $color-dark-gray, $alpha: 0.1);
border-radius: 1rem;
&-wrapper {
position: relative;
}
&-header {
padding: 1rem;
border-bottom: $border-dark;
h3 {
margin: 0;
font-size: 1.4rem;
@ -64,12 +67,28 @@ export default {
}
}
&-body {
max-height: calc(100vh - 150px);
overflow-y: scroll;
scrollbar-color: transparent transparent;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
&::-webkit-scrollbar-thumb { /* Foreground */
background: $color-dark-gray;
}
&::-webkit-scrollbar-track { /* Background */
background: transparent;
}
&-item {
margin: 0;
padding: 12px 1rem;
border-top: $border-dark;
transition: 200ms ease;
cursor: pointer;
&:first-child {
border-top: 0;
}
&:last-child {
border-radius: 0 0 1rem 1rem;
}
@ -78,5 +97,14 @@ export default {
}
}
}
&-gradient {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1.2rem;
border-radius: 0 0 1rem 1rem;
background: linear-gradient(180deg, rgba(29, 41, 53, 0), rgba(29, 41, 53, 1));
}
}
</style>