Skip to content

Commit

Permalink
concept page layout no longer relies on tables, related to #502
Browse files Browse the repository at this point in the history
  • Loading branch information
henriyli committed Jul 28, 2016
1 parent 4668bfc commit 324ffa1
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 35 deletions.
47 changes: 40 additions & 7 deletions resource/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -860,6 +860,10 @@ ul.dropdown-menu > li:last-child > input {
box-shadow: none !important;
}

.concept-main > .row:nth-of-type(2) > .property-label > .versal {
line-height: 40px;
}

.preflabel-spacer {
background: url('../pics/stripe.png') repeat-x 50% center;
height: 18px;
Expand Down Expand Up @@ -1072,6 +1076,22 @@ tr {
width: 225px;
}

.row > .property-label {
float: left;
padding-left: 15px;
padding-right: 15px;
position: relative;
width: 225px;
}

.row > .property-value-column {
display: inline-block;
width: calc(100% - 225px);
padding-left: 15px;
padding-right: 15px;
position: relative;
}

.concept-info p {
margin: 0;
}
Expand Down Expand Up @@ -1154,11 +1174,11 @@ tr {
padding-top: 5px;
}

.concept-main > .row > .col-md-8 {
.concept-main > .row > .property-value-column > .property-value-wrapper {
border-bottom: 2px solid #d4edeb;
}

.concept-main > .row:last-child > .col-md-8 {
.concept-main > .row:last-child > .property-value-column {
border-bottom: 0;
}

Expand Down Expand Up @@ -1251,7 +1271,7 @@ table > tbody > tr.other-languages > td {
right: 10px;
}

.col-md-4 > .property-click {
.property-label > .property-click {
border-bottom: 2px dotted #CFCFCF;
}

Expand Down Expand Up @@ -1748,14 +1768,21 @@ body, .versal, h1, h2, p, .versal-bold {
left: 3.5%;
}

.topbar > a {
display: none;
}

.topbar.frontpage > a {
display: inline;
}

.row > .property-value-column {
width: 100%;
}

.row:nth-of-type(2) > .property-value-column {
width: 55%;
}

.row:nth-of-type(2) > .property-label {
width: 45%;
}
}

@media (max-width: 640px) {
Expand Down Expand Up @@ -1796,6 +1823,11 @@ body, .versal, h1, h2, p, .versal-bold {
}

@media (max-width: 700px) {

.topbar > a {
display: none;
}

.topbar {
position: relative;
}
Expand Down Expand Up @@ -1862,6 +1894,7 @@ body, .versal, h1, h2, p, .versal-bold {
.navbar-form {
max-width: none;
}

}

@media (min-width: 640px) {
Expand Down
55 changes: 27 additions & 28 deletions view/concept-shared.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,32 +37,31 @@
{% endfor %}
{% endif %}
{% spaceless %}
<table class="table search-results-property-table{% if concept.type == 'skosext:DeprecatedConcept' %} deprecated{% endif %}"><tr class="preflabel-container">
<td class="preflabel-desc">
<span class="versal">{{ 'skos:prefLabel'|trans|upper }}</span>
<div class="row{% if concept.type == 'skosext:DeprecatedConcept' %} deprecated{% endif %}">
<div class="property-label">
<span class="versal">{{ 'skos:prefLabel'|trans|upper }}</span>
</div>
{% if concept.foundBy %} {# hit has been found through an alternative label #}
<span class="versal">{{ concept.foundBy }} >></span>
{% if concept.ExVocab is defined %}
<span class="prefLabel conceptlabel redirected-vocab-id"> @{{ concept.ExVocab }}</span>
{% endif %}
<br /><a class="prefLabel foundby" href="{{ concept.uri | link_url(concept.vocab,request.lang) }}">{{ concept.label }}</a></span>
</td>
</div>
{% else %}
<td>{% if concept.notation %}<span class="notation">{{ concept.notation }}</span>{% endif %}
<div class="property-value-column">{% if concept.notation %}<span class="notation">{{ concept.notation }}</span>{% endif %}
<span class="prefLabel conceptlabel">{{ concept.label }}</span>
</td>
</div>
{% endif %}
</tr>
<tr><td class="preflabel-spacer" colspan="2"></td></tr>
<div class="col-md-12"><div class="preflabel-spacer"></div></div>
</div>
{% endspaceless %}
</table>
{% for property in concept.properties %} {# loop through ConceptProperty objects #}
{% if property.getSubPropertyOf != 'skos:hiddenLabel' %}
<div class="row{% if property.type == 'dc:isReplacedBy' %} replaced-by{% endif%}">
<div class="col-md-4">
<div class="property-label">
<span class="versal{% if property.type == 'rdf:type' %}-bold{% endif %}{% if not (property.type in property.description and '_help' in property.description) %} property-click" title="{{ property.description }}"{% else %}"{% endif %}>{{ property.label|upper }}</span>
</div>
<div class="col-md-8">
<div class="property-value-column"><div class="property-value-wrapper">
{% if request.vocab.config.hasMultiLingualProperty(property.type) %}
{% set prevlang = '' %}{# Only displaying the language when it appears for the very first time #}
{% for language,labels in concept.allLabels(property.type) %}
Expand Down Expand Up @@ -108,13 +107,13 @@
{% endfor %}
</ul>
{% endif %}
</div></div>
</div></div></div>
{% endif %}
{% endfor %}
{% if concept.groupProperties %}
<div class="row">
<div class="col-md-4"><span class="versal property-click" title="{% trans "skosmos:memberOf_help" %}" >{{ 'skosmos:memberOf'|trans|upper }}</span></div>
<div class="col-md-8">
<div class="property-label"><span class="versal property-click" title="{% trans "skosmos:memberOf_help" %}" >{{ 'skosmos:memberOf'|trans|upper }}</span></div>
<div class="property-value-column"><div class="property-value-wrapper">
<ul>
{% for group in concept.groupProperties %}
{% if (group.type == 'skosmos:memberOfSuper') or (group.type == 'skosmos:memberOf' and not superFound) %}<li>{% endif %}
Expand All @@ -124,13 +123,13 @@
{% if group.type == 'skosmos:memberOfSuper' %}{% set superFound = true %}{% elseif group.type == 'skosmos:memberOf' and superFound %}{% set superFound = false %}{% endif %}
{% endfor %}
</ul>
</div>
</div></div>
</div>
{% endif %}
{% if concept.arrayProperties %}
<div class="row">
<div class="col-md-4"><span class="versal property-click" title="{% trans "skosmos:memberOfArray_help" %}" >{{ 'skosmos:memberOfArray'|trans|upper }}</span></div>
<div class="col-md-8">
<div class="property-label"><span class="versal property-click" title="{% trans "skosmos:memberOfArray_help" %}" >{{ 'skosmos:memberOfArray'|trans|upper }}</span></div>
<div class="property-value-column"><div class="property-value-wrapper">
<ul>
{% for group in concept.arrayProperties %}
{% if group.type == 'skosmos:memberOfArray' %}
Expand All @@ -139,12 +138,12 @@
{% endif %}
{% endfor %}
</ul>
</div>
</div></div>
{% endif %}
{% if concept.foreignLabels %}
<div class="row">
<div class="col-md-4"><span class="versal property-click" title="{% trans "foreign prefLabel help" %}" >{{ 'foreign prefLabels'|trans|upper }}</span></div>
<div class="col-md-8">
<div class="property-label"><span class="versal property-click" title="{% trans "foreign prefLabel help" %}" >{{ 'foreign prefLabels'|trans|upper }}</span></div>
<div class="property-value-column"><div class="property-value-wrapper">
{% set prevlang = '' %}{# Only displaying the language when it appears for the very first time #}
{% for language,labels in concept.foreignLabels %}
{% for value in labels %}
Expand All @@ -156,15 +155,15 @@
{% endfor %}
{% endfor %}
</div>
</div>
</div></div>
{% endif %}
<div class="row">
<div class="col-md-4"><span class="versal">URI</span></div>
<div class="col-md-8"><span class="versal uri-input-box">{{ concept.uri }}</span></div>
<div class="property-label"><span class="versal">URI</span></div>
<div class="property-value-column"><div class="property-value-wrapper"><span class="versal uri-input-box">{{ concept.uri }}</span></div></div>
</div>
<div class="row">
<div class="col-md-4"><span class="versal">{% trans %}Download this concept in SKOS format:{% endtrans %}</div>
<div class="col-md-8">
<div class="property-label"><span class="versal">{% trans %}Download this concept in SKOS format:{% endtrans %}</div>
<div class="property-value-column">
<span class="versal concept-download-links"><a 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 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>
Expand All @@ -178,8 +177,8 @@
<div class="concept-appendix">
<div class="row{% if concept.type == 'skosext:DeprecatedConcept' %} deprecated{% endif %}">
{% for property in appendixProperties %} {# loop through ConceptProperty objects #}
<div class="col-md-4"><span class="versal{% if not (property.type in property.description and '_help' in property.description) %} property-click" title="{{ property.description }}{% endif %}">{{ property.label|upper }}</span></div>
<div class="col-md-8">
<div class="property-label"><span class="versal{% if not (property.type in property.description and '_help' in property.description) %} property-click" title="{{ property.description }}{% endif %}">{{ property.label|upper }}</span></div>
<div class="property-value-column">
{% for propval in property.values %} {# loop through ConceptPropertyValue objects #}
{% if propval.uri %} {# resources with URI #}
{% if propval.label %}
Expand Down

0 comments on commit 324ffa1

Please sign in to comment.