Bug 28101: Update breadcrumb markup in the OPAC for consistency and accessibility
[koha.git] / koha-tmpl / opac-tmpl / bootstrap / en / modules / opac-library.tt
1 [% USE raw %]
2 [% USE Asset %]
3 [% USE Koha %]
4 [% PROCESS 'display-library-address.inc' %]
5 [% INCLUDE 'doc-head-open.inc' %]
6 <title>
7    [% IF ( library ) %]
8         [% library.branchname | html %] &rsaquo;
9     [% END %]
10     Libraries
11     &rsaquo;
12 [% IF ( LibraryNameTitle ) %]
13         [% LibraryNameTitle | html %]
14     [% ELSE %]
15         Koha online
16     [% END %] catalog
17 </title>
18 [% INCLUDE 'doc-head-close.inc' %]
19 [% BLOCK cssinclude %]
20     <style>
21         .section_library {
22             margin-top: 1rem;
23             margin-bottom: 1rem;
24             border: 0;
25             border-bottom: 1px solid rgba(0,0,0,.1);
26         }
27     </style>
28 [% END %]
29 </head>
30
31 [% INCLUDE 'bodytag.inc' bodyid='opac-library' bodyclass='scrollto' %]
32 [% INCLUDE 'masthead.inc' %]
33
34 [% BLOCK library_description %]
35     <div property="description">
36         [% library.opac_info | $raw %]
37     </div>
38 [% END %]
39
40 [% BLOCK library_info %]
41     <div class="branchaddress" property="address" typeof="PostalAddress">
42         [% PROCESS 'display-library-address' %]
43     </div> <!-- /div property=address -->
44     [% IF ( library.branchphone ) %]
45         <p class="branchphone">Phone: <a href="tel:[% library.branchphone | url %]" property="telephone">[% library.branchphone | html %]</a></p>
46     [% END %]
47     [% IF ( library.branchfax ) %]
48         <p class="branchfax">Fax: <span property="faxNumber">[% library.branchfax | html %]</span></p>
49     [% END %]
50     [% IF ( library.branchurl ) %]
51         <p class="branchurl"><a href="[% library.branchurl | url %]" property="url">[% library.branchurl | html %]</a></p>
52     [% END %]
53 [% END %]
54
55 <div class="main">
56     <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
57         <ol class="breadcrumb">
58             <li class="breadcrumb-item">
59                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
60             </li>
61             [% IF ( library ) %]
62                 <li class="breadcrumb-item">
63                     <a href="/cgi-bin/koha/opac-library.pl">Libraries</a>
64                 </li>
65                 <li class="breadcrumb-item active">
66                     <a href="#" aria-current="page">[% library.branchname | html %]</a>
67                 </li>
68             [% ELSE %]
69                 <li class="breadcrumb-item active">
70                     <a href="#" aria-current="page">Libraries</a>
71                 </li>
72             [% END %]
73         </ol>
74     </nav> <!-- /#breadcrumbs -->
75
76     <div class="container-fluid">
77         <div class="row">
78             [% IF ( OpacNav ||  OpacNavBottom ) %]
79                 <div class="col-lg-2">
80                     <div id="navigation">
81                         [% INCLUDE 'navigation.inc' %]
82                     </div>
83                 </div>
84                 <div class="col-10 order-first order-md-first order-lg-2">
85             [% ELSE %]
86                 <div class="col order-first order-md-first order-lg-2">
87             [% END %]
88
89                 [% IF ( library ) %]
90
91                     <div id="library_info" class="maincontent" vocab="http://schema.org/" typeof="Library">
92                         <h1 property="name">[% library.branchname | html %]</h1>
93
94                         <div class="row">
95                             <div class="col-lg-8">
96                                 [% PROCESS library_info %]
97                                 [% IF ( library.opac_info ) %]
98                                     <div class="library_description">
99                                         <hr />
100                                         [% PROCESS library_description %]
101                                     </div>
102                                 [% END %]
103                             </div>
104                             <div class="col-lg-4">
105                                 [% IF ( libraries.count > 1 ) %]
106                                     <nav class="libraries">
107                                         <ul class="fa-ul">
108                                             [% FOREACH library IN libraries %]
109                                                 [% IF ( branchcode == library.branchcode ) %]
110                                                     <li id="menu_[% library.branchcode| html %]" class="current">
111                                                         <a href="/cgi-bin/koha/opac-library.pl?branchcode=[% library.branchcode | url %]">
112                                                             <i class="fa fa-li fa-map-pin" aria-hidden="true"></i> [% library.branchname | html %]
113                                                         </a>
114                                                     </li>
115                                                 [% ELSE %]
116                                                     <li id="menu_[% library.branchcode| html %]">
117                                                         <a href="/cgi-bin/koha/opac-library.pl?branchcode=[% library.branchcode | url %]">
118                                                             <i class="fa fa-li" aria-hidden="true"></i> [% library.branchname | html %]
119                                                         </a>
120                                                     </li>
121                                                 [% END %]
122                                             [% END %]
123                                         </ul>
124                                     </nav>
125                                 [% END # /IF libraries.count > 1 %]
126                             </div> <!-- /.col-lg-4 -->
127                         </div> <!-- /.row -->
128                     </div> <!-- /#library_info -->
129
130                 [% ELSE %]
131                     <div id="library_info" class="maincontent">
132                         <h1>[% IF ( singleBranchMode ) %]Library[% ELSE %]Libraries[% END %]</h1>
133
134                         [% FOREACH library IN libraries %]
135                             <div class="section_library" id="section_[% library.branchcode | html %]">
136                                 <h2 property="name">
137                                     [% IF ( libraries.count > 1 ) %]
138                                         <a href="/cgi-bin/koha/opac-library.pl?branchcode=[% library.branchcode | url %]">[% library.branchname | html %]</a>
139                                     [% ELSE %]
140                                         [% library.branchname | html %]
141                                     [% END %]
142                                 </h2>
143                                 [% PROCESS library_info %]
144                             </div>
145                             [% IF ( libraries.count == 1 ) %]
146                                 <div class="library_description">
147                                     [% PROCESS library_description %]
148                                 </div>
149                             [% END %]
150                         [% END %]
151                     </div> <!-- /#library_info -->
152                 [% END # /IF library %]
153             </div> <!-- /.col -->
154         </div> <!-- /.row -->
155     </div> <!-- /.container-fluid -->
156 </div> <!-- / .main -->
157
158 [% INCLUDE 'opac-bottom.inc' %]
159 [% BLOCK jsinclude %][% END %]