Jelajahi Sumber

Improve profile stat layout on low resolutions

Zed 7 tahun lalu
induk
melakukan
8773fd901b
2 mengubah file dengan 13 tambahan dan 6 penghapusan
  1. 10 3
      public/style.css
  2. 3 3
      src/views/user.nimf

+ 10 - 3
public/style.css

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

+ 3 - 3
src/views/user.nimf

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