<link rel="stylesheet" type="text/css" href="resources/fonts/font.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald&display=swap"/> <link rel="stylesheet" href="resources/css/theme.css"/> <script type="module" src="pb-components-bundle.js" data-template="pages:load-components"/> <link rel="stylesheet" type="text/css" href="resources/scripts/timeline/dist/css/timeline.min.css"/> <script type="text/javascript" src="resources/scripts/timeline/dist/js/timeline.min.js"/> <style> main { display: flex; flex-direction: row; margin-top: 10px; } .search-panel { flex: 1 1; margin: 0 20px; } .search-panel paper-card { width: 100%; } .targets paper-checkbox { margin-top: 10px; } #results { flex: 2 1; overflow: scroll; margin: 0 20px; height: calc(100vh - 140px); } #results paper-card { width: 100%; margin-bottom: 15px; padding: 8px; } #results header { display: flex; justify-content: flex-start; } #results .count { margin-right: 20px; font-weight: bold; } .breadcrumb:link, .breadcrumb:visited { text-decoration: none; color: var(--paper-grey-600); } .breadcrumb:before { content: '>'; padding: 0 8px; font-weight: bold; } .breadcrumb:first-child::before { content: ''; } .matches { display: table; margin-left: 20px; margin-top: 10px; font: var(--pb-results-body-font); } .matches p { display: table-row; } .matches p * { display: table-cell; padding: 4px 8px; } .hi { display: block; } #facets h3 { display: flex; flex-direction: row; align-self: center; justify-content: space-between; } #facets h3 paper-checkbox { font-size: 85%; } #facets table td:nth-child(2) { color: #808080; text-align: right; padding-left: 1em; vertical-align: middle; } .inprint { display: none; } /* Popup container - can be anything you want */ .popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* The actual popup */ .popup .popuptext { visibility: hidden; width: 160px; background-color: #1e295d; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -80px; } /* Popup arrow */ .popup .popuptext::before { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #555 transparent ; } /* Toggle this class - hide and show the popup */ .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} } @media print { @page { margin: 50px; } .menubar, .breadcrumbs, .exprint { display: none; } .inprint { display: block; } } </style> </head> <body> <pb-page data-template="pages:pb-page" unresolved="unresolved" locales="resources/i18n/{{ns}}/{{lng}}.json"> <app-header-layout> <app-header class="exprint" slot="header" reveals="reveals" fixed="fixed" effects="waterfall"> <app-toolbar data-template="lib:include" data-template-path="templates/menu.html"/> <app-toolbar data-template="lib:include" data-template-path="templates/toolbar.html"/> <app-toolbar> <pb-paginate per-page="10" range="5" subscribe="results"/> <pb-progress indeterminate="indeterminate" bottom-item="bottom-item"/> </app-toolbar> </app-header> <main> <section class="page-section" id="vertical-demo"> <div class="container"> <center class="inprint"><img class="logo"/></center> <br/> <br/> <h2>Timeline of Events (demo) </h2>  <div class="timeline timeline--loaded" id="timeline-vertical" style="opacity: 1;"> <div class="timeline__wrap"> <div class="timeline__items"> <span data-template="app:fragtragevents"/> </div> </div> </div> </div>  </section> </main> </app-header-layout> </pb-page> <script> const facets = document.getElementById('facets'); if (facets) { facets.addEventListener('pb-custom-form-loaded', function(ev) { const elems = ev.detail.querySelectorAll('.facet'); elems.forEach(facet => { facet.addEventListener('change', () => { const table = facet.closest('table'); if (table) { const nested = table.querySelectorAll('.nested .facet').forEach(nested => { if (nested != facet) { nested.checked = false; } }); } facets._submit(); }); }); }); } timeline(document.querySelectorAll('.timeline'), { verticalStartPosition: 'right', verticalTrigger: '150px' }); </script> </body> </html>