From 1f2153e7ed86412dd4c093041097a9fe39c68bc2 Mon Sep 17 00:00:00 2001 From: "Jorge hangar.org" Date: Mon, 28 Jun 2021 19:35:34 +0200 Subject: [PATCH] collections as ul/li and tabbed info --- .gitignore | 3 +- src/assets/js/app.js | 10 +- src/assets/scss/components/_tables.scss | 69 ++++++++++- src/pages/omeka-index.html | 4 +- src/partials/section-collections-latest.html | 113 ++++++++++++++----- 5 files changed, 168 insertions(+), 31 deletions(-) diff --git a/.gitignore b/.gitignore index 1ebbffa..ef623b5 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ bower_components dist *.swp .cache -.idea \ No newline at end of file +.idea +src/table-expand.zip diff --git a/src/assets/js/app.js b/src/assets/js/app.js index 281ee7e..75bb36c 100644 --- a/src/assets/js/app.js +++ b/src/assets/js/app.js @@ -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(); diff --git a/src/assets/scss/components/_tables.scss b/src/assets/scss/components/_tables.scss index 2364bd9..1ea8b85 100644 --- a/src/assets/scss/components/_tables.scss +++ b/src/assets/scss/components/_tables.scss @@ -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 +// -- diff --git a/src/pages/omeka-index.html b/src/pages/omeka-index.html index 90d7866..f77a065 100644 --- a/src/pages/omeka-index.html +++ b/src/pages/omeka-index.html @@ -4,4 +4,6 @@ layout: omeka {{> section-collections-latest}} - {{> section-collections}} + + + diff --git a/src/partials/section-collections-latest.html b/src/partials/section-collections-latest.html index 9dbb7a1..0ac24a3 100644 --- a/src/partials/section-collections-latest.html +++ b/src/partials/section-collections-latest.html @@ -3,63 +3,122 @@

Latest in collections

+
-
-
- +
+ +
+

+ 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.
+ +

+ + + + + + +