AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move layer slider to bottom and gently restyle

Browse source
This commit is contained in:
Stewart Allen 2020-06-21 22:37:11 -04:00
commit 72a54b890f
4 changed files with 89 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

45
web/kiri/index.css
View file

@ -2,7 +2,8 @@
--fg-gray: #495057;
--bg-gray: rgba(0,0,0,0.25);
--gradbar: linear-gradient(to right, #ddd, #666, #ddd);
--holdbar: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
--holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
--holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important;
}
a, a:hover, a:visited {
border: none;
@ -783,14 +784,19 @@ and (orientation : landscape) {
color: #335;
}
#slider {
display: none;
#layer-slider {
position: absolute;
font-size: smaller;
top: 15px;
right: 3px;
bottom: 15px;
width: 50px;
left: 15px;
right: 15px;
bottom: 3px;
pointer-events: all;
}
#slider {
display: none;
height: 30px;
z-index: 100;
}
#slider-hi-val, #slider-lo-val {
display: none;
@ -800,44 +806,45 @@ and (orientation : landscape) {
background-color: rgba(255,255,255,0.5);
border: 1px solid #ddd;
border-radius: 3px;
right: 110%;
top: 50%;
bottom: 110%;
left: 50%;
}
#slider > div {
flex-direction: column;
justify-content: center;
flex-direction: row;
align-items: center;
}
#slider-max {
background-color: #ccc;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-bottom: 3px;
border-bottom-right-radius: 10px;
margin-left: 3px;
}
#slider-center {
background-image: var(--holdbar);
}
#slider-zero {
z-index: 10;
margin-top: 3px;
margin-right: 3px;
background-color: #ccc;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#slider-hold {
background-color: rgba(0,0,0,0.15);
position: absolute;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
#slider-hold .handle {
width: 100%;
height: 15px;
width: 15px;
height: 100%;
border-radius: 3px;
background-color: var(--bg-gray);
}
#slider-mid {
height: 20px;
width: 20px;
}
#alert-area {
@ -972,7 +979,7 @@ and (orientation : landscape) {
border-radius: 10px;
background-color: #ddd;
padding: 2px 5px 2px 5px;
margin: 0 2px 0 2px;
margin: 0 2px 3px 2px;
}
.var-row {
white-space: nowrap;

29
web/kiri/index.html
View file

@ -308,6 +308,20 @@
<input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/>
<div class="mod-end"></div></div>
</div>
<div id="layer-slider" class="col a-stretch">
<div id="layers" class="row j-center"></div>
<div id="slider" class="row russo">
<div id="slider-zero">0</div>
<div id="slider-center" class="grow">
<div id="slider-hold" class="row">
<div id="slider-lo" class="handle"><div id="slider-lo-val"></div></div>
<div id="slider-mid">&nbsp;</div>
<div id="slider-hi" class="handle"><div id="slider-hi-val"></div></div>
</div>
</div>
<div id="slider-max">&infin;</div>
</div>
</div>
</div>
<div id="mid-rcol" class="col j-center noshow">
<div id="set-menu" class="col">
@ -315,23 +329,10 @@
<div id="settings" class="col"></div>
<div id="set-end" class="set-group"></div>
</div>
<div id="slider" class="col russo">
<div id="slider-max">&infin;</div>
<div id="slider-center" class="grow">
<div id="slider-hold" class="col xa-center">
<div id="slider-hi" class="handle"><div id="slider-hi-val"></div></div>
<div id="slider-mid">&nbsp;</div>
<div id="slider-lo" class="handle"><div id="slider-lo-val"></div></div>
</div>
</div>
<div id="slider-zero">0</div>
</div>
</div>
</div>
<div id="end" class="col a-center">
<div id="bottom">
<div id="layers"></div>
</div>
<div id="bottom"></div>
<div id="alert-area">
<div id="alert-border">
<div id="alert-text">alerts<br>alerts<br>alerts</div>