diff --git a/css/style.css b/css/style.css
index e307be7835fe9f87c358eaff9673918ade4ab1f5..946e274afa24a751be116e8314500926b4c578be 100644
--- a/css/style.css
+++ b/css/style.css
@@ -31,6 +31,10 @@
padding-right: 10px;
}
+.margin-top{
+ margin-top: 20px !important;;
+}
+
.margin-bottom{
margin-bottom: 20px !important;
}
@@ -100,11 +104,16 @@
border-left: 4px dashed #64b5f6 !important;
}
-.version-entry-title:hover{
+.milestone-title{
+ transition: ease-in-out;
cursor: pointer;
}
#headline{
margin-top: 2.5rem;
margin-bottom: 2.2rem;
+}
+
+.milestone-content {
+ display: none;
}
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 6ae26a3ce8182d58de397b541df7c66a96987a8c..3c9a29c13e12a43238f47a2d1677f115b90a6386 100644
--- a/js/main.js
+++ b/js/main.js
@@ -4,14 +4,27 @@ $(document).ready(function()
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
- $('.version-entry-title').click(function()
+ $('.milestone-title').click(function()
{
- toggleDetail($(this).get(0));
+ var $header = $(this);
+
+ //getting the next element
+ var $content = $header.next();
+
+ //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
+ $content.slideToggle(200);
});
+ //expand specific milestones on first load
+ var initialExpandedMilestones = document.getElementsByClassName('init-as-expanded');
+ for(var i = 0; i < initialExpandedMilestones.length; i++)
+ {
+ $(initialExpandedMilestones[i]).slideToggle(200);
+ }
+
//reacts to resize event of card and calls createTrainMap to adjust circles
//https://github.com/marcj/css-element-queries
- var entries = document.getElementsByClassName('version-entry');
+ var entries = document.getElementsByClassName('milestone');
for(var i = 0; i < entries.length - 1; i++)
{
new ResizeSensor(entries[i], function()
@@ -50,25 +63,9 @@ function hideElement(element, value)
}
}
-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);
-}
-
function createTrainMap()
{
- var entries = document.getElementsByClassName('version-entry');
+ var entries = document.getElementsByClassName('milestone');
var lines = document.getElementsByClassName('train-line');
var smallLines = document.getElementsByClassName('train-line-small');
@@ -78,31 +75,4 @@ function createTrainMap()
lines[i].style.height = (height-15) + "px";
smallLines[i].style.height = (height-2) + "px";
}
-}
-
-function toggleDetail(element)
-{
- var container = element.parentElement.parentElement.childNodes[3];
- var cardHeader = element.parentElement;
-
- if(container.classList.contains("hide"))
- {
- hideElement(container, false);
-
- fadeIn(container);
-
- if(!cardHeader.classList.contains("margin-bottom"))
- {
- cardHeader.classList.add("margin-bottom");
- }
- }
- else
- {
- hideElement(container, true);
-
- if(cardHeader.classList.contains("margin-bottom"))
- {
- cardHeader.classList.remove("margin-bottom");
- }
- }
}
\ No newline at end of file
diff --git a/php/index.php b/php/index.php
index d6f081459d758de2707474825be9499be55e3c63..ec02655526951a65299369a92317b80af479bbd7 100644
--- a/php/index.php
+++ b/php/index.php
@@ -56,12 +56,12 @@ include_once('getLanguageJSON.php');
</div>
</div>
<div class="col s11 m7 l6">
- <div class="card padding white version-entry" id="version-entry-1">
+ <div class="card padding white milestone">
<div class="card-content">
- <div class="blue lighten-2 center-align margin-bottom">
- <span class="card-title bold version-entry-title padding-left-and-right truncate">v1.6.0 - Next Version</span>
+ <div class="blue lighten-2 center-align milestone-title">
+ <span class="card-title bold padding-left-and-right truncate">v1.6.0 - Next Version</span>
</div>
- <div class="version-entry-content">
+ <div class="milestone-content margin-top init-as-expanded">
<div class="white progress-container">
<div class="progress grey lighten-2 high-progress margin-bottom">
<div class="determinate green" style="width: 40%"></div>
@@ -111,12 +111,12 @@ include_once('getLanguageJSON.php');
</div>
- <div class="card padding white version-entry">
+ <div class="card padding white milestone">
<div class="card-content">
- <div class="amber lighten-2 center-align margin-bottom">
- <span class="card-title bold version-entry-title padding-left-and-right truncate">v1.5.7 - Current Version</span>
+ <div class="amber lighten-2 center-align milestone-title">
+ <span class="card-title bold padding-left-and-right truncate">v1.5.7 - Current Version</span>
</div>
- <div class="version-entry-content">
+ <div class="milestone-content margin-top init-as-expanded">
<div class="row">
<div class="col s6 valign-wrapper">
<i class="material-icons valign">event</i><span class="valign margin-left"><?php echo $languageJSON->due_by?> 25.06.16</span>
@@ -139,12 +139,12 @@ include_once('getLanguageJSON.php');
</div>
</div>
- <div class="card padding white version-entry">
+ <div class="card padding white milestone">
<div class="card-content">
- <div class="grey lighten-2 center-align">
- <span class="card-title bold version-entry-title padding-left-and-right truncate">v1.3.0 - Third Version</span>
+ <div class="grey lighten-2 center-align milestone-title">
+ <span class="card-title bold padding-left-and-right truncate">v1.3.0 - Third Version</span>
</div>
- <div class="version-entry-content hide">
+ <div class="milestone-content margin-top">
<div class="row">
<div class="col s6 valign-wrapper">
<i class="material-icons valign">event</i><span class="valign margin-left"><?php echo $languageJSON->due_by?> 25.06.16</span>
@@ -184,12 +184,12 @@ include_once('getLanguageJSON.php');
</div>
</div>
- <div class="card padding white version-entry">
+ <div class="card padding white milestone">
<div class="card-content">
- <div class="grey lighten-2 center-align">
- <span class="card-title bold version-entry-title padding-left-and-right truncate">v1.1.0 - Second Version</span>
+ <div class="grey lighten-2 center-align milestone-title">
+ <span class="card-title bold padding-left-and-right truncate">v1.1.0 - Second Version</span>
</div>
- <div class="version-entry-content hide">
+ <div class="milestone-content margin-top">
<div class="row">
<div class="col s6 valign-wrapper">
<i class="material-icons valign">event</i><span class="valign margin-left"><?php echo $languageJSON->due_by?> 25.06.16</span>
@@ -229,15 +229,15 @@ include_once('getLanguageJSON.php');
</div>
</div>
- <div class="card padding white version-entry">
+ <div class="card padding white milestone">
<div class="card-content">
- <div class="grey lighten-2 center-align">
- <span class="card-title bold version-entry-title padding-left-and-right truncate">v1.0.0 - First Version</span>
+ <div class="grey lighten-2 center-align milestone-title">
+ <span class="card-title bold padding-left-and-right truncate">v1.0.0 - First Version</span>
</div>
- <div class="version-entry-content hide">
+ <div class="milestone-content margin-top">
<div class="row">
<div class="col s6 valign-wrapper">
- <i class="material-icons valign">event</i><span class="valign margin-left"><?php echo $languageJSON->duey?> 25.06.16</span>
+ <i class="material-icons valign">event</i><span class="valign margin-left"><?php echo $languageJSON->due_by?> 25.06.16</span>
</div>
<div class="col s6 valign-wrapper">
<i class="material-icons valign">event</i><span class="valign margin-left"><?php echo $languageJSON->done_at?> 25.06.16</span>