Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Add hover cards in web UI (#30754)

Browse source 
Co-authored-by: Renaud Chaput <renchap@gmail.com>
This commit is contained in:
Eugen Rochko 2024-06-26 21:33:38 +02:00 • committed by GitHub
parent 863c470a2b
commit e89317d4c1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 631 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/styles/mastodon-light/variables.scss
View file

@ -59,6 +59,8 @@ $emojis-requiring-inversion: 'chains';
body {
--dropdown-border-color: #d9e1e8;
--dropdown-background-color: #fff;
--modal-border-color: #d9e1e8;
--modal-background-color: var(--background-color-tint);
--background-border-color: #d9e1e8;
--background-color: #fff;
--background-color-tint: rgba(255, 255, 255, 80%);

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

@ -120,8 +120,27 @@
text-decoration: none;
}
&:disabled {
opacity: 0.5;
&.button--destructive {
&:active,
&:focus,
&:hover {
border-color: $ui-button-destructive-focus-background-color;
color: $ui-button-destructive-focus-background-color;
}
}
&:disabled,
&.disabled {
opacity: 0.7;
border-color: $ui-primary-color;
color: $ui-primary-color;
&:active,
&:focus,
&:hover {
border-color: $ui-primary-color;
color: $ui-primary-color;
}
}
}
@ -2420,7 +2439,7 @@ a.account__display-name {
}
.dropdown-animation {
animation: dropdown 150ms cubic-bezier(0.1, 0.7, 0.1, 1);
animation: dropdown 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
@keyframes dropdown {
from {
@ -10325,3 +10344,156 @@ noscript {
}
}
}
.hover-card-controller[data-popper-reference-hidden='true'] {
opacity: 0;
pointer-events: none;
}
.hover-card {
box-shadow: var(--dropdown-shadow);
background: var(--modal-background-color);
backdrop-filter: var(--background-filter);
border: 1px solid var(--modal-border-color);
border-radius: 8px;
padding: 16px;
width: 270px;
display: flex;
flex-direction: column;
gap: 12px;
&--loading {
position: relative;
min-height: 100px;
}
&__name {
display: flex;
gap: 12px;
text-decoration: none;
color: inherit;
}
&__number {
font-size: 15px;
line-height: 22px;
color: $secondary-text-color;
strong {
font-weight: 700;
}
}
&__text-row {
display: flex;
flex-direction: column;
gap: 8px;
}
&__bio {
color: $secondary-text-color;
font-size: 14px;
line-height: 20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 2 * 20px;
overflow: hidden;
p {
margin-bottom: 0;
}
a {
color: inherit;
text-decoration: underline;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
}
.display-name {
font-size: 15px;
line-height: 22px;
bdi {
font-weight: 500;
color: $primary-text-color;
}
&__account {
display: block;
color: $dark-text-color;
}
}
.account-fields {
color: $secondary-text-color;
font-size: 14px;
line-height: 20px;
a {
color: inherit;
text-decoration: none;
&:focus,
&:hover,
&:active {
text-decoration: underline;
}
}
dl {
display: flex;
align-items: center;
gap: 4px;
dt {
flex: 0 0 auto;
color: $dark-text-color;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
dd {
flex: 1 1 auto;
font-weight: 500;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&.verified {
dd {
display: flex;
align-items: center;
gap: 4px;
overflow: hidden;
white-space: nowrap;
color: $valid-value-color;
& > span {
overflow: hidden;
text-overflow: ellipsis;
}
a {
font-weight: 500;
}
.icon {
width: 16px;
height: 16px;
}
}
}
}
}
}