Skip to content

Commit 4762481

Browse files
Khdulkadiraequitas
Khdulkadir
authored and
aequitas
committed
feature: result details
1 parent 83df7d6 commit 4762481

File tree

5 files changed

+128
-104
lines changed

5 files changed

+128
-104
lines changed

‎frontend/css/result-section.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,7 @@
291291
position: relative;
292292
border-bottom: 2px solid var(--green-100);
293293
padding-bottom: 16px;
294+
margin-inline: 10px;
294295
}
295296

296297
.meter {
@@ -367,4 +368,45 @@ meter::-moz-meter-bar {
367368
background: var(--green-400);
368369
border-radius: 20px;
369370
height: 16px;
371+
}
372+
373+
.result-details-section {
374+
.container {
375+
gap: 32px;
376+
377+
& > * {
378+
@media (width >= 900px) {
379+
grid-column: 1 / 9;
380+
z-index: 1;
381+
}
382+
}
383+
}
384+
}
385+
386+
.result-details-item {
387+
> hgroup {
388+
display: flex;
389+
flex-direction: column;
390+
gap: 8px;
391+
392+
h2 {
393+
display: flex;
394+
gap: 16px;
395+
}
396+
397+
p {
398+
a {
399+
display: inline-flex;
400+
}
401+
}
402+
}
403+
404+
.result-details-content {
405+
display: flex;
406+
flex-direction: column;
407+
gap: 16px;
408+
background-color: var(--green-200);
409+
border-radius: 8px;
410+
padding: 24px;
411+
}
370412
}

‎interface/templates/base-probe.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="container">
1212
<hgroup>
1313
<h1>
14-
<span class="h5 color-secondary">Website score laden voor:</span>
14+
<span class="h5 color-secondary">Score laden voor:</span>
1515
<span class="h1 color-secondary">
1616
{% block testtitle %}
1717
{% endblock %}

‎interface/templates/base-results.html‎

Lines changed: 30 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<section class="result-section bg-primary">
1212
<div class="container">
1313
<h1>
14-
<span class="h5 color-secondary">Website score voor:</span>
14+
<span class="h5 color-secondary">Score voor:</span>
1515
<span class="h1 color-secondary">
1616
{% block testheadcontent %}
1717
{% endblock %}
@@ -78,7 +78,32 @@ <h2>Vervolg acties</h2>
7878
</article>
7979
</aside>
8080

81-
<div class="hidethis" aria-hidden="true">
81+
<section class="result-details-section">
82+
<div class="container">
83+
<h2 class="h3 color-secondary">Details over de test</h2>
84+
<ul class="result-details-list">
85+
{% for probe in probes %}
86+
87+
<li class="result-details-item">
88+
<hgroup>
89+
<h3 class="h4 color-secondary icon">{% include "string.html" with name="test "|addstr:probe.name|addstr:" label" %}</h3>
90+
<p class="body-m">{% include "string.html" with name=probe.description|safe %}</p>
91+
</hgroup>
92+
<!-- <article>
93+
<h4 class="h5 color-secondary"></h4> -->
94+
<div class="result-details-content">
95+
{% for domain_type, domain, details in probe.details_set %}
96+
{% block testdetailitems %}
97+
{% endblock %}
98+
{% endfor %}
99+
{% endfor %}
100+
</div>
101+
</li>
102+
</ul>
103+
</div>
104+
</section>
105+
106+
<!-- <div class="hidethis" aria-hidden="true">
82107
<span id="panel-button-show">
83108
{% include "string.html" with name="results panel-button show" %}
84109
</span>
@@ -91,79 +116,11 @@ <h2>Vervolg acties</h2>
91116
<span id="panel-item-close">
92117
{% include "string.html" with name="results no-icon-detail close" %}
93118
</span>
94-
</div>
95-
96-
<!-- <article class="result wide">
97-
<div id="testresults-overview" class="block">
98-
{% block testmiddlecontent %}
99-
<div class="timestamp">
100-
<a href="{% url "faqs_report" %}" class="icon-testinfo">{% include "string.html" with name="results test-info" %}</a>
101-
<br>
102-
<a href="{{permalink}}" class="permalink">{% include "string.html" with name="results permalink" %}</a>
103-
<br>
104-
<span id="retest-time" class="hidethis" aria-hidden="true">{{retest_time}}</span>
105-
<span
106-
{% if retest_time < 1 %}
107-
class="retest-text reruntest hidethis" aria-hidden="true"
108-
{% else %}
109-
class="retest-text reruntest"
110-
{% endif %}>
111-
{% include "string.html" with name="results retest-time" %}
112-
<span class="retest-time"> {{retest_time}}</span>
113-
</span>
114-
<a href="{{retest_link}}" rel="nofollow"
115-
{% if retest_time > 0 %}
116-
class="retest-link reruntest hidethis" aria-hidden="true"
117-
{% else %}
118-
class="retest-link reruntest"
119-
{% endif %}>
120-
{% include "string.html" with name="results rerun-test" %}
121-
</a>
122-
</div>
123-
{% endblock %}
124-
{% if probes|probes_contain_dated_results %}
125-
<div id="dated-results-warning">
126-
<a href="{{retest_link}}" rel="nofollow">
127-
{% include "string.html" with name="results dated-presentation" %}
128-
</a>
129-
</div>
130-
{% endif %}
131-
</div>
119+
</div> -->
132120

133-
<div class="block">
134-
{% for probe in probes %}
135-
<section class="test-header">
136-
{% if not forloop.first %}
137-
<hr/>
138-
{% endif %}
139-
<div class="test-title">
140-
<h2 id="{{probe.name}}" class="{{probe.verdict}}">
141-
<span class="visuallyhidden">
142-
{% include "string.html" with name="results no-icon-status "|addstr:probe.verdict %}:
143-
</span>
144-
{% include "string.html" with name="test "|addstr:probe.name|addstr:" label" %}
145-
</h2>
146-
</div>
147-
<div id="{{probe.name}}-description" class="description">
148-
{% include "string.html" with name=probe.description|safe %}
149-
</div>
150-
<div class="panel-button-container">
151-
<button class="panel-button-show hidethis" aria-hidden="true"></button>
152-
</div>
153-
</section>
154-
<section class="testresults">
155-
<br/>
156-
{% for domain_type, domain, details in probe.details_set %}
157-
{% block testdetailitems %}
158-
{% endblock %}
159-
{% endfor %}
160-
</section>
161-
{% endfor %}
162-
</div>
163-
</article> -->
164121

165122
{% block testtailcontent %}
166-
<aside>
123+
<!-- <aside>
167124
<div id="first-aside-block" class="block">
168125
<section class="websitetest">
169126
<h2>
@@ -249,6 +206,6 @@ <h2>
249206
250207
{% block furthertesting %}
251208
{% endblock %}
252-
</aside>
209+
</aside> -->
253210
{% endblock %}
254211
{% endblock %}

‎interface/templates/details-test-item.html‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,33 @@
33

44
{% if testitem %}
55
{% with set=testitem|get_testitem_div_class_and_text_status %}
6-
<div class="testresult {{set.0}}">
7-
<h3 class="panel-title" >
6+
<details>
7+
<summary class="{{set.0}} icon">
8+
<span class="visually-hidden">{{set.1}}: </span>
9+
{% translate testitem.label %}
10+
</summary>
11+
<hgroup>
12+
<h5>{% include "string.html" with name="results verdict label" %}</h5>
13+
<p>{% include "string.html" with name=testitem.verdict %}</p>
14+
</hgroup>
15+
{% if testitem.tech_type and testitem.tech_data %}
16+
<hgroup>
17+
<h5>{% include "string.html" with name="results tech-details label" %}</h5>
18+
<p>
19+
{% if testitem.tech_type == 'table' or testitem.tech_type == 'table_multi_col' or testitem.tech_type == 'table_translatable' %}
20+
{% render_details_table tech_type=testitem.tech_type table_headers=testitem.tech_string table_content=testitem.tech_data %}
21+
{% endif %}
22+
{% endif %}
23+
</p>
24+
</hgroup>
25+
<hgroup>
26+
<h5>{% include "string.html" with name="results explanation label" %}</h5>
27+
<p>{% include "content.html" with name=testitem.exp %}</p>
28+
</hgroup>
29+
</details>
30+
31+
<!-- <div class="testresult {{set.0}}">
32+
<h3 class="panel-title" >
833
<a href="" aria-expanded="false">
934
<span class="visuallyhidden">{{set.1}}:</span>
1035
{% translate testitem.label %}
@@ -30,6 +55,6 @@ <h4>
3055
</h4>
3156
{% include "content.html" with name=testitem.exp %}
3257
</div>
33-
</div>
58+
</div> -->
3459
{% endwith %}
3560
{% endif %}

‎interface/templates/domain-results.html‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@
88

99
{% block testdetailitems %}
1010
{% if probe.name == 'siteipv6' %}
11-
<div class="test-subsection">
11+
<h4 class="h5 color-secondary test-subsection">
1212
{% include "string.html" with name="results domain-mail ipv6 name-servers label" %}
13-
</div>
13+
</h4>
1414
{% include "details-test-item.html" with testitem=details.ns_aaaa %}
1515
{% include "details-test-item.html" with testitem=details.ns_reach %}
16-
<div class="test-subsection">
16+
<h4 class="h5 color-secondary test-subsection">
1717
{% include "string.html" with name="results domain ipv6 web-server label" %}
18-
</div>
18+
</h4>
1919
{% include "details-test-item.html" with testitem=details.web_aaaa %}
2020
{% include "details-test-item.html" with testitem=details.web_reach %}
2121
{% include "details-test-item.html" with testitem=details.web_ipv46 %}
@@ -25,16 +25,16 @@
2525
{% include "details-test-item.html" with testitem=details.dnssec_valid %}
2626

2727
{% elif probe.name == 'sitetls' %}
28-
<div class="test-subsection">
29-
{% include "string.html" with name="results domain tls https label" %}
30-
</div>
31-
{% include "details-test-item.html" with testitem=details.https_exists %}
28+
<h4 class="h5 color-secondary test-subsection">
29+
{% include "string.html" with name="results domain tls https label" %}
30+
</h4>
31+
{% include "details-test-item.html" with testitem=details.https_exists %}
3232
{% include "details-test-item.html" with testitem=details.https_forced %}
3333
{% include "details-test-item.html" with testitem=details.http_compression %}
3434
{% include "details-test-item.html" with testitem=details.https_hsts %}
35-
<div class="test-subsection">
35+
<h4 class="h5 color-secondary test-subsection">
3636
{% include "string.html" with name="results domain tls tls label" %}
37-
</div>
37+
</h4>
3838
{% include "details-test-item.html" with testitem=details.tls_version %}
3939
{% include "details-test-item.html" with testitem=details.tls_ciphers %}
4040
{% include "details-test-item.html" with testitem=details.tls_cipher_order %}
@@ -45,44 +45,44 @@
4545
{% include "details-test-item.html" with testitem=details.renegotiation_client %}
4646
{% include "details-test-item.html" with testitem=details.zero_rtt %}
4747
{% include "details-test-item.html" with testitem=details.ocsp_stapling %}
48-
<div class="test-subsection">
48+
<h4 class="h5 color-secondary test-subsection">
4949
{% include "string.html" with name="results domain-mail tls certificate label" %}
50-
</div>
50+
</h4>
5151
{% include "details-test-item.html" with testitem=details.cert_trust %}
5252
{% include "details-test-item.html" with testitem=details.cert_pubkey %}
5353
{% include "details-test-item.html" with testitem=details.cert_signature %}
5454
{% include "details-test-item.html" with testitem=details.cert_hostmatch %}
5555
{% include "details-test-item.html" with testitem=details.web_caa %}
56-
<div class="test-subsection">
56+
<h4 class="h5 color-secondary test-subsection">
5757
{% include "string.html" with name="results domain-mail tls dane label" %}
58-
</div>
58+
</h4>
5959
{% include "details-test-item.html" with testitem=details.dane_exists %}
6060
{% include "details-test-item.html" with testitem=details.dane_valid %}
6161

6262
{% elif probe.name == 'siteappsecpriv' %}
63-
<div class="test-subsection">
64-
{% include "string.html" with name="results domain appsecpriv http-headers label" %}
65-
</div>
66-
{% include "details-test-item.html" with testitem=details.http_x_frame %}
63+
<h4 class="h5 color-secondary test-subsection">
64+
{% include "string.html" with name="results domain appsecpriv http-headers label" %}
65+
</h4>
66+
{% include "details-test-item.html" with testitem=details.http_x_frame %}
6767
{% include "details-test-item.html" with testitem=details.http_x_content_type %}
6868
{# x-XSS shown for historical results only #}
6969
{% include "details-test-item.html" with testitem=details.http_x_xss %}
7070
{% include "details-test-item.html" with testitem=details.http_csp %}
7171
{% include "details-test-item.html" with testitem=details.http_referrer_policy %}
72-
<div class="test-subsection">
72+
<h4 class="h5 color-secondary test-subsection">
7373
{% include "string.html" with name="results domain appsecpriv other-options label" %}
74-
</div>
74+
</h4>
7575
{% include "details-test-item.html" with testitem=details.http_securitytxt %}
7676

7777
{% elif probe.name == 'siterpki' %}
78-
<div class="test-subsection">
79-
{% include "string.html" with name="results domain-mail rpki name-servers label" %}
80-
</div>
81-
{% include "details-test-item.html" with testitem=details.ns_rpki_exists %}
78+
<h4 class="h5 color-secondary test-subsection">
79+
{% include "string.html" with name="results domain-mail rpki name-servers label" %}
80+
</h4>
81+
{% include "details-test-item.html" with testitem=details.ns_rpki_exists %}
8282
{% include "details-test-item.html" with testitem=details.ns_rpki_valid %}
83-
<div class="test-subsection">
84-
{% include "string.html" with name="results domain rpki web-server label" %}
85-
</div>
83+
<h4 class="h5 color-secondary test-subsection">
84+
{% include "string.html" with name="results domain rpki web-server label" %}
85+
</h4>
8686
{% include "details-test-item.html" with testitem=details.web_rpki_exists %}
8787
{% include "details-test-item.html" with testitem=details.web_rpki_valid %}
8888

0 commit comments

Comments
 (0)