diff --git a/css/style.css b/css/style.css
index b337d1077a0b4c184b82e44f67ae963113fd5cef..e307be7835fe9f87c358eaff9673918ade4ab1f5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -18,10 +18,19 @@
padding-right: 0 !important;
}
+.no-padding{
+ padding: 0 !important;
+}
+
.padding{
padding: 10px;
}
+.padding-left-and-right{
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
.margin-bottom{
margin-bottom: 20px !important;
}
@@ -48,17 +57,26 @@
margin-bottom: 0.5rem !important;
}
-.trainmap {
+.trainmap{
margin-top: 50px;
}
+.trainmap-small{
+ margin-top: 57px;
+}
+
.train-circle{
margin: auto;
- width: 30px !important;
- height: 30px !important;
+ width: 30px;
+ height: 30px;
border-radius: 50%;
}
+.train-circle-small{
+ width: 15px !important;
+ height: 15px !important;
+}
+
.train-circle-light{
background-color: #64b5f6 !important;
}
@@ -69,10 +87,19 @@
border-left: 8px solid #2196f3;
}
+.train-line-small{
+ width: 4px !important;
+ border-left: 4px solid #2196f3 !important;
+}
+
.dotted{
border-left: 8px dashed #64b5f6 !important;
}
+.dotted-small{
+ border-left: 4px dashed #64b5f6 !important;
+ }
+
.version-entry-title:hover{
cursor: pointer;
}
diff --git a/js/main.js b/js/main.js
index 57005f8aa0d282343914aafb20c09062e2caf541..6ae26a3ce8182d58de397b541df7c66a96987a8c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -70,11 +70,13 @@ function createTrainMap()
{
var entries = document.getElementsByClassName('version-entry');
var lines = document.getElementsByClassName('train-line');
+ var smallLines = document.getElementsByClassName('train-line-small');
for(var i = 0; i < entries.length - 1; i++)
{
- var height = entries[i].offsetHeight - 16;
- lines[i].style.height = height + "px";
+ var height = entries[i].offsetHeight;
+ lines[i].style.height = (height-15) + "px";
+ smallLines[i].style.height = (height-2) + "px";
}
}
diff --git a/php/index.php b/php/index.php
index 4632ec2ad118b58ccd97948cf7463266f56b94bb..d6f081459d758de2707474825be9499be55e3c63 100644
--- a/php/index.php
+++ b/php/index.php
@@ -31,22 +31,35 @@ include_once('getLanguageJSON.php');
<div class="row">
<div class="col s12">
<div class="row">
- <div class="col s2 m2 l2 offset-m1 offset-l1 trainmap">
- <div class="train-circle train-circle-light"></div>
- <div class="train-line dotted"></div>
- <div class="train-circle blue"></div>
- <div class="train-line"></div>
- <div class="train-circle blue"></div>
- <div class="train-line"></div>
- <div class="train-circle blue"></div>
- <div class="train-line"></div>
- <div class="train-circle blue"></div>
+ <div class="col s1 m2 l2 offset-m1 offset-l1 no-padding">
+ <div class="hide-on-small-only trainmap">
+ <div class="train-circle train-circle-light"></div>
+ <div class="train-line dotted"></div>
+ <div class="train-circle blue"></div>
+ <div class="train-line"></div>
+ <div class="train-circle blue"></div>
+ <div class="train-line"></div>
+ <div class="train-circle blue"></div>
+ <div class="train-line"></div>
+ <div class="train-circle blue"></div>
+ </div>
+ <div class="hide-on-med-and-up trainmap-small">
+ <div class="train-circle train-circle-light train-circle-small"></div>
+ <div class="train-line dotted-small train-line-small"></div>
+ <div class="train-circle blue train-circle-small"></div>
+ <div class="train-line train-line-small"></div>
+ <div class="train-circle blue train-circle-small"></div>
+ <div class="train-line train-line-small"></div>
+ <div class="train-circle blue train-circle-small"></div>
+ <div class="train-line train-line-small"></div>
+ <div class="train-circle blue train-circle-small"></div>
+ </div>
</div>
- <div class="col s10 m7 l6">
+ <div class="col s11 m7 l6">
<div class="card padding white version-entry" id="version-entry-1">
<div class="card-content">
<div class="blue lighten-2 center-align margin-bottom">
- <span class="card-title bold version-entry-title truncate">v1.6.0 - Next Version</span>
+ <span class="card-title bold version-entry-title padding-left-and-right truncate">v1.6.0 - Next Version</span>
</div>
<div class="version-entry-content">
<div class="white progress-container">
@@ -101,7 +114,7 @@ include_once('getLanguageJSON.php');
<div class="card padding white version-entry">
<div class="card-content">
<div class="amber lighten-2 center-align margin-bottom">
- <span class="card-title bold version-entry-title truncate">v1.5.7 - Current Version</span>
+ <span class="card-title bold version-entry-title padding-left-and-right truncate">v1.5.7 - Current Version</span>
</div>
<div class="version-entry-content">
<div class="row">
@@ -129,7 +142,7 @@ include_once('getLanguageJSON.php');
<div class="card padding white version-entry">
<div class="card-content">
<div class="grey lighten-2 center-align">
- <span class="card-title bold version-entry-title truncate">v1.3.0 - Third Version</span>
+ <span class="card-title bold version-entry-title padding-left-and-right truncate">v1.3.0 - Third Version</span>
</div>
<div class="version-entry-content hide">
<div class="row">
@@ -174,7 +187,7 @@ include_once('getLanguageJSON.php');
<div class="card padding white version-entry">
<div class="card-content">
<div class="grey lighten-2 center-align">
- <span class="card-title bold version-entry-title truncate">v1.1.0 - Second Version</span>
+ <span class="card-title bold version-entry-title padding-left-and-right truncate">v1.1.0 - Second Version</span>
</div>
<div class="version-entry-content hide">
<div class="row">
@@ -219,7 +232,7 @@ include_once('getLanguageJSON.php');
<div class="card padding white version-entry">
<div class="card-content">
<div class="grey lighten-2 center-align">
- <span class="card-title bold version-entry-title truncate">v1.0.0 - First Version</span>
+ <span class="card-title bold version-entry-title padding-left-and-right truncate">v1.0.0 - First Version</span>
</div>
<div class="version-entry-content hide">
<div class="row">