Skip to content

Commit 2754c3d

Browse files
AntoineAugustiptitfred
AntoineAugusti
and
ptitfred
authored
Espace utilisateur : ajustements UX pour informations importantes (#5246)
Co-authored-by: Frédéric Menou <frederic.menou@transport.data.gouv.fr>
1 parent 01ea938 commit 2754c3d

14 files changed

Lines changed: 291 additions & 240 deletions

File tree

‎apps/transport/client/stylesheets/reuser_space.scss‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,25 +43,43 @@
4343
}
4444

4545
.action-panel {
46-
display: flex;
47-
flex-direction: column;
46+
display: grid;
47+
grid-template-rows: min-content 1fr;
4848

4949
img.picto {
50-
height: 40px;
51-
width: 55px;
52-
padding-right: 12px;
53-
vertical-align: middle;
50+
height: 48px;
51+
width: 48px;
5452
}
5553

56-
.action-text {
57-
flex-grow: 1;
54+
h4 {
55+
cursor: pointer;
56+
margin-bottom: 0;
5857
display: flex;
59-
flex-direction: column;
60-
justify-content: center;
58+
align-items: center;
59+
gap: 1rem;
60+
}
61+
62+
.action-panel-content {
63+
display: grid;
64+
grid-template-rows: 1fr min-content;
65+
justify-items: center;
66+
align-items: first baseline;
67+
margin-top: var(--space-s);
68+
gap: var(--space-s);
69+
70+
.action-text {
71+
display: flex;
72+
flex-direction: column;
73+
gap: var(--space-xs);
74+
}
75+
76+
a.button {
77+
margin: unset;
78+
}
6179
}
6280

63-
.action-button {
64-
margin: var(--space-xs) auto 0 auto;
81+
.action-panel-content.hide {
82+
display: none;
6583
}
6684
}
6785

apps/transport/lib/transport_web/templates/espace_producteur/_urgent_issues.html.heex renamed to apps/transport/lib/transport_web/templates/espace_producteur/_important_information.html.heex

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<% show_recent_features = Date.utc_today().day in 1..7 %>
2-
<div :if={show_urgent_issues?(@checks) or show_recent_features} data-name="urgent-issues">
3-
<h2 :if={@mode == :producer}>{dgettext("espace-producteurs", "Urgent issues on your resources")}</h2>
4-
<h2 :if={@mode == :reuser}>{dgettext("reuser-space", "Urgent issues on resources you follow")}</h2>
2+
<div :if={show_important_information?(@checks) or show_recent_features} data-name="important-information">
3+
<h2 :if={@mode == :producer}>{dgettext("espace-producteurs", "Important information regarding your resources")}</h2>
4+
<h2 :if={@mode == :reuser}>{dgettext("reuser-space", "Important information on resources you follow")}</h2>
55
<div class="panel">
6-
<p>{dgettext("espace-producteurs", "The following urgent resource issues require your attention.")}</p>
6+
<p>{dgettext("espace-producteurs", "The following information require your attention.")}</p>
77
<table class="table small-padding sorted_table">
88
<thead>
99
<tr>
1010
<th class="sort">{dgettext("espace-producteurs", "Dataset")}</th>
1111
<th>{dgettext("espace-producteurs", "Resource")}</th>
12-
<th class="sort">{dgettext("espace-producteurs", "Issue")}</th>
12+
<th class="sort">{dgettext("espace-producteurs", "Information")}</th>
1313
<th class="action-column">{dgettext("espace-producteurs", "Actions")}</th>
1414
</tr>
1515
</thead>
@@ -22,7 +22,7 @@
2222
href={page_path(@conn, :nouveautes)}
2323
class="button-outline primary small"
2424
data-tracking-category="espace_producteur"
25-
data-tracking-action="urgent_issues_see_recent_features_button"
25+
data-tracking-action="important_information_see_recent_features_button"
2626
>
2727
<i class="icon fas fa-star"></i>{dgettext("espace-producteurs", "Discover new features")}
2828
</a>
@@ -38,7 +38,7 @@
3838
{%DB.Resource{} = resource, [mv | _]} -> {resource, mv}
3939
discussion -> {discussion, nil}
4040
end %>
41-
<.urgent_issue
41+
<.important_information
4242
issue={issue}
4343
dataset={dataset}
4444
check_name={check_name}

‎apps/transport/lib/transport_web/templates/espace_producteur/edit_dataset.html.heex‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
</div>
3636
</div>
3737
</div>
38-
{render("_urgent_issues.html", datasets: [@dataset], checks: @checks, conn: @conn, mode: :producer)}
38+
{render("_important_information.html", datasets: [@dataset], checks: @checks, conn: @conn, mode: :producer)}
3939
<div>
4040
<table class="table mt-24">
4141
<%= for resource <- @datagouv_dataset["resources"] do %>

‎apps/transport/lib/transport_web/templates/espace_producteur/espace_producteur.html.heex‎

Lines changed: 80 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -5,126 +5,114 @@
55
<div class="container">
66
<h1>{dgettext("espace-producteurs", "Producer space")}</h1>
77

8-
{render("_urgent_issues.html", datasets: @datasets, checks: @checks, conn: @conn, mode: :producer)}
9-
10-
<h2>{dgettext("espace-producteurs", "Actions")}</h2>
11-
<div class="row">
8+
<h2>{dgettext("espace-producteurs", "Available services")}</h2>
9+
<div class="row pb-48">
1210
<div class="panel action-panel">
13-
<div class="publish-header">
14-
<h4>
15-
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-check.svg")} alt="" />
16-
{dgettext("espace-producteurs", "Validate your datasets")}
17-
</h4>
18-
</div>
19-
<div class="action-text">
20-
{dgettext(
21-
"espace-producteurs",
22-
"Before publishing, you can test your data online and check its validity."
23-
)}
24-
</div>
25-
<div class="action-button">
11+
<h4>
12+
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-check.svg")} alt="" />
13+
{dgettext("espace-producteurs", "Validate your datasets")}
14+
</h4>
15+
<div class="action-panel-content">
16+
<div class="action-text">
17+
{dgettext(
18+
"espace-producteurs",
19+
"Before publishing, you can test your data online and check its validity."
20+
)}
21+
</div>
2622
<a href={live_path(@conn, TransportWeb.Live.OnDemandValidationSelectLive)} class="button primary">
2723
{dgettext("espace-producteurs", "Validate a file or a feed")}
2824
</a>
2925
</div>
3026
</div>
3127
<div class="panel action-panel">
32-
<div class="publish-header">
33-
<h4>
34-
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-publier.svg")} alt="" />
35-
{dgettext("espace-producteurs", "Publish a dataset")}
36-
</h4>
37-
</div>
38-
<div class="action-text">
39-
{dgettext(
40-
"espace-producteurs",
41-
"Before we can reference your mobility data on the National Access Point, you need to upload it on data.gouv.fr by publishing a new dataset."
42-
)}<a href="https://doc.transport.data.gouv.fr/administration-des-donnees"><%= dgettext("espace-producteurs", "Adding a dataset guidelines") %></a>
43-
</div>
44-
<div class="action-button">
28+
<h4>
29+
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-publier.svg")} alt="" />
30+
{dgettext("espace-producteurs", "Publish a dataset")}
31+
</h4>
32+
<div class="action-panel-content">
33+
<div class="action-text">
34+
{dgettext(
35+
"espace-producteurs",
36+
"Before we can reference your mobility data on the National Access Point, you need to upload it on data.gouv.fr by publishing a new dataset."
37+
)}<a href="https://doc.transport.data.gouv.fr/administration-des-donnees"><%= dgettext("espace-producteurs", "Adding a dataset guidelines") %></a>
38+
</div>
4539
<a href={dataset_creation_url()} class="button primary">
4640
{dgettext("espace-producteurs", "Publish a new dataset")}
4741
</a>
4842
</div>
4943
</div>
5044
<div class="panel action-panel">
51-
<div class="publish-header">
52-
<h4>
53-
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-bell.svg")} alt="" />
54-
{dgettext("espace-producteurs", "Receive notifications")}
55-
</h4>
56-
</div>
57-
<div class="action-text">
58-
{dgettext(
59-
"espace-producteurs",
60-
"Receive helpful notifications about the data you publish."
61-
)}
62-
</div>
63-
<div class="action-button">
45+
<h4>
46+
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-bell.svg")} alt="" />
47+
{dgettext("espace-producteurs", "Receive notifications")}
48+
</h4>
49+
<div class="action-panel-content">
50+
<div class="action-text">
51+
{dgettext(
52+
"espace-producteurs",
53+
"Receive helpful notifications about the data you publish."
54+
)}
55+
</div>
6456
<a href={espace_producteur_path(@conn, :notifications)} class="button primary">
6557
{dgettext("espace-producteurs", "Manage notifications")}
6658
</a>
6759
</div>
6860
</div>
6961
<div :if={show_proxy_stats_block?(@datasets)} class="panel action-panel">
70-
<div class="publish-header">
71-
<h4>
72-
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-trend.svg")} alt="" />
73-
{dgettext("espace-producteurs", "Your proxy statistics")}
74-
</h4>
75-
</div>
76-
<div class="action-text">
77-
{dgettext(
78-
"espace-producteurs",
79-
"Get access to traffic statistics for your feeds handled by the transport.data.gouv.fr proxy."
80-
)}
81-
</div>
82-
<div class="action-button">
62+
<h4>
63+
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-trend.svg")} alt="" />
64+
{dgettext("espace-producteurs", "Your proxy statistics")}
65+
</h4>
66+
<div class="action-panel-content">
67+
<div class="action-text">
68+
{dgettext(
69+
"espace-producteurs",
70+
"Get access to traffic statistics for your feeds handled by the transport.data.gouv.fr proxy."
71+
)}
72+
</div>
8373
<a href={espace_producteur_path(@conn, :proxy_statistics)} class="button primary">
8474
{dgettext("espace-producteurs", "See statistics")}
8575
</a>
8676
</div>
8777
</div>
8878
<div :if={show_downloads_stats?(@datasets)} class="panel action-panel">
89-
<div class="publish-header">
90-
<h4>
91-
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-trend.svg")} alt="" />
92-
{dgettext("espace-producteurs", "Your download statistics")}
93-
</h4>
94-
</div>
95-
<div class="action-text">
96-
{dgettext(
97-
"espace-producteurs",
98-
"Get access to download statistics for your resources."
99-
)}
100-
</div>
101-
<div class="action-button">
79+
<h4>
80+
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-trend.svg")} alt="" />
81+
{dgettext("espace-producteurs", "Your download statistics")}
82+
</h4>
83+
<div class="action-panel-content">
84+
<div class="action-text">
85+
{dgettext(
86+
"espace-producteurs",
87+
"Get access to download statistics for your resources."
88+
)}
89+
</div>
10290
<a href={espace_producteur_path(@conn, :download_statistics)} class="button primary">
10391
{dgettext("espace-producteurs", "See statistics")}
10492
</a>
10593
</div>
10694
</div>
10795
<div class="panel action-panel">
108-
<div class="publish-header">
109-
<h4>
110-
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-discussions.svg")} alt="" />
111-
{dgettext("espace-producteurs", "Unanswered discussions")}
112-
</h4>
113-
</div>
114-
<div class="action-text">
115-
{dgettext(
116-
"espace-producteurs",
117-
"See unanswered discussions on your datasets."
118-
)}
119-
</div>
120-
<div class="action-button">
96+
<h4>
97+
<img class="picto" src={static_path(@conn, "/images/producteurs/picto-discussions.svg")} alt="" />
98+
{dgettext("espace-producteurs", "Unanswered discussions")}
99+
</h4>
100+
<div class="action-panel-content">
101+
<div class="action-text">
102+
{dgettext(
103+
"espace-producteurs",
104+
"See unanswered discussions on your datasets."
105+
)}
106+
</div>
121107
<a href={espace_producteur_path(@conn, :discussions)} class="button primary">
122108
{dgettext("espace-producteurs", "See unanswered discussions")}
123109
</a>
124110
</div>
125111
</div>
126112
</div>
127113

114+
{render("_important_information.html", datasets: @datasets, checks: @checks, conn: @conn, mode: :producer)}
115+
128116
<h2 class="pt-48">{dgettext("espace-producteurs", "Datasets of your organisation")}</h2>
129117
{live_render(@conn, TransportWeb.Live.UserSpaceDatasetsLive,
130118
session: %{"dataset_ids" => Enum.map(@datasets, & &1.id), "mode" => :producer}
@@ -168,3 +156,13 @@
168156
session: %{"feature" => "producer_space"}
169157
)}
170158
</section>
159+
<script nonce={get_session(@conn, :csp_nonce_value)}>
160+
document.querySelectorAll('.action-panel h4').forEach(header => {
161+
header.addEventListener('click', () => {
162+
const allContents = document.querySelectorAll('.action-panel-content');
163+
allContents.forEach(content => {
164+
content.classList.toggle('hide');
165+
});
166+
});
167+
});
168+
</script>

0 commit comments

Comments
 (0)