Skip to content

Commit 047ab9a

Browse files
jarofgreenjarofgreen
committed
Redesign List Page.
#278
1 parent aa41409 commit 047ab9a

File tree

2 files changed

+130
-63
lines changed

2 files changed

+130
-63
lines changed

‎prefix_finder/frontend/static/css/main.css‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -926,6 +926,7 @@ fieldset {
926926
font-weight: 400;
927927
}
928928
}
929+
929930
.single-content__header {
930931
background-color: #00a6ab;
931932
}
@@ -947,6 +948,11 @@ fieldset {
947948
.single-content__header .button {
948949
float: right;
949950
}
951+
952+
.single-content__header_warning {
953+
background-color: lightcoral;
954+
}
955+
950956
@media (min-width: 64em) {
951957
.single-content__main {
952958
float: left;
@@ -1005,7 +1011,6 @@ fieldset {
10051011

10061012
.single-categories__item {
10071013
padding: 15px;
1008-
background-color: rgba(0, 0, 0, 0.1);
10091014
}
10101015
@media (min-width: 64em) {
10111016
.single-categories__item {
@@ -1026,12 +1031,6 @@ fieldset {
10261031
.single-categories__item p span {
10271032
font-weight: 100;
10281033
}
1029-
.single-categories--coverage {
1030-
background-color: rgba(0, 166, 171, 0.1);
1031-
}
1032-
.single-categories--sectors {
1033-
background-color: rgba(227, 168, 48, 0.1);
1034-
}
10351034

10361035
.single-suggest {
10371036
padding: 20px;
@@ -1093,25 +1092,28 @@ fieldset {
10931092
.single-sidebar__block p:last-child {
10941093
padding-bottom: 20px;
10951094
}
1096-
.single-sidebar--dark {
1095+
.single-content--dark {
10971096
background-color: rgba(0, 0, 0, 0.7);
1097+
padding: 5px 20px;
10981098
}
1099-
.single-sidebar--dark h2, .single-sidebar--dark p {
1099+
.single-content--dark h2, .single-content--dark p {
11001100
color: white;
11011101
}
1102-
.single-sidebar--dark code {
1102+
.single-content--dark code {
11031103
padding: 4px;
11041104
background-color: rgba(255, 255, 255, 0.1);
11051105
font-family: "Lucida Console", "Courier New", monospace;
11061106
color: white;
11071107
}
1108-
.single-sidebar--dark pre {
1108+
.single-content--dark pre {
11091109
background-color: rgba(255, 255, 255, 0.1);
11101110
padding-top: 20px;
11111111
padding-bottom: 5px;
1112+
padding-left: 10px;
1113+
padding-right: 10px;
11121114
margin-bottom: 20px;
11131115
}
1114-
.single-sidebar--dark pre code {
1116+
.single-content--dark pre code {
11151117
background-color: transparent;
11161118
}
11171119

@@ -1409,3 +1411,6 @@ fieldset {
14091411
.sidebar .chosen-drop {
14101412
width: 100%;
14111413
}
1414+
.align-right {
1415+
text-align: right;
1416+
}

‎prefix_finder/frontend/templates/list.html‎

Lines changed: 113 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -8,80 +8,142 @@
88
{% include "sidebar.html" with sidebar_show_download_links=False %}
99

1010
<div class="main-content single-content">
11-
<header class="single-content__header">
11+
12+
<header class="single-content__header {% if org_list.deprecated %}single-content__header_warning{% endif %}">
1213
<a href="{{ org_list.url }}" class="button" target="_blank"><i class="material-icons" title="Visit website for this list">launch</i></a>
1314
<h1>{{ org_list.name.en }} <span>({{ org_list.code }})</span></h1>
15+
16+
{% if org_list.deprecated %}
17+
<h1>This record is deprecated and should only be used for interpreting older datasets.</h1>
18+
{% endif %}
1419
</header>
1520

16-
<div class="single-content__sidebar single-sidebar">
17-
<div class="single-sidebar__block quality-chart quality-chart--high" data-chart="{{ org_list.quality }}">
18-
<div id="quality-chart-container"></div>
21+
22+
<div class="single-content__block single-description">
23+
<h2>Description</h2>
24+
<p>{{ org_list.description.en|urlize|linebreaks }}</p>
25+
</div>
26+
27+
{% if not org_list.deprecated %}
28+
<div class="single-meta-info__instructions">
29+
{% if org_list.access.onlineAccessDetails %}
30+
<h3>Search options</h3>
31+
<p>{{ org_list.access.onlineAccessDetails|urlize|linebreaks }}</p>
32+
{% endif %}
33+
<h3>Find and use identifiers</h3>
34+
{% if org_list.access.guidanceOnLocatingIds %}
35+
<p>{{ org_list.access.guidanceOnLocatingIds|urlize|linebreaks }}</p>
36+
{% endif %}
37+
{% if org_list.access.publicDatabase %}
38+
<p class="align-right">
39+
<a href="{{ org_list.access.publicDatabase }}" target="_blank" class="button button--main-color">
40+
Search the list here <i class="material-icons" title="Visit website for this list">launch</i>
41+
</a>
42+
</p>
43+
{% elif org_list.url %}
44+
<p class="align-right">
45+
<a href="{{ org_list.url }}" target="_blank" class="button button--main-color">
46+
Visit the website <i class="material-icons" title="Visit website for this list">launch</i>
47+
</a>
48+
</p>
49+
{% endif %}
1950
</div>
20-
<div class="quality-chart__list-type quality-chart--high">
21-
<p>List Type: <span>{{ org_list.listType }}</span></p>
22-
</div>
2351

24-
<div class="single-sidebar__block single-sidebar--dark">
52+
<div class="single-content__block single-content--dark">
2553
<h2>How to use</h2>
26-
<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>
54+
<p>The code for this list is <code>{{ org_list.code }}</code>.</p>
55+
<p>When you have located the organization you wish to identify in this list, you should either:</p>
2756
<p>Enter it in an identifier database field prefixed with <code>{{ org_list.code }}</code>.</p>
2857
<pre>
2958
<code>{{ org_list.code }}-[ IDENTIFIER ]</code>
3059
</pre>
3160
{% if org_list.access.exampleIdentifiers|length >= 1 %}
32-
{% if org_list.access.exampleIdentifiers|length == 1 %}
33-
<h2>Example</h2>
34-
{% else %}
35-
<h2>Examples</h2>
36-
{% endif %}
37-
<pre>
38-
{% for x in org_list.access.exampleIdentifiers|split_examples:","|slice:":3" %}
61+
{% if org_list.access.exampleIdentifiers|length == 1 %}
62+
<h2>Example</h2>
63+
{% else %}
64+
<h2>Examples</h2>
65+
{% endif %}
66+
<pre>
67+
{% for x in org_list.access.exampleIdentifiers|split_examples:","|slice:":3" %}
3968
<code>{{ org_list.code }}-{{ x }}</code>
40-
{% endfor %}
41-
</pre>
69+
{% endfor %}
70+
</pre>
4271
{% endif %}
4372
<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>
4473
</div>
45-
</div>
74+
{% endif %}
4675

47-
<div class="single-content__main">
4876

49-
<div class="single-content__block single-description">
50-
<h2>Description</h2>
51-
<p>{{ org_list.description.en|urlize|linebreaks }}</p>
52-
</div>
77+
<div class="single-content__block single-meta-info">
78+
<ul class="single-meta-info__categories single-categories">
79+
<li class="single-categories__item">
80+
<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>
81+
</li>
82+
{% if org_list.subnationalCoverage %}
83+
<li class="single-categories__item">
84+
<p>Subnational jurisdiction: {% for code in org_list.subnationalCoverage %}<span>{{ code }}{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
85+
</li>
86+
{% endif %}
5387

54-
<div class="single-content__block single-meta-info">
55-
<ul class="single-meta-info__categories single-categories">
56-
<li class="single-categories__item single-categories--coverage">
57-
<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>
88+
{% if org_list.structure %}
89+
<li class="single-categories__item">
90+
<p>Legal structure: {% for code in org_list.structure %}<span>{{ code }}{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
5891
</li>
92+
{% endif %}
5993

60-
{% if org_list.sector %}
61-
<li class="single-categories__item single-categories--sectors">
62-
<p>Sectors: {% for x in org_list.sector %}<span>{{ x }}{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
63-
</li>
64-
{% endif %}
65-
</ul>
94+
{% if org_list.sector %}
95+
<li class="single-categories__item">
96+
<p>Sectors: {% for x in org_list.sector %}<span>{{ x }}{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
97+
</li>
98+
{% endif %}
6699

67-
<div class="single-meta-info__instructions">
68-
{% if org_list.access.onlineAccessDetails %}
69-
<h3>Search options</h3>
70-
<p>{{ org_list.access.onlineAccessDetails|urlize|linebreaks }}</p>
71-
{% endif %}
72-
<h3>Find and use identifiers</h3>
73-
{% if org_list.access.guidanceOnLocatingIds %}
74-
<p>{{ org_list.access.guidanceOnLocatingIds|urlize|linebreaks }}</p>
75-
{% else %}
76-
<p><a href="{{ org_list.url }}" target="_blank">Visit the website.</a></p>
77-
{% endif %}
78-
</div>
79-
</div>
100+
<li class="single-categories__item">
101+
<p>List Type: <span>{{ org_list.listType }}</span></p>
102+
</li>
80103

81-
<div class="single-content__block single-suggest">
82-
<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>
83-
<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>
84-
</div>
104+
<!-- access_availableOnline Access - Available online? boolean View -->
105+
<!-- access_onlineAccessDetails Access - Online access details string View -->
106+
<!-- access_publicDatabase Access - List URL string View -->
107+
<!-- access_guidanceOnLocatingIds Access - How to locate identifiers string View -->
108+
<!-- access_exampleIdentifiers Access - Example identifiers string View -->
109+
<!-- access_languages Access - Languages list-strings View -->
110+
111+
<!-- data_availability Dataset access - Data availability list-strings View -->
112+
<!-- data_dataAccessDetails Dataset access - Data access details string View -->
113+
<!-- data_features Dataset access - Dataset features list-strings View -->
114+
<!-- data_licenseStatus Dataset access - License status string View -->
115+
<!-- data_licenseDetails Dataset access - License details string View -->
116+
117+
<!-- meta_source Meta - Source string View -->
118+
<!-- meta_lastUpdated Meta - Last updated string View -->
119+
120+
121+
{% if org_list.links.opencorporates %}
122+
<li class="single-categories__item">
123+
<p>Open Corporates Link: <span><a href="{{ org_list.links.opencorporates }}">{{ org_list.links.opencorporates }}</a></span></p>
124+
</li>
125+
{% endif %}
126+
127+
{% if org_list.links.wikipedia %}
128+
<li class="single-categories__item">
129+
<p>Wikipedia page: <span><a href="{{ org_list.links.wikipedia }}">{{ org_list.links.wikipedia }}</a></span></p>
130+
</li>
131+
{% endif %}
132+
133+
{% if org_list.formerPrefixes %}
134+
<li class="single-categories__item">
135+
<p>Former list codes: {% for x in org_list.formerPrefixes %}<span>{{ x }}{% if not forloop.last %},{% endif %} </span>{% endfor %}</p>
136+
</li>
137+
{% endif %}
138+
139+
140+
</ul>
141+
142+
</div>
143+
144+
<div class="single-content__block single-suggest">
145+
<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>
146+
<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>
85147
</div>
86148
</div>
87149
</main>

0 commit comments

Comments
 (0)