beautified focus mode tab

This commit is contained in:
Teja 2015-01-28 11:21:02 +01:00
parent a4a274b78b
commit 6cc8ea4882
3 changed files with 23 additions and 8 deletions

View file

@ -1620,6 +1620,19 @@ input.search-query,
background-position: -30px -30px;
}
#focus_description {
background-image: url(../img/focus_adjust_steps.png);
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100vh;
}
.focus_steps li {
list-style-type: none;
padding-bottom: 0.65em;
}
.footer>* {
padding-top: 1em;

Binary file not shown.

After

Width:  |  Height:  |  Size: 585 KiB

View file

@ -356,13 +356,14 @@
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<ul>
<li>Place your material on the working area</li>
<li>Move the laser over the material</li>
<li>Put on your safety glasses</li>
<li>Enable the focus mode</li>
<li>Adjust the focus until the laser beam is as small as possible</li>
<li>Disable the focus mode. You can take off the safety glasses afterwards</li>
<ul class="focus_steps">
<li>1. Place your material on the working area</li>
<li>2. Move the laser over the material</li>
<li>3. Put on your safety glasses</li>
<li>4. Turn the laser safety switch to on</li>
<li>&RightArrow; Now enable the focus mode</li>
<li>5. Adjust the focus until the laser beam is as small as possible</li>
<li>&RightArrow; Disable the focus mode. </li>
</ul>
<div style="text-align:center">
<div class="btn-group" role="group" aria-label="focus mode control" style="">
@ -384,7 +385,8 @@
</div>
<div class="span8">
<div class="focus" > images describing the process </div>
<div class="focus" id="focus_description">
</div>
</div>
</div>
</div>