Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Add infinite scrolling for search results in web UI (#26784)

Browse source
This commit is contained in:
Eugen Rochko 2023-09-05 23:54:24 +02:00 • committed by GitHub
parent 548c032dbb
commit 5d20733d8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 255 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

59
app/javascript/styles/mastodon/components.scss
View file

@ -5172,22 +5172,39 @@ a.status-card {
}
.search-results__section {
margin-bottom: 5px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
h5 {
&:last-child {
border-bottom: 0;
}
&__header {
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: default;
display: flex;
padding: 15px;
font-weight: 500;
font-size: 16px;
color: $dark-text-color;
font-size: 14px;
color: $darker-text-color;
display: flex;
justify-content: space-between;
.fa {
display: inline-block;
h3 .fa {
margin-inline-end: 5px;
}
button {
color: $highlight-text-color;
padding: 0;
border: 0;
background: 0;
font: inherit;
&:hover,
&:active,
&:focus {
text-decoration: underline;
}
}
}
.account:last-child,
@ -6815,14 +6832,14 @@ a.status-card {
.notification__filter-bar,
.account__section-headline {
background: darken($ui-base-color, 4%);
background: $ui-base-color;
border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: default;
display: flex;
flex-shrink: 0;
button {
background: darken($ui-base-color, 4%);
background: transparent;
border: 0;
margin: 0;
}
@ -6842,26 +6859,18 @@ a.status-card {
white-space: nowrap;
&.active {
color: $secondary-text-color;
color: $primary-text-color;
&::before,
&::after {
&::before {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent lighten($ui-base-color, 8%);
}
&::after {
bottom: -1px;
border-color: transparent transparent $ui-base-color;
left: 0;
width: 100%;
height: 3px;
border-radius: 4px;
background: $highlight-text-color;
}
}
}