Explorar o código

animation bar updated : it's now on the footer

Rémi Louvat %!s(int64=7) %!d(string=hai) anos
pai
achega
95837ba333
Modificáronse 3 ficheiros con 108 adicións e 27 borrados
  1. 7 5
      sandbox/index-local.html
  2. 92 16
      sandbox/index.css
  3. 9 6
      sandbox/index.html

+ 7 - 5
sandbox/index-local.html

@@ -33,11 +33,13 @@
             <div id="dropdownContent">
             </div>
         </div>
-        <button id="playBtn" class="pause">
-            <img id="playImg" src="Assets/play.png">
-            <img id="pauseImg" src="Assets/pause.png">
-        </button>
-        <input id="slider" type="range" min="0" max="100" step="any">
+        <div class="row">
+            <button id="playBtn" class="pause">
+                <img id="playImg" src="Assets/play.png">
+                <img id="pauseImg" src="Assets/pause.png">
+            </button>
+            <input id="slider" type="range" min="0" max="100" value="0" step="any">
+        </div>
     </div>
     <div id="errorZone"></div>
     <script>

+ 92 - 16
sandbox/index.css

@@ -226,14 +226,18 @@ a {
 /* animation bar */
 #animationBar {
     position: absolute;
-    bottom: 100px;
-    left: 50%;
-    transform: translateX(-50%);
+    bottom: 0px;
     display: none;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     color: white;
     font-weight: bold;
+    width: calc(100% - 200px);
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
 }
 
 #animationBar * {
@@ -244,7 +248,7 @@ a {
 #animationBar,
 #dropdownContent {
     padding: 10px;
-    background-color: gray;
+    background-color: #3B789A;
 }
 
 #animationBar img {
@@ -282,11 +286,11 @@ a {
     width: 100px;
 }
 #dropdownContent a {
-    max-width: 710px;
+    max-width: 1000px;
     transition: color 0.5s;
 }
 #dropdownContent a:hover {
-    color: #444;
+    color: #162D3A;
 }
 
 #dropdownContent {
@@ -305,7 +309,7 @@ a {
 }
 
 #dropdownContent .active {
-    color: black;
+    color: #2c5a74;
 }
 
 .dropdown:hover #dropdownContent {
@@ -321,7 +325,7 @@ a {
 #slider {
     cursor: pointer;
     -webkit-appearance: none;
-    width: 500px;
+    width: 1000px;
     outline: none;
     border-radius: 5px;
 }
@@ -333,7 +337,7 @@ a {
     width: 20px;
     height: 20px;
     border: 0;
-    background: url('Assets/circle.png') no-repeat gray;
+    background: url('Assets/circle.png') no-repeat #3B789A;
     background-size: 100% 100%;
 }
 #slider::-webkit-slider-runnable-track {
@@ -353,7 +357,7 @@ a {
     width: 20px;
     height: 20px;
     border: 0;
-    background: url('Assets/circle.png') no-repeat gray;
+    background: url('Assets/circle.png') no-repeat #3B789A;
     background-size: 100% 100%;
 }
 
@@ -366,12 +370,27 @@ a {
     width: 20px;
     height: 20px;
     border: 0;
-    background: url('Assets/circle.png') no-repeat gray;
+    background: url('Assets/circle.png') no-repeat #3B789A;
     background-size: 100% 100%;
 }
 
-/** for screen too small */
-@media only screen and (max-width: 750px) {
+@media (min-width: 0px) {
+    #slider,
+    #dropdownLabel {
+        display: none;
+    }
+
+    #dropdownContent a {
+        max-width: 260px;
+    }
+}
+
+@media (min-width: 576px) {
+    #slider,
+    #dropdownLabel {
+        display: initial;
+    }
+    
     #slider {
         width: 100px;
     }
@@ -381,6 +400,63 @@ a {
     }
 
     #dropdownContent a {
-        max-width: 260px;
+        max-width: 300px;
+    }
+}
+
+@media (min-width: 768px) {
+    #slider,
+    #dropdownLabel {
+        display: initial;
+    }
+    
+    #slider {
+        width: 300px;
+    }
+
+    #dropdownLabel {
+        width: 75px;
+    }
+
+    #dropdownContent a {
+        max-width: 400px;
     }
-}
+}
+
+@media (min-width: 992px) {
+    #slider,
+    #dropdownLabel {
+        display: initial;
+    }
+    
+    #slider {
+        width: 400px;
+    }
+
+    #dropdownLabel {
+        width: 100px;
+    }
+
+    #dropdownContent a {
+        max-width: 600px;
+    }
+}
+
+@media (min-width: 1200px) {
+    #slider,
+    #dropdownLabel {
+        display: initial;
+    }
+    
+    #slider {
+        width: 700px;
+    }
+
+    #dropdownLabel {
+        width: 200px;
+    }
+
+    #dropdownContent a {
+        max-width: 700px;
+    }
+}

+ 9 - 6
sandbox/index.html

@@ -29,7 +29,8 @@
 
     <script src="https://preview.babylonjs.com/cannon.js"></script>
     <script src="https://preview.babylonjs.com/Oimo.js"></script>
-    <script src="https://preview.babylonjs.com/babylon.js"></script>
+    <!-- <script src="https://preview.babylonjs.com/babylon.js"></script> -->
+    <script src="../dist/preview release/babylon.js"></script>
     <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
 
     <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
@@ -62,11 +63,13 @@
             <div id="dropdownContent">
             </div>
         </div>
-        <button id="playBtn" class="pause">
-            <img id="playImg" src="Assets/play.png">
-            <img id="pauseImg" src="Assets/pause.png">
-        </button>
-        <input id="slider" type="range" min="0" max="100" step="any">
+        <div class="row">
+            <button id="playBtn" class="pause">
+                <img id="playImg" src="Assets/play.png">
+                <img id="pauseImg" src="Assets/pause.png">
+            </button>
+            <input id="slider" type="range" min="0" max="100" value="0" step="any">
+        </div>
     </div>
     <div id="errorZone"></div>
     <script src="index.js"></script>