Skip to content
Snippets Groups Projects
Commit 45ffadcd authored by Robert Goldmann's avatar Robert Goldmann
Browse files

added smaller trainmap for mobile view (allows one additional column for the cards)

parent 19703bb5
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
css/style.css
+ 30
− 3
View file @ 45ffadcd
......@@ -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;
}
......@@ -52,13 +61,22 @@
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;
}
......
js/main.js
+ 4
− 2
View file @ 45ffadcd
......@@ -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";
}
}
......
php/index.php
+ 29
− 16
View file @ 45ffadcd
......@@ -31,7 +31,8 @@ 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="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>
......@@ -42,11 +43,23 @@ include_once('getLanguageJSON.php');
<div class="train-line"></div>
<div class="train-circle blue"></div>
</div>
<div class="col s10 m7 l6">
<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 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">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment