Browse Source

Extract style and script

main
Adrian Heine 2 years ago
parent
commit
7431bbfa53
  1. 264
      index.php
  2. 84
      script.js
  3. 174
      style.css

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>
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> <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>
(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> <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

@ -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

@ -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…
Cancel
Save