make an clean UI

lautr3k · Mar 18, 2016 · 243fd3e40395dc615b51380fafb11099ebc35416 · 243fd3e
1 parent 6f87348
commit 243fd3e40395dc615b51380fafb11099ebc35416
Unified Split

Showing with 287 additions and 31 deletions.

+55 −1 css/main.css

+20 −4 index.html

+212 −26 js/main.js
diff --git a/css/main.css b/css/main.css
@@ -51,10 +51,64 @@
 /* Main */
 #main {
     position: fixed;
-    left: 300px;
+    left: 301px;
+    right: 39px;
+    top: 51px;
+    bottom: 0;
+}
+
+/* Slider */
+#slider {
+    position: fixed;
+    padding: 10px;
+    width: 60px;
     top: 51px;
     bottom: 0;
     right: 0;
+    background-color: #f5f5f5;
+    border-left: 1px solid #eeeeee;
+}
+
+#slider .min,
+#slider .max {
+    padding: 0;
+    height: 20px;
+    display: block;
+    text-align: center;
+}
+
+#slider .max {
+    margin-bottom: 10px;
+}
+
+#slider .min {
+    margin-top: 10px;
+}
+
+#slider .slider {
+    margin-left: 10px;
+}
+
+#slider .slider-handle {
+    border: 1px #cccccc solid;
+    background-color: #ffffff;
+    background-image: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
+    background-image: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
+    background-image: linear-gradient(to bottom,#eeeeee 0%, #cccccc 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);
+    filter: none;
+}
+
+#slider .slider-track {
+    border: 1px solid #eeeeee;
+}
+
+#slider .slider-track,
+#slider .slider-selection {
+    background-color: #ffffff;
+    background-image: none;
+    filter: none;
 }
 
 /* Button file */

diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>SLAcer.js (bêta)</title>
         <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
+        <link rel="stylesheet" type="text/css" href="vendor/bootstrap-slider/css/bootstrap-slider.min.css" />
         <link rel="stylesheet" type="text/css" href="css/main.css" />
     </head>
     <body>
@@ -61,7 +62,7 @@ <h3 class="panel-title">Mesh</h3>
                             <span class="info-value" id="mesh-faces">0</span>
                         </div>
                         <div class="info">
-                            <span class="info-label">Volume <small>(mm³)</small></span>
+                            <span class="info-label">Volume <small>(ml)</small></span>
                             <span class="info-value" id="mesh-volume">0</span>
                         </div>
                         <div class="info">
@@ -92,7 +93,7 @@ <h3 class="panel-title">Build volume</h3>
                             <input type="number" id="build-volume-z" class="form-control input-sm" placeholder="100" min="0" />
                         </div>
                         <div class="form-group">
-                            <label for="build-volume-unit">unit</small></label>
+                            <label for="build-volume-unit">unit</label>
                             <input type="radio" name="build-volume-unit" id="build-volume-unit-in" value="in" /> in
                             <input type="radio" name="build-volume-unit" id="build-volume-unit-mm" value="mm" checked="checked" /> mm
                         </div>
@@ -135,8 +136,8 @@ <h3 class="panel-title">Screen</h3>
                             <input type="number" id="screen-height" class="form-control input-sm" placeholder="1050" min="0" />
                         </div>
                         <div class="form-group">
-                            <label for="screen-diagonal">Diagonal size</label>
-                            <input type="number" id="screen-diagonal" class="form-control input-sm" placeholder="22" min="0" />
+                            <label for="screen-diagonal-size">Diagonal size</label>
+                            <input type="number" id="screen-diagonal-size" class="form-control input-sm" placeholder="22" min="0" />
                         </div>
                         <div class="form-group">
                             <label for="screen-diagonal-unit">Diagonal unit</label>
@@ -152,11 +153,26 @@ <h3 class="panel-title">Screen</h3>
                 <div id="viewer3d" class="box fl">loading...</div>
             </div><!-- #main -->
 
+            <div id="slider">
+                <span class="max">100</span>
+                <input id="ex4" type="text"
+                    data-slider-min="0"
+                    data-slider-max="100"
+                    data-slider-step="1"
+                    data-slider-value="0"
+                    data-slider-tooltip="always"
+                    data-slider-tooltip-position="left"
+                    data-slider-orientation="vertical" />
+                <span class="min">0</span>
+            </div><!-- #main -->
+
         </div><!-- .body -->
         <script src="vendor/jquery-2.1.4.min.js" type="text/javascript"></script>
         <script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
+        <script src="vendor/bootstrap-slider/bootstrap-slider.min.js" type="text/javascript"></script>
         <script src="vendor/lodash.min.js" type="text/javascript"></script>
         <script src="vendor/three.min.js" type="text/javascript"></script>
+        <script src="js/slacer/settings.js" type="text/javascript"></script>
         <script src="js/slacer/mesh.js" type="text/javascript"></script>
         <script src="js/slacer/viewer.js" type="text/javascript"></script>
         <script src="vendor/OrbitControls.js" type="text/javascript"></script>