Skip to content

Commit

Permalink
update layout of ontology sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@bmlancien
bmlancien committed Sep 20, 2024
1 parent eb7a13d commit 5b20171
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 156 deletions.
2 changes: 1 addition & 1 deletion base/static/css/bootstrap.min.css
View file

Large diffs are not rendered by default.

277 changes: 122 additions & 155 deletions ontology/templates/ontology/partial_ontology_sidebar_content.html
View file
Original file line number Diff line number Diff line change
@@ -1,180 +1,147 @@
<div class="container">

<div class="row">
<h3>Ontologies</h3>
</div>
<div class="row">
<table class="table">
<tr>
<th>Name</th>
<th>Version</th>
</tr>
<tr>
<td><a href="/viewer/oeo/">Open Energy Ontology (OEO)</a></td>
<td>{{ version }}</td>
</tr>
<tr>
<td><a href="https://github.com/OpenEnergyPlatform/oeo-extended">Open Energy Ontology Extended (OEOX)</a></td>
<td>1.0.0</td>
</tr>
</table>
<div class="container ontology-side">
<div class="ontology-side__section">
<h3 class="ontology-side__title">Ontologies</h3>
<div class="ontology-side__versions">
<div class="ontology-side__versions-header">
<span>Name</span>
<span>Version</span>
</div>
<div class="ontology-side__versions-row">
<span><a href="/viewer/oeo/">Open Energy Ontology (OEO)</a></span>
<span>{{ version }}</span>
</div>
<div class="ontology-side__versions-row">
<span><a href="https://github.com/OpenEnergyPlatform/oeo-extended">Open Energy Ontology Extended (OEOX)</a></span>
<span>1.0.0</span>
</div>
</div>


</div>

{% comment %}
<div class="row">
<h3>View the oeo version {{version}}</h3>
</div>
<div class="row">
<div class="col">
<div class="btn-group float-end" role="group" aria-label="Basic example">
<a class="btn btn-primary" href="/ontology/{{ontology}}/BFO_0000001/">
Browse oeo classes
</a>
</div>
</div>
<div class="col">
<a class="btn btn-primary" href="/viewer/oeo/">
Graphical oeo viewer
<div class="ontology-side__section">
<h3 class="container ontology-side__title">View the oeo version {{version}}</h3>
<div class="btn-group float-end" role="group" aria-label="Basic example">
<a class="btn btn-light" href="/ontology/{{ontology}}/BFO_0000001/">
Browse oeo classes
</a>
</div>
<a class="btn btn-light" href="/viewer/oeo/">
Graphical oeo viewer
</a>
</div>
<hr>
{% endcomment %}
<div class="row">
<h3>Get the latest OEO release</h3>
</div>
<div class="row">

<div class="ontology-side__section">
<h3 class="ontology-side__title">Get the latest OEO release</h3>
<p>Get the <a class=" " href="{% url 'oeo-latest-glossary' ontology='oeo' %}">Glossary</a>
to get an overview of the OEO contents. </p>
</div>

<div class="row">
<div class="col">
<a class="btn btn-primary" id="popoverTrigger"
href="{% url 'oeo-latest-full-zip' ontology='oeo' %}"
data-bs-toggle="popover"
data-bs-trigger="hover"
title="oeo release"
data-bs-content="Download the latest release oeo-{{version}} as zip archive.">
Download latest release {{version}}
</a>
</div>
</div>
<br>
<p>Download the latest oeo version {{version}} in OWL format: </p>
<div class="row">
<div class="col">
<a class="btn btn-primary" id="popoverTrigger"
href="/ontology/{{ontology}}/releases/oeo-full.owl"
data-bs-toggle="popover"
data-bs-trigger="hover"
title="full-oeo-owl"
data-bs-content="This file contains the complete version of the Open Energy Ontology (OEO) as an OWL file in XML/RDF format. It encompasses all classes, properties, and relationships defined within the OEO framework.">
Download full-oeo
</a>
<!-- Info button to trigger the modal -->
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#oeoFullInfoModal">
<i class="fas fa-info-circle"></i>
</button>
</div>
</div>
<div class="row">
<!-- Modal for oeo-full-info -->
<div class="modal fade" id="oeoFullInfoModal" tabindex="-1" aria-labelledby="oeoFullInfoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="oeoFullInfoModalLabel">Full OEO Information</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="oeo-full-info">
<p>The open energy platform currently only provides the latest version for download.
Please find previous versions on GitHub.</p>
<p>You can download the full ontology using the following URLs:</p>
<ul>
<li><a href="/ontology/oeo/" target="_blank">https://openenergyplatform.org/ontology/oeo/</a></li>
<li><a href="/ontology/oeo/releases/oeo-full.owl" target="_blank">https://openenergyplatform.org/ontology/oeo/releases/oeo-full.owl</a></li>
</ul>

<a class="ontology-side__btn-main" id="popoverTrigger"
href="{% url 'oeo-latest-full-zip' ontology='oeo' %}"
data-bs-toggle="popover"
data-bs-trigger="hover"
title="oeo release"
data-bs-content="Download the latest release oeo-{{version}} as zip archive.">
Download latest release {{version}}
</a>
<p>Download the latest oeo version {{version}} in OWL format: </p>
<a id="popoverTrigger"
class="ontology-side__btn-link"
href="/ontology/{{ontology}}/releases/oeo-full.owl"
data-bs-toggle="popover"
data-bs-trigger="hover"
title="full-oeo-owl"
data-bs-content="This file contains the complete version of the Open Energy Ontology (OEO) as an OWL file in XML/RDF format. It encompasses all classes, properties, and relationships defined within the OEO framework.">
Download full-oeo
</a>
<!-- Info button to trigger the modal -->
<button type="button" class="ontology-side__btn-popover" data-bs-toggle="modal" data-bs-target="#oeoFullInfoModal">
<i class="fas fa-info-circle"></i>
</button>
<div class="row">
<!-- Modal for oeo-full-info -->
<div class="modal fade" id="oeoFullInfoModal" tabindex="-1" aria-labelledby="oeoFullInfoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="oeoFullInfoModalLabel">Full OEO Information</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="oeo-full-info">
<p>The open energy platform currently only provides the latest version for download.
Please find previous versions on GitHub.</p>
<p>You can download the full ontology using the following URLs:</p>
<ul>
<li><a href="/ontology/oeo/" target="_blank">https://openenergyplatform.org/ontology/oeo/</a></li>
<li><a href="/ontology/oeo/releases/oeo-full.owl" target="_blank">https://openenergyplatform.org/ontology/oeo/releases/oeo-full.owl</a></li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<div class="btn-group" role="group" aria-label="Basic example">
<a class="btn btn-primary" id="popoverTrigger"
href="/ontology/{{ontology}}/releases/oeo-closure.owl"
data-bs-toggle="popover"
data-bs-trigger="hover focus"
title="closure"
data-bs-content="This file represents the Open Energy Ontology (OEO) with the logical closure of all axioms included. It is provided as an OWL file in XML/RDF format, ensuring that all inferred relationships and properties are fully realized.">
Download closure
</a>
<div class="row">
<div class="col">
<div class="btn-group" role="group" aria-label="Basic example">
<a id="popoverTrigger"
class="ontology-side__btn-link"
href="/ontology/{{ontology}}/releases/oeo-closure.owl"
data-bs-toggle="popover"
data-bs-trigger="hover focus"
title="closure"
data-bs-content="This file represents the Open Energy Ontology (OEO) with the logical closure of all axioms included. It is provided as an OWL file in XML/RDF format, ensuring that all inferred relationships and properties are fully realized.">
Download closure
</a>
</div>
<button type="button" class="ontology-side__btn-popover" data-bs-toggle="modal" data-bs-target="#closureInfoModal">
<i class="fas fa-info-circle"></i>
</button>
</div>
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#closureInfoModal">
<i class="fas fa-info-circle"></i>
</button>

</div>

</div>
<div class="row">
<!-- Modal for closure-info -->
<div class="modal fade" id="closureInfoModal" tabindex="-1" aria-labelledby="closureInfoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="closureInfoModalLabel">Closure OEO Information</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="closure-info">
The open energy platform currently only provides the latest version for download.
Please find previous versions on GitHub.
<p>You can download the closure file using the following URL:</p>
<ul>
<li><a href="/ontology/oeo/releases/oeo-closure.owl" target="_blank">https://openenergyplatform.org/ontology/oeo/releases/oeo-closure.owl</a></li>
</ul>
<div class="row">
<!-- Modal for closure-info -->
<div class="modal fade" id="closureInfoModal" tabindex="-1" aria-labelledby="closureInfoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="closureInfoModalLabel">Closure OEO Information</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="closure-info">
The open energy platform currently only provides the latest version for download.
Please find previous versions on GitHub.
<p>You can download the closure file using the following URL:</p>
<ul>
<li><a href="/ontology/oeo/releases/oeo-closure.owl" target="_blank">https://openenergyplatform.org/ontology/oeo/releases/oeo-closure.owl</a></li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

<hr>
<div class="row">
<h3>The OEO on GitHub</h3>
</div>
<div class="row">
<div class="col">
On GitHub you can find previous releases.

<div class="ontology-side__section">
<h3 class="ontology-side__title">The OEO on GitHub</h3>
<span>
On GitHub you can find previous releases.
If you are interested in the latest developments then have a look at the develop branch.
</div>


</div>
<br>
<div class="row">
<div class="col">
<a class="btn btn-primary" href="https://github.com/OpenEnergyPlatform/ontology/releases" target="_blank">
<i class="fas fa-external-link-alt"></i>
Download release from GitHub.
</a>
</div>
</div>
<br>
<div class="content-sidebar">
<div id="loading-spinner" class="spinner-border text-primary" role="status" style="display: none;">
<span class="visually-hidden">Loading...</span>
</span>
<a class="ontology-side__btn-link" href="https://github.com/OpenEnergyPlatform/ontology/releases" target="_blank">
<i class="fas fa-external-link-alt"></i>
Download release from GitHub.
</a>
<div class="content-sidebar">
<div id="loading-spinner" class="spinner-border text-primary" role="status" style="display: none;">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>

Expand Down
77 changes: 77 additions & 0 deletions theming/scss/layouts/_ontology.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,4 +110,81 @@
@extend .fs-6;
@extend .pb-4;
}
}

.main .content .ontology-side {
@extend .p-3;
@extend .mb-5;
@extend .border;
@extend .rounded;
margin-top: 6rem !important;
width: 20rem;
background-color: #FFF;

&__section {
@extend .pt-2;
@extend .pb-3;
@extend .border-bottom;
@extend .mb-3;

&:last-of-type {
@extend .pb-0;
@extend .border-0;
@extend .mb-0;
}
}

&__title {
@extend .fs-4;
@extend .text-dark;
@extend .mb-3;
}

&__versions {
&-header {
@extend .d-flex;
@extend .justify-content-between;
@extend .pb-2;
@extend .border-bottom;
@extend .mb-2;
@extend .text-muted;

span:last-of-type {
width: 20%;
}
}

&-row {
@extend .d-flex;
@extend .justify-content-between;
@extend .pb-2;

span:first-of-type {
flex: 1;
@extend .pe-2;
}

span:last-of-type {
width: 20%;
}
}
}

&__btn-popover {
@extend .btn;
@extend .btn-link;
@extend .py-0;
@extend .mb-0;
}

&__btn-link {
@extend .d-inline-block;
@extend .my-2;
}

&__btn-main {
@extend .btn;
@extend .btn-outline-primary;
@extend .mb-3;
}
}

0 comments on commit 5b20171

Please sign in to comment.