Hochschulprojekte
/
f1vis
0
0
Fork 0
Code Issues Pull Requests Activity

Added Toggle-Btn for DriverInfo Area

This commit is contained in:
sirsandmann 2017-12-31 13:44:46 +01:00
parent 141c15bf7f
commit dee4408a61
3 changed files with 39 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -96,11 +96,11 @@ body {
pointer-events: all;
}
#toggle-btn{
#toggle-btn-selection, #toggle-btn-driverinfo{
text-align: center;
}
#icon-up-arrow{
.icon-up-arrow{
width: 1%;
height: 1%;
}

12
index.html
View File

@ -67,8 +67,8 @@
</div> <!-- card-body -->
<div class="card-footer" style="padding:0;">
<div id="toggle-btn">
<svg id="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve" transform="rotate(-90)">
<div id="toggle-btn-selection">
<svg id="icon-up-arrow-selection" class="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve" transform="rotate(-90)">
<polygon fill="#010101" points="102.296,59.957 42.264,119.99 25.605,103.34 85.639,43.299 "/>
<polygon fill="#010101" points="85.74,76.71 25.715,16.653 42.373,0.011 102.391,60.067 "/>
</svg>
@ -100,6 +100,14 @@
<div class="card" id="driver-card">
<div class="card-header">Rennteilnehmer</div>
<div class="card-body" id="driver-infobox"><!-- Driver info box automatically filled by JS.--></div> <!-- card-body -->
<div class="card-footer" style="padding:0;">
<div id="toggle-btn-driverinfo">
<svg id="icon-up-arrow-driverinfo" class="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve" transform="rotate(-90)">
<polygon fill="#010101" points="102.296,59.957 42.264,119.99 25.605,103.34 85.639,43.299 "/>
<polygon fill="#010101" points="85.74,76.71 25.715,16.653 42.373,0.011 102.391,60.067 "/>
</svg>
</div>
</div> <!-- card-footer -->
</div> <!-- card -->

30
js/main.js
View File

@ -102,10 +102,10 @@ preprocessor.load(function(data) {
slyelement.obj.reload();
});
$( "#toggle-btn" ).click(function() {
$( "#toggle-btn-selection" ).click(function() {
if ( $( "#selector-card .card-body" ).is( ":hidden" ) ) {
$( "#selector-card .card-body" ).slideDown();
$('#icon-up-arrow').animate({ borderSpacing: 0 - 90 }, {
$('#icon-up-arrow-selection').animate({ borderSpacing: 0 - 90 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
@ -115,7 +115,31 @@ preprocessor.load(function(data) {
},'linear');
} else {
$( "#selector-card .card-body" ).slideUp();
$('#icon-up-arrow').animate({ borderSpacing: 180 - 90 }, {
$('#icon-up-arrow-selection').animate({ borderSpacing: 180 - 90 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
$(this).css('transform','rotate('+now+'deg)');
},
duration: 150
},'linear');
}
});
$( "#toggle-btn-driverinfo" ).click(function() {
if ( $( "#driver-card .card-body" ).is( ":hidden" ) ) {
$( "#driver-card .card-body" ).slideDown();
$('#icon-up-arrow-driverinfo').animate({ borderSpacing: 0 - 90 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
$(this).css('transform','rotate('+now+'deg)');
},
duration: 150
},'linear');
} else {
$( "#driver-card .card-body" ).slideUp();
$('#icon-up-arrow-driverinfo').animate({ borderSpacing: 180 - 90 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');