WIP Group contributions in UI

2026-07-26 16:04:56 +02:00
parent a7e017971a
commit 3cab203498
9 changed files with 416 additions and 45 deletions
@@ -49,6 +49,55 @@ section#contribution-details {
        text-decoration: underline;
      }
    }
+
+    .co-contributors {
+      margin-top: 2rem;
+      padding-top: 2rem;
+      border-top: 1px solid $item-border-color;
+
+      h4 {
+        font-size: 1.2rem;
+        margin-bottom: 1rem;
+        color: $body-text-color;
+      }
+
+      ul {
+        list-style: none;
+
+        li {
+          display: flex;
+          align-items: center;
+          padding: 0.5rem 0;
+          gap: 0.5rem;
+
+          .co-contributor {
+            display: inline-flex;
+            align-items: center;
+            text-decoration: none;
+            color: $body-text-color;
+            flex: 1;
+
+            .name {
+              margin-left: 0.5rem;
+            }
+
+            .amount {
+              margin-left: auto;
+              font-weight: 500;
+            }
+
+            .symbol {
+              font-size: 0.8rem;
+              padding-left: 0.2rem;
+            }
+
+            &:hover .name {
+              color: $primary-color;
+            }
+          }
+        }
+      }
+    }
  }

  .actions {
@@ -41,6 +41,62 @@ ul.contribution-list {
      opacity: 0.6;
    }

+    &.grouped {
+      grid-template-columns: auto 5rem;
+
+      .avatars {
+        display: inline-flex;
+        align-items: center;
+
+        img.avatar {
+          margin-right: 0;
+          margin-left: -0.6rem;
+          border: 2px solid $item-background-color;
+          z-index: 1;
+          position: relative;
+
+          &:first-child {
+            margin-left: 0;
+            z-index: 3;
+          }
+
+          &:nth-child(2) {
+            z-index: 2;
+          }
+        }
+
+        .avatar-overflow {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 2rem;
+          height: 2rem;
+          margin-left: -0.6rem;
+          border-radius: 1rem;
+          background-color: $blue;
+          color: #fff;
+          font-size: 0.8rem;
+          font-weight: 500;
+          border: 2px solid $item-background-color;
+          z-index: 0;
+          position: relative;
+        }
+      }
+
+      &.expanded {
+        border-bottom: none;
+      }
+    }
+
+    &.group-item {
+      padding-left: 2.8rem;
+      background-color: $item-highlighted-background-color;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid $item-border-color;
+      }
+    }
+
    p {
      align-self: center;
      margin: 0;