Skip to content

Commit e6a98e4

Browse files
osmaosma
authored
Merge pull request #1586 from NatLibFi/issue1484-concept-page-breadcrumbs
Breadcrumbs on concept page
2 parents 4539ddf + 59104e2 commit e6a98e4

File tree

7 files changed

+147
-3
lines changed

7 files changed

+147
-3
lines changed

‎resource/css/skosmos.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -634,6 +634,7 @@ body {
634634
}
635635

636636
#concept-heading {
637+
margin-top: 2rem;
637638
padding-bottom: 4rem;
638639
}
639640

@@ -673,6 +674,29 @@ body {
673674
}
674675

675676
/*** Main content termpage ***/
677+
nav#concept-breadcrumbs ol {
678+
list-style: none;
679+
padding-left: 0;
680+
margin-bottom: 0.5rem;
681+
}
682+
683+
nav#concept-breadcrumbs li, nav#concept-breadcrumbs li.collapse.show {
684+
display: inline;
685+
}
686+
687+
nav#concept-breadcrumbs li.collapse, nav#concept-breadcrumbs li:has(a[aria-expanded="true"]) {
688+
display: none;
689+
}
690+
691+
nav#concept-breadcrumbs li.breadcrumb + li::before {
692+
content: "> ";
693+
}
694+
695+
nav#concept-breadcrumbs .breadcrumb-current {
696+
color: black;
697+
font-weight: normal;
698+
}
699+
676700
#concept-property-label {
677701
align-self: start;
678702
padding-top: 1.25rem;

‎resource/translations/skosmos_en.po

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -876,3 +876,6 @@ msgstr "Code that uniquely identifies a concept within a concept scheme."
876876

877877
msgid "Information"
878878
msgstr "Information"
879+
880+
msgid "Breadcrumbs"
881+
msgstr "Breadcrumbs"

‎resource/translations/skosmos_fi.po

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -885,3 +885,6 @@ msgstr "Tunniste, joka yksilöi käsitteen sanaston sisällä."
885885

886886
msgid "Information"
887887
msgstr "Tietoja"
888+
889+
msgid "Breadcrumbs"
890+
msgstr "Murupolut"

‎resource/translations/skosmos_sv.po

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -884,3 +884,6 @@ msgstr "Kod som unikt identifierar ett begrepp i en vokabulär."
884884

885885
msgid "Information"
886886
msgstr "Information"
887+
888+
msgid "Breadcrumbs"
889+
msgstr "Brödsmulor"

‎src/controller/WebController.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,8 +199,8 @@ public function invokeVocabularyConcept(Request $request)
199199
'concept_uri' => $uri,
200200
'languages' => $this->languages,
201201
'explicit_langcodes' => $langcodes,
202-
'bread_crumbs' => $crumbs['breadcrumbs'],
203-
'combined' => $crumbs['combined'],
202+
'visible_breadcrumbs' => $crumbs['breadcrumbs'],
203+
'hidden_breadcrumbs' => $crumbs['combined'],
204204
'request' => $request,
205205
'plugin_params' => $pluginParameters,
206206
'custom_labels' => $customLabels)

‎src/view/concept-card.inc

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,31 @@
11
<div class="col-md-8 ps-3">
22
<div class="pt-3" id="main-content">
33

4-
<div class="main-content-section p-5">
4+
<div class="main-content-section px-5 py-4">
5+
6+
{% if visible_breadcrumbs and visible_breadcrumbs[0]|length > 1 %}
7+
<nav class="row" id="concept-breadcrumbs" aria-label='{{ "Breadcrumbs" | trans }}'>
8+
{% for path in visible_breadcrumbs %}
9+
{% set path_idx = loop.index0 %}
10+
<ol>
11+
{% for crumb in path %}
12+
{% if crumb.hiddenLabel %}
13+
<li class="breadcrumb-toggle"><a href=".breadcrumb-collapse" data-bs-target=".breadcrumb-collapse" data-bs-toggle="collapse" role="button" aria-expanded="false">...</a></li>
14+
{% for hiddenCrumb in hidden_breadcrumbs[path_idx] %}
15+
<li class="breadcrumb collapse multi-collapse breadcrumb-collapse"><a href="{{ hiddenCrumb.uri|link_url(vocab,request.lang,'page',request.contentLang) }}">{{ hiddenCrumb.hiddenLabel }}</a></li>
16+
{% endfor %}
17+
{% else %}
18+
<li class="breadcrumb"><a
19+
{% if loop.last %}aria-current="page" class="breadcrumb-current"
20+
{% else %}href="{{ crumb.uri|link_url(vocab,request.lang,'page',request.contentLang) }}"
21+
{% endif %}
22+
>{{ crumb.prefLabel }}</a></li>
23+
{% endif %}
24+
{% endfor %}
25+
</ol>
26+
{% endfor %}
27+
</nav>
28+
{% endif %}
529

630
<div class="row" id="concept-heading">
731
<div class="col-sm-4 px-0" id="concept-property-label">{{ "skos:prefLabel" | trans }}</div>

‎tests/cypress/template/concept.cy.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,91 @@
11
describe('Concept page', () => {
2+
it("doesn't contain breadcrumbs for top concepts", () => {
3+
cy.visit('/yso/en/page/p4762') // go to "objects" concept page
4+
5+
// check that there are no breadcrumbs on the page
6+
cy.get('#concept-breadcrumbs').should('not.exist')
7+
})
8+
it("contains unshortened breadcrumbs (up to 5 levels)", () => {
9+
cy.visit('/yso/en/page/p7347') // go to "ancient castles" concept page
10+
11+
// check that there are breadcrumbs on the page
12+
cy.get('#concept-breadcrumbs').should('exist')
13+
14+
// check that there is no expand link for breadcrumbs
15+
cy.get('.breadcrumb-toggle').should('not.exist')
16+
17+
// check that there are 5 breadcrumb links
18+
cy.get('#concept-breadcrumbs ol').find('li').should('have.length', 5)
19+
20+
// check the first breadcrumb
21+
cy.get('#concept-breadcrumbs ol li').first().invoke('text').should('equal', 'properties')
22+
23+
// check the last breadcrumb
24+
cy.get('#concept-breadcrumbs ol li').last().invoke('text').should('equal', 'ancient castles')
25+
cy.get('#concept-breadcrumbs ol li a').last().should('have.class', 'breadcrumb-current')
26+
})
27+
it("contains shortened breadcrumbs (more than 5 levels)", () => {
28+
cy.visit('/yso/en/page/p1265') // go to "archaeology" concept page
29+
30+
// check that there are breadcrumbs on the page
31+
cy.get('#concept-breadcrumbs').should('exist')
32+
33+
// check that there is an expand link for breadcrumbs
34+
cy.get('.breadcrumb-toggle').should('exist')
35+
36+
// check that there are 8 breadcrumb links
37+
cy.get('#concept-breadcrumbs ol').find('li').should('have.length', 8)
38+
39+
// check that there are 2 hidden breadcrumb links
40+
cy.get('#concept-breadcrumbs ol').find('li.collapse').should('have.length', 2)
41+
42+
// check that there are no breadcrumb links currently shown
43+
cy.get('#concept-breadcrumbs ol').find('li.show').should('have.length', 0)
44+
45+
// check the first breadcrumb (expand link)
46+
cy.get('#concept-breadcrumbs ol li').first().invoke('text').should('equal', '...')
47+
48+
// check the last breadcrumb
49+
cy.get('#concept-breadcrumbs ol li').last().invoke('text').should('equal', 'archaeology')
50+
cy.get('#concept-breadcrumbs ol li a').last().should('have.class', 'breadcrumb-current')
51+
52+
// click the expand link
53+
cy.get('#concept-breadcrumbs ol li').first().click()
54+
55+
// check that there are 2 breadcrumb links currently shown
56+
cy.get('#concept-breadcrumbs ol').find('li.show').should('have.length', 2)
57+
})
58+
it("contains shortened breadcrumbs (two different paths)", () => {
59+
cy.visit('/yso/en/page/p38289') // go to "music archaeology" concept page
60+
61+
// check that there are breadcrumbs on the page
62+
cy.get('#concept-breadcrumbs').should('exist')
63+
64+
// check that there are 2 sets of breadcrumbs
65+
cy.get('#concept-breadcrumbs').find('ol').should('have.length', 2)
66+
67+
// check that there are 2 expand links for breadcrumbs
68+
cy.get('#concept-breadcrumbs').find('.breadcrumb-toggle').should('have.length', 2)
69+
70+
// check that there are 4 hidden breadcrumb links
71+
cy.get('#concept-breadcrumbs ol').find('li.collapse').should('have.length', 4)
72+
73+
// check that there are no breadcrumb links currently shown
74+
cy.get('#concept-breadcrumbs ol').find('li.show').should('have.length', 0)
75+
76+
// check the first breadcrumb (expand link)
77+
cy.get('#concept-breadcrumbs ol li').first().invoke('text').should('equal', '...')
78+
79+
// check the last breadcrumb
80+
cy.get('#concept-breadcrumbs ol li').last().invoke('text').should('equal', 'music archaeology')
81+
cy.get('#concept-breadcrumbs ol li a').last().should('have.class', 'breadcrumb-current')
82+
83+
// click the expand link
84+
cy.get('#concept-breadcrumbs ol li').first().click()
85+
86+
// check that there are 2 breadcrumb links currently shown
87+
cy.get('#concept-breadcrumbs ol').find('li.show').should('have.length', 4)
88+
})
289
it('contains concept preflabel', () => {
390
cy.visit('/yso/en/page/p21685') // go to "music research" concept page
491

0 commit comments

Comments
 (0)