Update homepage, update reputation progressbar

pradoslaw · Oct 15, 2024 · 38d7246 · 38d7246
1 parent f3bf2ac
commit 38d7246
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 61 deletions.
diff --git a/resources/sass/core/_dark_homepage.scss b/resources/sass/core/_dark_homepage.scss
@@ -73,24 +73,6 @@ body.theme-dark {
     }
   }
 
-  .card-reputation {
-    background-color: #1a1a1a;
-
-    .media-body {
-      a.reputation-username {
-        color: #acacac;
-      }
-    }
-
-    .media {
-      border-bottom-color: #2f2f2f;
-
-      &:after {
-        color: #2f2f2f;
-      }
-    }
-  }
-
   h2.h4,
   h4 {
     color: #c8c8c8;

diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss
@@ -1,5 +1,7 @@
 @charset "UTF-8";
 
+@import "../../feature/theme/theme";
+
 .scope-homepage {
   h4.heading {
     border: none;
@@ -16,25 +18,58 @@
     width: 70%;
   }
 
-  .media {
-    border-bottom: 1px solid $card-border-color;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    position: relative;
-    counter-increment: number;
-
-    &:after {
-      content: counter(number);
-      font-size: 40px;
-      color: $card-border-color;
-      position: absolute;
-      right: 10px;
-      top: 9px;
-    }
+  .ranking-row {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    counter-increment: rank;
 
     &:last-child {
       border-bottom: none;
     }
+
+    .counter {
+      align-self: center;
+
+      &:after {
+        content: counter(rank);
+      }
+    }
+
+    .ranking-percentage-ray {
+      height: 3px;
+      border-radius: 3px;
+      background: linear-gradient(270deg, #00a538 0%, #ffffff 100%);
+    }
+  }
+
+  @include light {
+    .ranking-row {
+      border-bottom-color: #dddddd;
+
+      .counter {
+        color: #dddddd;
+      }
+
+      a.ranking-username {
+        color: #646466;
+      }
+    }
+  }
+
+  @include dark {
+    background-color: #1a1a1a;
+
+    .ranking-row {
+      border-bottom-color: #2f2f2f;
+
+      .counter {
+        color: #acacac;
+      }
+
+      a.ranking-username {
+        color: #acacac;
+      }
+    }
   }
 }
 
@@ -191,6 +226,3 @@
   }
 }
 
-.reputation-username {
-  color: #333;
-}
diff --git a/resources/views/home.twig b/resources/views/home.twig
@@ -190,35 +190,24 @@
             {% for tab, users in reputation %}
               <div id="{{ tab }}" role="tabpanel" class="card-body tab-pane {{ settings.reputationMode == tab ? 'active' }}">
                 {% for user in users %}
-                  <div class="media">
-                    <div class="me-2">
-                      <a href="{{ route('profile', [user.id]) }}">
-                        {{ user_avatar(user.photo, user.name) }}
+                  <div class="d-flex align-items-center py-2 ranking-row">
+                    <a href="{{ route('profile', [user.id]) }}">
+                      {{ user_avatar(user.photo, user.name) }}
+                    </a>
+                    <div class="flex-grow-1 ms-3">
+                      <a class="ranking-username" data-user-id="{{ user.id }}" href="{{ route('profile', [user.id]) }}">
+                        {{ user.name }}
                       </a>
-                    </div>
-
-                    <div class="media-body">
-                      <span class="mb-1 d-block">
-                        <a data-user-id="{{ user.id }}" href="{{ route('profile', [user.id]) }}" class="reputation-username">
-                          {{ user.name }}
-                        </a>
-                      </span>
-
-                      <div class="progress">
-                        <div class="progress-bar" role="progressbar"
-                             aria-valuenow="{{ user.percentage|round }}"
-                             aria-valuemin="0"
-                             aria-valuemax="100"
-                             style="width: {{ user.percentage|round }}%;"></div>
-
-                        <span class="rep">
-                          <strong>{{ user.reputation|number_format(0, '', ' ') }}</strong>
-                          <small>
-                            {{ declination(user.reputation, ['punkt', 'punkty', 'punktów'], true) }}
-                          </small>
+                      <div class="mt-1 d-flex align-items-center">
+                        <span class="flex-shrink-0">
+                          <strong>{{ user.reputation }}</strong> pkt
                         </span>
+                        <div class="flex-grow-1 me-4 pe-2">
+                          <div class="ranking-percentage-ray" style="width:{{ user.percentage|round }}%;"></div>
+                        </div>
                       </div>
                     </div>
+                    <div class="counter"></div>
                   </div>
                 {% else %}
                   <small class="d-block text-muted my-4">