Cynosphere/nitter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve profile stat layout on low resolutions

Browse source
This commit is contained in:
Zed 2019-07-04 04:27:30 +02:00
parent 141bfdc508
commit 8773fd901b
2 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
public/style.css
View file

@ -701,10 +701,12 @@ video {
.profile-card-extra-links { .profile-card-extra-links {
margin-top: 8px; margin-top: 8px;
font-size: 14px; font-size: 14px;
width: 100%;
} }
.profile-statlist { .profile-statlist {
display: flex; display: flex;
flex-wrap: wrap;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -716,21 +718,26 @@ video {
} }
.profile-statlist .tweets { .profile-statlist .tweets {
flex-shrink: 2; flex: 0.4 1 0;
} }
.profile-statlist .followers { .profile-statlist .followers {
flex-grow: 2; flex: 1 1 0;
padding: 0 3px;
} }
.profile-statlist .following { .profile-statlist .following {
flex-shrink: 1.5; flex: 0.5 1 0;
} }
.profile-stat-header { .profile-stat-header {
font-weight: bold; font-weight: bold;
} }
.profile-stat-num {
display: block;
}
.timeline-tweet { .timeline-tweet {
border-bottom: 1px solid #3e3e35; border-bottom: 1px solid #3e3e35;
} }

6
src/views/user.nimf
View file

@ -25,15 +25,15 @@
<ul class="profile-statlist"> <ul class="profile-statlist">
<li class="tweets"> <li class="tweets">
<span class="profile-stat-header">Tweets</span> <span class="profile-stat-header">Tweets</span>
<span>${$profile.tweets}</span> <span class="profile-stat-num">${$profile.tweets}</span>
</li> </li>
<li class="followers"> <li class="followers">
<span class="profile-stat-header">Followers</span> <span class="profile-stat-header">Followers</span>
<span>${$profile.followers}</span> <span class="profile-stat-num">${$profile.followers}</span>
</li> </li>
<li class="following"> <li class="following">
<span class="profile-stat-header">Following</span> <span class="profile-stat-header">Following</span>
<span>${$profile.following}</span> <span class="profile-stat-num">${$profile.following}</span>
</li> </li>
</ul> </ul>
</div> </div>