Skip to content

Update item page #49

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

Merged
merged 8 commits into from
Mar 27, 2025
Merged

Update item page #49

Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fb575b0
Update item page header
oliverroick Mar 26, 2025
3665b3b
Add item links
oliverroick Mar 26, 2025
91cad73
Add asset display
oliverroick Mar 26, 2025
c4940f7
Style item properties
oliverroick Mar 26, 2025
73bde6d
Stick map to position
oliverroick Mar 26, 2025
c0eaf63
Extend item page from base.html
oliverroick Mar 26, 2025
4c446a4
Skip description from asset props
oliverroick Mar 26, 2025
b0b8403
Update asset title layout
oliverroick Mar 27, 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
82 changes: 72 additions & 10 deletions runtimes/eoapi/stac/eoapi/stac/templates/item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
{% include "header.html" %}
{% extends "base.html" %}

{% if params %}
{% set urlq = url + '?' + params + '&' %}
{% else %}
{% set urlq = url + '?' %}
{% endif %}

{% block content %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light">
{% for crumb in crumbs %}
Expand All @@ -18,20 +20,81 @@
</ol>
</nav>

<h1>Collection Item: {{ response.id }}</h1>
<h1 class="my-4">
<span class="d-block text-uppercase text-muted h6 mb-0">Collection Item:</span>
{{ response.id }}
</h1>

<div class="row">
<div class="col-sm">
<div class="col-md-7">
<h2>Properties</h2>
<ul class="list-unstyled">
<li class="row small mb-1">
<div class="col-3 font-weight-bold">ID</div>
<div class="col-9">
<pre class="mb-0">{{ response.id }}</pre>
</div>
</li>
{% for key, value in response.properties | dictsort %}
<li class="row small mb-1">
<div class="col-3 font-weight-bold">{{ key }}</div>
<div class="col-9">
<pre class="mb-0">{{ value | tojson(2) | trim('"') }}</pre>
</div>
</li>
{% endfor %}
</ul>

<h2 class="mt-5">Assets</h2>
<ul class="list-unstyled">
{% for key, asset in response.assets.items() %}
<li class="mb-4">
<p class="small text-monospace text-muted mb-0">{{ key }}</p>
{% if asset.title %}<p class="mb-0"><b>{{ asset.title }}</b></p>{% endif %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about skipping the title if it is the same as the asset key? I also think it would look good to make the asset key normal size and bolded, then italicize the title or something like that.
image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I'm not pleased with how that looks either. It's very convoluted and I'd like to revisit that at some point, maybe we can get some help from a designer.

In the meantime, I've tried your suggestion and it looks ... ok.

Screenshot 2025-03-27 at 10 16 30 am

I've tried some other options as well.

Option A
Screenshot 2025-03-27 at 10 18 43 am

Option B
Screenshot 2025-03-27 at 10 15 10 am

Option C
Screenshot 2025-03-27 at 10 14 16 am

I like Option A, because it has a clear header. What do you think?

Copy link
Contributor

@hrodmn hrodmn Mar 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Option A looks good to me!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we could get a designer to contribute to https://github.com/developmentseed/stac-fastapi-html-middleware

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Option A looks good to me!

Pushed the update with that option

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we could get a designer to contribute to https://github.com/developmentseed/stac-fastapi-html-middleware

I'll forward the change to the templates 😄

{% if asset.type %}<p class="mb-0">{{ asset.type }}</p>{% endif %}
{% if asset.description %}<p class="mb-0">{{ asset.description }}</p>{% endif %}
<ul class="list-inline">
<li class="list-inline-item"><a href="{{ asset.href }}">Asset link</a></li>
{% if asset.alternate %}
{% for alternate_key, alternate_link in asset.alternate.items() %}
<li class="list-inline-item"><a href="{{ alternate_link.href }}">{{ alternate_link.title or alternate_key }}</a></li>
{% endfor %}
{% endif %}
</ul>
{% if asset.roles and asset.roles|length > 0 %}
<ul class="list-inline">
{% for role in asset.roles %}
<li class="list-inline-item badge badge-light">{{ role }}</li>
{% endfor %}
</ul>
{% endif %}

<details class="mt-2">
<summary>Asset Properties</summary>
{% for asset_key, asset_opt in asset | dictsort if asset_key not in ["title", "type", "href", "roles", "alternate"] %}
<div class="row mb-1 small">
<div class="col-3 font-weight-bold">{{ asset_key }}</div>
<div class="col-9">
<pre class="mb-0">{{ asset_opt | tojson(2) }}</pre>
</div>
</div>
{% else %}
No additional properties for this asset.
{% endfor %}
</details>
</li>
{% endfor %}
</ul>

<h2 class="mt-5">Links</h2>
<ul>
<li><strong>ID:</strong> {{ response.id }}</li>
{% for key, value in response.properties.items() %}
<li><strong>{{ key }}:</strong> {{ value }}</li>
{% for link in response.links %}
<li><a href="{{ link.href }}">{{ link.title or link.rel }}</a></li>
{% endfor %}
</ul>
</div>
<div class="col-sm">
<div id="map" class="rounded" style="width:100%;height:400px;">Loading...</div>
<div class="col-md-5">
<div id="map" class="rounded" style="width:100%; height:calc(-6rem + 100vh); position: sticky; top: 5rem;">Loading...</div>
</div>
</div>

Expand Down Expand Up @@ -97,5 +160,4 @@ <h2>Properties</h2>
}

</script>

{% include "footer.html" %}
{% endblock %}