From b1d92aecf8eb4fbec80e8703c21cab1d9bd2600d Mon Sep 17 00:00:00 2001 From: NathanSweet Date: Mon, 5 Sep 2016 19:52:48 +0200 Subject: [PATCH] [ts] Demo CSS upgrade. --- spine-ts/webgl/demos/demos.css | 33 ++++++++++++++++--- spine-ts/webgl/demos/framebyframe.html | 9 +++-- spine-ts/webgl/demos/ikconstraint.html | 5 +-- spine-ts/webgl/demos/meshes.html | 15 ++++----- spine-ts/webgl/demos/pathconstraint.html | 11 +++---- spine-ts/webgl/demos/skins.html | 13 ++++---- spine-ts/webgl/demos/spritesheet.html | 13 ++++---- spine-ts/webgl/demos/stretchy.html | 7 ++-- spine-ts/webgl/demos/tank.html | 11 +++---- spine-ts/webgl/demos/transformconstraint.html | 13 ++++---- spine-ts/webgl/demos/transitions.html | 9 +++-- 11 files changed, 78 insertions(+), 61 deletions(-) diff --git a/spine-ts/webgl/demos/demos.css b/spine-ts/webgl/demos/demos.css index 2701203a1..343868faa 100644 --- a/spine-ts/webgl/demos/demos.css +++ b/spine-ts/webgl/demos/demos.css @@ -1,18 +1,43 @@ body, html { margin: 0; - padding: 0; height: 100%; font-family: Tahoma; font-size: 11pt; } -canvas { - position: absolute; width: 100% ;height: 100%; +body { + padding: 15px; +} +br { + display: block; + content: ""; + margin-top: 15px; +} +.aspect { + margin-bottom: 15px; + max-width: 800px; + text-align: center; +} +.aspect div { + position: relative; + padding-bottom: 70.14%; +} +.aspect canvas { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + border: 1px solid black; } .slider { - width: 50%; + width: 100%; + max-width: 800px; border-radius: 3px; text-align: left; transform: translateZ(0); + background: #222; } .slider, .slider.filled span { height: 15px; diff --git a/spine-ts/webgl/demos/framebyframe.html b/spine-ts/webgl/demos/framebyframe.html index e0c85fe3c..f89b02101 100644 --- a/spine-ts/webgl/demos/framebyframe.html +++ b/spine-ts/webgl/demos/framebyframe.html @@ -1,4 +1,5 @@ +Frame-by-frame - Spine Demo @@ -6,13 +7,11 @@ -
-
-
- +
-
+
+
@@ -6,9 +7,9 @@ -
-
Display Bones
+
+ Display Bones
@@ -6,15 +7,13 @@ -
-
-
-
Draw bones
-
Draw triangles
- -
-
+
+
+
+
+ Draw bones
+ Draw triangles
@@ -6,13 +7,11 @@ -
-
-
Display bones & path
- -
-
+
+
+
+ Display bones & path
@@ -6,14 +7,12 @@ -
-
-
- - -
Randomize skin
-
+
+
+ +
+ Randomize skin
@@ -6,14 +7,12 @@ -
-
- - -
Time multiplier -
-
+
+ +
+Time multiplier +
@@ -6,11 +7,9 @@ -
-
-
Display bones
-
+
+ Display bones
@@ -6,13 +7,11 @@ -
-
-
Display bones
- -
-
+
+
+
+ Display bones
@@ -6,14 +7,12 @@ -
-
- Rotation offset -
- Translation mix -
-
+
+Rotation offset +

+Translation mix +
@@ -6,12 +7,10 @@ -
-
- Time multiplier -

-
+
+Time multiplier +