Extract style and script
This commit is contained in:
parent
f84b0da5d1
commit
7431bbfa53
3 changed files with 260 additions and 262 deletions
264
index.php
264
index.php
|
|
@ -75,180 +75,7 @@ function print_month($start) {
|
|||
<html lang=de>
|
||||
<title>Soli-Bus-Fahrten nach Lützerath</title>
|
||||
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
body {
|
||||
margin: 0
|
||||
}
|
||||
footer {
|
||||
border-top: 0.3em dashed #722CA2;
|
||||
padding: 1em 1em 0 1em;
|
||||
background: #f1cc37;
|
||||
color: #5A4B0B;
|
||||
padding: 1em 0;
|
||||
}
|
||||
main {
|
||||
background: #FFE98E;
|
||||
padding: 1em 0;
|
||||
}
|
||||
header {
|
||||
border-bottom: 0.3em dashed #722CA2;
|
||||
background: #f1cc37;
|
||||
color: #5A4B0B;
|
||||
padding: 1em 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 0
|
||||
}
|
||||
footer > *,
|
||||
header > *,
|
||||
main > * {
|
||||
margin: 0 auto;
|
||||
max-width: 80rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.month {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: 2em;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.month tbody {
|
||||
border-radius: 0.3em;
|
||||
color: #5A4B0B;
|
||||
}
|
||||
.month tbody,
|
||||
.row > input,
|
||||
.row > select {
|
||||
box-shadow: .4em .5em 0 0 RGBA(114, 44, 162,0.5);
|
||||
}
|
||||
.month ::selection {
|
||||
background: inherit;
|
||||
}
|
||||
.month th, .month td {
|
||||
width: 3.5em;
|
||||
height: 3.5em;
|
||||
border: 1px solid #CBC19A;
|
||||
border-width: 1px 0 0 1px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.month th:first-of-type {
|
||||
border-top-left-radius: 0.3em;
|
||||
}
|
||||
.month th:last-of-type {
|
||||
border-top-right-radius: 0.3em;
|
||||
}
|
||||
.month tr > :last-of-type {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
.month tr:last-of-type td:first-of-type {
|
||||
border-bottom-left-radius: 0.3em;
|
||||
}
|
||||
.month tr:last-of-type td:last-of-type {
|
||||
border-bottom-right-radius: 0.3em;
|
||||
}
|
||||
.month tr:last-of-type td {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.month input[type=checkbox] {
|
||||
appearance: none;
|
||||
position: absolute
|
||||
}
|
||||
.month label {
|
||||
display: block;
|
||||
line-height: 3.5em;
|
||||
}
|
||||
.month :focus + label {
|
||||
border: 1px solid #722CA2;
|
||||
margin: -1px;
|
||||
}
|
||||
:checked + label:not(.unselecting),
|
||||
.selecting {
|
||||
background: #f1cc37;
|
||||
}
|
||||
.invalid {
|
||||
color: #CBC19A;
|
||||
}
|
||||
@media only screen and (max-width: 55em) {
|
||||
.month {
|
||||
margin-right: 1.5vw;
|
||||
}
|
||||
.month th, .month td {
|
||||
width: 6vw;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 40em) {
|
||||
.month {
|
||||
margin: 0 auto;
|
||||
display: table;
|
||||
}
|
||||
.month th, .month td {
|
||||
width: 3.5em;
|
||||
}
|
||||
}
|
||||
.event {
|
||||
position: relative;
|
||||
top: -3.5em;
|
||||
right: -0.9em;
|
||||
line-height: initial;
|
||||
display: block;
|
||||
}
|
||||
.event::before {
|
||||
content: "★";
|
||||
position: absolute;
|
||||
padding: 0.5em;
|
||||
top: -0.5em;
|
||||
right: 0.5em;
|
||||
}
|
||||
.event-content {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
background: white;
|
||||
top: 0.4em;
|
||||
left: 1.8em;
|
||||
padding: 0.4em;
|
||||
border: 1px solid #CBC19A;
|
||||
border-radius: 0.2em;
|
||||
box-shadow: .2em .25em 0 0 RGBA(114, 44, 162,0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
.month :focus + label .event-content,
|
||||
.month td:hover .event-content,
|
||||
.month td:active .event-content {
|
||||
visibility: initial;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
}
|
||||
.row > input,
|
||||
.row > select {
|
||||
padding: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
width: 12rem;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #5A4B0B;
|
||||
border-radius: .3em;
|
||||
}
|
||||
.row > input[type="number"] {
|
||||
margin-left: 8.5rem;
|
||||
width: 3.5rem;
|
||||
}
|
||||
.row > input[type="submit"] {
|
||||
background: #f1cc37;
|
||||
}
|
||||
.row > input[type="submit"]:active {
|
||||
background: white;
|
||||
}
|
||||
.row :focus-visible {
|
||||
outline: 0.2em #722CA2 solid;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style><?= file_get_contents('./style.css') ?></style>
|
||||
|
||||
<header>
|
||||
<h1>Soli-Bus-Fahrten von Berlin nach Lützerath</h1>
|
||||
|
|
@ -277,94 +104,7 @@ print_month($month_end);
|
|||
|
||||
?>
|
||||
</div>
|
||||
<script>
|
||||
(function() {
|
||||
"use strict"
|
||||
|
||||
const months = document.getElementById('months')
|
||||
let selecting = null // { origin, className, range }
|
||||
let is_select = false
|
||||
|
||||
months.addEventListener("pointerdown", event => {
|
||||
selecting = null
|
||||
is_select = false
|
||||
for (const elem of document.querySelectorAll(".selecting, .unselecting")) {
|
||||
elem.className = ""
|
||||
}
|
||||
|
||||
if (event.buttons !== 1) return
|
||||
let target = event.target
|
||||
if (target.nodeType == 3) target = target.parentNode
|
||||
if (target.tagName !== "LABEL") return
|
||||
|
||||
event.preventDefault()
|
||||
|
||||
const className = target.className = document.getElementById(target.htmlFor).checked ? "unselecting" : "selecting"
|
||||
selecting = {
|
||||
origin: target,
|
||||
className,
|
||||
range: [ target ]
|
||||
}
|
||||
})
|
||||
|
||||
months.addEventListener('pointermove', event => {
|
||||
if (selecting === null) return
|
||||
event.preventDefault()
|
||||
is_select = true
|
||||
|
||||
const range = document.createRange()
|
||||
range.selectNode(selecting.origin)
|
||||
if (range.comparePoint(event.target, 0) > 0) range.setEndAfter(event.target)
|
||||
else range.setStartBefore(event.target)
|
||||
|
||||
const treeWalker = document.createTreeWalker(
|
||||
range.commonAncestorContainer,
|
||||
NodeFilter.SHOW_ELEMENT,
|
||||
{ acceptNode: (node) => node.nodeName.toLowerCase() === 'label' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP }
|
||||
)
|
||||
|
||||
const new_range = []
|
||||
let currentNode
|
||||
while (currentNode = treeWalker.nextNode()) {
|
||||
if (range.intersectsNode(currentNode)) {
|
||||
new_range.push(currentNode)
|
||||
const idx = selecting.range.indexOf(currentNode)
|
||||
if (idx !== -1) selecting.range.splice(idx, 1)
|
||||
else currentNode.className = selecting.className
|
||||
}
|
||||
}
|
||||
for (const elem of selecting.range) {
|
||||
elem.className = ""
|
||||
}
|
||||
selecting.range = new_range
|
||||
})
|
||||
|
||||
document.addEventListener('pointercancel', event => {
|
||||
if (selecting === null) return
|
||||
for (const elem of selecting.range) {
|
||||
elem.className = ""
|
||||
}
|
||||
selecting = null
|
||||
is_select = false
|
||||
})
|
||||
|
||||
document.addEventListener('pointerup', event => {
|
||||
if (selecting === null) return
|
||||
event.preventDefault()
|
||||
for (const elem of selecting.range) {
|
||||
if (is_select) document.getElementById(elem.htmlFor).checked = selecting.className == "selecting"
|
||||
elem.className = ""
|
||||
}
|
||||
selecting = null
|
||||
})
|
||||
months.addEventListener('click', event => {
|
||||
if (is_select) {
|
||||
event.preventDefault()
|
||||
is_select = false
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
<script>(function() { <?= file_get_contents('./script.js') ?> })()</script>
|
||||
<h3>Tag X</h3>
|
||||
<label><input type=checkbox name=tagx>Ich möchte im Fall eines Räumungsversuchs mit dem Solibus nach Lützerath fahren.</label>
|
||||
<h2>Kontaktmöglichkeiten</h2>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue