fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-22 17:17:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix colors and typography on hashtag bar in web UI (#26666)

Browse source
This commit is contained in:
Eugen Rochko 2023-08-28 19:49:38 +02:00 committed by GitHub
parent 01b87a1632
commit 10b06436d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/mastodon/components/hashtag_bar.tsx
View file

@ -10,8 +10,8 @@ import { groupBy, minBy } from 'lodash';
import { getStatusContent } from './status_content'; import { getStatusContent } from './status_content';
// About two lines on desktop // Fit on a single line on desktop
const VISIBLE_HASHTAGS = 7; const VISIBLE_HASHTAGS = 3;
// Those types are not correct, they need to be replaced once this part of the state is typed // Those types are not correct, they need to be replaced once this part of the state is typed
export type TagLike = Record<{ name: string }>; export type TagLike = Record<{ name: string }>;
@ -210,7 +210,7 @@ const HashtagBar: React.FC<{
const revealedHashtags = expanded const revealedHashtags = expanded
? hashtags ? hashtags
: hashtags.slice(0, VISIBLE_HASHTAGS - 1); : hashtags.slice(0, VISIBLE_HASHTAGS);
return ( return (
<div className='hashtag-bar'> <div className='hashtag-bar'>

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

@ -9308,19 +9308,24 @@ noscript {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 14px; font-size: 14px;
line-height: 18px;
gap: 4px; gap: 4px;
color: $darker-text-color;
a { a {
display: inline-flex; display: inline-flex;
color: $dark-text-color; color: inherit;
text-decoration: none; text-decoration: none;
&:hover { &:hover span {
text-decoration: none;
span {
text-decoration: underline; text-decoration: underline;
} }
} }
.link-button {
color: inherit;
font-size: inherit;
line-height: inherit;
padding: 0;
} }
} }