Skip to content

Commit 65b7195

Browse files
ptitfredptitfred
authored
NeTEx: nouveau rapport de validation (#5393)
1 parent 36605e1 commit 65b7195

24 files changed

Lines changed: 790 additions & 446 deletions

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@import 'components/backoffice';
1010
@import 'components/blog';
1111
@import 'components/choose_file';
12+
@import 'components/colorful-button';
1213
@import 'components/community-resources';
1314
@import 'components/dataset-details';
1415
@import 'components/discussions';

‎apps/transport/client/stylesheets/components/_colorful-button.scss‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/* Colorful link or button
2+
*
3+
* Defaults to blue.
4+
*
5+
* Variant classes:
6+
* - `.valid`: green
7+
* - `.invalid`: red
8+
* - `.striped`: striped background, doesn't change the color
9+
* - `.selected`: highlighted button, white content and colored background, typically used for active page
10+
*/
11+
a.colorful, button.colorful {
12+
--taint: var(--blue);
13+
--light-taint: color-mix(in oklab, var(--taint) 20%, white);
14+
--border-width-deselected: 1px;
15+
--border-width-hover: 3px;
16+
--padding-block: var(--space-xs);
17+
--padding-inline: var(--space-s);
18+
19+
display: inline-flex;
20+
line-height: normal;
21+
font-size: $font-size;
22+
font-family: $font-family-primary;
23+
gap: var(--space-xs);
24+
padding: var(--padding-block) var(--padding-inline);
25+
background-color: var(--light-taint);
26+
border: var(--border-width-deselected) solid var(--taint);
27+
border-radius: 4px;
28+
color: var(--darkest-grey);
29+
text-decoration: none;
30+
background-origin: border-box;
31+
background-position-x: var(--border-width-deselected);
32+
background-position-y: var(--border-width-deselected);
33+
34+
* {
35+
color: var(--darkest-grey);
36+
}
37+
38+
.fa {
39+
color: var(--taint);
40+
}
41+
42+
&:visited {
43+
color: var(--taint);
44+
}
45+
46+
&.selected {
47+
background-color: var(--taint);
48+
color: white;
49+
text-shadow: 0 0 2px var(--darker-grey);
50+
51+
* {
52+
color:white;
53+
}
54+
}
55+
56+
&.valid {
57+
--taint: var(--green);
58+
}
59+
60+
&.invalid {
61+
--taint: var(--red);
62+
}
63+
64+
&.striped {
65+
--alt-taint: color-mix(in oklab, var(--taint) 90%, white);
66+
--light-alt-taint: color-mix(in oklab, var(--light-taint) 60%, white);
67+
--stripes-width: 20px;
68+
69+
background-image: repeating-linear-gradient(
70+
-45deg,
71+
var(--light-taint),
72+
var(--light-taint) var(--stripes-width),
73+
var(--light-alt-taint) var(--stripes-width),
74+
var(--light-alt-taint) calc(var(--stripes-width) * 2)
75+
);
76+
77+
&.selected {
78+
background-image: repeating-linear-gradient(
79+
-45deg,
80+
var(--taint),
81+
var(--taint) var(--stripes-width),
82+
var(--alt-taint) var(--stripes-width),
83+
var(--alt-taint) calc(var(--stripes-width) * 2)
84+
);
85+
}
86+
}
87+
88+
i.fa {
89+
align-self: center;
90+
justify-self: center;
91+
}
92+
93+
&:hover, &:focus, &.selected {
94+
border-width: var(--border-width-hover);
95+
background-position-x: calc(var(--border-width-hover) - 2 * var(--border-width-deselected));
96+
background-position-y: calc(var(--border-width-hover) - 2 * var(--border-width-deselected));
97+
padding:
98+
calc(var(--padding-block) + var(--border-width-deselected) - var(--border-width-hover))
99+
calc(var(--padding-inline) + var(--border-width-deselected) - var(--border-width-hover));
100+
}
101+
}

‎apps/transport/client/stylesheets/components/_validation.scss‎

Lines changed: 87 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -130,12 +130,23 @@ table.netex_generic_issue, table.netex_xsd_schema {
130130
}
131131
}
132132

133-
table.netex_generic_issue th:nth-child(1) {
134-
width: 60%;
133+
table.netex_generic_issue {
134+
th, td {
135+
&:nth-child(1) {
136+
width: 60%;
137+
}
138+
&:nth-child(3) {
139+
width: 10%;
140+
}
141+
}
135142
}
136143

137-
table.netex_xsd_schema th:nth-child(1) {
138-
width: 80%;
144+
table.netex_xsd_schema {
145+
tr, td {
146+
&:nth-child(1) {
147+
text-align: right;
148+
}
149+
}
139150
}
140151

141152
table.netex_generic_issue tr.debug:hover {
@@ -167,13 +178,6 @@ table.netex_generic_issue tr.debug td code {
167178
}
168179

169180
.netex {
170-
div.header_with_action_bar {
171-
display: grid;
172-
grid-template-columns: 1fr max-content;
173-
align-items: baseline;
174-
gap: var(--space-m);
175-
}
176-
177181
#download-popup {
178182
max-width: 60ch;
179183

@@ -189,68 +193,90 @@ table.netex_generic_issue tr.debug td code {
189193
}
190194
}
191195

192-
ul.summary {
193-
list-style: none;
194-
padding-inline: var(--space-xs);
196+
#issues {
197+
display: grid;
198+
grid-template-rows: max-content max-content 1fr max-content;
199+
min-height: 80vh;
200+
container-type: inline-size;
201+
container-name: issues-list;
202+
203+
.issues-footer {
204+
border-top: 1px solid var(--light-grey);
205+
padding-top: var(--space-s);
206+
margin-top: var(--space-s);
195207

196-
li {
197-
display: grid;
198-
gap: var(--space-s) var(--space-m);
199-
grid-template-columns: [icon-start] 1.5rem [icon-end content-start] min(90%, 45rem) [content-end];
200-
padding-bottom: var(--space-m);
201-
padding-left: var(--space-s);
202-
margin-bottom: var(--space-m);
203-
border-bottom: 1px solid var(--light-grey);
204-
205-
i.fa {
206-
align-self: center;
207-
justify-self: center;
208-
grid-column: icon;
209-
}
210-
> * {
211-
grid-column: content;
212-
}
213208
p {
214-
margin: 0;
215-
216-
a {
217-
text-decoration: underline;
218-
}
209+
margin-block: unset;
219210
}
220211
}
221212

222-
li.comment {
223-
padding-bottom: unset;
224-
border-bottom: unset;
225-
226-
div a {
227-
text-decoration: underline;
213+
table {
214+
border: unset;
215+
td, th {
216+
padding: var(--space-xs) var(--space-s);
217+
@container issues-list (width < 800px) {
218+
padding: calc(var(--space-xs) / 2) var(--space-xs);
219+
}
228220
}
229221
}
230222
}
231223

232-
.fa {
233-
margin-right: 0.25rem;
224+
.pagination {
225+
margin-top: var(--space-s);
234226
}
235227

236-
.fa-check {
237-
color: var(--green);
228+
#issues-list {
229+
margin-top: var(--space-m);
238230
}
239231

240-
.fa-xmark {
241-
color: var(--red);
232+
#categories {
233+
margin-bottom: var(--space-s);
234+
display: inline-flex;
235+
flex-wrap: wrap;
236+
gap: var(--space-xs);
242237
}
243238

244-
.fa-minus {
245-
color: var(--light-grey);
239+
.category {
240+
font-weight: 600;
246241
}
247242

248-
.fa-circle-info {
249-
color: var(--dark-blue);
243+
.selected-category {
244+
.fa {
245+
padding-right: var(--space-xs);
246+
}
247+
248+
.fa-check {
249+
color: var(--green);
250+
}
251+
252+
.fa-circle-info {
253+
color: var(--dark-blue);
254+
}
250255
}
251256

252-
.compatibility_filter {
253-
font-weight: 600;
257+
.text-quote {
258+
--taint: var(--grey);
259+
260+
padding: var(--space-s);
261+
background-color: color-mix(in oklab, var(--taint), white);
262+
color: color-mix(in oklab, var(--taint), black);
263+
border-left-color: var(--taint);
264+
265+
.fa {
266+
color: color-mix(in oklab, var(--taint), black 30%);
267+
}
268+
269+
a {
270+
color: color-mix(in oklab, var(--taint), black 30%);
271+
}
272+
273+
&.information {
274+
--taint: var(--theme-info-border);
275+
}
276+
277+
&.warning {
278+
--taint: var(--orange);
279+
}
254280
}
255281
}
256282

@@ -275,3 +301,10 @@ blockquote {
275301
@keyframes loader-animation {
276302
100% {background-position: 36.36%}
277303
}
304+
305+
div.header_with_action_bar {
306+
display: grid;
307+
grid-template-columns: 1fr max-content;
308+
align-items: baseline;
309+
gap: var(--space-m);
310+
}

‎apps/transport/lib/transport_web/components/colorful_button.ex‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
defmodule TransportWeb.Components.ColorfulButton do
2+
@moduledoc """
3+
Colorful button that acts as a link packaged as a Phoenix Component.
4+
5+
Useful for navigation.
6+
"""
7+
8+
use Phoenix.Component
9+
10+
attr(:valid, :boolean, default: true)
11+
attr(:striped, :boolean, default: false)
12+
attr(:selected, :boolean, default: false)
13+
attr(:href, :string, required: true)
14+
15+
slot(:icon)
16+
slot(:label, required: true)
17+
18+
def colorful_link(assigns) do
19+
~H"""
20+
<.link class={classnames(@valid, @striped, @selected)} href={@href}>
21+
{render_slot(@icon)}
22+
<span>
23+
{render_slot(@label)}
24+
</span>
25+
</.link>
26+
"""
27+
end
28+
29+
defp classnames(valid, striped, selected) do
30+
validity =
31+
if valid do
32+
["valid"]
33+
else
34+
["invalid"]
35+
end
36+
37+
variant =
38+
if striped do
39+
["striped"]
40+
else
41+
[]
42+
end
43+
44+
selected =
45+
if selected do
46+
["selected"]
47+
else
48+
[]
49+
end
50+
51+
Enum.join(["colorful"] ++ validity ++ variant ++ selected, " ")
52+
end
53+
end

‎apps/transport/lib/transport_web/controllers/pagination_helpers.ex‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,19 @@ defmodule TransportWeb.PaginationHelpers do
44
"""
55
alias Scrivener.HTML
66

7-
def make_pagination_config(%{"page" => page_number}) do
7+
def make_pagination_config(params, page_size \\ 20)
8+
9+
def make_pagination_config(%{"page" => page_number}, page_size) do
810
page_number =
911
case Integer.parse(page_number) do
1012
:error -> 1
1113
{int, _} -> int
1214
end
1315

14-
%Scrivener.Config{page_number: page_number, page_size: 20}
16+
%Scrivener.Config{page_number: page_number, page_size: page_size}
1517
end
1618

17-
def make_pagination_config(_), do: %Scrivener.Config{page_number: 1, page_size: 20}
19+
def make_pagination_config(_, page_size), do: %Scrivener.Config{page_number: 1, page_size: page_size}
1820

1921
def pagination_links(_, %{total_pages: 1}), do: {:safe, ""}
2022

0 commit comments

Comments
 (0)