Skip to content

Redesign List Page. #278

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 2 commits into from
Sep 18, 2025
Merged

Redesign List Page. #278

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
aa41409
Rename Back button on list pages
jarofgreen Sep 17, 2025
047ab9a
Redesign List Page.
jarofgreen Mar 12, 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
29 changes: 17 additions & 12 deletions prefix_finder/frontend/static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -926,6 +926,7 @@ fieldset {
font-weight: 400;
}
}

.single-content__header {
background-color: #00a6ab;
}
Expand All @@ -947,6 +948,11 @@ fieldset {
.single-content__header .button {
float: right;
}

.single-content__header_warning {
background-color: lightcoral;
}

@media (min-width: 64em) {
.single-content__main {
float: left;
Expand Down Expand Up @@ -1005,7 +1011,6 @@ fieldset {

.single-categories__item {
padding: 15px;
background-color: rgba(0, 0, 0, 0.1);
}
@media (min-width: 64em) {
.single-categories__item {
Expand All @@ -1026,12 +1031,6 @@ fieldset {
.single-categories__item p span {
font-weight: 100;
}
.single-categories--coverage {
background-color: rgba(0, 166, 171, 0.1);
}
.single-categories--sectors {
background-color: rgba(227, 168, 48, 0.1);
}

.single-suggest {
padding: 20px;
Expand Down Expand Up @@ -1093,25 +1092,28 @@ fieldset {
.single-sidebar__block p:last-child {
padding-bottom: 20px;
}
.single-sidebar--dark {
.single-content--dark {
background-color: rgba(0, 0, 0, 0.7);
padding: 5px 20px;
}
.single-sidebar--dark h2, .single-sidebar--dark p {
.single-content--dark h2, .single-content--dark p {
color: white;
}
.single-sidebar--dark code {
.single-content--dark code {
padding: 4px;
background-color: rgba(255, 255, 255, 0.1);
font-family: "Lucida Console", "Courier New", monospace;
color: white;
}
.single-sidebar--dark pre {
.single-content--dark pre {
background-color: rgba(255, 255, 255, 0.1);
padding-top: 20px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
}
.single-sidebar--dark pre code {
.single-content--dark pre code {
background-color: transparent;
}

Expand Down Expand Up @@ -1409,3 +1411,6 @@ fieldset {
.sidebar .chosen-drop {
width: 100%;
}
.align-right {
text-align: right;
}
164 changes: 113 additions & 51 deletions prefix_finder/frontend/templates/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,80 +8,142 @@
{% include "sidebar.html" with sidebar_show_download_links=False %}

<div class="main-content single-content">
<header class="single-content__header">

<header class="single-content__header {% if org_list.deprecated %}single-content__header_warning{% endif %}">
<a href="{{ org_list.url }}" class="button" target="_blank"><i class="material-icons" title="Visit website for this list">launch</i></a>
<h1>{{ org_list.name.en }} <span>({{ org_list.code }})</span></h1>

{% if org_list.deprecated %}
<h1>This record is deprecated and should only be used for interpreting older datasets.</h1>
{% endif %}
</header>

<div class="single-content__sidebar single-sidebar">
<div class="single-sidebar__block quality-chart quality-chart--high" data-chart="{{ org_list.quality }}">
<div id="quality-chart-container"></div>

<div class="single-content__block single-description">
<h2>Description</h2>
<p>{{ org_list.description.en|urlize|linebreaks }}</p>
</div>

{% if not org_list.deprecated %}
<div class="single-meta-info__instructions">
{% if org_list.access.onlineAccessDetails %}
<h3>Search options</h3>
<p>{{ org_list.access.onlineAccessDetails|urlize|linebreaks }}</p>
{% endif %}
<h3>Find and use identifiers</h3>
{% if org_list.access.guidanceOnLocatingIds %}
<p>{{ org_list.access.guidanceOnLocatingIds|urlize|linebreaks }}</p>
{% endif %}
{% if org_list.access.publicDatabase %}
<p class="align-right">
<a href="{{ org_list.access.publicDatabase }}" target="_blank" class="button button--main-color">
Search the list here <i class="material-icons" title="Visit website for this list">launch</i>
</a>
</p>
{% elif org_list.url %}
<p class="align-right">
<a href="{{ org_list.url }}" target="_blank" class="button button--main-color">
Visit the website <i class="material-icons" title="Visit website for this list">launch</i>
</a>
</p>
{% endif %}
</div>
<div class="quality-chart__list-type quality-chart--high">
<p>List Type: <span>{{ org_list.listType }}</span></p>
</div>

<div class="single-sidebar__block single-sidebar--dark">
<div class="single-content__block single-content--dark">
<h2>How to use</h2>
<p>The code for this list is <br/><code>{{ org_list.code }}</code>. When you have located the organization you wish to identify in this list, you should either:</p>
<p>The code for this list is <code>{{ org_list.code }}</code>.</p>
<p>When you have located the organization you wish to identify in this list, you should either:</p>
<p>Enter it in an identifier database field prefixed with <code>{{ org_list.code }}</code>.</p>
<pre>
<code>{{ org_list.code }}-[ IDENTIFIER ]</code>
</pre>
{% if org_list.access.exampleIdentifiers|length >= 1 %}
{% if org_list.access.exampleIdentifiers|length == 1 %}
<h2>Example</h2>
{% else %}
<h2>Examples</h2>
{% endif %}
<pre>
{% for x in org_list.access.exampleIdentifiers|split_examples:","|slice:":3" %}
{% if org_list.access.exampleIdentifiers|length == 1 %}
<h2>Example</h2>
{% else %}
<h2>Examples</h2>
{% endif %}
<pre>
{% for x in org_list.access.exampleIdentifiers|split_examples:","|slice:":3" %}
<code>{{ org_list.code }}-{{ x }}</code>
{% endfor %}
</pre>
{% endfor %}
</pre>
{% endif %}
<p>Alternatively, use it within a two-part identifier, with <code>{{ org_list.code }}</code> as the 'scheme', and the identifier you have located as the 'identifier' field. </p>
</div>
</div>
{% endif %}

<div class="single-content__main">

<div class="single-content__block single-description">
<h2>Description</h2>
<p>{{ org_list.description.en|urlize|linebreaks }}</p>
</div>
<div class="single-content__block single-meta-info">
<ul class="single-meta-info__categories single-categories">
<li class="single-categories__item">
<p>Coverage: {% for code, title, disabled in org_list.coverage_codes_and_titles %}<span><abbr title="{{ title }}">{{ code }}</abbr>{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
</li>
{% if org_list.subnationalCoverage %}
<li class="single-categories__item">
<p>Subnational jurisdiction: {% for code in org_list.subnationalCoverage %}<span>{{ code }}{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
</li>
{% endif %}

<div class="single-content__block single-meta-info">
<ul class="single-meta-info__categories single-categories">
<li class="single-categories__item single-categories--coverage">
<p>Coverage: {% for code, title, disabled in org_list.coverage_codes_and_titles %}<span><abbr title="{{ title }}">{{ code }}</abbr>{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
{% if org_list.structure %}
<li class="single-categories__item">
<p>Legal structure: {% for code in org_list.structure %}<span>{{ code }}{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
</li>
{% endif %}

{% if org_list.sector %}
<li class="single-categories__item single-categories--sectors">
<p>Sectors: {% for x in org_list.sector %}<span>{{ x }}{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
</li>
{% endif %}
</ul>
{% if org_list.sector %}
<li class="single-categories__item">
<p>Sectors: {% for x in org_list.sector %}<span>{{ x }}{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
</li>
{% endif %}

<div class="single-meta-info__instructions">
{% if org_list.access.onlineAccessDetails %}
<h3>Search options</h3>
<p>{{ org_list.access.onlineAccessDetails|urlize|linebreaks }}</p>
{% endif %}
<h3>Find and use identifiers</h3>
{% if org_list.access.guidanceOnLocatingIds %}
<p>{{ org_list.access.guidanceOnLocatingIds|urlize|linebreaks }}</p>
{% else %}
<p><a href="{{ org_list.url }}" target="_blank">Visit the website.</a></p>
{% endif %}
</div>
</div>
<li class="single-categories__item">
<p>List Type: <span>{{ org_list.listType }}</span></p>
</li>

<div class="single-content__block single-suggest">
<p>You can suggest an edit to our information about this list by <a href="https://github.com/org-id/register/issues/new">posting an issue</a> or <a href="https://github.com/org-id/register/edit/{{ branch }}/lists/{{ org_list.code|lower|split_on:"-"|first }}/{{ org_list.code|lower }}.json">submitting a pull request</a>.</p>
<p>The <a href="http://docs.org-id.guide/en/latest/contribute/#proposing-a-correction-or-update" target="_blank">contributors handbook</a> details how to propose changes to an existing list, and how you can request or propose a new list.</p>
</div>
<!-- access_availableOnline Access - Available online? boolean View -->
<!-- access_onlineAccessDetails Access - Online access details string View -->
<!-- access_publicDatabase Access - List URL string View -->
<!-- access_guidanceOnLocatingIds Access - How to locate identifiers string View -->
<!-- access_exampleIdentifiers Access - Example identifiers string View -->
<!-- access_languages Access - Languages list-strings View -->

<!-- data_availability Dataset access - Data availability list-strings View -->
<!-- data_dataAccessDetails Dataset access - Data access details string View -->
<!-- data_features Dataset access - Dataset features list-strings View -->
<!-- data_licenseStatus Dataset access - License status string View -->
<!-- data_licenseDetails Dataset access - License details string View -->

<!-- meta_source Meta - Source string View -->
<!-- meta_lastUpdated Meta - Last updated string View -->


{% if org_list.links.opencorporates %}
<li class="single-categories__item">
<p>Open Corporates Link: <span><a href="{{ org_list.links.opencorporates }}">{{ org_list.links.opencorporates }}</a></span></p>
</li>
{% endif %}

{% if org_list.links.wikipedia %}
<li class="single-categories__item">
<p>Wikipedia page: <span><a href="{{ org_list.links.wikipedia }}">{{ org_list.links.wikipedia }}</a></span></p>
</li>
{% endif %}

{% if org_list.formerPrefixes %}
<li class="single-categories__item">
<p>Former list codes: {% for x in org_list.formerPrefixes %}<span>{{ x }}{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
</li>
{% endif %}


</ul>

</div>

<div class="single-content__block single-suggest">
<p>You can suggest an edit to our information about this list by <a href="https://github.com/org-id/register/issues/new">posting an issue</a> or <a href="https://github.com/org-id/register/edit/{{ branch }}/lists/{{ org_list.code|lower|split_on:"-"|first }}/{{ org_list.code|lower }}.json">submitting a pull request</a>.</p>
<p>The <a href="http://docs.org-id.guide/en/latest/contribute/#proposing-a-correction-or-update" target="_blank">contributors handbook</a> details how to propose changes to an existing list, and how you can request or propose a new list.</p>
</div>
</div>
</main>
Expand Down
4 changes: 2 additions & 2 deletions prefix_finder/frontend/templates/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
<div class="sidebar__main">
{% if request.resolver_match.url_name == "list" %}
{% if request.META.HTTP_REFERER %}
<a href="{{ request.META.HTTP_REFERER }}" class="button button--main-color button--block"><i class="material-icons">arrow_back</i><span>Back to List</span></a>
<a href="{{ request.META.HTTP_REFERER }}" class="button button--main-color button--block"><i class="material-icons">arrow_back</i><span>Back to results</span></a>
{% else %}
<a href="{% url "results" %}" class="button button--main-color button--block"><i class="material-icons">arrow_back</i><span>Back to List</span></a>
<a href="{% url "results" %}" class="button button--main-color button--block"><i class="material-icons">arrow_back</i><span>Back to results</span></a>
{% endif %}

{% elif request.resolver_match.url_name == "about" %}
Expand Down