Story 2304: User Profile UI

static/css/v3/buttons.css

@@ -70,6 +70,7 @@
 
 .btn-secondary {
   border-color: var(--color-stroke-strong);
+  background-color: var(--color-surface-weak);
   color: var(--color-text-primary);
 }
 

static/css/v3/components.css

@@ -54,3 +54,5 @@
 @import "./library-discovery-card.css";
 @import "./help-card.css";
 @import "./quick-start-card.css";
+@import "./mailing-list-activity-card.css";
+@import "./user-profile-bio-card.css";

static/css/v3/mailing-list-activity-card.css

@@ -0,0 +1,25 @@
+.mailing-list-activity-card__mailing-items {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    width: 100%;
+    gap: var(--space-large);
+}
+
+.mailing-list-activity-card__date {
+    color: var(--color-text-secondary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-default);
+    letter-spacing: var(--letter-spacing-tight);
+    width: 80px;
+}
+
+.mailing-list-activity-card__headline {
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-relaxed);
+    letter-spacing: var(--letter-spacing-tight);
+}

static/css/v3/post-card.css

@@ -44,6 +44,15 @@
   letter-spacing: -0.12px;
 }
 
+.post-card__summary {
+  color: var(--color-text-secondary);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-default);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
 .post-card__meta > :not(:first-child)::before {
   content: "•";
   user-select: none;

static/css/v3/user-profile-bio-card.css

@@ -0,0 +1,17 @@
+.bio-card__contributor_role {
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-relaxed);
+    letter-spacing: var(--letter-spacing-tight);
+}
+
+.bio-card__contributor_libraries {
+    color: var(--color-text-secondary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-relaxed);
+    letter-spacing: var(--letter-spacing-tight);
+}

static/css/v3/user-profile-page.css

@@ -0,0 +1,77 @@
+/* ──────── Top Level Container ──────── */
+.user-profile__container {
+    margin-top: var(--space-xl);
+    padding: 0 var(--space-large);
+}
+
+/* ──────── Header row, including profile card and buttons ──────── */
+
+.user-profile__profile-card-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: var(--space-large);
+    align-items: flex-end;
+}
+
+.user-profile__button-group {
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-s);
+    height: fit-content;
+    align-self: flex-end;
+    max-width: 100%;
+    flex-wrap: wrap;
+}
+
+/* ──────── Two Row Card Display ──────── */
+
+.user-profile__profile-content-area {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-large);
+    margin-bottom: var(--space-xl);
+}
+
+
+.user-profile__col {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-large);
+}
+
+/* ──────── Override card width to fill columns ────────*/
+
+.user-profile__profile-content-area .card,
+.user-profile__profile-content-area .card-group {
+    max-width: 100%;
+}
+
+@media (max-width: 767px) {
+    /* ──────── Stack header row on mobile ──────── */
+    .user-profile__profile-card-row {
+        flex-direction: column;
+        gap: var(--space-xl);
+        align-items: flex-start;
+    }
+
+    /* ──────── Collapse to one column on mobile ──────── */
+    .user-profile__profile-content-area {
+        grid-template-columns: 1fr;
+    }
+
+    /* Lift the column wrappers out of the layout so the cards become
+       direct grid children and `order` can interleave them in the
+       single-column cascade. */
+    .user-profile__col {
+        display: contents;
+    }
+
+    .user-profile__bio          { order: 1; }
+    .user-profile__achievements { order: 2; }
+    .user-profile__badges       { order: 3; }
+    .user-profile__github       { order: 4; }
+    .user-profile__posts        { order: 5; }
+    .user-profile__mailing-list { order: 6; }
+    .user-profile__connections  { order: 7; }
+}

templates/includes/icon.html

@@ -109,6 +109,16 @@
     <path d="M1 2.92812L6.7375 2.1375V7.68125H1V2.92812ZM1 13.0719L6.7375 13.8625V8.3875H1V13.0719ZM7.36875 13.9469L15 15V8.3875H7.36875V13.9469ZM7.36875 2.05312V7.68125H15V1L7.36875 2.05312Z" />
   {% elif icon_name == "flag" %}
     <path d="M3 2H13V4H21V18H11V16H5V22H3V2ZM5 14H13V16H19V6H11V4H5V14Z" />
+  {% elif icon_name == "pixel-github" %}
+    <path d="M3.33335 1.33334H6.00002V2.66668H4.66669V4.00001H3.33335V1.33334ZM3.33335 8.00001H2.00002V4.00001H3.33335V8.00001ZM4.66669 9.33334H3.33335V8.00001H4.66669V9.33334ZM6.00002 10.6667V9.33334H4.66669V10.6667H2.00002V9.33334H0.666687V10.6667H2.00002V12H4.66669V14.6667H6.00002V12H7.33335V10.6667H6.00002ZM6.00002 10.6667V12H4.66669V10.6667H6.00002ZM10 2.66668V4.00001H6.00002V2.66668H10ZM12.6667 4.00001H11.3334V2.66668H10V1.33334H12.6667V4.00001ZM12.6667 8.00001V4.00001H14V8.00001H12.6667ZM11.3334 9.33334V8.00001H12.6667V9.33334H11.3334ZM10 10.6667V9.33334H11.3334V10.6667H10ZM10 12H8.66669V10.6667H10V12ZM10 12H11.3334V14.6667H10V12Z" />
+  {% elif icon_name == "pixel-computer" %}
+    <path d="M4.00004 2.66666H2.66671V10.6667H13.3334V2.66666H4.00004ZM12 3.99999V9.33332H4.00004V3.99999H12ZM14.6667 12H1.33337V13.3333H14.6667V12Z" />
+  {% elif icon_name == "pixel-email" %}
+    <path d="M14.6667 2.66666H1.33337V13.3333H14.6667V2.66666ZM2.66671 12V3.99999H13.3334V12H2.66671ZM5.33337 5.33332H4.00004V6.66666H5.33337V7.99999H6.66671V9.33332H9.33337V7.99999H10.6667V6.66666H12V5.33332H10.6667V6.66666H9.33337V7.99999H6.66671V6.66666H5.33337V5.33332Z" />
+  {% elif icon_name == "pixel-slack" %}
+    <path d="M9.99996 1.33334H5.99996V2.66668H4.66663V6.66668H5.99996V2.66668H9.99996V1.33334ZM9.99996 6.66668H5.99996V8.00001H9.99996V6.66668ZM9.99996 2.66668H11.3333V6.66668H9.99996V2.66668ZM2.66663 10.6667H3.99996V9.33334H12V10.6667H3.99996V13.3333H12V10.6667H13.3333V14.6667H2.66663V10.6667Z" />
+  {% elif icon_name == "pixel-pencil" %}
+    <path d="M12 1.33334H10.6667V2.66668H9.33337V4.00001H8.00004V5.33334H6.66671V6.66668H5.33337V8.00001H4.00004V9.33334H2.66671V10.6667H1.33337V14.6667H5.33337V13.3333H6.66671V12H8.00004V10.6667H9.33337V9.33334H10.6667V8.00001H12V6.66668H13.3334V5.33334H14.6667V4.00001H13.3334V2.66668H12V1.33334ZM12 6.66668H10.6667V8.00001H9.33337V9.33334H8.00004V10.6667H6.66671V12H5.33337V10.6667H4.00004V9.33334H5.33337V8.00001H6.66671V6.66668H8.00004V5.33334H9.33337V4.00001H10.6667V5.33334H12V6.66668ZM4.00004 10.6667H2.66671V13.3333H5.33337V12H4.00004V10.6667Z" />
   {% endif %}
 </svg>
 {% endif %}

templates/v3/includes/_mailing_list_activity_card.html

@@ -0,0 +1,24 @@
+{% comment %}
+    Card that displays the latest mailing list activity
+    Inputs:
+        title: str, required - text that appears bolded at the top of the card
+        mailing_list_items: list, required - list of dicts, each with the values (date, headline, url) for linking the mailing list items
+{% endcomment %}
+<div class="basic-card card">
+  <div class="card__header">
+    <span class="card__title">{{ title }}</span>
+  </div>
+  <hr class="card__hr" />
+  <div class="card__column px-large">
+      <div class="mailing-list-activity-card__mailing-items">
+            {% for it in mailing_list_items %}
+                <span class="mailing-list-activity-card__date">{{ it.date|date:"n/d/y" }}</span>
+                <a class="mailing-list-activity-card__headline" href="{{it.url}}">{{ it.headline }}</a>
+            {% endfor %}
+      </div>
+  </div>
+    <hr class="card__hr" />
+    <div class="card__cta_section">
+      {% include 'v3/includes/_button.html' with style='primary' url=primary_button_url label='View all activity' only %}
+    </div>
+</div>

templates/v3/includes/_post_card.html

@@ -47,6 +47,9 @@ <h3 class="post-card__title">{{ item.title }}</h3>
                     </div>
                   {% endif %}
                 </div>
+              {% if item.summary %}
+                <div class="post-card__summary">{{item.summary}}</div>
+              {% endif %}
               {% if item.author and item.author.name %}
                 {% include "v3/includes/_user_profile.html" with author=item.author only %}
               {% endif %}

templates/v3/includes/_user_profile_bio_card.html

@@ -0,0 +1,34 @@
+{% load wagtailmarkdown %}
+{% comment %}
+    Card for displaying the users bio data on their profile. Accepts markdown content and library contributor_data and displays it in a card layout.
+    Inputs:
+        title:              str, required   - text that appears bolded at the top of the card
+        contributor_data:   dict, required  - a dict of contributions and libraries (i.e. {"author": "beast", "asyncio"})
+        markdown:           str, required   - markdown formatted text that appears in the body of the card. The card handles transforming the text
+        button_url:         str, optional   - url that the button should link to. If not provided, button is not shown
+        button_label:       str, optional   - label for the optional cta button. If not provided, button is not shown.
+{% endcomment %}
+<div class="basic-card card markdown-card">
+  <div class="card__header">
+    <span class="card__title">{{ title }}</span>
+  </div>
+  <hr class="card__hr" />
+  {% if contributor_data %}
+    <div class="card__column px-large">
+    {% for role, libraries in contributor_data.items %}
+        <div>
+            <div class="bio-card__contributor_role">{{ role }}</div>
+            <div class="bio-card__contributor_libraries">{{ libraries|join:', ' }}</div>
+        </div>
+    {% endfor %}
+    </div>
+    <hr class="card__hr" />
+  {% endif %}
+  <div class="card__column markdown-content">{{ markdown|markdown }}</div>
+  {% if button_url and button_label %}
+    <hr class="card__hr" />
+    <div class="card__cta_section">
+      {% include 'v3/includes/_button.html' with url=button_url label=button_label only %}
+    </div>
+  {% endif %}
+</div>

templates/v3/user_profile_page.html

@@ -0,0 +1,59 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}
+  User Profile
+{% endblock %}
+
+{% block extra_head %}
+  {{ block.super }}
+  <link href="{% static 'css/v3/user-profile-page.css' %}" rel="stylesheet" />
+{% endblock %}
+
+{% block content %}
+  <div class="user-profile__container">
+    <div class="user-profile__profile-card-row">
+      {% with user_info as user %}
+      {% include 'v3/includes/_user_card.html' with username=user.user_name avatar_url=user.avatar_url badge_name=user.featured_badge.name badge=user.featured_badge.badge member_since=user.member_since role=user.role flag_emoji='🇺🇸' compact=True %}
+      {% endwith %}
+      <div class="user-profile__button-group">
+        {% include "v3/includes/_button.html" with label="GitHub" url="#" icon_name="pixel-github" icon_position="right" style="secondary" icon_viewbox="0 0 16 16" only %}
+        {% include "v3/includes/_button.html" with label="Website" url="#" icon_name="pixel-computer" icon_position="right" style="secondary" icon_viewbox="0 0 16 16" only %}
+        {% include "v3/includes/_button.html" with label="Email" url="#" icon_name="pixel-email" icon_position="right" style="secondary" icon_viewbox="0 0 16 16" only %}
+        {% include "v3/includes/_button.html" with label="Chat on Slack" url="#" icon_name="pixel-slack" icon_position="right" style="secondary" icon_viewbox="0 0 16 16" only %}
+        {% include "v3/includes/_button.html" with label="Edit Profile" url="#" icon_name="pixel-pencil" icon_position="right" style="secondary" icon_viewbox="0 0 16 16" only %}
+      </div>
+    </div>
+    <div class="user-profile__profile-content-area">
+      <div class="user-profile__col">
+        <div class="user-profile__bio">
+          {% include 'v3/includes/_user_profile_bio_card.html' with title='Bio' markdown=bio contributor_data=contributor_data only %}
+        </div>
+        <div class="user-profile__github">
+          {% with data=github_activity_card_data %}
+            {% include 'v3/includes/_markdown_card.html' with title=data.title markdown=data.markdown_text button_url=data.button_url button_label=data.button_label %}
+          {% endwith %}
+        </div>
+        <div class="user-profile__mailing-list">
+          {% with data=mailing_list_activity_card_data %}
+            {% include 'v3/includes/_mailing_list_activity_card.html' with title=data.title mailing_list_items=data.mailing_list_items %}
+          {% endwith %}
+        </div>
+      </div>
+      <div class="user-profile__col">
+        <div class="user-profile__achievements">
+          {% include "v3/includes/_achievement_card.html" with achievements=achievements_data.achievements primary_button_url="https://www.example.com" %}
+        </div>
+        <div class="user-profile__badges">
+          {% include "v3/includes/_badges_card.html" with cta_url="#" cta_label="Explore available badges and how to earn them" badges=demo_badges %}
+        </div>
+        <div class="user-profile__posts">
+          {% include "v3/includes/_post_card.html" with heading="Posts" items=posts variant="card" theme="teal" primary_cta_label=profile_post_cta_label primary_cta_url=profile_post_cta_url %}
+        </div>
+        <div class="user-profile__connections">
+          {% include "v3/includes/_account_connections_card.html" with connections=account_connections_none_connected %}
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock %}