mirror of
https://github.com/Theodor-Springmann-Stiftung/musenalm.git
synced 2025-10-29 09:15:33 +00:00
Slight page refactoring, text pages, tooltips
This commit is contained in:
Simon Martens
BIN
views/assets/bg.jpg
Normal file
BIN
views/assets/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
655
views/assets/css/hint.css
Normal file
655
views/assets/css/hint.css
Normal file
@@ -0,0 +1,655 @@
|
||||
/*! Hint.css - v2.7.0 - 2021-10-01
|
||||
* https://kushagra.dev/lab/hint/
|
||||
* Copyright (c) 2021 Kushagra Gour */
|
||||
|
||||
/*-------------------------------------*\
|
||||
HINT.css - A CSS tooltip library
|
||||
\*-------------------------------------*/
|
||||
/**
|
||||
* HINT.css is a tooltip library made in pure CSS.
|
||||
*
|
||||
* Source: https://github.com/chinchang/hint.css
|
||||
* Demo: http://kushagragour.in/lab/hint/
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* source: hint-core.scss
|
||||
*
|
||||
* Defines the basic styling for the tooltip.
|
||||
* Each tooltip is made of 2 parts:
|
||||
* 1) body (:after)
|
||||
* 2) arrow (:before)
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint
|
||||
*/
|
||||
[class*="hint--"] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/**
|
||||
* tooltip arrow
|
||||
*/
|
||||
/**
|
||||
* tooltip body
|
||||
*/ }
|
||||
[class*="hint--"]:before, [class*="hint--"]:after {
|
||||
position: absolute;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 1000000;
|
||||
pointer-events: none;
|
||||
-webkit-transition: 0.3s ease;
|
||||
-moz-transition: 0.3s ease;
|
||||
transition: 0.3s ease;
|
||||
-webkit-transition-delay: 0ms;
|
||||
-moz-transition-delay: 0ms;
|
||||
transition-delay: 0ms; }
|
||||
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
|
||||
visibility: visible;
|
||||
opacity: 1; }
|
||||
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
|
||||
-webkit-transition-delay: 100ms;
|
||||
-moz-transition-delay: 100ms;
|
||||
transition-delay: 100ms; }
|
||||
[class*="hint--"]:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
border: 6px solid transparent;
|
||||
z-index: 1000001; }
|
||||
[class*="hint--"]:after {
|
||||
background: #383838;
|
||||
color: white;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 12px;
|
||||
white-space: nowrap; }
|
||||
[class*="hint--"][aria-label]:after {
|
||||
content: attr(aria-label); }
|
||||
[class*="hint--"][data-hint]:after {
|
||||
content: attr(data-hint); }
|
||||
|
||||
[aria-label='']:before, [aria-label='']:after,
|
||||
[data-hint='']:before,
|
||||
[data-hint='']:after {
|
||||
display: none !important; }
|
||||
|
||||
/**
|
||||
* source: hint-position.scss
|
||||
*
|
||||
* Defines the positoning logic for the tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--top
|
||||
* 2) hint--bottom
|
||||
* 3) hint--left
|
||||
* 4) hint--right
|
||||
*/
|
||||
/**
|
||||
* set default color for tooltip arrows
|
||||
*/
|
||||
.hint--top-left:before {
|
||||
border-top-color: #383838; }
|
||||
|
||||
.hint--top-right:before {
|
||||
border-top-color: #383838; }
|
||||
|
||||
.hint--top:before {
|
||||
border-top-color: #383838; }
|
||||
|
||||
.hint--bottom-left:before {
|
||||
border-bottom-color: #383838; }
|
||||
|
||||
.hint--bottom-right:before {
|
||||
border-bottom-color: #383838; }
|
||||
|
||||
.hint--bottom:before {
|
||||
border-bottom-color: #383838; }
|
||||
|
||||
.hint--left:before {
|
||||
border-left-color: #383838; }
|
||||
|
||||
.hint--right:before {
|
||||
border-right-color: #383838; }
|
||||
|
||||
/**
|
||||
* top tooltip
|
||||
*/
|
||||
.hint--top:before {
|
||||
margin-bottom: -11px; }
|
||||
|
||||
.hint--top:before, .hint--top:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--top:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--top:after {
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
transform: translateX(-50%); }
|
||||
|
||||
.hint--top:hover:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--top:hover:after {
|
||||
-webkit-transform: translateX(-50%) translateY(-8px);
|
||||
-moz-transform: translateX(-50%) translateY(-8px);
|
||||
transform: translateX(-50%) translateY(-8px); }
|
||||
|
||||
/**
|
||||
* bottom tooltip
|
||||
*/
|
||||
.hint--bottom:before {
|
||||
margin-top: -11px; }
|
||||
|
||||
.hint--bottom:before, .hint--bottom:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--bottom:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--bottom:after {
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
transform: translateX(-50%); }
|
||||
|
||||
.hint--bottom:hover:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--bottom:hover:after {
|
||||
-webkit-transform: translateX(-50%) translateY(8px);
|
||||
-moz-transform: translateX(-50%) translateY(8px);
|
||||
transform: translateX(-50%) translateY(8px); }
|
||||
|
||||
/**
|
||||
* right tooltip
|
||||
*/
|
||||
.hint--right:before {
|
||||
margin-left: -11px;
|
||||
margin-bottom: -6px; }
|
||||
|
||||
.hint--right:after {
|
||||
margin-bottom: -14px; }
|
||||
|
||||
.hint--right:before, .hint--right:after {
|
||||
left: 100%;
|
||||
bottom: 50%; }
|
||||
|
||||
.hint--right:hover:before {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
.hint--right:hover:after {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
/**
|
||||
* left tooltip
|
||||
*/
|
||||
.hint--left:before {
|
||||
margin-right: -11px;
|
||||
margin-bottom: -6px; }
|
||||
|
||||
.hint--left:after {
|
||||
margin-bottom: -14px; }
|
||||
|
||||
.hint--left:before, .hint--left:after {
|
||||
right: 100%;
|
||||
bottom: 50%; }
|
||||
|
||||
.hint--left:hover:before {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
.hint--left:hover:after {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
/**
|
||||
* top-left tooltip
|
||||
*/
|
||||
.hint--top-left:before {
|
||||
margin-bottom: -11px; }
|
||||
|
||||
.hint--top-left:before, .hint--top-left:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--top-left:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--top-left:after {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-moz-transform: translateX(-100%);
|
||||
transform: translateX(-100%); }
|
||||
|
||||
.hint--top-left:after {
|
||||
margin-left: 12px; }
|
||||
|
||||
.hint--top-left:hover:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--top-left:hover:after {
|
||||
-webkit-transform: translateX(-100%) translateY(-8px);
|
||||
-moz-transform: translateX(-100%) translateY(-8px);
|
||||
transform: translateX(-100%) translateY(-8px); }
|
||||
|
||||
/**
|
||||
* top-right tooltip
|
||||
*/
|
||||
.hint--top-right:before {
|
||||
margin-bottom: -11px; }
|
||||
|
||||
.hint--top-right:before, .hint--top-right:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--top-right:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--top-right:after {
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
transform: translateX(0); }
|
||||
|
||||
.hint--top-right:after {
|
||||
margin-left: -12px; }
|
||||
|
||||
.hint--top-right:hover:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--top-right:hover:after {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
/**
|
||||
* bottom-left tooltip
|
||||
*/
|
||||
.hint--bottom-left:before {
|
||||
margin-top: -11px; }
|
||||
|
||||
.hint--bottom-left:before, .hint--bottom-left:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--bottom-left:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--bottom-left:after {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-moz-transform: translateX(-100%);
|
||||
transform: translateX(-100%); }
|
||||
|
||||
.hint--bottom-left:after {
|
||||
margin-left: 12px; }
|
||||
|
||||
.hint--bottom-left:hover:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--bottom-left:hover:after {
|
||||
-webkit-transform: translateX(-100%) translateY(8px);
|
||||
-moz-transform: translateX(-100%) translateY(8px);
|
||||
transform: translateX(-100%) translateY(8px); }
|
||||
|
||||
/**
|
||||
* bottom-right tooltip
|
||||
*/
|
||||
.hint--bottom-right:before {
|
||||
margin-top: -11px; }
|
||||
|
||||
.hint--bottom-right:before, .hint--bottom-right:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--bottom-right:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--bottom-right:after {
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
transform: translateX(0); }
|
||||
|
||||
.hint--bottom-right:after {
|
||||
margin-left: -12px; }
|
||||
|
||||
.hint--bottom-right:hover:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--bottom-right:hover:after {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
/**
|
||||
* source: hint-sizes.scss
|
||||
*
|
||||
* Defines width restricted tooltips that can span
|
||||
* across multiple lines.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--small
|
||||
* 2) hint--medium
|
||||
* 3) hint--large
|
||||
*
|
||||
*/
|
||||
.hint--small:after,
|
||||
.hint--medium:after,
|
||||
.hint--large:after {
|
||||
white-space: normal;
|
||||
line-height: 1.4em;
|
||||
word-wrap: break-word; }
|
||||
|
||||
.hint--small:after {
|
||||
width: 80px; }
|
||||
|
||||
.hint--medium:after {
|
||||
width: 150px; }
|
||||
|
||||
.hint--large:after {
|
||||
width: 300px; }
|
||||
|
||||
/**
|
||||
* source: hint-theme.scss
|
||||
*
|
||||
* Defines basic theme for tooltips.
|
||||
*
|
||||
*/
|
||||
[class*="hint--"] {
|
||||
/**
|
||||
* tooltip body
|
||||
*/ }
|
||||
[class*="hint--"]:after {
|
||||
text-shadow: 0 -1px 0px black;
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
/**
|
||||
* source: hint-color-types.scss
|
||||
*
|
||||
* Contains tooltips of various types based on color differences.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--error
|
||||
* 2) hint--warning
|
||||
* 3) hint--info
|
||||
* 4) hint--success
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* Error
|
||||
*/
|
||||
.hint--error:after {
|
||||
background-color: #b34e4d;
|
||||
text-shadow: 0 -1px 0px #592726; }
|
||||
|
||||
.hint--error.hint--top-left:before {
|
||||
border-top-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--top-right:before {
|
||||
border-top-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--top:before {
|
||||
border-top-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--bottom-left:before {
|
||||
border-bottom-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--bottom-right:before {
|
||||
border-bottom-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--bottom:before {
|
||||
border-bottom-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--left:before {
|
||||
border-left-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--right:before {
|
||||
border-right-color: #b34e4d; }
|
||||
|
||||
/**
|
||||
* Warning
|
||||
*/
|
||||
.hint--warning:after {
|
||||
background-color: #c09854;
|
||||
text-shadow: 0 -1px 0px #6c5328; }
|
||||
|
||||
.hint--warning.hint--top-left:before {
|
||||
border-top-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--top-right:before {
|
||||
border-top-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--top:before {
|
||||
border-top-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--bottom-left:before {
|
||||
border-bottom-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--bottom-right:before {
|
||||
border-bottom-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--bottom:before {
|
||||
border-bottom-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--left:before {
|
||||
border-left-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--right:before {
|
||||
border-right-color: #c09854; }
|
||||
|
||||
/**
|
||||
* Info
|
||||
*/
|
||||
.hint--info:after {
|
||||
background-color: #3986ac;
|
||||
text-shadow: 0 -1px 0px #1a3c4d; }
|
||||
|
||||
.hint--info.hint--top-left:before {
|
||||
border-top-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--top-right:before {
|
||||
border-top-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--top:before {
|
||||
border-top-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--bottom-left:before {
|
||||
border-bottom-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--bottom-right:before {
|
||||
border-bottom-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--bottom:before {
|
||||
border-bottom-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--left:before {
|
||||
border-left-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--right:before {
|
||||
border-right-color: #3986ac; }
|
||||
|
||||
/**
|
||||
* Success
|
||||
*/
|
||||
.hint--success:after {
|
||||
background-color: #458746;
|
||||
text-shadow: 0 -1px 0px #1a321a; }
|
||||
|
||||
.hint--success.hint--top-left:before {
|
||||
border-top-color: #458746; }
|
||||
|
||||
.hint--success.hint--top-right:before {
|
||||
border-top-color: #458746; }
|
||||
|
||||
.hint--success.hint--top:before {
|
||||
border-top-color: #458746; }
|
||||
|
||||
.hint--success.hint--bottom-left:before {
|
||||
border-bottom-color: #458746; }
|
||||
|
||||
.hint--success.hint--bottom-right:before {
|
||||
border-bottom-color: #458746; }
|
||||
|
||||
.hint--success.hint--bottom:before {
|
||||
border-bottom-color: #458746; }
|
||||
|
||||
.hint--success.hint--left:before {
|
||||
border-left-color: #458746; }
|
||||
|
||||
.hint--success.hint--right:before {
|
||||
border-right-color: #458746; }
|
||||
|
||||
/**
|
||||
* source: hint-always.scss
|
||||
*
|
||||
* Defines a persisted tooltip which shows always.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--always
|
||||
*
|
||||
*/
|
||||
.hint--always:after, .hint--always:before {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
|
||||
.hint--always.hint--top:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top:after {
|
||||
-webkit-transform: translateX(-50%) translateY(-8px);
|
||||
-moz-transform: translateX(-50%) translateY(-8px);
|
||||
transform: translateX(-50%) translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-left:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-left:after {
|
||||
-webkit-transform: translateX(-100%) translateY(-8px);
|
||||
-moz-transform: translateX(-100%) translateY(-8px);
|
||||
transform: translateX(-100%) translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-right:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-right:after {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--always.hint--bottom:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom:after {
|
||||
-webkit-transform: translateX(-50%) translateY(8px);
|
||||
-moz-transform: translateX(-50%) translateY(8px);
|
||||
transform: translateX(-50%) translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-left:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-left:after {
|
||||
-webkit-transform: translateX(-100%) translateY(8px);
|
||||
-moz-transform: translateX(-100%) translateY(8px);
|
||||
transform: translateX(-100%) translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-right:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-right:after {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--always.hint--left:before {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
.hint--always.hint--left:after {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
.hint--always.hint--right:before {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
.hint--always.hint--right:after {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
/**
|
||||
* source: hint-rounded.scss
|
||||
*
|
||||
* Defines rounded corner tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--rounded
|
||||
*
|
||||
*/
|
||||
.hint--rounded:after {
|
||||
border-radius: 4px; }
|
||||
|
||||
/**
|
||||
* source: hint-effects.scss
|
||||
*
|
||||
* Defines various transition effects for the tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--no-animate
|
||||
* 2) hint--bounce
|
||||
*
|
||||
*/
|
||||
.hint--no-animate:before, .hint--no-animate:after {
|
||||
-webkit-transition-duration: 0ms;
|
||||
-moz-transition-duration: 0ms;
|
||||
transition-duration: 0ms; }
|
||||
|
||||
.hint--bounce:before, .hint--bounce:after {
|
||||
-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
|
||||
|
||||
.hint--no-shadow:before, .hint--no-shadow:after {
|
||||
text-shadow: initial;
|
||||
box-shadow: initial; }
|
||||
|
||||
.hint--no-arrow:before {
|
||||
display: none; }
|
||||
5
views/assets/css/hint.min.css
vendored
Normal file
5
views/assets/css/hint.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
views/assets/hintergrund.png
Normal file
BIN
views/assets/hintergrund.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 MiB |
@@ -1,48 +1,48 @@
|
||||
var _ = (i) => {
|
||||
throw TypeError(i);
|
||||
var _ = (s) => {
|
||||
throw TypeError(s);
|
||||
};
|
||||
var L = (i, r, t) => r.has(i) || _("Cannot " + t);
|
||||
var d = (i, r, t) => (L(i, r, "read from private field"), t ? t.call(i) : r.get(i)), o = (i, r, t) => r.has(i) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, t), a = (i, r, t, e) => (L(i, r, "write to private field"), e ? e.call(i, t) : r.set(i, t), t), u = (i, r, t) => (L(i, r, "access private method"), t);
|
||||
const v = "script[xslt-onload]", b = "xslt-template", w = "xslt-transformed", k = "filter-list", f = "filter-list-list", y = "filter-list-item", A = "filter-list-input", m = "filter-list-searchable", F = "scroll-button";
|
||||
var l, p, E;
|
||||
class H {
|
||||
var L = (s, i, t) => i.has(s) || _("Cannot " + t);
|
||||
var d = (s, i, t) => (L(s, i, "read from private field"), t ? t.call(s) : i.get(s)), n = (s, i, t) => i.has(s) ? _("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), a = (s, i, t, e) => (L(s, i, "write to private field"), e ? e.call(s, t) : i.set(s, t), t), u = (s, i, t) => (L(s, i, "access private method"), t);
|
||||
const S = "script[xslt-onload]", b = "xslt-template", w = "xslt-transformed", y = "filter-list", p = "filter-list-list", k = "filter-list-item", A = "filter-list-input", g = "filter-list-searchable", M = "scroll-button", F = "tool-tip";
|
||||
var l, f, x;
|
||||
class $ {
|
||||
constructor() {
|
||||
o(this, p);
|
||||
o(this, l);
|
||||
n(this, f);
|
||||
n(this, l);
|
||||
a(this, l, /* @__PURE__ */ new Map());
|
||||
}
|
||||
setup() {
|
||||
let r = htmx.findAll(v);
|
||||
for (let t of r)
|
||||
u(this, p, E).call(this, t);
|
||||
let i = htmx.findAll(S);
|
||||
for (let t of i)
|
||||
u(this, f, x).call(this, t);
|
||||
}
|
||||
hookupHTMX() {
|
||||
htmx.on("htmx:load", (r) => {
|
||||
htmx.on("htmx:load", (i) => {
|
||||
this.setup();
|
||||
});
|
||||
}
|
||||
}
|
||||
l = new WeakMap(), p = new WeakSet(), E = function(r) {
|
||||
if (r.getAttribute(w) === "true" || !r.hasAttribute(b))
|
||||
l = new WeakMap(), f = new WeakSet(), x = function(i) {
|
||||
if (i.getAttribute(w) === "true" || !i.hasAttribute(b))
|
||||
return;
|
||||
let t = "#" + r.getAttribute(b), e = d(this, l).get(t);
|
||||
let t = "#" + i.getAttribute(b), e = d(this, l).get(t);
|
||||
if (!e) {
|
||||
let c = htmx.find(t);
|
||||
if (c) {
|
||||
let x = c.innerHTML ? new DOMParser().parseFromString(c.innerHTML, "application/xml") : c.contentDocument;
|
||||
e = new XSLTProcessor(), e.importStylesheet(x), d(this, l).set(t, e);
|
||||
let v = c.innerHTML ? new DOMParser().parseFromString(c.innerHTML, "application/xml") : c.contentDocument;
|
||||
e = new XSLTProcessor(), e.importStylesheet(v), d(this, l).set(t, e);
|
||||
} else
|
||||
throw new Error("Unknown XSLT template: " + t);
|
||||
}
|
||||
let s = new DOMParser().parseFromString(r.innerHTML, "application/xml"), T = e.transformToFragment(s, document), S = new XMLSerializer().serializeToString(T);
|
||||
r.outerHTML = S;
|
||||
let r = new DOMParser().parseFromString(i.innerHTML, "application/xml"), T = e.transformToFragment(r, document), E = new XMLSerializer().serializeToString(T);
|
||||
i.outerHTML = E;
|
||||
};
|
||||
var n, h, g;
|
||||
var o, h, m;
|
||||
class I extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
o(this, h);
|
||||
o(this, n, !1);
|
||||
n(this, h);
|
||||
n(this, o, !1);
|
||||
this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this.render();
|
||||
}
|
||||
static get observedAttributes() {
|
||||
@@ -55,23 +55,23 @@ class I extends HTMLElement {
|
||||
return this._items;
|
||||
}
|
||||
connectedCallback() {
|
||||
this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._filterstart && a(this, n, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this));
|
||||
this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._filterstart && a(this, o, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this));
|
||||
}
|
||||
attributeChangedCallback(t, e, s) {
|
||||
t === "data-url" && e !== s && (this._url = s, this.render()), t === "data-filterstart" && e !== s && (this._filterstart = s === "true", this.render()), t === "data-placeholder" && e !== s && (this._placeholder = s, this.render());
|
||||
attributeChangedCallback(t, e, r) {
|
||||
t === "data-url" && e !== r && (this._url = r, this.render()), t === "data-filterstart" && e !== r && (this._filterstart = r === "true", this.render()), t === "data-placeholder" && e !== r && (this._placeholder = r, this.render());
|
||||
}
|
||||
onInput(t) {
|
||||
t.target && t.target.tagName.toLowerCase() === "input" && (this._filter = t.target.value, this.renderList());
|
||||
}
|
||||
onGainFocus(t) {
|
||||
t.target && t.target.tagName.toLowerCase() === "input" && (a(this, n, !1), this.renderList());
|
||||
t.target && t.target.tagName.toLowerCase() === "input" && (a(this, o, !1), this.renderList());
|
||||
}
|
||||
onLoseFocus(t) {
|
||||
let e = this.querySelector("input");
|
||||
if (t.target && t.target === e) {
|
||||
if (relatedElement = t.relatedTarget, relatedElement && this.contains(relatedElement))
|
||||
return;
|
||||
e.value = "", this._filter = "", this._filterstart && a(this, n, !0), this.renderList();
|
||||
e.value = "", this._filter = "", this._filterstart && a(this, o, !0), this.renderList();
|
||||
}
|
||||
}
|
||||
onEnter(t) {
|
||||
@@ -84,10 +84,10 @@ class I extends HTMLElement {
|
||||
mark() {
|
||||
if (typeof Mark != "function")
|
||||
return;
|
||||
let t = this.querySelector("#" + f);
|
||||
let t = this.querySelector("#" + p);
|
||||
if (!t)
|
||||
return;
|
||||
let e = new Mark(t.querySelectorAll("." + m));
|
||||
let e = new Mark(t.querySelectorAll("." + g));
|
||||
this._filter && e.mark(this._filter, {
|
||||
separateWordSearch: !0
|
||||
});
|
||||
@@ -124,10 +124,10 @@ class I extends HTMLElement {
|
||||
}
|
||||
getLinkText(t) {
|
||||
let e = this.getSearchText(t);
|
||||
return e === "" ? "" : `<span class="${m}">${e}</span>`;
|
||||
return e === "" ? "" : `<span class="${g}">${e}</span>`;
|
||||
}
|
||||
renderList() {
|
||||
let t = this.querySelector("#" + f);
|
||||
let t = this.querySelector("#" + p);
|
||||
t && (t.outerHTML = this.List()), this.mark();
|
||||
}
|
||||
render() {
|
||||
@@ -139,7 +139,7 @@ class I extends HTMLElement {
|
||||
`;
|
||||
}
|
||||
ActiveDot(t) {
|
||||
return u(this, h, g).call(this, t), "";
|
||||
return u(this, h, m).call(this, t), "";
|
||||
}
|
||||
NoItems(t) {
|
||||
return t.length === 0 ? '<div class="px-2 py-0.5 italic text-gray-500">Keine Einträge gefunden</div>' : "";
|
||||
@@ -164,16 +164,16 @@ class I extends HTMLElement {
|
||||
t = this._items.filter((e) => this.getSearchText(e).toLowerCase().startsWith(this._filter.toLowerCase()));
|
||||
else {
|
||||
let e = this._filter.split(" ");
|
||||
t = this._items.filter((s) => e.every((T) => this.getSearchText(s).toLowerCase().includes(T.toLowerCase())));
|
||||
t = this._items.filter((r) => e.every((T) => this.getSearchText(r).toLowerCase().includes(T.toLowerCase())));
|
||||
}
|
||||
return `
|
||||
<div id="${f}" class="${f} pt-1 min-h-[19rem] max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${d(this, n) ? "hidden" : ""}">
|
||||
<div id="${p}" class="${p} pt-1 min-h-[19rem] max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${d(this, o) ? "hidden" : ""}">
|
||||
${t.map(
|
||||
(e, s) => `
|
||||
(e, r) => `
|
||||
<a
|
||||
href="${this._url}${this.getHREF(e)}"
|
||||
class="${y} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
|
||||
${u(this, h, g).call(this, e) ? 'aria-current="page"' : ""}>
|
||||
class="${k} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${r % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
|
||||
${u(this, h, m).call(this, e) ? 'aria-current="page"' : ""}>
|
||||
${this.ActiveDot(e)}
|
||||
${this.getLinkText(e)}
|
||||
</a>
|
||||
@@ -184,13 +184,13 @@ class I extends HTMLElement {
|
||||
`;
|
||||
}
|
||||
}
|
||||
n = new WeakMap(), h = new WeakSet(), g = function(t) {
|
||||
o = new WeakMap(), h = new WeakSet(), m = function(t) {
|
||||
if (!t)
|
||||
return !1;
|
||||
let e = this.getHREF(t);
|
||||
return !(e === "" || !window.location.href.endsWith(e));
|
||||
};
|
||||
class M extends HTMLElement {
|
||||
class B extends HTMLElement {
|
||||
constructor() {
|
||||
super(), this.handleScroll = this.handleScroll.bind(this), this.scrollToTop = this.scrollToTop.bind(this);
|
||||
}
|
||||
@@ -226,10 +226,112 @@ class M extends HTMLElement {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
customElements.define(k, I);
|
||||
customElements.define(F, M);
|
||||
class C extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ["position"];
|
||||
}
|
||||
constructor() {
|
||||
super(), this._tooltipBox = null;
|
||||
}
|
||||
connectedCallback() {
|
||||
this.style.position = "relative";
|
||||
const i = this.querySelector(".data-tip"), t = i ? i.innerHTML : "Tooltip";
|
||||
i && i.remove(), this._tooltipBox = document.createElement("div"), this._tooltipBox.innerHTML = t, this._tooltipBox.className = [
|
||||
"opacity-0",
|
||||
"hidden",
|
||||
"absolute",
|
||||
"px-2",
|
||||
"py-1",
|
||||
"text-sm",
|
||||
"text-white",
|
||||
"bg-gray-900",
|
||||
"rounded",
|
||||
"shadow",
|
||||
"z-10",
|
||||
"whitespace-nowrap",
|
||||
"transition-all",
|
||||
"duration-200",
|
||||
"font-sans"
|
||||
].join(" "), this.appendChild(this._tooltipBox), this._updatePosition(), this.addEventListener("mouseenter", () => this._showTooltip()), this.addEventListener("mouseleave", () => this._hideTooltip());
|
||||
}
|
||||
attributeChangedCallback(i, t, e) {
|
||||
i === "position" && this._tooltipBox && this._updatePosition();
|
||||
}
|
||||
_showTooltip() {
|
||||
this._tooltipBox.classList.remove("hidden"), setTimeout(() => {
|
||||
this._tooltipBox.classList.remove("opacity-0"), this._tooltipBox.classList.add("opacity-100");
|
||||
}, 16);
|
||||
}
|
||||
_hideTooltip() {
|
||||
setTimeout(() => {
|
||||
this._tooltipBox.classList.remove("opacity-100"), this._tooltipBox.classList.add("opacity-0"), setTimeout(() => {
|
||||
this._tooltipBox.classList.add("hidden");
|
||||
}, 200);
|
||||
}, 100);
|
||||
}
|
||||
_updatePosition() {
|
||||
switch (this._tooltipBox.classList.remove(
|
||||
"bottom-full",
|
||||
"left-1/2",
|
||||
"-translate-x-1/2",
|
||||
"mb-2",
|
||||
// top
|
||||
"top-full",
|
||||
"mt-2",
|
||||
// bottom
|
||||
"right-full",
|
||||
"-translate-y-1/2",
|
||||
"mr-2",
|
||||
"top-1/2",
|
||||
// left
|
||||
"left-full",
|
||||
"ml-2"
|
||||
// right
|
||||
), this.getAttribute("position") || "top") {
|
||||
case "bottom":
|
||||
this._tooltipBox.classList.add(
|
||||
"top-full",
|
||||
"left-1/2",
|
||||
"transform",
|
||||
"-translate-x-1/2",
|
||||
"mt-0.5"
|
||||
);
|
||||
break;
|
||||
case "left":
|
||||
this._tooltipBox.classList.add(
|
||||
"right-full",
|
||||
"top-1/2",
|
||||
"transform",
|
||||
"-translate-y-1/2",
|
||||
"mr-0.5"
|
||||
);
|
||||
break;
|
||||
case "right":
|
||||
this._tooltipBox.classList.add(
|
||||
"left-full",
|
||||
"top-1/2",
|
||||
"transform",
|
||||
"-translate-y-1/2",
|
||||
"ml-0.5"
|
||||
);
|
||||
break;
|
||||
case "top":
|
||||
default:
|
||||
this._tooltipBox.classList.add(
|
||||
"bottom-full",
|
||||
"left-1/2",
|
||||
"transform",
|
||||
"-translate-x-1/2",
|
||||
"mb-0.5"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
customElements.define(y, I);
|
||||
customElements.define(M, B);
|
||||
customElements.define(F, C);
|
||||
export {
|
||||
I as FilterList,
|
||||
M as ScrollButton,
|
||||
H as XSLTParseProcess
|
||||
B as ScrollButton,
|
||||
$ as XSLTParseProcess
|
||||
};
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,4 +1,3 @@
|
||||
|
||||
<!doctype html>
|
||||
<html class="w-full h-full" {{ if .lang }}lang="{{ .lang }}"{{ end }}>
|
||||
<head>
|
||||
|
||||
@@ -9,27 +9,31 @@
|
||||
|
||||
{{ if .isDev }}
|
||||
<link rel="icon" href="/assets/logo/dev_favicon.png" />
|
||||
<meta name="robots" content="noindex" />
|
||||
{{ else }}
|
||||
{{ if .url }}
|
||||
<link rel="canonical" href="{{ .url }}" />
|
||||
{{ end }}
|
||||
<link rel="icon" href="/assets/logo/favicon.png" />
|
||||
{{ end }}
|
||||
|
||||
|
||||
<link href="/assets/css/remixicon.css" rel="stylesheet" />
|
||||
<script type="module" src="/assets/scripts.js"></script>
|
||||
|
||||
<script src="/assets/js/alpine.min.js" defer></script>
|
||||
<script src="/assets/js/htmx.min.js" defer></script>
|
||||
<script src="/assets/js/htmx-response-targets.js" defer></script>
|
||||
<script src="/assets/js/client-side-templates.js" defer></script>
|
||||
<script src="/assets/js/mark.min.js" defer></script>
|
||||
|
||||
<script type="module" src="/assets/scripts.js"></script>
|
||||
|
||||
<link href="/assets/css/remixicon.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/fonts.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/assets/style.css" />
|
||||
</head>
|
||||
|
||||
<body class="w-full text-lg" hx-ext="response-targets" hx-boost="true">
|
||||
<div class="container flex flex-col min-h-screen max-w-(--breakpoint-xl) mx-auto px-3 py-3.5">
|
||||
<header class="" id="header">
|
||||
<div class="flex flex-col min-h-screen w-full">
|
||||
<header class="container-normal" id="header">
|
||||
{{ block "_menu" . }}
|
||||
<!-- Default app menu... -->
|
||||
{{ end }}
|
||||
@@ -41,7 +45,7 @@
|
||||
{{ end }}
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<footer class="container-normal">
|
||||
{{ block "_footer" . }}
|
||||
{{ end }}
|
||||
</footer>
|
||||
|
||||
BIN
views/public/bg.jpg
Normal file
BIN
views/public/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
655
views/public/css/hint.css
Normal file
655
views/public/css/hint.css
Normal file
@@ -0,0 +1,655 @@
|
||||
/*! Hint.css - v2.7.0 - 2021-10-01
|
||||
* https://kushagra.dev/lab/hint/
|
||||
* Copyright (c) 2021 Kushagra Gour */
|
||||
|
||||
/*-------------------------------------*\
|
||||
HINT.css - A CSS tooltip library
|
||||
\*-------------------------------------*/
|
||||
/**
|
||||
* HINT.css is a tooltip library made in pure CSS.
|
||||
*
|
||||
* Source: https://github.com/chinchang/hint.css
|
||||
* Demo: http://kushagragour.in/lab/hint/
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* source: hint-core.scss
|
||||
*
|
||||
* Defines the basic styling for the tooltip.
|
||||
* Each tooltip is made of 2 parts:
|
||||
* 1) body (:after)
|
||||
* 2) arrow (:before)
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint
|
||||
*/
|
||||
[class*="hint--"] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/**
|
||||
* tooltip arrow
|
||||
*/
|
||||
/**
|
||||
* tooltip body
|
||||
*/ }
|
||||
[class*="hint--"]:before, [class*="hint--"]:after {
|
||||
position: absolute;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 1000000;
|
||||
pointer-events: none;
|
||||
-webkit-transition: 0.3s ease;
|
||||
-moz-transition: 0.3s ease;
|
||||
transition: 0.3s ease;
|
||||
-webkit-transition-delay: 0ms;
|
||||
-moz-transition-delay: 0ms;
|
||||
transition-delay: 0ms; }
|
||||
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
|
||||
visibility: visible;
|
||||
opacity: 1; }
|
||||
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
|
||||
-webkit-transition-delay: 100ms;
|
||||
-moz-transition-delay: 100ms;
|
||||
transition-delay: 100ms; }
|
||||
[class*="hint--"]:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
border: 6px solid transparent;
|
||||
z-index: 1000001; }
|
||||
[class*="hint--"]:after {
|
||||
background: #383838;
|
||||
color: white;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 12px;
|
||||
white-space: nowrap; }
|
||||
[class*="hint--"][aria-label]:after {
|
||||
content: attr(aria-label); }
|
||||
[class*="hint--"][data-hint]:after {
|
||||
content: attr(data-hint); }
|
||||
|
||||
[aria-label='']:before, [aria-label='']:after,
|
||||
[data-hint='']:before,
|
||||
[data-hint='']:after {
|
||||
display: none !important; }
|
||||
|
||||
/**
|
||||
* source: hint-position.scss
|
||||
*
|
||||
* Defines the positoning logic for the tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--top
|
||||
* 2) hint--bottom
|
||||
* 3) hint--left
|
||||
* 4) hint--right
|
||||
*/
|
||||
/**
|
||||
* set default color for tooltip arrows
|
||||
*/
|
||||
.hint--top-left:before {
|
||||
border-top-color: #383838; }
|
||||
|
||||
.hint--top-right:before {
|
||||
border-top-color: #383838; }
|
||||
|
||||
.hint--top:before {
|
||||
border-top-color: #383838; }
|
||||
|
||||
.hint--bottom-left:before {
|
||||
border-bottom-color: #383838; }
|
||||
|
||||
.hint--bottom-right:before {
|
||||
border-bottom-color: #383838; }
|
||||
|
||||
.hint--bottom:before {
|
||||
border-bottom-color: #383838; }
|
||||
|
||||
.hint--left:before {
|
||||
border-left-color: #383838; }
|
||||
|
||||
.hint--right:before {
|
||||
border-right-color: #383838; }
|
||||
|
||||
/**
|
||||
* top tooltip
|
||||
*/
|
||||
.hint--top:before {
|
||||
margin-bottom: -11px; }
|
||||
|
||||
.hint--top:before, .hint--top:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--top:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--top:after {
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
transform: translateX(-50%); }
|
||||
|
||||
.hint--top:hover:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--top:hover:after {
|
||||
-webkit-transform: translateX(-50%) translateY(-8px);
|
||||
-moz-transform: translateX(-50%) translateY(-8px);
|
||||
transform: translateX(-50%) translateY(-8px); }
|
||||
|
||||
/**
|
||||
* bottom tooltip
|
||||
*/
|
||||
.hint--bottom:before {
|
||||
margin-top: -11px; }
|
||||
|
||||
.hint--bottom:before, .hint--bottom:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--bottom:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--bottom:after {
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
transform: translateX(-50%); }
|
||||
|
||||
.hint--bottom:hover:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--bottom:hover:after {
|
||||
-webkit-transform: translateX(-50%) translateY(8px);
|
||||
-moz-transform: translateX(-50%) translateY(8px);
|
||||
transform: translateX(-50%) translateY(8px); }
|
||||
|
||||
/**
|
||||
* right tooltip
|
||||
*/
|
||||
.hint--right:before {
|
||||
margin-left: -11px;
|
||||
margin-bottom: -6px; }
|
||||
|
||||
.hint--right:after {
|
||||
margin-bottom: -14px; }
|
||||
|
||||
.hint--right:before, .hint--right:after {
|
||||
left: 100%;
|
||||
bottom: 50%; }
|
||||
|
||||
.hint--right:hover:before {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
.hint--right:hover:after {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
/**
|
||||
* left tooltip
|
||||
*/
|
||||
.hint--left:before {
|
||||
margin-right: -11px;
|
||||
margin-bottom: -6px; }
|
||||
|
||||
.hint--left:after {
|
||||
margin-bottom: -14px; }
|
||||
|
||||
.hint--left:before, .hint--left:after {
|
||||
right: 100%;
|
||||
bottom: 50%; }
|
||||
|
||||
.hint--left:hover:before {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
.hint--left:hover:after {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
/**
|
||||
* top-left tooltip
|
||||
*/
|
||||
.hint--top-left:before {
|
||||
margin-bottom: -11px; }
|
||||
|
||||
.hint--top-left:before, .hint--top-left:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--top-left:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--top-left:after {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-moz-transform: translateX(-100%);
|
||||
transform: translateX(-100%); }
|
||||
|
||||
.hint--top-left:after {
|
||||
margin-left: 12px; }
|
||||
|
||||
.hint--top-left:hover:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--top-left:hover:after {
|
||||
-webkit-transform: translateX(-100%) translateY(-8px);
|
||||
-moz-transform: translateX(-100%) translateY(-8px);
|
||||
transform: translateX(-100%) translateY(-8px); }
|
||||
|
||||
/**
|
||||
* top-right tooltip
|
||||
*/
|
||||
.hint--top-right:before {
|
||||
margin-bottom: -11px; }
|
||||
|
||||
.hint--top-right:before, .hint--top-right:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--top-right:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--top-right:after {
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
transform: translateX(0); }
|
||||
|
||||
.hint--top-right:after {
|
||||
margin-left: -12px; }
|
||||
|
||||
.hint--top-right:hover:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--top-right:hover:after {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
/**
|
||||
* bottom-left tooltip
|
||||
*/
|
||||
.hint--bottom-left:before {
|
||||
margin-top: -11px; }
|
||||
|
||||
.hint--bottom-left:before, .hint--bottom-left:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--bottom-left:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--bottom-left:after {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-moz-transform: translateX(-100%);
|
||||
transform: translateX(-100%); }
|
||||
|
||||
.hint--bottom-left:after {
|
||||
margin-left: 12px; }
|
||||
|
||||
.hint--bottom-left:hover:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--bottom-left:hover:after {
|
||||
-webkit-transform: translateX(-100%) translateY(8px);
|
||||
-moz-transform: translateX(-100%) translateY(8px);
|
||||
transform: translateX(-100%) translateY(8px); }
|
||||
|
||||
/**
|
||||
* bottom-right tooltip
|
||||
*/
|
||||
.hint--bottom-right:before {
|
||||
margin-top: -11px; }
|
||||
|
||||
.hint--bottom-right:before, .hint--bottom-right:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--bottom-right:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--bottom-right:after {
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
transform: translateX(0); }
|
||||
|
||||
.hint--bottom-right:after {
|
||||
margin-left: -12px; }
|
||||
|
||||
.hint--bottom-right:hover:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--bottom-right:hover:after {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
/**
|
||||
* source: hint-sizes.scss
|
||||
*
|
||||
* Defines width restricted tooltips that can span
|
||||
* across multiple lines.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--small
|
||||
* 2) hint--medium
|
||||
* 3) hint--large
|
||||
*
|
||||
*/
|
||||
.hint--small:after,
|
||||
.hint--medium:after,
|
||||
.hint--large:after {
|
||||
white-space: normal;
|
||||
line-height: 1.4em;
|
||||
word-wrap: break-word; }
|
||||
|
||||
.hint--small:after {
|
||||
width: 80px; }
|
||||
|
||||
.hint--medium:after {
|
||||
width: 150px; }
|
||||
|
||||
.hint--large:after {
|
||||
width: 300px; }
|
||||
|
||||
/**
|
||||
* source: hint-theme.scss
|
||||
*
|
||||
* Defines basic theme for tooltips.
|
||||
*
|
||||
*/
|
||||
[class*="hint--"] {
|
||||
/**
|
||||
* tooltip body
|
||||
*/ }
|
||||
[class*="hint--"]:after {
|
||||
text-shadow: 0 -1px 0px black;
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
/**
|
||||
* source: hint-color-types.scss
|
||||
*
|
||||
* Contains tooltips of various types based on color differences.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--error
|
||||
* 2) hint--warning
|
||||
* 3) hint--info
|
||||
* 4) hint--success
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* Error
|
||||
*/
|
||||
.hint--error:after {
|
||||
background-color: #b34e4d;
|
||||
text-shadow: 0 -1px 0px #592726; }
|
||||
|
||||
.hint--error.hint--top-left:before {
|
||||
border-top-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--top-right:before {
|
||||
border-top-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--top:before {
|
||||
border-top-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--bottom-left:before {
|
||||
border-bottom-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--bottom-right:before {
|
||||
border-bottom-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--bottom:before {
|
||||
border-bottom-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--left:before {
|
||||
border-left-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--right:before {
|
||||
border-right-color: #b34e4d; }
|
||||
|
||||
/**
|
||||
* Warning
|
||||
*/
|
||||
.hint--warning:after {
|
||||
background-color: #c09854;
|
||||
text-shadow: 0 -1px 0px #6c5328; }
|
||||
|
||||
.hint--warning.hint--top-left:before {
|
||||
border-top-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--top-right:before {
|
||||
border-top-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--top:before {
|
||||
border-top-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--bottom-left:before {
|
||||
border-bottom-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--bottom-right:before {
|
||||
border-bottom-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--bottom:before {
|
||||
border-bottom-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--left:before {
|
||||
border-left-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--right:before {
|
||||
border-right-color: #c09854; }
|
||||
|
||||
/**
|
||||
* Info
|
||||
*/
|
||||
.hint--info:after {
|
||||
background-color: #3986ac;
|
||||
text-shadow: 0 -1px 0px #1a3c4d; }
|
||||
|
||||
.hint--info.hint--top-left:before {
|
||||
border-top-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--top-right:before {
|
||||
border-top-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--top:before {
|
||||
border-top-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--bottom-left:before {
|
||||
border-bottom-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--bottom-right:before {
|
||||
border-bottom-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--bottom:before {
|
||||
border-bottom-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--left:before {
|
||||
border-left-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--right:before {
|
||||
border-right-color: #3986ac; }
|
||||
|
||||
/**
|
||||
* Success
|
||||
*/
|
||||
.hint--success:after {
|
||||
background-color: #458746;
|
||||
text-shadow: 0 -1px 0px #1a321a; }
|
||||
|
||||
.hint--success.hint--top-left:before {
|
||||
border-top-color: #458746; }
|
||||
|
||||
.hint--success.hint--top-right:before {
|
||||
border-top-color: #458746; }
|
||||
|
||||
.hint--success.hint--top:before {
|
||||
border-top-color: #458746; }
|
||||
|
||||
.hint--success.hint--bottom-left:before {
|
||||
border-bottom-color: #458746; }
|
||||
|
||||
.hint--success.hint--bottom-right:before {
|
||||
border-bottom-color: #458746; }
|
||||
|
||||
.hint--success.hint--bottom:before {
|
||||
border-bottom-color: #458746; }
|
||||
|
||||
.hint--success.hint--left:before {
|
||||
border-left-color: #458746; }
|
||||
|
||||
.hint--success.hint--right:before {
|
||||
border-right-color: #458746; }
|
||||
|
||||
/**
|
||||
* source: hint-always.scss
|
||||
*
|
||||
* Defines a persisted tooltip which shows always.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--always
|
||||
*
|
||||
*/
|
||||
.hint--always:after, .hint--always:before {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
|
||||
.hint--always.hint--top:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top:after {
|
||||
-webkit-transform: translateX(-50%) translateY(-8px);
|
||||
-moz-transform: translateX(-50%) translateY(-8px);
|
||||
transform: translateX(-50%) translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-left:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-left:after {
|
||||
-webkit-transform: translateX(-100%) translateY(-8px);
|
||||
-moz-transform: translateX(-100%) translateY(-8px);
|
||||
transform: translateX(-100%) translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-right:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-right:after {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--always.hint--bottom:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom:after {
|
||||
-webkit-transform: translateX(-50%) translateY(8px);
|
||||
-moz-transform: translateX(-50%) translateY(8px);
|
||||
transform: translateX(-50%) translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-left:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-left:after {
|
||||
-webkit-transform: translateX(-100%) translateY(8px);
|
||||
-moz-transform: translateX(-100%) translateY(8px);
|
||||
transform: translateX(-100%) translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-right:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-right:after {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--always.hint--left:before {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
.hint--always.hint--left:after {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
.hint--always.hint--right:before {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
.hint--always.hint--right:after {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
/**
|
||||
* source: hint-rounded.scss
|
||||
*
|
||||
* Defines rounded corner tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--rounded
|
||||
*
|
||||
*/
|
||||
.hint--rounded:after {
|
||||
border-radius: 4px; }
|
||||
|
||||
/**
|
||||
* source: hint-effects.scss
|
||||
*
|
||||
* Defines various transition effects for the tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--no-animate
|
||||
* 2) hint--bounce
|
||||
*
|
||||
*/
|
||||
.hint--no-animate:before, .hint--no-animate:after {
|
||||
-webkit-transition-duration: 0ms;
|
||||
-moz-transition-duration: 0ms;
|
||||
transition-duration: 0ms; }
|
||||
|
||||
.hint--bounce:before, .hint--bounce:after {
|
||||
-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
|
||||
|
||||
.hint--no-shadow:before, .hint--no-shadow:after {
|
||||
text-shadow: initial;
|
||||
box-shadow: initial; }
|
||||
|
||||
.hint--no-arrow:before {
|
||||
display: none; }
|
||||
5
views/public/css/hint.min.css
vendored
Normal file
5
views/public/css/hint.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
views/public/hintergrund.png
Normal file
BIN
views/public/hintergrund.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 MiB |
@@ -43,14 +43,17 @@
|
||||
{{ if $model.search }}disabled="true"{{ end }} />
|
||||
</div>
|
||||
<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
|
||||
<a
|
||||
:href="'/reihen/?search=' + search"
|
||||
x-show="search"
|
||||
class="inline-block px-1
|
||||
<tool-tip position="right" x-show="search">
|
||||
<a
|
||||
:href="'/reihen/?search=' + search"
|
||||
x-show="search"
|
||||
class="inline-block px-1
|
||||
text-white no-underline bg-stone-700 hover:bg-stone-900 rounded"
|
||||
hx-boost="false">
|
||||
<i class="ri-links-line"></i
|
||||
></a>
|
||||
hx-boost="false">
|
||||
<i class="ri-links-line"></i
|
||||
></a>
|
||||
<div class="data-tip">Permalink zu dieser Suchanfrage</div>
|
||||
</tool-tip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
{{ $bds := index $relations $r.Id }}
|
||||
|
||||
|
||||
<div class="flex flex-row mb-1.5">
|
||||
<div class="flex flex-col lg:flex-row mb-1.5">
|
||||
<div class="grow-0 shrink-0 w-[12rem] flex flex-col">
|
||||
{{ if $r.References }}
|
||||
<div class="text-sm font-sans px-2 py-1 bg-stone-100 {{ if $markar }}reihen-text{{ end }}">
|
||||
@@ -32,7 +32,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow-0 ml-8 -indent-3">
|
||||
<div class="grow-0 lg:px-0 ml-3 lg:ml-8 -indent-3">
|
||||
<div class="contents">
|
||||
<span class="font-bold reihen-text">{{ $r.Title }}</span>
|
||||
{{ if $r.Annotation }}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{{ $model := . }}
|
||||
<div
|
||||
class="min-w-[32rem] max-w-[32rem] float-right ml-6 flex flex-col gap-y-8 [&>*]:pb-12
|
||||
[&>*]:px-12 [&>*]:pt-8 -mr-36 [&>*]:bg-slate-100">
|
||||
class="hidden lg:flex min-w-[32rem] max-w-[32rem] float-right ml-6 flex-col gap-y-8 [&>*]:pb-12
|
||||
[&>*]:px-12 [&>*]:pt-8 [&>*]:bg-slate-100">
|
||||
{{ if .agents }}
|
||||
<div class="">
|
||||
<h2 class="mb-6">Herausgeber:innen, Verlage & Druckereien</h2>
|
||||
@@ -22,7 +22,7 @@
|
||||
agentList.setLinkTextFunc((item) => {
|
||||
return `
|
||||
<span class="filter-list-searchable">${item.name}</span>
|
||||
<span class="text-xs text-stone-500 whitespace-nowrap">
|
||||
<span class="text-xs text-stone-500 whitespace-nowrap font-sans">
|
||||
${item.corporate_body ? "Verlag/Druck/Vertrieb" : item.biographical_data}
|
||||
</span>
|
||||
`;
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="container-normal">
|
||||
<div class="text">
|
||||
{{ Safe .record.Text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="container-normal">
|
||||
<div class="text">
|
||||
{{ Safe .record.Text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1 +1,5 @@
|
||||
Hello from Kontakt!
|
||||
<div class="container-normal">
|
||||
<div class="text">
|
||||
{{ Safe .record.Text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="container-normal">
|
||||
<div class="text indented">
|
||||
{{ Safe .record.Text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{{ $r := $model.series }}
|
||||
|
||||
|
||||
<div class="flex flex-col font-serif mt-16">
|
||||
<div class="container-normal flex flex-col font-serif mt-16">
|
||||
<div class="grow-0 max-w-[48rem]">
|
||||
<div>
|
||||
<span class="font-bold">{{ $r.Title }}</span>
|
||||
|
||||
@@ -1,5 +1,33 @@
|
||||
{{ $model := . }}
|
||||
|
||||
{{ if and .startpage .record }}
|
||||
<div
|
||||
class="bg-[url(/assets/hintergrund.png)] w-full border-t border-b py-8 mt-9 relative"
|
||||
x-data="{ open: true }"
|
||||
x-show="open">
|
||||
<div class="container-extraoversize flex flex-row gap-x-8">
|
||||
<div class="max-w-[52rem] font-serif text-lg hyphens-auto">
|
||||
{{ Safe .record.Text }}
|
||||
</div>
|
||||
<div class="-mr-16 pt-2 grow-0 shrink-0">
|
||||
<img src="{{ .record.ImagePath }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 p-4">
|
||||
<tool-tip position="left">
|
||||
<button
|
||||
@click="open = false"
|
||||
class="text-xl p-2 text-stone-500 opacity-85 hover:opacity-100 transition-opacity
|
||||
duration-200 hover:text-stone-900
|
||||
hover:cursor-pointer">
|
||||
<i class="ri-close-circle-fill"></i>
|
||||
</button>
|
||||
<div class="data-tip">Hinweis schließen</div>
|
||||
</tool-tip>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<div x-data="{ search : '{{ $model.search }}' }" :class="search ? 'searchfilter' : ''">
|
||||
<div id="pageheading" class="headingcontainer">
|
||||
@@ -21,6 +49,14 @@
|
||||
· <span class="filterterm" x-text="search"></span>
|
||||
</div>
|
||||
|
||||
{{ if .search }}
|
||||
<div class="notifier" x-show="search">
|
||||
<i class="ri-links-line"></i>
|
||||
<span class="filtercategory">Link</span>
|
||||
· <span class="filterterm" x-text="window.location.href"></span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .a }}
|
||||
<div class="notifier" x-show="!search">
|
||||
{{ if .a.CorporateBody }}
|
||||
@@ -59,11 +95,11 @@
|
||||
{{ end }}
|
||||
|
||||
|
||||
<div class="notifier ml-2" x-show="search">
|
||||
<a href="/reihen" class="no-underline">
|
||||
<i class="ri-arrow-left-long-line"></i> Alle Reihen anzeigen
|
||||
</a>
|
||||
</div>
|
||||
<div class="notifier ml-2" x-show="search">
|
||||
<a href="/reihen" class="no-underline">
|
||||
<i class="ri-arrow-left-long-line"></i> Alle Reihen anzeigen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ if not .search }}
|
||||
@@ -74,19 +110,17 @@
|
||||
<div class="mt-2 border-b border-zinc-300 w-full"></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ if not .search }}
|
||||
<div class="mt-8">
|
||||
{{ template "_reihenfilter" . }}
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="mt-8 w-full"></div>
|
||||
{{ end }}
|
||||
<div class="container-oversize mt-4">
|
||||
{{ if not .search }}
|
||||
<div class="">
|
||||
{{ template "_reihenfilter" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<div id="searchcontent" class="font-serif">
|
||||
{{ if $model.search }}
|
||||
<div id="searchcontent" class="font-serif">
|
||||
{{ if $model.search }}
|
||||
<script type="module">
|
||||
let elements = document.querySelectorAll('.reihen-text');
|
||||
let mark_instance = new Mark(elements);
|
||||
@@ -97,61 +131,62 @@
|
||||
});
|
||||
}, 200);
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<div class="-ml-16">
|
||||
{{ if and .search .idseries }}
|
||||
<div class="mb-1 max-w-[60rem] hyphens-auto">
|
||||
{{ range $id, $r := .idseries }}
|
||||
{{ template "_reihe" (Arr $r $model.entries $model.relations true false) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .series }}
|
||||
<div class="mb-1 max-w-[60rem] hyphens-auto">
|
||||
{{ range $id, $r := .series }}
|
||||
{{ template "_reihe" (Arr $r $model.entries $model.relations false false) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if and .search .altseries }}
|
||||
{{ if .idseries }}
|
||||
<div class="border-b text-sm font-sans text-right pb-0.5">
|
||||
Treffer in Almanach-Nummer ↑
|
||||
<div class="">
|
||||
{{ if and .search .idseries }}
|
||||
<div class="mb-1 max-w-[60rem] hyphens-auto">
|
||||
{{ range $id, $r := .idseries }}
|
||||
{{ template "_reihe" (Arr $r $model.entries $model.relations true false) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .series }}
|
||||
<div class="border-b text-sm font-sans text-right pb-0.5">
|
||||
Treffer in Reihentiteln ↑
|
||||
<div class="mb-1 max-w-[60rem] hyphens-auto">
|
||||
{{ range $id, $r := .series }}
|
||||
{{ template "_reihe" (Arr $r $model.entries $model.relations false false) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if not (or .series .idseries) }}
|
||||
<div class="border-b text-sm font-sans text-right pb-0.5">
|
||||
Keine Treffer im Reihentitel
|
||||
<i class="ri-forbid-line inline-bloc -mr-0.5"></i>
|
||||
{{ if and .search .altseries }}
|
||||
{{ if .idseries }}
|
||||
<div class="border-b text-sm font-sans text-right pb-0.5">
|
||||
Treffer in Almanach-Nummer ↑
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .series }}
|
||||
<div class="border-b text-sm font-sans text-right pb-0.5">
|
||||
Treffer in Reihentiteln ↑
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if not (or .series .idseries) }}
|
||||
<div class="border-b text-sm font-sans text-right pb-0.5">
|
||||
Keine Treffer im Reihentitel
|
||||
<i class="ri-forbid-line inline-bloc -mr-0.5"></i>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="border-t mb-1.5 text-sm font-sans text-right pt-0.5">
|
||||
Treffer in allen Feldern (Anmerkungen, Verweisen etc.) ↓
|
||||
</div>
|
||||
<div class="mb-1 max-w-[60rem] hyphens-auto">
|
||||
{{ range $id, $r := .altseries }}
|
||||
{{ template "_reihe" (Arr $r $model.entries $model.relations false true) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="border-t mb-1.5 text-sm font-sans text-right pt-0.5">
|
||||
Treffer in allen Feldern (Anmerkungen, Verweisen etc.) ↓
|
||||
</div>
|
||||
<div class="mb-1 max-w-[60rem] hyphens-auto">
|
||||
{{ range $id, $r := .altseries }}
|
||||
{{ template "_reihe" (Arr $r $model.entries $model.relations false true) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if not (or .series .altseries .idseries) }}
|
||||
<div class="mt-8">
|
||||
Keine Reihen
|
||||
{{ if .search }}für {{ .search }}{{ end }}
|
||||
gefunden.
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if not (or .series .altseries .idseries) }}
|
||||
<div class="mt-8">
|
||||
Keine Reihen
|
||||
{{ if .search }}für {{ .search }}{{ end }}
|
||||
gefunden.
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,7 @@ const FILTER_LIST_INPUT = "filter-list-input";
|
||||
const FILTER_LIST_SEARCHABLE = "filter-list-searchable";
|
||||
|
||||
const SCROLL_BUTTON_ELEMENT = "scroll-button";
|
||||
const TOOLTIP_ELEMENT = "tool-tip";
|
||||
|
||||
class XSLTParseProcess {
|
||||
#processors;
|
||||
@@ -395,10 +396,7 @@ class ScrollButton extends HTMLElement {
|
||||
|
||||
this._button = this.querySelector(".scroll-to-top");
|
||||
|
||||
// Listen for scroll events
|
||||
window.addEventListener("scroll", this.handleScroll);
|
||||
|
||||
// Listen for clicks on the button
|
||||
this._button.addEventListener("click", this.scrollToTop);
|
||||
}
|
||||
|
||||
@@ -408,24 +406,152 @@ class ScrollButton extends HTMLElement {
|
||||
}
|
||||
|
||||
handleScroll() {
|
||||
// Show/hide button based on scroll position
|
||||
const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
||||
if (scrollTop > 300) {
|
||||
// Remove 'hidden' so it becomes visible
|
||||
this._button.classList.remove("hidden");
|
||||
} else {
|
||||
// Add 'hidden' so it's not displayed
|
||||
this._button.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
scrollToTop() {
|
||||
// Smoothly scroll back to top
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
|
||||
class ToolTip extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ["position"];
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._tooltipBox = null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.style.position = "relative";
|
||||
const dataTipElem = this.querySelector(".data-tip");
|
||||
const tipContent = dataTipElem ? dataTipElem.innerHTML : "Tooltip";
|
||||
|
||||
if (dataTipElem) {
|
||||
dataTipElem.remove();
|
||||
}
|
||||
|
||||
this._tooltipBox = document.createElement("div");
|
||||
this._tooltipBox.innerHTML = tipContent;
|
||||
this._tooltipBox.className = [
|
||||
"opacity-0",
|
||||
"hidden",
|
||||
"absolute",
|
||||
"px-2",
|
||||
"py-1",
|
||||
"text-sm",
|
||||
"text-white",
|
||||
"bg-gray-900",
|
||||
"rounded",
|
||||
"shadow",
|
||||
"z-10",
|
||||
"whitespace-nowrap",
|
||||
"transition-all",
|
||||
"duration-200",
|
||||
"font-sans",
|
||||
].join(" ");
|
||||
|
||||
this.appendChild(this._tooltipBox);
|
||||
|
||||
this._updatePosition();
|
||||
|
||||
this.addEventListener("mouseenter", () => this._showTooltip());
|
||||
this.addEventListener("mouseleave", () => this._hideTooltip());
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (name === "position" && this._tooltipBox) {
|
||||
this._updatePosition();
|
||||
}
|
||||
}
|
||||
|
||||
_showTooltip() {
|
||||
this._tooltipBox.classList.remove("hidden");
|
||||
setTimeout(() => {
|
||||
this._tooltipBox.classList.remove("opacity-0");
|
||||
this._tooltipBox.classList.add("opacity-100");
|
||||
}, 16);
|
||||
}
|
||||
|
||||
_hideTooltip() {
|
||||
setTimeout(() => {
|
||||
this._tooltipBox.classList.remove("opacity-100");
|
||||
this._tooltipBox.classList.add("opacity-0");
|
||||
setTimeout(() => {
|
||||
this._tooltipBox.classList.add("hidden");
|
||||
}, 200);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
_updatePosition() {
|
||||
this._tooltipBox.classList.remove(
|
||||
"bottom-full",
|
||||
"left-1/2",
|
||||
"-translate-x-1/2",
|
||||
"mb-2", // top
|
||||
"top-full",
|
||||
"mt-2", // bottom
|
||||
"right-full",
|
||||
"-translate-y-1/2",
|
||||
"mr-2",
|
||||
"top-1/2", // left
|
||||
"left-full",
|
||||
"ml-2", // right
|
||||
);
|
||||
|
||||
const pos = this.getAttribute("position") || "top";
|
||||
|
||||
switch (pos) {
|
||||
case "bottom":
|
||||
this._tooltipBox.classList.add(
|
||||
"top-full",
|
||||
"left-1/2",
|
||||
"transform",
|
||||
"-translate-x-1/2",
|
||||
"mt-0.5",
|
||||
);
|
||||
break;
|
||||
case "left":
|
||||
this._tooltipBox.classList.add(
|
||||
"right-full",
|
||||
"top-1/2",
|
||||
"transform",
|
||||
"-translate-y-1/2",
|
||||
"mr-0.5",
|
||||
);
|
||||
break;
|
||||
case "right":
|
||||
this._tooltipBox.classList.add(
|
||||
"left-full",
|
||||
"top-1/2",
|
||||
"transform",
|
||||
"-translate-y-1/2",
|
||||
"ml-0.5",
|
||||
);
|
||||
break;
|
||||
case "top":
|
||||
default:
|
||||
// top as default
|
||||
this._tooltipBox.classList.add(
|
||||
"bottom-full",
|
||||
"left-1/2",
|
||||
"transform",
|
||||
"-translate-x-1/2",
|
||||
"mb-0.5",
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(FILTER_LIST_ELEMENT, FilterList);
|
||||
customElements.define(SCROLL_BUTTON_ELEMENT, ScrollButton);
|
||||
customElements.define(TOOLTIP_ELEMENT, ToolTip);
|
||||
|
||||
export { XSLTParseProcess, FilterList, ScrollButton };
|
||||
|
||||
@@ -44,8 +44,10 @@
|
||||
}
|
||||
|
||||
@layer components {
|
||||
html {
|
||||
font-size: 16.5px;
|
||||
@media screen and (min-width: 96rem) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -113,7 +115,7 @@
|
||||
}
|
||||
|
||||
.headingcontainer {
|
||||
@apply mt-16 border-r border-zinc-300 relative;
|
||||
@apply mt-16 border-r border-zinc-300 relative w-full max-w-(--breakpoint-xl) mx-auto;
|
||||
}
|
||||
|
||||
.headingcontainer h1 {
|
||||
@@ -139,4 +141,60 @@
|
||||
.headingcontainer .backbutton {
|
||||
@apply ml-4 bg-stone-100 py-0.5 px-2.5 rounded font-sans text-base text-center;
|
||||
}
|
||||
|
||||
.container-normal {
|
||||
@apply w-full max-w-(--breakpoint-xl) mx-auto px-3 py-4 relative;
|
||||
}
|
||||
|
||||
.container-oversize {
|
||||
@apply w-full max-w-(--breakpoint-2xl) mx-auto px-3 py-4 relative;
|
||||
}
|
||||
|
||||
.container-extraoversize {
|
||||
@apply w-full max-w-[112rem] mx-auto relative;
|
||||
}
|
||||
|
||||
.text {
|
||||
@apply font-serif max-w-[48rem];
|
||||
}
|
||||
|
||||
.text p {
|
||||
@apply text-lg hyphens-auto;
|
||||
}
|
||||
|
||||
.text p:first-of-type {
|
||||
@apply mt-0;
|
||||
}
|
||||
|
||||
.text p:last-of-type {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.text p + p {
|
||||
@apply mt-1;
|
||||
}
|
||||
|
||||
.text p + ul {
|
||||
@apply mt-1;
|
||||
}
|
||||
|
||||
.text p + ol {
|
||||
@apply mt-1;
|
||||
}
|
||||
|
||||
.text p + blockquote {
|
||||
@apply mt-1;
|
||||
}
|
||||
|
||||
.text p + pre {
|
||||
@apply mt-1;
|
||||
}
|
||||
|
||||
.text p + p:not(.indented p, p:first-of-type) {
|
||||
@apply indent-3.5;
|
||||
}
|
||||
|
||||
.indented p {
|
||||
@apply -indent-3.5 ml-3.5;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user