Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update styling in release report #1530

Merged
merged 1 commit into from
Dec 9, 2024
Merged

Update styling in release report #1530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions templates/admin/_release_report_top_left_logo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{% load static %}
<div class="absolute left-4 top-4 flex gap-x-2 items-end w-[97%] justify-between">
<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>
{{ version.display_name }}
</div>
</div>
3 changes: 2 additions & 1 deletion templates/admin/library_report_base.html
View file
Open in desktop
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
246 changes: 140 additions & 106 deletions templates/admin/release_report_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
{% 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
class="mt-[3px]"
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 +62,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 +74,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 +99,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 +114,103 @@ <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
class="mt-[3px]"
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] font-semibold overflow-ellipsis overflow-hidden whitespace-nowrap w-full">
{{ author.name }}
</div>
{% endfor %}
<div class="text-[0.7rem]">{{ author.commit_count }} commit{{ author.commit_count|pluralize }}</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] font-semibold overflow-ellipsis overflow-hidden whitespace-nowrap w-full">
{{ item.name }}
</div>
{% endfor %}
<div class="text-[0.7rem]">{{ item.total_count }} post{{ item.total_count|pluralize }}</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,25 +220,26 @@ <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">
<div class="text-[0.8rem] font-semibold overflow-ellipsis overflow-hidden whitespace-nowrap w-full">
{{ item.real_name }}
</div>
<div class="text-[0.7rem]">{{ item.total }}</div>
<div class="text-[0.7rem]">{{ item.total }} message{{ item.total|pluralize }}</div>
</div>
</div>
{% endfor %}
Expand All @@ -237,8 +265,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 +278,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] font-semibold overflow-ellipsis overflow-hidden whitespace-nowrap w-full">
{{ author.name }}
</div>
<div class="text-[0.7rem]">{{ author.commit_count }} commit{{ author.commit_count|pluralize }}</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 mt-0">{{ 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
Loading