adrian
/
solibus
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Extract style and script

main
Adrian Heine 2 years ago
parent
f84b0da5d1
commit
7431bbfa53
3 changed files with 260 additions and 262 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 264
      index.php
  2. 84
      script.js
  3. 174
      style.css

264
index.php
View File

@ -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
View 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
View 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
}
Write Preview
Loading…
Cancel
Save