Skip to content
GitLab
Commit e8504634 authored by amandaghassaei's avatar amandaghassaei
Browse files

styling

parent 4b8c7afd
Hide whitespace changes
Inline Side-by-side
css/main.css
View file @ e8504634
......@@ -34,7 +34,7 @@ body{
background:rgba(10,10,10,0.1);
}
#controls>a{
float:right;
/*float:right;*/
}
#controlsLeft{
position: absolute;
......@@ -63,6 +63,9 @@ body{
.indent{
padding-left:20px;
}
.doubleIndent{
padding-left:40px;
}
#gpuMathCanvas{
display: none;
......@@ -294,12 +297,19 @@ svg{
margin: 0 18px;
}
.about.floatRight{
.about{
margin-right: 10px;
color: #34495e;
color: #34495e!important;
font-size: 18px;
line-height: 18px;
}
#controls .about{
position: absolute;
line-height: 1.7;
margin-top: 2px;
right:5px;
}
#aboutError{
line-height: 2.0
......@@ -315,7 +325,8 @@ svg{
margin-left: 20px;
}
#stepForward{
margin-left: 13px;
display: inline-block;
margin-right: 20px;
}
#creasePercent{
......@@ -368,4 +379,20 @@ a.seeMore.closed>.fui-triangle-down{
.hide{
display: none;
}
.inlineBlock{
display: inline-block;
}
.alignRight{
text-align: right;
}
.fullWidth{
width: 100%;
}
#simulationSettings, #errorInfo, #animationsSettings, #cameraAngle, #edgeVisiblity, #virtualReality, #materialSettings{
margin-top: 15px;
}
\ No newline at end of file
index.html
View file @ e8504634
......@@ -536,17 +536,15 @@
<div id="threeContainer"></div>
<canvas id="gpuMathCanvas"></canvas>
<div id="controls">
<div>
<a href="#" id="reset" class="btn floatRight btn-lg btn-default">Reset</a>
<a href="#" id="start" class="btn floatRight btn-lg btn-success">Start Simulation</a>
<a href="#" id="pause" class="btn floatRight btn-lg btn-warning">Pause Simulation</a>
<br/><br/>
<div id="simButtons" class="alignRight">
<a href="#" id="start" class="paddingBottom btn btn-lg btn-success">Start Simulation</a>
<a href="#" id="pause" class="paddingBottom btn btn-lg btn-warning">Pause Simulation</a>
<a href="#" id="reset" class="paddingBottom btn btn-lg btn-default">Reset</a>
<div id="stepForwardOptions" class="floatRight">
Num Steps: &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="form-control" type="text">
<a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
<label>Num Steps:</label> &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="form-control" type="text">
<br/><br/>
</div>
<a href="#" id="shouldCenterGeo" class="floatRight btn btn-lg btn-default">Re-center geometry</a>
</div>
<!--<b>Simulation Type:</b><br/>-->
<!--<div class="indent">-->
......@@ -563,41 +561,51 @@
<!--&lt;!&ndash;Rigid Static Simulation <a class="about floatRight" href="#" id="aboutRigidSim"><span class="fui-question-circle"></span></a>&ndash;&gt;-->
<!--&lt;!&ndash;</label>&ndash;&gt;-->
<!--</div><br/>-->
<label class="checkbox" for="userInteractionEnabled">
<input id="userInteractionEnabled" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
Allow User Interaction
</label><br/>
<a href="#" class="seeMore closed" data-id="simulationSettings"><span class="fui-triangle-down"></span><b>Simulation Settings:</b></a><a class="floatRight about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/><br/>
<div id="simulationSettings" class="hide">
<div class="sliderInput" id="axialStiffness">
<span class="label-slider">Axial Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
<input value="" placeholder="" class="form-control" type="text">
</div>
<div class="sliderInput" id="creaseStiffness">
<span class="label-slider">Fold Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
<input value="" placeholder="" class="form-control" type="text">
</div>
<div class="sliderInput" id="panelStiffness">
<span class="label-slider">Facet Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
<input value="" placeholder="" class="form-control" type="text">
</div>
<div class="sliderInput" id="percentDamping">
<span class="label-slider">Damping (0-1): </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
<input value="" placeholder="" class="form-control" type="text">
</div>
<br/><br/>
<div class="inlineBlock fullWidth">
<label class="checkbox floatRight" for="userInteractionEnabled">
<input id="userInteractionEnabled" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
Allow User Interaction
</label>
</div><br/>
<div class="fullWidth alignRight">
<a href="#" id="shouldCenterGeo" class="displayBlock btn btn-lg btn-default">Re-center geometry</a>
</div><br/>
<div class="fullWidth">
<a href="#" class="seeMore closed" data-id="simulationSettings"><span class="fui-triangle-down"></span><b>Simulation Settings:</b></a><a class="about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/>
<div id="simulationSettings" class="hide">
<div class="sliderInput paddingBottom" id="axialStiffness">
<span class="label-slider">Axial Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
<input value="" placeholder="" class="form-control" type="text">
</div>
<div class="sliderInput" id="creaseStiffness">
<span class="label-slider">Fold Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
<input value="" placeholder="" class="form-control" type="text">
</div>
<div class="sliderInput" id="panelStiffness">
<span class="label-slider">Facet Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
<input value="" placeholder="" class="form-control" type="text">
</div>
<div class="sliderInput" id="percentDamping">
<span class="label-slider">Damping (0-1): </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
<input value="" placeholder="" class="form-control" type="text">
</div>
</div><br/>
</div>
<a href="#" class="seeMore closed" data-id="animationsSettings"><span class="fui-triangle-down"></span><b>Animation Settings:</b></a><a class="about floatRight" href="#" id="aboutAnimation"><span class="fui-question-circle"></span></a><br/>
<div id="animationsSettings" class="hide">
<div class="indent">
<span class="smallTxt">&Delta;t = <span id="deltaT"></span> seconds</span><br/>
<span class="smallTxt">Num simulation steps per render: &nbsp;&nbsp;<input id="numStepsPerRender" value="" placeholder="" class="int form-control" type="text"></span><br/><br/>
<div class="fullWidth">
<a href="#" class="seeMore closed" data-id="animationsSettings"><span class="fui-triangle-down"></span><b>Animation Settings:</b></a><a class="about" href="#" id="aboutAnimation"><span class="fui-question-circle"></span></a><br/>
<div id="animationsSettings" class="fullWidth hide">
<div class="doubleIndent">
<span class="smallTxt">&Delta;t = <span id="deltaT"></span> seconds</span><br/>
<span class="smallTxt">Num simulation steps per render: &nbsp;&nbsp;<input id="numStepsPerRender" value="" placeholder="" class="int form-control" type="text"></span>
</div>
</div>
</div><br/><br/>
</div><br/>
<b>Error:</b><a class="about floatRight" href="#" id="aboutError"><span class="fui-question-circle"></span></a><br/>
<div class="indent">
<label>Average node error: <span id="globalError"></span></label>
<div class="fullWidth">
<a href="#" class="seeMore closed" data-id="errorInfo"><span class="fui-triangle-down"></span><b>Error:</b></a><a class="about" href="#" id="aboutError"><span class="fui-question-circle"></span></a><br/>
<div id="errorInfo" class="hide smallTxt doubleIndent">
<label>Average node error: <span id="globalError"></span></label>
</div>
</div><br/>
<div class="extraSpace"></div>
......@@ -608,8 +616,10 @@
<div>
<b>View Settings:</b><br/><br/>
<div class="indent">
<a href="#" class="seeMore open" data-id="materialSettings"><span class="fui-triangle-down"></span>Mesh Material:</a><br/>
<div id="materialSettings" class="indent">
<div>
<a href="#" class="seeMore open" data-id="materialSettings"><span class="fui-triangle-down"></span>Mesh Material:</a>
</div>
<div id="materialSettings" class="inlineBlock indent">
<label class="checkbox" for="meshVisible">
<input id="meshVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
Mesh Visible
......@@ -636,9 +646,11 @@
<input id="strainClip" value="" placeholder="" class="float form-control" type="text"> %<br/>
</div>
</div>
<br/>
</div><br/>
<a href="#" class="seeMore closed" data-id="edgeVisiblity"><span class="fui-triangle-down"></span>Edge Visiblity</a>:
<div>
<a href="#" class="seeMore closed" data-id="edgeVisiblity"><span class="fui-triangle-down"></span>Edge Visiblity</a>:
</div>
<div id="edgeVisiblity" class="hide indent">
<label class="checkbox" for="edgesVisible">
<input id="edgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
......@@ -662,7 +674,9 @@
Undriven Edges <span id="numPassive"></span>
</label>
</div>
</div><br/><br/>
<br/>
</div>
<br/>
<!--Rendering:-->
<!--<div class="indent">-->
<!--<label class="checkbox" for="ambientOcclusion">-->
......@@ -670,21 +684,25 @@
<!--Ambient Occlusion-->
<!--</label>-->
<!--</div>-->
<a href="#" class="seeMore closed" data-id="virtualReality"><span class="fui-triangle-down"></span>Virtual Reality:</a>
<div>
<a href="#" class="seeMore closed" data-id="virtualReality"><span class="fui-triangle-down"></span>Virtual Reality:</a>
</div>
<div id="virtualReality" class="hide indent smallTxt">
Status: &nbsp;<span id="VRstatus"></span><a class="about floatRight" href="#" id="aboutVR"><span class="fui-question-circle"></span></a>
<div id="VRoptions">
</div>
</div><br/><br/>
<a href="#" class="seeMore closed" data-id="cameraAngle"><span class="fui-triangle-down"></span>View Angle:</a><br/><br/>
<div id="cameraAngle" class="hide indent">
<a href="#" id="cameraZ" class="paddingBottom btn btn-lg btn-default">Front</a>
<a href="#" id="cameraMinusZ" class="paddingBottom btn btn-lg btn-default">Back</a>
<a href="#" id="cameraX" class="paddingBottom btn btn-lg btn-default">Right</a>
<a href="#" id="cameraMinusX" class="paddingBottom btn btn-lg btn-default">Left</a><br/>
<a href="#" id="cameraY" class="btn btn-lg btn-default">Top</a>
<a href="#" id="cameraMinusY" class="btn btn-lg btn-default">Bottom</a>
<a href="#" id="cameraOrtho" class="btn btn-lg btn-default">Ortho</a>
</div><br/><br/>
</div><br/>
<div>
<a href="#" class="seeMore closed" data-id="cameraAngle"><span class="fui-triangle-down"></span>View Angle:</a><br/>
</div>
<div id="cameraAngle" class="hide indent ">
<a href="#" id="cameraZ" class="paddingBottom btn btn-sm btn-default">Front</a>
<a href="#" id="cameraMinusZ" class="paddingBottom btn btn-sm btn-default">Back</a>
<a href="#" id="cameraX" class="paddingBottom btn btn-sm btn-default">Right</a>
<a href="#" id="cameraMinusX" class="paddingBottom btn btn-sm btn-default">Left</a><br/>
<a href="#" id="cameraY" class="btn btn-sm btn-default">Top</a>
<a href="#" id="cameraMinusY" class="btn btn-sm btn-default">Bottom</a>
<a href="#" id="cameraOrtho" class="btn btn-sm btn-default">Ortho</a>
</div>
</div>
</div>
......
js/controls.js
View file @ e8504634
......@@ -130,7 +130,7 @@ function initControls(globals){
$target.addClass("open");
AnimateRotate(-90, 0, $target.children("span"));
$div.removeClass("hide");
$div.show();
$div.css('display', 'inline-block');
} else {
$target.removeClass("open");
$target.addClass("closed");
......@@ -297,15 +297,15 @@ function initControls(globals){
});
setLink("#start", function(){
$("#pause").show();
$("#reset").show();
$("#pause").css('display', 'inline-block');
$("#reset").css('display', 'inline-block');
$("#start").hide();
$("#stepForwardOptions").hide();
globals.model.resume();
});
setLink("#pause", function(){
$("#start").show();
$("#stepForwardOptions").show();
$("#start").css('display', 'inline-block');
$("#stepForwardOptions").css('display', 'inline-block');
$("#pause").hide();
globals.model.pause();
});
......@@ -320,7 +320,7 @@ function initControls(globals){
if (numSteps<=0) return;
$("#numSteps").val(numSteps);
globals.model.step(numSteps);
$("#reset").show();
$("#reset").css('display', 'inline-block');
});
setInput("#strainClip", globals.strainClip, function(val){
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment