Skip to content

Commit a8978e9

Browse files
UnniKohonenUnniKohonen
authored
Merge pull request #1913 from NatLibFi/CSS-variables-for-UI-colors
Add CSS variables for UI colors
2 parents 2f2e488 + 00eec77 commit a8978e9

File tree

10 files changed

+427
-176
lines changed

10 files changed

+427
-176
lines changed

‎resource/css/skosmos.css‎

Lines changed: 266 additions & 156 deletions
Large diffs are not rendered by default.

‎resource/js/tab-groups.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -292,13 +292,12 @@ function startGroupsApp () {
292292
<i class="fa-solid fa-spinner fa-spin-pulse"></i>
293293
</template>
294294
<template v-else>
295-
<img v-if="group.isOpen" alt="" src="resource/pics/black-lower-right-triangle.png">
296-
<img v-else alt="" src="resource/pics/lower-right-triangle.png">
295+
<img v-if="group.isOpen" alt="" src="resource/pics/black-lower-right-triangle.svg">
296+
<img v-else alt="" src="resource/pics/lower-right-triangle.svg">
297297
</template>
298298
</button>
299299
<span class="concept-label" :class="{ 'last': isLast }">
300-
<i v-if="group.isGroup" class="property-hover fa-solid fa-layer-group"></i>
301-
<a :class="{ 'selected': selectedGroup === group.uri }"
300+
<a :class="{ 'selected': selectedGroup === group.uri, 'group': group.isGroup }"
302301
:href="getConceptURL(group.uri)"
303302
@click="handleClickGroupEvent($event, group)"
304303
:aria-label="goToTheConceptPageAriaMessage"

‎resource/js/tab-hierarchy.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -473,8 +473,8 @@ function startHierarchyApp () {
473473
<i class="fa-solid fa-spinner fa-spin-pulse"></i>
474474
</template>
475475
<template v-else>
476-
<img v-if="concept.isOpen" alt="" src="resource/pics/black-lower-right-triangle.png">
477-
<img v-else alt="" src="resource/pics/lower-right-triangle.png">
476+
<img v-if="concept.isOpen" alt="" src="resource/pics/black-lower-right-triangle.svg">
477+
<img v-else alt="" src="resource/pics/lower-right-triangle.svg">
478478
</template>
479479
</button>
480480
<span class="concept-label" :class="{ 'last': isLast }">

‎resource/pics/black-lower-right-triangle.png‎

-5.95 KB
Binary file not shown.

‎resource/pics/black-lower-right-triangle.svg‎

Lines changed: 71 additions & 0 deletions
Loading

‎resource/pics/lower-right-triangle.png‎

-7.94 KB
Binary file not shown.

‎resource/pics/lower-right-triangle.svg‎

Lines changed: 71 additions & 0 deletions
Loading

‎src/view/about.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{% block content %}
88

99
<div class="container">
10-
<div class="pb-3 bg-light">
10+
<div class="pb-3">
1111
<h1 class="mb-5">{{"About" | trans }}</h1>
1212
<div id="about-slot">
1313
{{ include('custom-templates.inc.twig', {slotName: 'about', showPlaceholder: true}) }}

‎src/view/base-template.twig‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@
3333
{% for plugin, files in request.plugins.pluginsCSS %}{% for file in files %}<link href="{{ file }}" media="screen, print" rel="stylesheet" type="text/css">{% endfor %}{% endfor %}
3434
{{ include('custom-templates.inc.twig', {slotName: 'html-head'}) -}}
3535
</head>
36-
<body class="{% if pageType =='landing' %}bg-white frontpage-logo{% else %}{% if pageType == 'concept' or pageType == 'vocab-home' or (request.vocabid != '' and request.page == 'page') %}bg-medium vocab-{{ request.vocabid }}{% else %}bg-light{% endif %}{% endif %}">
36+
<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 %}">
3737
<header>
3838
<a class="visually-hidden" id="skiptocontent" href="{{ request.langurl }}#maincontent">Skip to main</a>
39-
<div class="container-fluid bg-dark d-flex my-auto py-3 px-4 text-bg-dark">
39+
<div id="topbar" class="container-fluid d-flex my-auto py-3 px-4">
4040
{% if request.vocabid == '' and request.page != 'about' and request.page != 'feedback' %}
4141
<div>
42-
<button class="fs-6 py-3 text-light collapsed" id="global-search-toggle" data-bs-toggle="collapse" data-bs-target="#global-search-bar" aria-expanded="false" aria-controls="global-search-bar">
42+
<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">
4343
{{ "Search across vocabularies"|trans }}
4444
</button>
4545
</div>
@@ -48,27 +48,27 @@
4848
<h2 class="visually-hidden">Skosmos</h2>
4949
</a>
5050
{% endif %}
51-
<ul class="nav nav-pills ms-auto my-auto text-light gx-3 py-3" id="topbar-nav">
51+
<ul class="nav nav-pills ms-auto my-auto gx-3 py-3" id="topbar-nav">
5252
<li class="nav-item">
53-
<a href="{{ 'home' | global_url(request.lang, request.contentLang, null, request.queryParam('anylang') == 'on') }}" id="navi1" class="fs-6 text-light topbar-nav-link ms-3 text-decoration-none">
53+
<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">
5454
<i class="fa-solid fa-house"></i>&nbsp;{{ "Vocabularies" | trans }}
5555
</a>
5656
</li>
5757
<li class="nav-item">
58-
<a href="{{ 'about' | global_url(request.lang, request.contentLang, null, request.queryParam('anylang') == 'on') }}" id="navi2" class="fs-6 text-light topbar-nav-link ms-3 text-decoration-none">
58+
<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">
5959
<i class="fa-solid fa-circle-info"></i>&nbsp;{{ "About" | trans }}
6060
</a>
6161
</li>
6262
<li class="nav-item">
63-
<a href="{{ 'feedback' | global_url(request.lang, request.contentLang, request.vocabid, request.queryParam('anylang') == 'on') }}" id="navi3" class="fs-6 text-light topbar-nav-link ms-3 text-decoration-none">
63+
<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">
6464
<i class="fa-solid fa-comment"></i>&nbsp;{{ "Feedback" | trans }}
6565
</a>
6666
</li>
6767
{% if languages|length > 1 %}
6868
{% for langcode, langdata in languages %}
6969
{% if request.lang != langcode %}
7070
<li class="nav-item language">
71-
<a class="fs-6 text-light ms-3 text-decoration-none" id="language-{{ langcode }}" href="{{ request.langurl(langcode) }}"> {{ langdata.name }}</a>
71+
<a class="fs-6 ms-3 text-decoration-none" id="language-{{ langcode }}" href="{{ request.langurl(langcode) }}"> {{ langdata.name }}</a>
7272
</li>
7373
{% endif %}
7474
{% endfor %}
@@ -88,7 +88,7 @@
8888
</div>
8989
{% endif %}
9090
{% if pageType in ['landing', 'vocab-home', 'concept', 'vocab-search'] %}
91-
<div class="container-fluid bg-white py-4" id="headerbar">
91+
<div class="container-fluid py-4" id="headerbar">
9292
<div id="headerbar-top-slot" class="row"></div>
9393
<div class="row">
9494
<div class="d-flex flex-column flex-xl-row align-items-start align-items-xl-center my-auto{% if pageType == 'landing' %} p-0{% endif %}">
@@ -113,7 +113,7 @@
113113

114114
{% endif %}
115115
</header>
116-
<main id="main-container" class="{{pageType}}{% if list_style %} {{ list_style }}{% endif %}">
116+
<main id="main-container" class="pb-5 {{pageType}}{% if list_style %} {{ list_style }}{% endif %}">
117117
<div class="container">
118118
<noscript>
119119
<strong>We're sorry but Skosmos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
@@ -124,7 +124,7 @@
124124
</div>
125125
</div>
126126
</main>
127-
<footer class="bg-white pb-5 mt-5">
127+
<footer class="py-5">
128128
{{ include('custom-templates.inc.twig', {slotName: 'footer'}) }}
129129
</footer>
130130
{% include "scripts.inc.twig" %}

‎src/view/landing.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</div>
1111

1212
<div class="col-lg-7 mb-gutterwidth mb-lg-0" id="landing-start-slot">
13-
<div class="px-3 py-4 bg-medium" id="vocabulary-list">
13+
<div class="px-3 py-4" id="vocabulary-list">
1414
{% if request.vocabList|length == 0 %}
1515
<h2 class="fs-3 fw-bold">{{ "No vocabularies on the server!" | trans }}</h2>
1616
{% else %}
@@ -24,7 +24,7 @@
2424
<h3 class="fs-4 pt-2">{{ vocabClassName }}</h3>
2525
<ul class="list-group">
2626
{% for vocab in vocabArray %}
27-
<li class="list-group-item ps-0 py-1"><a class="fs-5 fw-bold" href="{{ '' | global_url(request.lang, request.contentLang, vocab.id, request.queryParam('anylang') == 'on')}}">{{ vocab.title }}</a></li>
27+
<li class="list-group-item ps-0 py-1"><a class="fs-5" href="{{ '' | global_url(request.lang, request.contentLang, vocab.id, request.queryParam('anylang') == 'on')}}">{{ vocab.title }}</a></li>
2828
{% endfor %}
2929
</ul>
3030
</div>

0 commit comments

Comments
 (0)