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>
|
<html lang=de>
|
||||||
<title>Soli-Bus-Fahrten nach Lützerath</title>
|
<title>Soli-Bus-Fahrten nach Lützerath</title>
|
||||||
<meta name=viewport content="width=device-width, initial-scale=1">
|
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||||
<style>
|
<style><?= file_get_contents('./style.css') ?></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>
|
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<h1>Soli-Bus-Fahrten von Berlin nach Lützerath</h1>
|
<h1>Soli-Bus-Fahrten von Berlin nach Lützerath</h1>
|
||||||
|
|
@ -277,94 +104,7 @@ print_month($month_end);
|
||||||
|
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>(function() { <?= file_get_contents('./script.js') ?> })()</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>
|
|
||||||
<h3>Tag X</h3>
|
<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>
|
<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>
|
<h2>Kontaktmöglichkeiten</h2>
|
||||||
|
|
|
||||||
84
script.js
Normal file
84
script.js
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
"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
|
||||||
|
}
|
||||||
|
})
|
||||||
174
style.css
Normal file
174
style.css
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
/* LAYOUT */
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CALENDAR */
|
||||||
|
.month {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-right: 2em;
|
||||||
|
border-spacing: 0
|
||||||
|
}
|
||||||
|
.month tbody {
|
||||||
|
border-radius: 0.3em;
|
||||||
|
color: #5A4B0B;
|
||||||
|
box-shadow: .4em .5em 0 0 RGBA(114, 44, 162,0.5)
|
||||||
|
}
|
||||||
|
.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
|
||||||
|
}
|
||||||
|
|
||||||
|
/* date in calendar */
|
||||||
|
.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 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
|
||||||
|
}
|
||||||
|
|
||||||
|
/* calendar on smaller screens */
|
||||||
|
@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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* events in calendar */
|
||||||
|
.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
|
||||||
|
}
|
||||||
|
|
||||||
|
/* OTHER FORM ELEMENTS */
|
||||||
|
.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;
|
||||||
|
box-shadow: .4em .5em 0 0 RGBA(114, 44, 162,0.5)
|
||||||
|
}
|
||||||
|
.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
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue