Skip to content

POC: Prototype of updated snap details page #5381

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

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+544 −20
Draft

POC: Prototype of updated snap details page #5381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5bcb269
POC snap details page updates
bartaz Sep 17, 2025
3980989
Enable paper backround
bartaz Oct 2, 2025
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
2 changes: 1 addition & 1 deletion templates/_base-layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
<link rel="author" href="/humans.txt" />
</head>

<body class="l-site {% if is_docs %}is-paper{% endif %}">
<body class="l-site is-paper">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCGXHQS"
height="0" width="0" style="display: none; visibility: hidden;"></iframe></noscript>
Expand Down
130 changes: 130 additions & 0 deletions templates/store/_package_header.poc.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
{%- from 'store/_developer_info.jinja' import developer_info -%}
{%- from 'store/_publisher_info.jinja' import publisher_info -%}


{%- macro package_icon_poc(
package_title,
icon_url,
image) -%}
{% if icon_url %}
{% if icon_url.startswith("blob") %}
<img class=""
src="{{ icon_url | safe }}"
width="120"
height="120"
data-live="icon" />
{% else %}
{{ image(url=icon_url,
alt=package_title,
width=120,
height=120,
hi_def=True,
loading="eager",
attrs={"class": "", "data-live": "icon"}) | safe
}}
{% endif %}
{% else %}
<img class="p-snap-heading__icon"
src="https://assets.ubuntu.com/v1/be6eb412-snapcraft-missing-icon.svg"
alt=""
width=120,
height=120,
data-live="icon" />
{% endif %}
{%- endmacro -%}


{%- macro package_header_data_poc(
package_title,
icon_url,
developer,
categories,
image,
display_name,
username,
publisher,
developer_validation,
STAR_DEVELOPER,
VERIFIED_PUBLISHER) -%}

<div class="p-snap-heading__title">
<h1 class="p-snap-heading__name" data-live="title">{{ package_title }}</h1>

{# TODO:
Extract the section below as own slot, to avoid dependency on a lot of publisher data?
#}
<div class="u-hide--medium u-hide--large">
{% if developer %}
{{ developer_info(name=developer[0], url=developer[1]) }}
{% endif %}
{{ publisher_info(publisher, username, developer_validation, display_name, VERIFIED_PUBLISHER, STAR_DEVELOPER) }}

</div>
<ul class="p-inline-list--vertical-divider">
{% if developer %}
<li class="p-inline-list__item u-hide--small">{{ developer_info(name=developer[0], url=developer[1]) }}</li>
{% endif %}
<li class="p-inline-list__item u-hide--small">{{ publisher_info(publisher, username, developer_validation, display_name, VERIFIED_PUBLISHER, STAR_DEVELOPER) }}</li>
{% for category in categories %}
<li class="p-inline-list__item">
<a href="/search?categories={{ category.slug }}">{{ category.name }}</a>
</li>
{% endfor %}
</ul>
</div>
{%- endmacro -%}




{#
Context variables needed:

Snap data:
snap_title: Title of the snap
icon_url: URL of the icon
categories: List of categories with slug/name

Publisher data:
username: Publisher's username
publisher: Publisher object (used in display_name)
developer: Tuple/List – name and URL
developer_validation: Status string

Other:
image: template function
display_name: template function
VERIFIED_PUBLISHER: const (value of developer_validation)
STAR_DEVELOPER: const (value of developer_validation)
#}

{%- macro package_header_poc() -%}
{%- set buttons_content = caller('buttons') -%}
{%- set has_buttons_content = buttons_content|trim|length > 0 -%}
<div class="grid-row">
<div class="grid-col-2">
{{ package_icon_poc(package_title, icon_url, image) }}
</div>
<div class="grid-col-6">
<div class="p-snap-heading p-section--shallow">
{{ package_header_data_poc(package_title=snap_title,
icon_url=icon_url,
developer=developer,
categories=categories,
image=image,
display_name=display_name,
username=username,
publisher=publisher,
developer_validation=developer_validation,
STAR_DEVELOPER=STAR_DEVELOPER,
VERIFIED_PUBLISHER=VERIFIED_PUBLISHER) }}

</div>
{%- if has_buttons_content -%}
<div class="">{{ buttons_content }}</div>
{%- endif -%}
</div>
</div>

{%- endmacro -%}

28 changes: 15 additions & 13 deletions templates/store/snap-details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends "_layout.html" %}
{% from "store/_package_header.jinja" import package_header with context %}
{% from "store/_package_header.poc.jinja" import package_header_poc with context %}

{% block meta_copydoc %}{% endblock %}

Expand Down Expand Up @@ -88,8 +88,7 @@
</div>
</div>
{% endif %}
<div class="row">
{%- call(slot) package_header() -%}
{%- call(slot) package_header_poc() -%}
{%- if slot == 'buttons' -%}
<button
class="p-button p-snap-install-buttons__versions{% if is_preview %} p-tooltip p-tooltip--btm-right{% endif %}"
Expand Down Expand Up @@ -142,7 +141,6 @@
{% endif %}
{%- endif -%}
{%- endcall -%}
</div>
</div>

{% include "store/snap-details/_channel_map.html" %}
Expand All @@ -155,12 +153,8 @@

<div class="p-strip is-shallow u-no-padding--top">
<div class="u-fixed-width"><hr></div>
<div class="row">
<div class="col-8 u-text-wrap">
{% if summary or is_preview %}<h4 class="p-heading--2" data-live="summary">{{ summary }}</h4>{% endif %}
<div data-live="description">{{ description | safe }}</div>
</div>
<div class="col-4">
<div class="grid-row">
<div class="col-2 u-text-wrap">
{% include "store/snap-details/_details.html" %}

{# EMBEDDABLE CARD SECTION - hidden in preview #}
Expand All @@ -172,6 +166,10 @@ <h4 class="p-heading--5">Share this snap</h4>
{% include "store/snap-details/_embedded_card_modal.html" %}
{% endif %}
</div>
<div class="col-6">
{% if summary or is_preview %}<h4 class="p-heading--2" data-live="summary">{{ summary }}</h4>{% endif %}
<div data-live="description">{{ description | safe }}</div>
</div>
</div>
</div>

Expand All @@ -190,15 +188,17 @@ <h4 class="p-heading--5">Share this snap</h4>
<div class="u-fixed-width">
<h4 class="p-heading--2">Where people are using {{ snap_title }}</h4>
</div>
<div class="row--25-75">
<div class="col">
<div class="row {% if normalized_os %}u-equal-height{% endif %}">
{% if countries %}
<div class="{% if normalized_os %}col-8{% else %}col-12{% endif %} js-snap-map-holder" data-live="installed_base_by_country_percent">
<div class="{% if normalized_os %}col-6{% else %}col-9{% endif %} js-snap-map-holder" data-live="installed_base_by_country_percent">
<div id="js-snap-map" class="snapcraft-territories"></div>
</div>
{% endif %}
{% if normalized_os %}
{% if normalized_os|length > 21 %}
<div class="col-4 p-show-more is-collapsed is-deep" data-js="js-show-more">
<div class="col-3 p-show-more is-collapsed is-deep" data-js="js-show-more">
<div class="js-sschart-holder" data-live="weekly_installed_base_by_operating_system_normalized">
<h4>Users by distribution (log)</h4>
<div class="snapcraft-distro-chart">
Expand Down Expand Up @@ -226,7 +226,7 @@ <h4>Users by distribution (log)</h4>
</div>
</div>
{% else %}
<div class="col-4 js-snap-distro-chart-holder"
<div class="col-3 js-snap-distro-chart-holder"
data-live="weekly_installed_base_by_operating_system_normalized">
<h4 class="p-heading--5">Users by distribution (log)</h4>
<div class="snapcraft-distro-chart">
Expand All @@ -247,6 +247,8 @@ <h4 class="p-heading--5">Users by distribution (log)</h4>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
Expand Down
Loading