haha

resources/js/le_script.js

@@ -0,0 +1,107 @@
+
+var cases = document.getElementsByClassName("case");
+
+var cases_el = document.getElementById("cases");
+
+for (let i = cases.length - 1; i >= 0; i--) {	
+	toggle_case(cases[i]);	
+	draggable(cases[i]);
+	initial_height_closed(cases[i]);
+}
+
+function draggable(e) {
+	var  x, y, x_offset, y_offset, dragged = false;
+
+	function drag_start(el) {
+		console.log("start");
+		el = el || window.event;
+		el.preventDefault();
+		x = el.clientX || el.targetTouches[0].pageX;
+		y = el.clientY || el.targetTouches[0].pageY;
+		x_offset = x - parseInt(e.offsetLeft);
+		y_offset = y - parseInt(e.offsetTop);
+		document.onmouseup = drag_stop;
+		document.ontouchend = drag_stop;
+		document.onmousemove = drag;
+		document.ontouchmove = drag;
+		// el.target.focus();
+	}
+
+	function drag(el) {
+		el = el || window.event;
+		el.preventDefault();
+
+		let cx = el.clientX || el.touches[el.touches.length].pageX;
+		let cy = el.clientY || el.touches[el.touches.length].pageY;
+
+		if ((cx !== x) & (cy !== y)) {
+			e.style.left = (cx - x_offset) + "px";
+			e.style.top = (cy - y_offset) + "px";			
+			if (!dragged)
+				fix_cases_el_height(e);
+			dragged = true;
+		}
+	}
+
+	function drag_stop(el) {
+		el = el || window.event;
+		el.preventDefault();		
+		document.onmouseup = null;
+		document.ontouchend = null;
+		document.onmousemove = null;
+		document.ontouchmove = null;
+
+		let cx = el.clientX || el.touches[el.touches.length].pageX;
+		let cy = el.clientY || el.touches[el.touches.length].pageY;
+
+		// if no move then collapse
+		if ((cx == x) & (cy == y)) {
+			toggle_case(e);
+		}
+	}
+
+	e.onmousedown = drag_start;
+	e.touchstart = drag_start;
+
+}
+
+function initial_height_closed(c) {
+	c.initial_height_closed = c.offsetHeight;
+}
+
+function toggle_case(c) {	
+	for (let i = c.children.length - 1; i >= 1; i--) {
+		c.children[i].classList.toggle('hidden');		
+		c.opened = !c.children[i].classList.contains('hidden')
+	}
+
+
+	if(c.opened) {
+		// c.style.removeProperty('height');		
+		c.classList.remove('close');
+		fix_cases_height();
+	} else {
+		c.classList.add('close');
+	}
+}
+
+function fix_cases_height(){
+	for (let i = cases.length - 1; i >= 0; i--) {	
+		if (!cases[i].opened) {
+			cases[i].classList.add('close');
+		}
+	}
+}
+
+function fix_cases_el_height(e){
+	let h = cases_el.offsetHeight;
+	// e.style.position = 'absolute';
+	for (let i = cases.length - 1; i >= 0; i--) {	
+		cases[i].style.position = 'absolute';
+	}
+
+	cases_el.style.height = h + 'px';
+}
+
+
+

resources/style/le_style.css

@@ -0,0 +1,245 @@
+#frame {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+#header {
+	height: 100px;
+}
+
+#content {
+	max-width: 1200px;
+	min-width: 500px;
+}
+
+#content > #description {
+	font-family: baskerville;
+	font-size: 2rem;	
+}
+
+ma {
+	font-family: baskerville;
+	font-size: 5rem;
+}
+
+#footer {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	width: 1200px;
+/*	min-width: 500px;	*/
+	margin-top: 0.5em;
+	padding: 0.5em;
+	border-top: 3px double black;
+}
+
+#footer > img {
+	max-width: 250px;
+}
+
+
+/*section*/
+
+.section {
+	padding-bottom: 1em;
+}
+
+
+.section_header {
+	display: flex;
+	flex-direction: row;
+	border-bottom: 3px double red;
+	margin-bottom: 1.5em;	
+}
+
+.section_header > h2 {
+	padding-right: 0.5em;
+}
+
+#events .list > details {
+	background-color: lightgoldenrodyellow;
+}
+
+.list > details {
+	font-size: 1.8rem;
+	border: 1px solid #aaa;
+	border-radius: 4px;
+	margin-bottom: 0.5em;
+}
+
+.list > details[open] {
+	background-color: lightsalmon;
+	border-bottom: 3px black solid;	
+	border-radius: 4px;
+	padding: 0 1em 1em 1em;
+}
+
+.list > details > summary {
+	font-size: 1.8rem;
+/*	font-weight: bold;*/
+/*	margin: 0.5em;*/
+	padding: 0.5em;
+}
+
+.list > details[open] > summary {
+	border-bottom: 2px black solid;	
+	margin-bottom: 1em;
+}
+
+/*cases*/
+
+.hidden {
+	display: none;
+}
+
+#cases {
+/*	border: green 1px solid;*/
+	display: flex;
+	flex-direction: row;
+}
+
+.case {
+	margin: 1em;
+	padding: 1em;
+	width: 500px;
+	border: 1px solid black;
+	background-color: lightgrey;
+	border-radius: 5px;
+}
+
+.case.close {
+	height: 2em;
+}
+
+.title {
+	font-family: helvetica, sans-serif;
+	padding-bottom: 0.8em;
+}
+
+
+.definition, .origin {
+	font-family: helvetica, sans-serif;
+}
+
+.title entry {
+	font-size: 1.5em;
+}
+
+.title phone {
+	color: grey;
+	font-size: 1.2em;
+}
+
+.qual {
+	font-size: 1em;
+}
+
+.qual genre {
+	font-size: 1.2em;
+}
+
+extra {
+	color: grey;
+	font-style: italic;
+}
+
+ex {
+	font-family: Arial, sans-serif;
+	font-style: italic;
+	font-weight: lighter;
+}
+
+xe {
+	font-style: italic;	
+	font-weight: bold;
+}
+
+.def {
+	margin: 1em;
+}
+
+.example {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+
+.origin or {
+	color: grey;
+	font-size: 0.8em;
+	text-transform: uppercase;
+}
+
+/*  max-width: 1200px  */
+
+@media screen and (max-width: 1200px) {
+
+	body {
+/*		background: #aaa;*/
+	}
+
+	#header {
+		margin-bottom: 1em;
+	}
+
+
+	ma {
+		font-size: 6em;
+	}
+
+	#content > #description, .section_header > h2  {
+		font-size: 3rem;	
+		font-weight: 400;
+	}
+
+	.title {
+		font-size: 1.7em;
+	}
+
+	.origin {
+		font-size: 1.2em;
+	}
+
+	.title entry {
+		font-size: 1.7em;
+	}
+
+	.title phone {
+		color: grey;
+		font-size: 1.4em;
+	}
+
+	.qual {
+		font-size: 1.7em;
+	}
+
+	.qual genre {
+		font-size: 1.4em;
+	}
+
+	.list > details, .list > details > summary {
+		font-size: 1.7rem;
+	}
+
+	#content, #footer, #cases, .case {
+		width: 95%;
+	}
+
+	#cases {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.case {
+		margin-left: 0.5em;
+	}
+
+	.case.close {
+		height: 4rem;
+	}
+
+
+}
+
+