Skip to content

Commit

Permalink
Update styling in release report.
Browse files Browse the repository at this point in the history 
- fixes #1527
  • Loading branch information
@brianjp93
brianjp93 committed Dec 9, 2024
1 parent bd10f4c commit c5056b1
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 105 deletions.
7 changes: 7 additions & 0 deletions templates/admin/_release_report_top_left_logo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{% load static %}
<div class="absolute left-4 top-4">
<h3 class="flex items-center m-0 p-0">
<img style="width:1.5rem; margin-right:.5rem;" src="{% static 'img/Boost_Symbol_Transparent.svg' %}">
Boost
</h3>
</div>
3 changes: 2 additions & 1 deletion templates/admin/library_report_base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,11 @@
}

.pdf-page {
padding: 5mm;
padding: 10mm;
height: 180mm;
width: 300mm;
page-break-after: always;
position: relative;
}
</style>
{% endblock css %}
Expand Down
236 changes: 132 additions & 104 deletions templates/admin/release_report_detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
{% extends "admin/library_report_base.html" %}
{% load humanize avatar_tags %}
{% load static %}
{% block content %}
{% with bg_color='bg-gradient-to-tr from-[#7ac3e6]/50 to-[#d9b05e]/50' %}
{% with bg_color='' %}
<div>
<div class="pdf-page grid grid-cols-2 gap-x-4 items-center justify-items-center {{ bg_color }}">
<div class="flex flex-col h-full">
<div class="mb-auto">
<h1>Boost</h1>
<div class="mb-auto flex flex-col gap-y-2">
<h1 class="flex">
<img style="width:3.3rem; margin-right:.5rem;" src="{% static 'img/Boost_Symbol_Transparent.svg' %}">
Boost
</h1>
<div>{{ commit_count|intcomma }} commit{{ commit_count|pluralize }} up through {{ version.display_name }}</div>
<div>{{ lines_added|intcomma }} line{{ lines_added|pluralize }} added, {{ lines_removed|intcomma }} line{{ lines_removed|pluralize }} removed</div>
<div>{{ version_commit_count|intcomma }} new commit{{ version_commit_count|pluralize }} in all library repositories</div>
Expand Down Expand Up @@ -55,7 +59,7 @@ <h1>Boost</h1>
</table>
{% endif %}
</div>
<div class="flex flex-col h-full gap-y-4">
<div class="flex flex-col h-full justify-between">

{% if version.release_report_cover_image and version.release_report_cover_image.url %}
<img
Expand All @@ -67,7 +71,7 @@ <h1>Boost</h1>

{% if contribution_box_graph %}
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-1">
<div class="flex gap-x-1 mx-auto">
{% for week in contribution_box_graph.weeks %}
<div class="flex flex-col gap-y-1">
<div class="h-4 relative">
Expand All @@ -92,7 +96,7 @@ <h1>Boost</h1>
</div>
{% endfor %}
</div>
<div class="flex gap-x-1 text-sm w-full mx-auto">
<div class="flex gap-x-1 text-sm mx-auto">
<div class="mr-1">0 commits</div>
{% for color in contribution_box_graph.colors %}
<div class="h-4 w-4 rounded-sm" style="background-color: {{ color }}">
Expand All @@ -107,83 +111,100 @@ <h1>Boost</h1>
</div>

{% if version.sponsor_message %}
<div class="pdf-page {{ bg_color }}">
<div class="pdf-page !p-16 {{ bg_color }}">
{% include "admin/_release_report_top_left_logo.html" %}
<h2>From the Fiscal Sponsorship Committee</h2>
<div class="w-full h-[85%] dynamic-text">
<div class="w-full h-[80%] dynamic-text">
{{ version.sponsor_message|linebreaksbr }}
</div>
</div>
{% endif %}

<div class="pdf-page grid grid-cols-2 gap-x-4 items-center justify-items-center {{ bg_color }}">
<div class="flex flex-col pdf-page items-center justify-items-center {{ bg_color }}">

<div class="flex flex-col">
<h1 class="mx-auto">Boost {{ version.display_name }}</h1>
<h1 class="flex">
<img style="width:3.3rem; margin-right:.5rem;" src="{% static 'img/Boost_Symbol_Transparent.svg' %}">
Boost {{ version.display_name }}
</h1>
<div class="mx-auto mb-4">{{ version_commit_count|intcomma }} Commit{{ version_commit_count|pluralize }} Across {{ library_count }} Repositories</div>
<div class="flex gap-x-2">
<div>
<div class="grid grid-cols-5 gap-2">
{% for author in top_contributors_release_overall %}
<div class="flex flex-col gap-y-2 w-20 items-center">
{% avatar commitauthor=author %}
<div class="w-full flex flex-col">
<div class="text-[0.6rem] overflow-ellipsis overflow-hidden whitespace-nowrap w-full text-center">
{{ author.name }}
</div>
<div class="text-[0.6rem] mx-auto">({{ author.commit_count }})</div>
</div>
</div>

<div class="flex gap-x-8 justify-around w-full">
<div class="px-4">
<div class="mx-auto mb-6">Top Contributors</div>
<div class="m-auto grid grid-cols-1 gap-2">
{% for author in top_contributors_release_overall %}
<div class="flex flex-row gap-y-2 w-40 items-center">
{% avatar commitauthor=author %}
<div class="w-full flex flex-col ml-2">
<div class="text-[0.8rem] text-bold overflow-ellipsis overflow-hidden whitespace-nowrap w-full">
{{ author.name }}
</div>
{% endfor %}
<div class="text-[0.7rem]">({{ author.commit_count }})</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="flex flex-col">
<h3 class="mx-auto">Most Committed Libraries</h3>
<div id="top-committed-libraries-chart" class="w-full text-center"></div>

<div class="flex flex-col justify-center">
<h3 class="mx-auto">Most Committed Libraries</h3>
<div id="top-committed-libraries-chart" class="w-full text-center"></div>
</div>
</div>
</div>

<div class="pdf-page flex items-center justify-items-center {{ bg_color }}">
<div class="flex flex-col mx-auto">
<h1 class="mx-auto">Mailing List</h1>
<div class="mx-auto mb-4">
There were
{% if mailinglist_total %}
{{ mailinglist_total|intcomma }}
{% else %}
no
{% endif %}
mailing list post{{ mailinglist_total|pluralize }} in version&nbsp;{{ version.display_name }}
</div>
<div class="mx-auto mb-4">
There
{{ mailinglist_contributor_release_count|pluralize:"was,were" }}
{{ mailinglist_contributor_release_count }}
poster{{ mailinglist_contributor_release_count|pluralize }}
in this version. ({{ mailinglist_contributor_new_count }} New)
</div>
<div class="flex gap-x-2 mx-auto">
<div>
<div class="grid grid-cols-5 gap-2">
{% for item in mailinglist_counts %}
<div class="flex flex-col gap-y-2 w-20 items-center">
{% avatar commitauthor=item %}
<div class="w-full flex flex-col">
<div class="text-[0.6rem] overflow-ellipsis overflow-hidden whitespace-nowrap w-full text-center">
{{ item.name }}
</div>
<div class="text-[0.6rem] mx-auto">({{ item.total_count }})</div>
</div>

{% include "admin/_release_report_top_left_logo.html" %}

<div class="flex gap-x-8 justify-around w-full">
<div class="px-4">
<div class="mx-auto mb-6">Top Contributors</div>
<div class="m-auto grid grid-cols-1 gap-2">
{% for item in mailinglist_counts %}
<div class="flex flex-row gap-y-2 w-40 items-center">
{% avatar commitauthor=item %}
<div class="w-full flex flex-col ml-2">
<div class="text-[0.8rem] text-bold overflow-ellipsis overflow-hidden whitespace-nowrap w-full">
{{ item.name }}
</div>
{% endfor %}
<div class="text-[0.7rem]">({{ item.total_count }})</div>
</div>
</div>
{% endfor %}
</div>
</div>

<div class="flex flex-col justify-center">
<h2 class="mx-auto">Mailing List</h2>
<div class="mx-auto mb-4">
There were
{% if mailinglist_total %}
{{ mailinglist_total|intcomma }}
{% else %}
no
{% endif %}
mailing list post{{ mailinglist_total|pluralize }} in version&nbsp;{{ version.display_name }}
</div>
<div class="mx-auto mb-4">
There
{{ mailinglist_contributor_release_count|pluralize:"was,were" }}
{{ mailinglist_contributor_release_count }}
poster{{ mailinglist_contributor_release_count|pluralize }}
in this version. ({{ mailinglist_contributor_new_count }} New)
</div>
</div>
</div>
</div>
{% if wordcloud_base64 %}
<div class="pdf-page flex items-center justify-items-center {{ bg_color }}">

{% include "admin/_release_report_top_left_logo.html" %}

<div class="flex flex-col mx-auto">
<h1 class="mx-auto">Mailing List Word Cloud</h1>
<h2 class="mx-auto">Mailing List Word Cloud</h2>
<div class="flex mx-auto">
<img src="data:image/png;base64,{{ wordcloud_base64 }}" alt="Mailing List Word Cloud" class="w-full">
</div>
Expand All @@ -193,19 +214,20 @@ <h1 class="mx-auto">Mailing List Word Cloud</h1>
{% if slack %}
{% for slack_group in slack %}
<div class="pdf-page flex items-center justify-items-center {{ bg_color }}">
{% include "admin/_release_report_top_left_logo.html" %}
<div class="flex flex-col mx-auto">
<h1 class="mx-auto">Slack Activity</h1>
<div class="flex gap-x-4">
<h2 class="mx-auto">Slack Activity</h2>
<div class="flex gap-x-[6rem]">
{% for slack_item in slack_group %}
<div class="flex flex-col mx-auto gap-y-2">
<div class="font-bold">
Top Contributors in #{{slack_item.channel.name}}
</div>
<div class="flex gap-x-2 mx-auto">
<div class="flex gap-x-2">
<div>
<div class="m-auto grid grid-cols-1 gap-2">
{% for item in slack_item.users %}
<div class="flex flex-row gap-y-2 w-40 items-center ml-6">
<div class="flex flex-row gap-y-2 w-40 items-center">
{% base_avatar image_url=item.image_48 name=item.real_name href=None %}
<div class="w-full flex flex-col ml-2">
<div class="text-[0.8rem] text-bold overflow-ellipsis overflow-hidden whitespace-nowrap w-full">
Expand Down Expand Up @@ -237,8 +259,9 @@ <h1 class="mx-auto">Slack Activity</h1>
{% endfor %}
{% endif %}
<div class="pdf-page flex items-center justify-items-center {{ bg_color }}">
{% include "admin/_release_report_top_left_logo.html" %}
<div class="flex flex-col h-full mx-auto">
<h1 class="mx-auto">Library Index</h1>
<h2 class="mx-auto">Library Index</h2>
<div class="flex flex-col flex-wrap gap-x-4 gap-y-1 text-xs h-5/6">
{% for name in library_names %}
<div class="max-w-[10rem]">
Expand All @@ -249,64 +272,69 @@ <h1 class="mx-auto">Library Index</h1>
</div>
</div>
{% for item in library_data %}
<div class="pdf-page grid grid-cols-2 gap-x-4 items-center justify-items-center {{ bg_color }}">
<div>
<h3>{{ item.library.name }}</h3>
<div>{{ item.library.description }}</div>
</div>
<div class="flex flex-col gap-y-4">
<h4>
There
{{ item.version_count.commit_count|pluralize:"was,were" }}
{{ item.version_count.commit_count }}
commit{{ item.version_count.commit_count|pluralize }}
in release {{ version.display_name }}
</h4>
{% with insertions=item.library_version.insertions deletions=item.library_version.deletions %}
<div class="pdf-page flex flex-col items-center justify-center {{ bg_color }}">
{% include "admin/_release_report_top_left_logo.html" %}
<div class="grid grid-cols-3 gap-x-8 w-full p-4">
<div class="px-4">
<div class="mx-auto mb-6">Top Contributors</div>
<div class="m-auto grid grid-cols-1 gap-2">
{% for author in item.top_contributors_release %}
<div class="flex flex-row gap-y-2 w-40 items-center">
{% avatar commitauthor=author %}
<div class="w-full flex flex-col ml-2">
<div class="text-[0.8rem] text-bold overflow-ellipsis overflow-hidden whitespace-nowrap w-full">
{{ author.name }}
</div>
<div class="text-[0.7rem]">({{ author.commit_count }})</div>
</div>
</div>
{% endfor %}
</div>
</div>

<div class="col-span-2 flex flex-col gap-y-4">
<div>
{{ insertions|intcomma }} line{{ insertions|pluralize }} added, {{ deletions|intcomma }} line{{ deletions|pluralize }} removed
<h2 class="text-orange mb-1">{{ item.library.name }}</h2>
<div>{{ item.library.description }}</div>
</div>
{% endwith %}
{% with count=item.new_contributors_count.count %}
{% if count >= 1 %}
<div class="flex flex-col gap-y-1">
<div>
There {{ count|pluralize:"was,were" }} {{ count }} new contributor{{ count|pluralize }} this release!
There
{{ item.version_count.commit_count|pluralize:"was,were" }}
{{ item.version_count.commit_count }}
commit{{ item.version_count.commit_count|pluralize }}
in release {{ version.display_name }}
</div>
{% endif %}
{% endwith %}
<div>
There {{ item.issues.opened|pluralize:"was,were" }} {{ item.issues.opened }} issue{{ item.issues.opened|pluralize }} opened.
There {{ item.issues.closed|pluralize:"was,were" }} {{ item.issues.closed }} issue{{ item.issues.closed|pluralize }} closed.
</div>
<div>
<div class="mb-2">Top Contributors</div>
<div class="grid grid-cols-5 gap-2 flex-wrap">
{% for author in item.top_contributors_release %}
<div class="flex flex-col gap-y-2 w-20 items-center">
{% avatar commitauthor=author %}
<div class="w-full flex flex-col justify-center items-center">
<div class="text-[0.6rem] overflow-ellipsis overflow-hidden whitespace-nowrap w-full text-center">
{{ author.name }}
</div>
<div class="text-[0.6rem]">({{ author.commit_count }})</div>
</div>
{% with insertions=item.library_version.insertions deletions=item.library_version.deletions %}
<div>
{{ insertions|intcomma }} line{{ insertions|pluralize }} added, {{ deletions|intcomma }} line{{ deletions|pluralize }} removed
</div>
{% endfor %}
{% endwith %}
{% with count=item.new_contributors_count.count %}
{% if count >= 1 %}
<div>
There {{ count|pluralize:"was,were" }} {{ count }} new contributor{{ count|pluralize }} this release!
</div>
{% endif %}
{% endwith %}
<div>
There {{ item.issues.opened|pluralize:"was,were" }} {{ item.issues.opened }} issue{{ item.issues.opened|pluralize }} opened.
There {{ item.issues.closed|pluralize:"was,were" }} {{ item.issues.closed }} issue{{ item.issues.closed|pluralize }} closed.
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="pdf-page {{ bg_color }}" style="page-break-after: avoid;">This is the last page</div>
<script>
var options = {
series: [{
name: 'Commits',
data: [{% for library in top_libraries_for_version|slice:":5" %}{{library.commit_count}}, {% endfor %}]
}],
chart: {
height: 300,
height: 400,
type: 'bar',
foreColor: '#373d3f',
background: '#ffffff00',
Expand Down

0 comments on commit c5056b1

Please sign in to comment.