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