From 0473e85b36e4e288777e1fcdeb3f7f3b87b62d8f Mon Sep 17 00:00:00 2001
From: deadlocker8 <deadlocker@gmx.de>
Date: Mon, 18 Jul 2016 21:31:53 +0200
Subject: [PATCH] merged history and index onto one page (Fixed #1)

---
 css/style.css |   4 +
 history.php   | 250 ++++++++++++++++++++++----------------------------
 index.php     |  13 +++
 js/main.js    |  78 +++++++++++++++-
 4 files changed, 204 insertions(+), 141 deletions(-)

diff --git a/css/style.css b/css/style.css
index 11f7a5d..395a816 100644
--- a/css/style.css
+++ b/css/style.css
@@ -30,6 +30,10 @@
 	border: 1px solid red;
 }
 
+.no-transform{
+	text-transform: none;
+}
+
 #headline{
 	margin-top: 2.5rem;
 	margin-bottom: 2.2rem;
diff --git a/history.php b/history.php
index 12830bc..e05dba2 100644
--- a/history.php
+++ b/history.php
@@ -1,151 +1,121 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/html">
-	<head>
-		<meta charset="UTF-8"/>
-		<title>Roadmap</title>
-		<!--Import Google Icon Font-->
-		<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-		<!--Import materialize.css-->
-		<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css"  media="screen,projection"/>
-		<link type="text/css" rel="stylesheet" href="css/style.css"/>
-
-		<!--Import jQuery before materialize.js-->
-		<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
-		<script type="text/javascript" src="materialize/js/materialize.min.js"></script>
-		<script type="text/javascript" src="js/main.js"></script>
-
-		<!--Let browser know website is optimized for mobile-->
-		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-	</head>
-
-	<body class="grey lighten-3">
-		<div id="main">
-			<div class="container">
-				<h2 class="center-align" id="headline">PlayWall History</h2>
+<div class="row">
+	<div class="col s12 m6">
+		<div class="card padding white">
+			<div class="card-content">
+				<div class="grey lighten-2 center-align margin-bottom">
+					<span class="card-title bold">"Midnight-Update" (v1.3.0)</span>
+				</div>
 				<div class="row">
-					<div class="col s12 m6 offset-m3">
-						<div class="card padding white">
-							<div class="card-content">
-								<div class="amber lighten-2 center-align margin-bottom">
-									<span class="card-title bold">"Midnight-Update" (v1.3.0)</span>
-								</div>
-								<div class="row">
-									<div class="col s6 valign-wrapper">
-										<i class="material-icons valign">event</i><span class="valign margin-left">Due by 08.04.16</span>
-									</div>
-									<div class="col s6 valign-wrapper">
-										<i class="material-icons valign">event</i><span class="valign margin-left">Done at 08.04.16</span>
-									</div>
-								</div>
-								<ul class="collapsible white" data-collapsible="accordion">
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Layout</div>
-										<div class="collapsible-body"><p>In dieser Version, besteht die Möglichkeit zwischen einem neuen Layout und dem alten Layout für die Kacheln zu wählen.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Play in Background</div>
-										<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
-										<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Lorem</div>
-										<div class="collapsible-body"><p>In dieser Version, besteht die Möglichkeit zwischen einem neuen Layout und dem alten Layout für die Kacheln zu wählen.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Ipsum</div>
-										<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Stuff</div>
-										<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Bugfixes</div>
-										<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
-									</li>
-								</ul>
-							</div>
-						</div>
+					<div class="col s6 valign-wrapper">
+						<i class="material-icons valign">event</i><span class="valign margin-left">Due by 08.04.16</span>
+					</div>
+					<div class="col s6 valign-wrapper">
+						<i class="material-icons valign">event</i><span class="valign margin-left">Done at 08.04.16</span>
 					</div>
 				</div>
+				<ul class="collapsible white" data-collapsible="accordion">
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Layout</div>
+						<div class="collapsible-body"><p>In dieser Version, besteht die Möglichkeit zwischen einem neuen Layout und dem alten Layout für die Kacheln zu wählen.</p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Play in Background</div>
+						<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+						<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Lorem</div>
+						<div class="collapsible-body"><p>In dieser Version, besteht die Möglichkeit zwischen einem neuen Layout und dem alten Layout für die Kacheln zu wählen.</p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Ipsum</div>
+						<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Stuff</div>
+						<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Bugfixes</div>
+						<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="col s12 m6">
+		<div class="card padding white">
+			<div class="card-content">
+				<div class="grey lighten-2 center-align margin-bottom">
+					<span class="card-title bold">"Sandwich" Release (v1.2.1)</span>
+				</div>
 				<div class="row">
-					<div class="col s12 m6 offset-m3">
-						<div class="card padding white">
-							<div class="card-content">
-								<div class="amber lighten-2 center-align margin-bottom">
-									<span class="card-title bold">"Sandwich" Release (v1.2.1)</span>
-								</div>
-								<div class="row">
-									<div class="col s6 valign-wrapper">
-										<i class="material-icons valign">event</i><span class="valign margin-left">Due by 08.04.16</span>
-									</div>
-									<div class="col s6 valign-wrapper">
-										<i class="material-icons valign">event</i><span class="valign margin-left">Done at 08.04.16</span>
-									</div>
-								</div>
-								<ul class="collapsible white" data-collapsible="accordion">
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Layout</div>
-										<div class="collapsible-body"><p>In dieser Version, besteht die Möglichkeit zwischen einem neuen Layout und dem alten Layout für die Kacheln zu wählen.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Play in Background</div>
-										<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
-										<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
-									</li>
-								</ul>
-							</div>
-						</div>
+					<div class="col s6 valign-wrapper">
+						<i class="material-icons valign">event</i><span class="valign margin-left">Due by 08.04.16</span>
+					</div>
+					<div class="col s6 valign-wrapper">
+						<i class="material-icons valign">event</i><span class="valign margin-left">Done at 08.04.16</span>
 					</div>
 				</div>
+				<ul class="collapsible white" data-collapsible="accordion">
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Layout</div>
+						<div class="collapsible-body"><p>In dieser Version, besteht die Möglichkeit zwischen einem neuen Layout und dem alten Layout für die Kacheln zu wählen.</p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Play in Background</div>
+						<div class="collapsible-body"><p>PlayWall ermöglicht es nun Audio und andere Medien im Hintergrund wiederzugeben, während eine andere Seite offen ist.</p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Live Mode</div>
+						<div class="collapsible-body"><p>Mit dem neuen Livemode ist ein noch einfach die Kontrolle während Veranstaltungen zu behalten.</p></div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="row">
+	<div class="col s12 m6">
+		<div class="card padding white">
+			<div class="card-content">
+				<div class="grey lighten-2 center-align margin-bottom">
+					<span class="card-title bold">First Version (v1.0.0)</span>
+				</div>
 				<div class="row">
-					<div class="col s12 m6 offset-m3">
-						<div class="card padding white">
-							<div class="card-content">
-								<div class="amber lighten-2 center-align margin-bottom">
-									<span class="card-title bold">First Version (v1.0.0)</span>
-								</div>
-								<div class="row">
-									<div class="col s6 valign-wrapper">
-										<i class="material-icons valign">event</i><span class="valign margin-left">Due by  12.01.16</span>
-									</div>
-									<div class="col s6 valign-wrapper">
-										<i class="material-icons valign">event</i><span class="valign margin-left">Done at 17.01.16</span>
-									</div>
-								</div>
-								<ul class="collapsible white" data-collapsible="accordion">
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Trigger</div>
-										<div class="collapsible-body"><p>PlayWall bietet nur die Möglichkeit Kacheln und anderen Einstellungen eventbasiert zu steuern. </p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Updates</div>
-										<div class="collapsible-body"><p>Noch nie war es so einfach Updates zu erhalten. Mit dem neuen Updater können Plugins und das Programm im handumdrehen aktualisiert werden. </p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Lock</div>
-										<div class="collapsible-body"><p>Sichere deine Einstellungen ganz einfach mit nur einem Klick.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Beta Update Kanal</div>
-										<div class="collapsible-body"><p>Es ist jetzt möglich, direkt Beta Versionen zu installieren und zu aktualisieren.</p></div>
-									</li>
-									<li>
-										<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Neues Logo</div>
-										<div class="collapsible-body"><p>Das Programm hat ein neues Logo erhalten.</p></div>
-									</li>
-								</ul>
-							</div>
-						</div>
+					<div class="col s6 valign-wrapper">
+						<i class="material-icons valign">event</i><span class="valign margin-left">Due by  12.01.16</span>
+					</div>
+					<div class="col s6 valign-wrapper">
+						<i class="material-icons valign">event</i><span class="valign margin-left">Done at 17.01.16</span>
 					</div>
 				</div>
+				<ul class="collapsible white" data-collapsible="accordion">
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Trigger</div>
+						<div class="collapsible-body"><p>PlayWall bietet nur die Möglichkeit Kacheln und anderen Einstellungen eventbasiert zu steuern. </p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Updates</div>
+						<div class="collapsible-body"><p>Noch nie war es so einfach Updates zu erhalten. Mit dem neuen Updater können Plugins und das Programm im handumdrehen aktualisiert werden. </p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Lock</div>
+						<div class="collapsible-body"><p>Sichere deine Einstellungen ganz einfach mit nur einem Klick.</p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Beta Update Kanal</div>
+						<div class="collapsible-body"><p>Es ist jetzt möglich, direkt Beta Versionen zu installieren und zu aktualisieren.</p></div>
+					</li>
+					<li>
+						<div class="collapsible-header bold"><i class="material-icons green-text">check</i>Neues Logo</div>
+						<div class="collapsible-body"><p>Das Programm hat ein neues Logo erhalten.</p></div>
+					</li>
+				</ul>
 			</div>
 		</div>
-	</body>
-</html>
\ No newline at end of file
+	</div>
+</div>
\ No newline at end of file
diff --git a/index.php b/index.php
index a630e39..cd830e2 100644
--- a/index.php
+++ b/index.php
@@ -104,6 +104,19 @@
 						</div>
 					</div>
 				</div>
+
+				<div class="hide-on-med-and-up center-align">
+					<a class="btn-flat no-transform blue-text margin-bottom" id="button-previousVersions1">Show Previous Versions</a>
+				</div>
+
+				<div class="hide-on-small-only">
+					<a class="btn-flat no-transform blue-text margin-bottom" id="button-previousVersions2">Show Previous Versions</a>
+				</div>
+
+				<div class="hide" id="previousVersions">
+					<?php include('history.php'); ?>
+				</div>
+
 			</div>
 		</div>
 	</body>
diff --git a/js/main.js b/js/main.js
index 5cb5cc6..eb0935a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -2,4 +2,80 @@ $(document).ready(function(){
 	$('.collapsible').collapsible({
 		accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
 	});
-});
\ No newline at end of file
+
+	$('#button-previousVersions1').click(function()
+	{
+		togglePreviousVersions();
+	});
+
+	$('#button-previousVersions2').click(function()
+	{
+		togglePreviousVersions();
+	});
+});
+
+var hidden = true;
+var buttonPreviousVersionShow = "Show Previous Versions";
+var buttonPreviousVersionHide = "Hide Previous Versions";
+
+function togglePreviousVersions()
+{
+	var element = document.getElementById('previousVersions');
+
+	if(hidden)
+	{
+		hideElement(element, false);
+		document.getElementById('button-previousVersions1').innerHTML = buttonPreviousVersionHide;
+		document.getElementById('button-previousVersions2').innerHTML = buttonPreviousVersionHide;
+		hidden = false;
+	}
+	else
+	{
+		hideElement(element, true);
+		document.getElementById('button-previousVersions1').innerHTML = buttonPreviousVersionShow;
+		document.getElementById('button-previousVersions2').innerHTML = buttonPreviousVersionShow;
+		hidden = true;
+	}
+}
+
+function isNull(object)
+{
+	if(object != "" && object != undefined)
+	{
+		return false;
+	}
+	else
+	{
+		return true;
+	}
+}
+
+function hideElement(element, value)
+{
+	if(value == true)
+	{
+		element.classList.add("hide");
+	}
+	else
+	{
+		if(element.classList.contains("hide"))
+		{
+			element.classList.remove("hide");
+		}
+	}
+}
+
+function fadeIn(element)
+{
+	element.style.opacity = 0;
+	var op = 0;
+	var timer = setInterval(function ()
+	{
+		if (op >= 0.9){
+			clearInterval(timer);
+			element.style.opacity = 1.0;
+		}
+		element.style.opacity = op;
+		op += 0.1;
+	}, 50);
+}
\ No newline at end of file
-- 
GitLab