Skip to content

Commit

Permalink
reimplement concept page layout using Bootstrap Grid instead of table
Browse files Browse the repository at this point in the history
  • Loading branch information
@osma
osma committed Nov 15, 2023
1 parent fd95998 commit 4293474
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 71 deletions.
37 changes: 20 additions & 17 deletions resource/css/skosmos.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -497,32 +497,32 @@ body {
border-bottom: 2px solid var(--main-bg-2);
}

#main-table {
margin-top: 4rem;
#pref-label {
padding-bottom: 4rem;
}

#main-table tr {
.property {
border-top: 1px solid var(--vocab-table-border);
padding: .5rem 0;
}

#main-table td {
color: var(--vocab-text);
border: none;
}

.main-table-label {
width: 30%;
.property-label {
font-weight: bold;
font-size: 20px !important;
}

#resource-table th, #term-table th {
.property-value {
color: var(--vocab-text);
border: none;
}

#resource-table th {
color: var(--vocab-text);
font-weight: bold;
border-bottom: 1px solid var(--vocab-text);
}

#resource-table td, #term-table td {
#resource-table td {
color: var(--vocab-text);
border: none;
}
Expand All @@ -532,10 +532,13 @@ body {
}

/*** Main content termpage ***/
#term-heading span {
width: 30%;
#concept-heading {
align-self: start;
padding-top: 1.2rem;
padding-top: 1.25rem;
}

#concept-label h2 {
float: left;
}

.copy-clipboard {
Expand All @@ -554,7 +557,7 @@ body {
margin-bottom: 0;
}

.term-other-languages .label {
#concept-other-languages .label {
display: inline-block;
width: 50%;
}
Expand Down Expand Up @@ -769,7 +772,7 @@ body {
text-decoration: none !important;
font-weight: 700 !important;
}
td.main-table-label, .vocab-statistics > h3 {
.vocab-statistics > h3 {
font-size: 20px !important;
}
td.align-middle {
Expand Down
107 changes: 53 additions & 54 deletions src/view/concept-card.inc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,64 +3,63 @@

<div class="main-content-section p-5">

<div class="d-flex" id="term-heading">
<span>{{ "skos:prefLabel" | trans }}</span>
<h2 class="mb-0" id="pref-label">{{ concept.label }}</h2>
<button class="btn btn-default copy-clipboard" type="button" data-bs-toggle="tooltip" data-bs-placement="button" title="{{ "Copy to clipboard" | trans }}" for="#pref-label">
<div class="row">
<div class="col-sm-4 px-0" id="concept-heading">{{ "skos:prefLabel" | trans }}</div>
<div class="col-sm-8" id="concept-label">
<h2 class="mb-0" id="pref-label">{{ concept.label }}</h2>
<button class="btn btn-default copy-clipboard" type="button" data-bs-toggle="tooltip" data-bs-placement="button" title="{{ "Copy to clipboard" | trans }}" for="#pref-label">
<i class="fa-regular fa-copy"></i>
</button>
</button>
</div>
</div>

<table class="table" id="main-table">
<tbody>
{% for property in concept.properties %}
<tr class="property prop-{{property.ID}}">
<td class="main-table-label px-0">{{ property.label }}</td>
<td class="align-middle px-0">
<ul>
{% for propval in property.values %}
{% if propval.uri %} {# resources with URI #}
<li><a href="{{ propval.uri | link_url(propval.vocab, request.lang, 'page', request.contentLang) }}">{% if propval.notation %}<span class="versal">{{ propval.notation }} </span>{% endif %} {{ propval.label(request.contentLang) }}</a></li>
{% else %} {# literals, e.g. altLabels #}
<li>{{ propval.label }}</li>
{% endif %}
{% endfor %}
</li>
</td>
</tr>
{% for property in concept.properties %}
<div class="row property prop-{{property.ID}}">
<div class="col-sm-4 px-0 property-label">{{ property.label }}</div>
<div class="col-sm-8 align-self-center property-value">
<ul class="align-bottom">
{% for propval in property.values %}
{% if propval.uri %} {# resources with URI #}
<li><a href="{{ propval.uri | link_url(propval.vocab, request.lang, 'page', request.contentLang) }}">{% if propval.notation %}<span class="versal">{{ propval.notation }} </span>{% endif %} {{ propval.label(request.contentLang) }}</a></li>
{% else %} {# literals, e.g. altLabels #}
<li>{{ propval.label }}</li>
{% endif %}
{% endfor %}
{% set foreignLabels = concept.foreignLabels %}
{% if foreignLabels %}
<tr>
<td class="main-table-label px-0">{{ 'foreign prefLabels'|trans }}</td>
<td class="term-other-languages align-middle px-0">
{% for language,labels in foreignLabels %}
{% for value in labels.prefLabel|default([])|merge(labels.altLabel|default([])) %}
{% if value.type == "skos:prefLabel" and value.lang in request.vocab.config.languages %}
<a class="label" href='{{ concept.uri|link_url(request.vocabid,request.lang, 'page', value.lang) }}' hreflang='{{ value.lang }}'>{{ value.label }}</a>
{% else %}
<span class="label">{{ value.label }}</span>
{% endif %}
{% if loop.first %}<span>{{ language }}</span>{% endif %}
{% endfor %}
{% endfor %}
</td>
</tr>
{% endif %}
<tr>
<td class="main-table-label px-0">URI</td>
<td class="align-middle px-0"><a href="#">{{ concept.uri }}</a></td>
</tr>
<tr>
<td class="main-table-label px-0"><i class="fa-solid fa-download"></i> {{ "Download this concept" | trans }}</td>
<td class="align-middle px-0">
<a class="me-3" href="rest/v1/{% if concept.vocab %}{{ concept.vocab.id }}{% else %}{{ vocab.id }}{% endif %}/data?uri={{ concept.uri|url_encode }}&amp;format=application/rdf%2Bxml">RDF/XML</a>
<a class="me-3" href="rest/v1/{% if concept.vocab %}{{ concept.vocab.id }}{% else %}{{ vocab.id }}{% endif %}/data?uri={{ concept.uri|url_encode }}&amp;format=text/turtle">TURTLE</a>
<a href="rest/v1/{% if concept.vocab %}{{ concept.vocab.id }}{% else %}{{ vocab.id }}{% endif %}/data?uri={{ concept.uri|url_encode }}&amp;format=application/ld%2Bjson">JSON-LD</a>
</td>
</tr>
</tbody>
</table>
</li>
</div>
</div>
{% endfor %}
{% set foreignLabels = concept.foreignLabels %}
{% if foreignLabels %}
<div class="row property prop-foreignlabels">
<div class="col-sm-4 px-0 property-label">{{ 'foreign prefLabels'|trans }}</div>
<div class="col-sm-8" id="concept-other-languages">
{% for language,labels in foreignLabels %}
{% for value in labels.prefLabel|default([])|merge(labels.altLabel|default([])) %}
{% if value.type == "skos:prefLabel" and value.lang in request.vocab.config.languages %}
<a class="label" href='{{ concept.uri|link_url(request.vocabid,request.lang, 'page', value.lang) }}' hreflang='{{ value.lang }}'>{{ value.label }}</a>
{% else %}
<span class="label">{{ value.label }}</span>
{% endif %}
{% if loop.first %}<span>{{ language }}</span>{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
{% endif %}
<div class="row property prop-uri">
<div class="col-sm-4 px-0 property-label">URI</div>
<div class="col-sm-8" id="concept-uri"><a href="#">{{ concept.uri }}</a></div>
</div>
<div class="row property prop-download">
<div class="col-sm-4 px-0 property-label"><i class="fa-solid fa-download"></i> {{ "Download this concept" | trans }}</div>
<div class="col-sm-8" id="download-links">
<a class="me-3" href="rest/v1/{% if concept.vocab %}{{ concept.vocab.id }}{% else %}{{ vocab.id }}{% endif %}/data?uri={{ concept.uri|url_encode }}&amp;format=application/rdf%2Bxml">RDF/XML</a>
<a class="me-3" href="rest/v1/{% if concept.vocab %}{{ concept.vocab.id }}{% else %}{{ vocab.id }}{% endif %}/data?uri={{ concept.uri|url_encode }}&amp;format=text/turtle">TURTLE</a>
<a href="rest/v1/{% if concept.vocab %}{{ concept.vocab.id }}{% else %}{{ vocab.id }}{% endif %}/data?uri={{ concept.uri|url_encode }}&amp;format=application/ld%2Bjson">JSON-LD</a>
</div>
</div>

</div>

</div>
Expand Down

0 comments on commit 4293474

Please sign in to comment.