Skip to content

Layout adjustments #2095

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
osma wants to merge 11 commits into
base: main
Choose a base branch
from
Draft

Layout adjustments #2095

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
165aabc
tighter alphabetical index letters layout
osma Oct 1, 2026
fa8246f
adjust border between properties so it only spans the property value …
osma Oct 1, 2026
3116d19
reduce main content margins a little bit
osma Oct 1, 2026
0b9c6ca
switch rdf:type icon and fix tooltips on search result page
osma Oct 1, 2026
f9d5540
fix alignment issues on search results page
osma Oct 1, 2026
20a8b40
change to diamond icon for representing rdf:type on search results page
osma Oct 1, 2026
9023492
fix cypress tests that broke due to icon change
osma Oct 1, 2026
7de5dcb
fix layout for truncated rows that are expanded on search results page
osma Oct 1, 2026
66a576e
make sure search result IDs are unique when loading more results
osma Oct 1, 2026
69fd61b
use only the property label value when calculating number of items on…
osma Oct 1, 2026
1d26a14
amend cypress test for commas within truncated rows
osma Oct 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 56 additions & 14 deletions resource/css/skosmos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -977,7 +977,7 @@ header .container-fluid .row {
background-color: var(--sidebar-tab-active-bg);
color: var(--sidebar-tab-active-text);
margin: 0;
width: 35px;
width: 28px;
cursor: pointer;
}

Expand All @@ -988,7 +988,7 @@ header .container-fluid .row {
#sidebar .form-check-label {
display: flex;
justify-content: center;
padding: 0.375rem 0.75rem;
padding: 0.375rem 0;
}

#sidebar .form-check-label.selected, #sidebar .form-check-label:hover, #sidebar .form-check-label:active {
Expand All @@ -1001,7 +1001,7 @@ header .container-fluid .row {
}

#sidebar .form-check-label.wide {
width: 50px;
width: 46px;
}

#sidebar .list-group-item span {
Expand Down Expand Up @@ -1163,8 +1163,8 @@ header .container-fluid .row {
.main-content-section {
background-color: var(--main-content-bg);
margin-bottom: .2rem;
padding-left: 3.5rem;
padding-right: 3.5rem;
padding-left: 3.0rem;
padding-right: 3.0rem;
}

.main-content-section a:hover, .main-content-section .literal a {
Expand All @@ -1186,8 +1186,7 @@ h2#vocab-heading {
}

.property {
border-top: 1px solid var(--main-content-border);
padding: .5rem 0;
padding-bottom: .5rem;
}

.property ul, .property li {
Expand All @@ -1197,8 +1196,8 @@ h2#vocab-heading {
margin-bottom: 0;
}

.property.prop-mapping {
border-top: none;
.property-label {
padding-top: .5rem;
}

#main-container .property-label h3 {
Expand All @@ -1209,7 +1208,29 @@ h2#vocab-heading {

.property-value {
color: var(--main-content-text);
border: none;
padding-top: .5rem;
}

.property-value::before {
content: "";
display: block;
border-top: 1px solid var(--main-content-border);
margin-top: -.5rem;
margin-bottom: .5rem;
}

@media (max-width: 992px) {
.property {
border-top: 1px solid var(--main-content-border);
padding-top: .5rem;
}
.property-label,
.property-value {
padding-top: 0;
}
.property-value::before {
display: none;
}
}

/* --- Vocab statistics --- */
Expand Down Expand Up @@ -1458,6 +1479,11 @@ h2#vocab-heading {
transform: translate(0, calc(-100% - 15px));
}

.tooltip-icon.tooltip-inline {
text-decoration: none;
cursor: help;
}
Comment thread
Copilot marked this conversation as resolved.

/* Tooltips with HTML content */

.tooltip-html {
Expand Down Expand Up @@ -1563,7 +1589,7 @@ h2#vocab-heading {

.search-result {
border-top: 1px solid var(--main-content-border);
margin-top: 2.5rem;
margin-top: 0.75rem;
}

.search-result-term a {
Expand Down Expand Up @@ -1615,11 +1641,27 @@ h2#vocab-heading {
overflow: visible;
}

#search-results .search-result .list-group > li.list-group-item,
#search-results .search-result .list-group > li.search-result-list,
#search-results .search-result .list-group > li.search-result-hidden {
Comment thread
Copilot marked this conversation as resolved.
Outdated
display: flex;
align-items: baseline;
}

.search-result .tooltip-icon,
.search-result .uri-icon {
flex: 0 0 2rem;
text-align: center;
}

.uri-icon {
display: inline-block;
width: 20px;
font-size: 0.75rem;
text-align: center;
}

.search-result .search-result-propval,
.search-result .search-result-uri {
flex: 1 1 auto;
min-width: 0;
}

.prefLabel.proplabel {
Expand Down
6 changes: 3 additions & 3 deletions src/view/concept-card.inc.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
</div>
{% endif %}

<div class="main-content-section py-4{% if concept.deprecated %} concept-deprecated{% endif %}">
<div class="main-content-section py-3{% if concept.deprecated %} concept-deprecated{% endif %}">

{# Macro for rendering HTML element attributes #}
{% macro render_attrs(map) -%}
Expand Down Expand Up @@ -181,7 +181,7 @@
<h3 class="tooltip-inline t-top" aria-describedby="prop-desc-foreignlabels" data-title="{{ 'foreign prefLabel help'|trans }}">{{ 'foreign prefLabels'|trans }}</h3>
<span id="prop-desc-foreignlabels" class="visually-hidden">{{ 'foreign prefLabel help'|trans }}</span>
</div>
<div class="col-lg-8 gx-0 gx-lg-4" id="concept-other-languages">
<div class="col-lg-8 gx-0 gx-lg-4 property-value" id="concept-other-languages">
{% for language,labels in foreignLabels %}
<div class="row mb-2">
<div class="col-7 order-last concept-other-languages-language"><h4>{{ language }}</h4></div>
Expand Down Expand Up @@ -226,7 +226,7 @@
<div class="col-lg-4 ps-0 property-label">
<h3><i class="fa-solid fa-download"></i> {{ "Download this concept" | trans }}</h3>
</div>
<div class="col-lg-8 gx-0 gx-lg-4" id="download-links">
<div class="col-lg-8 gx-0 gx-lg-4 property-value" id="download-links">
<ul>
<li>
<a class="me-3" href="rest/v1/{{ vocab.id }}/data?uri={{ concept.uri|url_encode }}&amp;format=application/rdf%2Bxml">RDF/XML</a>
Expand Down
2 changes: 1 addition & 1 deletion src/view/global-search.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<div class="row">
<div id="main-content">
<div class="p-4 pt-4" id="search-results">
<h1>{{ "%search_count% results for '%term%'" | trans({'%search_count%': search_count, '%term%' : term}) }}</h1>
<h1 class="mb-4">{{ "%search_count% results for '%term%'" | trans({'%search_count%': search_count, '%term%' : term}) }}</h1>
{% include "search-results.inc.twig" %}
</div>
</div>
Expand Down
44 changes: 30 additions & 14 deletions src/view/search-results.inc.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,26 @@
{%~ endif ~%}

{%~ for concept in search_results ~%} {# loop through the hits #}
{%- set resultIndex = loop.index0 -%}
Comment thread
Copilot marked this conversation as resolved.
Outdated

<div class="search-result pt-1">
<div class="search-result-term">
{%- if vocab == '' and concept.vocab.id is defined %}<span class="fw-bold" data-title="{{ concept.vocabTitle }}">{{ concept.shortName }}: </span>{% endif -%}
{%- if concept.foundBy %} {# hit has been found through an alt/hidden/another language label #}
{%~ if concept.foundByType != 'lang' and concept.foundByType != 'hidden' ~%}
<span class="fst-italic">{{ concept.foundBy }}{%~ if explicit_langcodes or request.queryparam('anylang') and concept.contentLang != '' ~%} ({{ concept.contentLang }}){%~ endif ~%}</span>
&nbsp;<i class="fa-solid fa-arrow-right"></i>&nbsp;
<span class="fst-italic">{{ concept.foundBy }}{%~ if explicit_langcodes or request.queryparam('anylang') and concept.contentLang != '' %} ({{ concept.contentLang }}){%~ endif ~%}</span>
<i class="fa-solid fa-arrow-right"></i>
{%~ if concept.notation ~%}<span>{{ concept.notation }}&nbsp;</span>{%~ endif ~%}
<a class="fw-bold" href="{%~ if 'isothes:ConceptGroup' in concept.type ~%}{{ concept.uri | link_url(concept.vocab,request.lang,'page',concept.contentLang) }}{%~ else ~%}{{ concept.uri | link_url(concept.vocab,request.lang,'page',concept.contentLang) }}{%~ endif ~%}">{{ concept.label(request.contentLang) }}</a>
{%~ if explicit_langcodes or request.queryparam('anylang') ~%}<span> ({{ concept.label.lang }})</span>{%~ endif ~%}
{%~ if explicit_langcodes or request.queryparam('anylang') %} ({{ concept.label.lang }}){%~ endif ~%}
{%~ else ~%}
{%~ if concept.notation ~%}<span>{{ concept.notation }}&nbsp;</span>{%~ endif ~%}
<a href="{%~ if "isothes:ConceptGroup" in concept.type ~%}{{ concept.uri | link_url(concept.vocab,request.lang,'page',concept.contentLang) }}{%~ else ~%}{{ concept.uri | link_url(concept.vocab,request.lang,'page',concept.contentLang) }}{%~ endif ~%}">{{ concept.label(request.contentLang) }}</a>
{%~ if explicit_langcodes or request.queryparam('anylang') ~%}<span> ({{ concept.contentLang }})</span>{%~ endif ~%}
{%~ if explicit_langcodes or request.queryparam('anylang') %} ({{ concept.contentLang }}){%~ endif ~%}
{%~ endif ~%}
{%~ else ~%}
{%~ if concept.notation %}<span class="notation">{{ concept.notation }}&nbsp;</span>{% endif ~%}
<a class="prefLabel conceptlabel" href="{%~ if "isothes:ConceptGroup" in concept.type ~%}{{ concept.uri | link_url(concept.vocab, request.lang, 'page') }}{%~ elseif concept.exvocab is defined%}{{ concept.uri | link_url(concept.exvocab,concept.contentLang) }}{%~ else ~%}{{ concept.uri | link_url(concept.vocab,request.lang,'page',concept.contentLang) }}{%~ endif ~%}">{{ concept.label(request.contentLang) }}</a>{%~ if explicit_langcodes or request.queryparam('anylang') ~%} ({{ concept.contentLang }}){%~ endif ~%}
<a class="prefLabel conceptlabel" href="{%~ if "isothes:ConceptGroup" in concept.type ~%}{{ concept.uri | link_url(concept.vocab, request.lang, 'page') }}{%~ elseif concept.exvocab is defined%}{{ concept.uri | link_url(concept.exvocab,concept.contentLang) }}{%~ else ~%}{{ concept.uri | link_url(concept.vocab,request.lang,'page',concept.contentLang) }}{%~ endif ~%}">{{ concept.label(request.contentLang) }}</a>{%~ if explicit_langcodes or request.queryparam('anylang') %} ({{ concept.contentLang }}){%~ endif ~%}
{% endif -%}
</div>
<ul class="list-group">
Expand All @@ -31,16 +32,19 @@
{%~ for property in conceptProperties ~%} {# loop through ConceptProperty objects #}
{%~ if property.type != 'rdf:type' ~%}
<li class="list-group-item px-0 py-1">
<span class="skosmos-tooltip" data-title="{{ property.description }}">
{%- set tooltip = property.description | default('') -%}
{%- set desc_id = 'sr-desc-' ~ resultIndex ~ '-main-' ~ loop.index0 -%}
<span class="tooltip-icon{% if tooltip != '' %} tooltip-inline t-top{% endif %}"{% if tooltip != '' %} data-title="{{ tooltip }}" aria-describedby="{{ desc_id }}"{% endif %}>
{%- if property.type == 'skos:broader' -%}<i class="property-hover fa-solid fa-arrow-turn-up fa-rotate-270"></i>
{%- elseif property.type == 'skos:narrower' -%}<i class="property-hover fa-solid fa-arrow-turn-up fa-rotate-90"></i>
{%- elseif property.type == 'skos:altLabel' -%}<i class="property-hover fa-solid fa-ban"></i>
{%- elseif property.type == 'skos:related' -%}<i class="property-hover fa-solid fa-cloud"></i>
{%- elseif property.type == 'skosmos:memberOf' -%}<i class="property-hover fa-solid fa-layer-group"></i>
{%- elseif property.type == 'skos:note' -%}<i class="property-hover fa-solid fa-note-sticky"></i>
{%- else -%}<i class="property-hover fa-solid fa-globe"></i>
{%- endif -%}
&nbsp;</span>
{%- endif -%}</span>
{%- if tooltip != '' %}<span id="{{ desc_id }}" class="visually-hidden">{{ tooltip }}</span>{% endif -%}
Comment thread
osma marked this conversation as resolved.
<span class="search-result-propval">
{%- for propval in property.values -%} {# loop through ConceptPropertyValue objects #}
{%~ set outerLast = loop.last ~%}
{%- if propval.uri -%} {# resources with URI #}
Expand All @@ -53,20 +57,25 @@
{%- else -%}{# Literals (no URI), eg. alternative labels as properties #}<span class="{%~ if propval.type == 'skos:altLabel' %}altLabel proplabel{% endif ~%}">{{ propval.label }}{%- if not loop.last -%}, {%- endif -%}</span>
{%~ endif -%}
{%- endfor -%}
</span>
</li>
{%~ endif ~%}
{%~ endfor ~%}
{%- set foreignLabels = concept.foreignLabels -%}
{%~ if foreignLabels ~%}
<li class="list-group-item px-0 py-1">
<span class="skosmos-tooltip" data-title="foreign prefLabel help"><i class="property-hover fa-solid fa-globe"></i>&nbsp;</span>
{%- set desc_id = 'sr-desc-' ~ resultIndex ~ '-foreign' -%}
<span class="tooltip-icon tooltip-inline t-top" data-title="{{ 'foreign prefLabel help' | trans }}" aria-describedby="{{ desc_id }}"><i class="property-hover fa-solid fa-globe"></i></span>
<span id="{{ desc_id }}" class="visually-hidden">{{ 'foreign prefLabel help' | trans }}</span>
<span class="search-result-propval">
{%- for langstring, labels in foreignLabels -%}
{%- for label in labels.prefLabel|default([])|merge(labels.altLabel|default([])) -%}
<span class="{% if label.type == 'skos:prefLabel' %}prefLabel{% elseif label.type == 'skos:altLabel' %}altLabel{% endif %} proplabel">{{ label }}</span>
{%- if label.lang %} ({{ label.lang }}){% endif %}{% if not loop.last %}, {% endif -%}
{%~ endfor ~%}
{%- if not loop.last %}, {% endif -%}
{%~ endfor ~%}
</span>
</li>
{% endif ~%}

Expand All @@ -76,13 +85,18 @@
{%~ for property in mappingProperties ~%} {# loop through ConceptProperty objects #}
{%~ if property.type in concept.vocab.config.additionalSearchProperties ~%}
<li class="list-group-item px-0 py-1">
<span class="skosmos-tooltip" data-title="{{ property.type }}">
<i class="property-hover fa-solid fa-globe"></i>&nbsp;</span>
{%- set tooltip = property.description | default(property.type | trans) -%}
{%- set desc_id = 'sr-desc-' ~ resultIndex ~ '-map-' ~ loop.index0 -%}
<span class="tooltip-icon tooltip-inline t-top" data-title="{{ tooltip }}" aria-describedby="{{ desc_id }}">
<i class="property-hover fa-solid fa-globe"></i></span>
<span id="{{ desc_id }}" class="visually-hidden">{{ tooltip }}</span>
<span class="search-result-propval">
{%- for propval in property.values %}
{#- loop through ConceptMappingPropertyValue objects -#}
{%- if propval.exVocab -%}<span class="redirected-vocab-id prefLabel">{{ propval.exVocab.shortName }}: </span>{% endif %}{{ propval.label(request.contentLang) }}
{%- if propval.label(request.contentLang).lang != request.contentLang ~%} ({{ propval.label(request.contentLang).lang }}){%- endif -%}{%- if not loop.last %}, {% endif -%}
{% endfor %}
</span>
</li>
{%~ endif ~%}
{%~ endfor ~%}
Expand All @@ -92,9 +106,11 @@
{#- loop through ConceptProperty objects -#}
{%- if property.type == 'rdf:type' ~%}
<li class="list-group-item px-0 py-1">
<span class="skosmos-tooltip" data-title="concept_types">
<i class="property-hover fa-solid fa-arrows-to-circle"></i>&nbsp;</span>
{%- for propval in property.values %}{{ propval.label | trans }}{% if not loop.last %}, {% endif %}{% endfor -%}
{%- set desc_id = 'sr-desc-' ~ resultIndex ~ '-type' -%}
<span class="tooltip-icon tooltip-inline t-top" data-title="{{ 'concept_types' | trans }}" aria-describedby="{{ desc_id }}">
<i class="property-hover fa-solid fa-diamond"></i></span>
Comment thread
osma marked this conversation as resolved.
<span id="{{ desc_id }}" class="visually-hidden">{{ 'concept_types' | trans }}</span>
<span class="search-result-propval">{%- for propval in property.values %}{{ propval.label | trans }}{% if not loop.last %}, {% endif %}{% endfor -%}</span>
</li>
{%~ endif -%}
{%~ endfor -%}
Expand Down
2 changes: 1 addition & 1 deletion src/view/vocab-info.inc.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{{ include('custom-templates.inc.twig', {slotName: 'main-content-top'}) }}
</div>
<div id="main-content">
<div class="main-content-section py-4">
<div class="main-content-section py-3">
<h2 id="vocab-heading">{{ "Vocabulary information" | trans }}</h2>
{% set vocabInfo = vocab.info(request.contentLang) %}
{% if not vocabInfo %}
Expand Down
2 changes: 1 addition & 1 deletion src/view/vocab-search.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<div class="row">
<div id="main-content">
<div class="p-4 pt-4" id="search-results">
<h2>{{ "%search_count% results for '%term%'" | trans({'%search_count%': search_count, '%term%' : term}) }}</h2>
<h2 class="mb-4">{{ "%search_count% results for '%term%'" | trans({'%search_count%': search_count, '%term%' : term}) }}</h2>
{% include "search-results.inc.twig" %}
</div>
</div>
Expand Down
Loading