arcHIVE-tech/arc-hive-HTML-template
arcHIVE-tech
/
arc-hive-HTML-template
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

collections as ul/li and tabbed info

This commit is contained in:
jorge 2021-06-28 19:35:34 +02:00
parent 6d0609858d
commit 1f2153e7ed
5 changed files with 168 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -5,4 +5,5 @@ bower_components
dist
*.swp
.cache
.idea
.idea
src/table-expand.zip

10
src/assets/js/app.js
View File

@ -1,5 +1,11 @@
import $ from 'jquery';
import 'what-input';
//https://get.foundation/building-blocks/blocks/table-expand.html
$('[data-open-details]').click(function (e) {
e.preventDefault();
$(this).next().toggleClass('is-active');
$(this).toggleClass('is-active');
});
// Foundation JS relies on a global variable. In ES6, all imports are hoisted
// to the top of the file so if we used `import` to import Foundation,
@ -11,7 +17,9 @@ require('foundation-sites');
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';
// import './lib/foundation-explicit-pieces';
$(document).foundation();

69
src/assets/scss/components/_tables.scss
View File

@ -1,5 +1,5 @@
table {
tr._expand_site_item {
tbody .table-expand-row{
border-top: $global-border-archive;
}
th {
@ -11,3 +11,70 @@ table {
line-height: 1.6;
}
}
// --
// table expand
// https://get.foundation/building-blocks/blocks/table-expand.html
.table-expand {
// margin-top: 5rem;
td {
// color: $dark-gray;
}
tr {
// border: 1px solid $light-gray;
}
.text-right {
// padding-right: 3rem;
}
}
.table-expand-row {
&.is-active {
.expand-icon::after {
content: '-';
}
}
.expand-icon::after {
content: '+';
float: right;
}
}
// this is where the magic happens
.table-expand-row-content {
display: none;
}
.table-expand-row-content {
&.is-active {
display: table-row;
animation: fadeIn ease-in 1;
animation-fill-mode: both;
animation-duration: 0.5s;
}
}
.table-expand-row-nested {
column-span: 3;
// background-color: $light-gray;
&:first-child {
column-span: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
// end table expand
// --

4
src/pages/omeka-index.html
View File

@ -4,4 +4,6 @@ layout: omeka
{{> section-collections-latest}}
{{> section-collections}}
<!-- {{> section-collections}} -->
<!-- {{> section-collections-02}} -->

113
src/partials/section-collections-latest.html
View File

@ -3,63 +3,122 @@
<header>
<h2> Latest in collections</h2>
</header>
<main class="">
<article class="">
<ul class="accordion" data-responsive-accordion-tabs="accordion small-accordion" data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
<ul class="accordion" data-responsive-accordion-tabs="accordion small-accordion" data-multi-expand="true" data-allow-all-closed="true" data-deep-link="true">
<li class="accordion-item title" data-accordion-item disabled>
<a href="#" class="accordion-title">
<ul class="">
<li class="title">Title</li>
<li class="artist">Artist</li>
<li class="main">Main</li>
<li class="category">Category</li>
<li class="curator">Artist</li>
<li class="collection-name">Collection</li>
<li class="date">Date</li>
</ul>
</a>
<div class="accordion-content" data-tab-content>
<figure>
</figure>
<p>
</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<ul class="">
<li class="title">Conservation and Digitzation</li>
<li class="artist">Marta Louro</li>
<li class="category">Instalation</li>
<li class="year">2021</li>
<li class="title">Hangar</li>
<li class="artist"></li>
<li class="category"></li>
<li class="year"></li>
</ul>
</a>
<div class="accordion-content" data-tab-content>
<figure>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque unde quaerat reprehenderit ipsa ipsam, adipisci facere repellendus impedit at, quisquam dicta optio veniam quia nesciunt, inventore quod in neque magni?</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<ul class="">
<li class="title">Modules</li>
<li class="artist">Chris</li>
<li class="category">Hangar people</li>
<li class="year">2021-03-09</li>
</ul>
</a>
<div class="accordion-content" data-tab-content>
<img src="https://dev-archive.hangar.org/files/large/81/3D-Panoramic-Landscape-Image-768x288.jpg">
<p>You can extend the functionality of Omeka S by writing an add-on component called a module. Zend Framework provides a substantial framework for writing modules, but Omeka S provides extra structure that makes the modules installable, upgradeable, and integratable. You can extend the functionality of Omeka S by writing an add-on component called a module. Zend Framework provides a substantial framework for writing modules, but Omeka S provides extra structure that makes the modules installable, upgradeable, and integratable.</p>
<br>
<button class="go_to_site_button" onclick="window.location.href = '/s/modules'">
View
</button>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<ul class="">
<li class="title">Light Scapes</li>
<li class="artist">Kim Doan</li>
<li class="category">Performance</li>
<li class="year">2021</li>
<li class="title">Trees and cells</li>
<li class="artist"></li>
<li class="category"></li>
<li class="year"></li>
</ul>
</a>
<div class="accordion-content" data-tab-content>
Here, some footnotes of structural imagination <br>
<button class="go_to_site_button" onclick="window.location.href = '/s/trees-and-cells'">
View
</button>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<ul class="">
<li class="title">VideoReplication</li>
<li class="artist"></li>
<li class="category"></li>
<li class="year"></li>
</ul>
</a>
<div class="accordion-content" data-tab-content>
<figure>
</figure>
<p>
<button class="go_to_site_button" onclick="window.location.href = '/s/videoreplication'">
View
</button>
</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<ul class="">
<li class="title">I will grow my burger</li>
<li class="artist">Oron Catts and Andy Gracie</li>
<li class="category">Research</li>
<li class="year">2021</li>
<li class="title">Werewolves</li>
<li class="artist">Antonio + Chris</li>
<li class="category">Hangar people</li>
<li class="year">2021-03-02</li>
</ul>
</a>
<div class="accordion-content" data-tab-content>
</div>
</li>
</ul>
</article>
</main>
<aside>
<nav>
<a href="#" class="button">More than 200 Biomedia Artworks</a>
</nav>
</aside>
<figure>
<img src="https://dev-archive.hangar.org/files/large/89/scary-werewolf.jpg">
</figure>
<p>
The werewolf is a widespread concept in European folklore, existing in many variants, which are related by a common development of a Christian interpretation of underlying European folklore developed during the medieval period. From the early modern period, werewolf beliefs also spread to the New World with colonialism. Belief in werewolves developed in parallel to the belief in witches, in the course of the Late Middle Ages and the Early Modern period. <br>
<button class="button small" onclick="window.location.href = '/s/Werewolves'">
View
</button>
</p>
</div>
</li>
</ul>
</article>
</main>
<aside>
</aside>
</section>