Skosmos/src/view/base-template.twig at 8c7784da1d3a5856603b2a67c0cb70b82529f52c · NatLibFi/Skosmos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html dir="ltr" lang="{{ request.lang }}" prefix="og: https://ogp.me/ns#">
<head>
<base href="{{ BaseHref }}">
<link rel="shortcut icon" href="favicon.ico">
<title>{% block title %}{{ GlobalConfig.serviceName }}{% endblock %}</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="generator" content="Skosmos {{ request.version }}">
<meta name="title" content="{{ block('title') }}">
<meta property="og:title" content="{{ block('title') }}">
{% if block('description') is defined and block('description') is not empty %}
<meta name="description" content="{{ block('description') }}">
<meta property="og:description" content="{{ block('description') }}">
{% endif %}
{% if block('url') is defined and block('url') is not empty %}
<link rel="canonical" href="{{ block('url') }}">
<meta property="og:url" content="{{ block('url') }}">
{% endif %}
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ GlobalConfig.serviceName }}">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" media="screen, print" rel="stylesheet" type="text/css">
<link href="resource/css/fonts.css" media="screen, print" rel="stylesheet" type="text/css">
<link href="resource/css/skosmos.css" media="screen, print" rel="stylesheet" type="text/css">
<link href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css" rel="stylesheet">
<link href="node_modules/@fortawesome/fontawesome-free/css/brands.min.css" rel="stylesheet">
<link href="node_modules/@fortawesome/fontawesome-free/css/solid.min.css" rel="stylesheet">
<link href="node_modules/@fortawesome/fontawesome-free/css/regular.min.css" rel="stylesheet">
{% if GlobalConfig.customCss %}
<link href="{{ GlobalConfig.customCss }}" media="screen, print" rel="stylesheet" type="text/css">
{% endif %}
{% for plugin, files in request.plugins.pluginsCSS %}{% for file in files %}<link href="{{ file }}" media="screen, print" rel="stylesheet" type="text/css">{% endfor %}{% endfor %}
{{ include('custom-templates.inc.twig', {slotName: 'html-head'}) -}}
</head>
<body class="{% if pageType =='landing' %}frontpage-logo{% else %}{% if pageType == 'concept' or pageType == 'vocab-home' or (request.vocabid != '' and request.page == 'page') %}vocab-{{ request.vocabid }}{% endif %}{% endif %}">
  <header>
    <a class="visually-hidden" id="skiptocontent" href="{{ request.langurl }}#maincontent">Skip to main</a>
    <div id="topbar" class="container-fluid d-flex my-auto py-3 px-4">
      {% if request.vocabid == '' and request.page != 'about' and request.page != 'feedback' %}
        <div>
          <button class="fs-6 py-3 collapsed" id="global-search-toggle" data-bs-toggle="collapse" data-bs-target="#global-search-bar" aria-expanded="false" aria-controls="global-search-bar">
              {{ "Search across vocabularies"|trans }}
          </button>
        </div>
      {% else %}
        <a id="skosmos-logo-top" class="service-{{ request.lang }}" href="{{ 'home' | global_url(request.lang, request.contentLang, null, request.queryParam('anylang') == 'on') }}">
          <h2 id="service-name" class="visually-hidden">{% if GlobalConfig.serviceName is defined %}{{ GlobalConfig.serviceName }}{% else %}Skosmos{% endif %}</h2>
        </a>
      {% endif %}
      <ul class="nav nav-pills ms-auto my-auto gx-3 py-3" id="topbar-nav">
        <li class="nav-item">
          <a href="{{ 'home' | global_url(request.lang, request.contentLang, null, request.queryParam('anylang') == 'on') }}" id="navi1" class="fs-6 topbar-nav-link ms-3 text-decoration-none">
                   <i class="fa-solid fa-house"></i>&nbsp;{{ "Vocabularies" | trans }}
          </a>
        </li>
        <li class="nav-item">
          <a href="{{ 'about' | global_url(request.lang, request.contentLang, null, request.queryParam('anylang') == 'on') }}" id="navi2" class="fs-6 topbar-nav-link ms-3 text-decoration-none">
                   <i class="fa-solid fa-circle-info"></i>&nbsp;{{ "About" | trans }}
          </a>
        </li>
        <li class="nav-item">
          <a href="{{ 'feedback' | global_url(request.lang, request.contentLang, request.vocabid, request.queryParam('anylang') == 'on') }}" id="navi3" class="fs-6 topbar-nav-link ms-3 text-decoration-none">
                   <i class="fa-solid fa-comment"></i>&nbsp;{{ "Feedback" | trans }}
          </a>
        </li>
        {{ include('custom-templates.inc.twig', {slotName: 'topbar'}) }}
        {% if languages|length > 1 %}
        {% for langcode, langdata in languages %}
        {% if request.lang != langcode %}
        <li class="nav-item language">
          <a class="fs-6 ms-3 text-decoration-none" id="language-{{ langcode }}" href="{{ request.langurl(langcode) }}"> {{ langdata.name }}</a>
        </li>
        {% endif %}
        {% endfor %}
        {% endif %}
      </ul>
    </div>
    {% if request.vocabid == '' and request.page != 'about' and request.page != 'feedback' %}
    <div class="collapse container-fluid mt-2 pe-0 py-3" id="global-search-bar">
      <div class="row">
        <div class="d-flex flex-column flex-xl-row align-items-start align-items-xl-center my-auto">
          <div id="global-search-text">
            <h2>{{ "Search across vocabularies"|trans }}</h2>
          </div>
          <div class="ms-0 ms-xl-auto pt-3 pt-xl-0" id="global-search-wrapper"></div>
        </div>
      </div>
    </div>
    {% endif %}
    {% if pageType in ['landing', 'vocab-home', 'concept', 'vocab-search'] %}
    <div class="container-fluid py-4" id="headerbar">
      <div id="headerbar-top-slot" class="row">
        {{ include('custom-templates.inc.twig', {slotName: 'headerbar-top'}) }}
      </div>
      <div class="row">
        <div class="d-flex flex-column flex-xl-row align-items-start align-items-xl-center my-auto{% if pageType == 'landing' %} p-0{% endif %}">
          {% if pageType == 'landing' %}
          <div id="skosmos-logo">
            <h1 class="visually-hidden">{{ GlobalConfig.serviceNameLong(request.lang) }}</h1
          </div>
          {% else %}
          <h2 class="fw-bold" id="vocab-title">
            <a class="text-decoration-none" href="{{ 'home' | global_url(request.lang, request.contentLang, request.vocabid, request.queryParam('anylang') == 'on') }}">
              {{ request.vocab.title(request.contentLang) }}
            </a>
          </h2>
          <div class="ms-0 ms-xl-auto pt-3 pt-xl-0">
            <div id="search-vocab"></div>
          </div>
          {% endif %}
        </div>
      </div>
      <div id="headerbar-bottom-slot" class="row">
        {{ include('custom-templates.inc.twig', {slotName: 'headerbar-bottom'}) }}
      </div>
    </div>

    {% endif %}
  </header>
  <main id="main-container" class="pb-5 {{pageType}}{% if list_style %} {{ list_style }}{% endif %}">
    <div class="container">
      <noscript>
        <strong>We're sorry but Skosmos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
      </noscript>
      <div id="main-container-row" class="row" tabindex="-1">
      {% block content %}
      {% endblock %}
      </div>
    </div>
  </main>
  <footer>
  {{ include('custom-templates.inc.twig', {slotName: 'footer'}) }}
  </footer>
  {% include "scripts.inc.twig" %}
</body>
</html>