Home Explore Help
Sign In
archive
/
spine-runtimes
mirror of https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

[ts] Demo CSS upgrade.

NathanSweet 9 years ago
parent
603d48aaa3
commit
b1d92aecf8
11 changed files with 78 additions and 61 deletions
Unified View Show Diff Stats
  1. 29 4
      spine-ts/webgl/demos/demos.css
  2. 4 5
      spine-ts/webgl/demos/framebyframe.html
  3. 3 2
      spine-ts/webgl/demos/ikconstraint.html
  4. 7 8
      spine-ts/webgl/demos/meshes.html
  5. 5 6
      spine-ts/webgl/demos/pathconstraint.html
  6. 6 7
      spine-ts/webgl/demos/skins.html
  7. 6 7
      spine-ts/webgl/demos/spritesheet.html
  8. 3 4
      spine-ts/webgl/demos/stretchy.html
  9. 5 6
      spine-ts/webgl/demos/tank.html
  10. 6 7
      spine-ts/webgl/demos/transformconstraint.html
  11. 4 5
      spine-ts/webgl/demos/transitions.html

+ 29 - 4
spine-ts/webgl/demos/demos.css
View File 

@@ -1,18 +1,43 @@
 
 body, html {
 
 body, html {
 
 	margin: 0;
 
 	margin: 0;
 
-	padding: 0;
 
 	height: 100%;
 
 	height: 100%;
 
 	font-family: Tahoma;
 
 	font-family: Tahoma;
 
 	font-size: 11pt;
 
 	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 {
 
 .slider {
 
-	width: 50%;
 
+	width: 100%;
 
+	max-width: 800px;
 
 	border-radius: 3px;
 
 	border-radius: 3px;
 
 	text-align: left;
 
 	text-align: left;
 
 	transform: translateZ(0);
 
 	transform: translateZ(0);
 
+	background: #222;
 
 }
 
 }
 
 .slider, .slider.filled span {
 
 .slider, .slider.filled span {
 
 	height: 15px;
 
 	height: 15px;

+ 4 - 5
spine-ts/webgl/demos/framebyframe.html
View File 

@@ -1,4 +1,5 @@
 
 <html>
 
 <html>
 
+<title>Frame-by-frame - Spine Demo</title>
 
 <link rel="stylesheet" href="demos.css">
 
 <link rel="stylesheet" href="demos.css">
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
@@ -6,13 +7,11 @@
 
 <script src="frameByFrame.js"></script>
 
 <script src="frameByFrame.js"></script>
 
 <body>
 
 <body>
 
 
 
-<canvas id="framebyframedemo-canvas"></canvas>
 
 <center>
 
 <center>
 
-<div style="color: #fff; position: fixed; top: 0; width: 100%">
 
-<select id="framebyframedemo-active-skeleton"></select></br>
 
-<input id="framebyframedemo-playbutton" type="button" value="Pause"></input>
 
+<div class="aspect"><div><canvas id="framebyframedemo-canvas"></canvas></div></div>
 
 <div id="framebyframedemo-timeline" class="slider"></div>
 
 <div id="framebyframedemo-timeline" class="slider"></div>
 
-</div>
 
+<input id="framebyframedemo-playbutton" type="button" value="Pause"></input><br>
 
+<select id="framebyframedemo-active-skeleton" size="2"></select>
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>

+ 3 - 2
spine-ts/webgl/demos/ikconstraint.html
View File 

@@ -1,4 +1,5 @@
 
 <html>
 
 <html>
 
+<title>IK Constraints - Spine Demo</title>
 
 <link rel="stylesheet" href="demos.css">
 
 <link rel="stylesheet" href="demos.css">
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
@@ -6,9 +7,9 @@
 
 <script src="ikconstraint.js"></script>
 
 <script src="ikconstraint.js"></script>
 
 <body>
 
 <body>
 
 
 
-<canvas id="ikdemo-canvas"></canvas>
 
 <center>
 
 <center>
 
-<div>Display Bones</div><input id="ikdemo-drawbones" type="checkbox"><input></div>
 
+<div class="aspect"><div><canvas id="ikdemo-canvas"></canvas></div></div>
 
+<input id="ikdemo-drawbones" type="checkbox"></input> Display Bones
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>

+ 7 - 8
spine-ts/webgl/demos/meshes.html
View File 

@@ -1,4 +1,5 @@
 
 <html>
 
 <html>
 
+<title>Meshes - Spine Demo</title>
 
 <link rel="stylesheet" href="demos.css">
 
 <link rel="stylesheet" href="demos.css">
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
@@ -6,15 +7,13 @@
 
 <script src="meshes.js"></script>
 
 <script src="meshes.js"></script>
 
 <body>
 
 <body>
 
 
 
-<canvas id="meshesdemo-canvas"></canvas>
 
 <center>
 
 <center>
 
-<div style="position: fixed; top: 0; width: 100%">
 
-	<select id="meshesdemo-active-skeleton"></select></br>
 
-	<div><input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;"></input> Draw bones</div>
 
-	<div><input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;"></input> Draw triangles</div>
 
-	<input id="meshesdemo-playbutton" type="button" value="Pause"></input>
 
-	<div id="meshesdemo-timeline" class="slider"></input>
 
-</div>
 
+<div class="aspect"><div><canvas id="meshesdemo-canvas"></canvas></div></div>
 
+<div id="meshesdemo-timeline" class="slider"></div>
 
+<input id="meshesdemo-playbutton" type="button" value="Pause"></input><br>
 
+<select id="meshesdemo-active-skeleton" size="3"></select><br>
 
+<input type="checkbox" id="meshesdemo-drawbonescheckbox" style="color: #fff;"></input> Draw bones<br>
 
+<input type="checkbox" id="meshesdemo-drawmeshtrianglescheckbox" style="color: #fff;"></input> Draw triangles<br>
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>

+ 5 - 6
spine-ts/webgl/demos/pathconstraint.html
View File 

@@ -1,4 +1,5 @@
 
 <html>
 
 <html>
 
+<title>Path Constraints - Spine Demo</title>
 
 <link rel="stylesheet" href="demos.css">
 
 <link rel="stylesheet" href="demos.css">
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
@@ -6,13 +7,11 @@
 
 <script src="pathconstraint.js"></script>
 
 <script src="pathconstraint.js"></script>
 
 <body>
 
 <body>
 
 
 
-<canvas id="pathconstraintdemo-canvas"></canvas>
 
 <center>
 
 <center>
 
-<div style="position: fixed; top: 0; width: 100%">	
-	<div><input id="pathconstraintdemo-drawbones" type="checkbox"></input>Display bones &amp; path</div>
 
-	<input id="pathconstraintdemo-playbutton" type="button" value="Pause"></input>	
-	<div id="pathconstraintdemo-timeline" class="slider"></div>
 
-</div>
 
+<div class="aspect"><div><canvas id="pathconstraintdemo-canvas"></canvas></div></div>
 
+<div id="pathconstraintdemo-timeline" class="slider"></div>
 
+<input id="pathconstraintdemo-playbutton" type="button" value="Pause"></input><br>
 
+<input id="pathconstraintdemo-drawbones" type="checkbox"></input> Display bones &amp; path
 
 </center>
 
 </center>
 
 
 
 <script>	
 <script>

+ 6 - 7
spine-ts/webgl/demos/skins.html
View File 

@@ -1,4 +1,5 @@
 
 <html>
 
 <html>
 
+<title>Skins - Spine Demo</title>
 
 <link rel="stylesheet" href="demos.css">
 
 <link rel="stylesheet" href="demos.css">
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
@@ -6,14 +7,12 @@
 
 <script src="skins.js"></script>
 
 <script src="skins.js"></script>
 
 <body>
 
 <body>
 
 
 
-<canvas id="skinsdemo-canvas"></canvas>
 
 <center>
 
 <center>
 
-<div style="position: fixed; top: 0; width: 100%">
 
-	<select id="skinsdemo-active-skin"></select></br>
 
-	<button id="skinsdemo-randomizeattachments">Random Attachments</button>						
-	<button id="skinsdemo-swingsword">Swing Sword</button>						
-	<div><input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input> Randomize skin</div>	
-</div>
 
+<div class="aspect"><div><canvas id="skinsdemo-canvas"></canvas></div></div>
 
+<select id="skinsdemo-active-skin"></select><br>
 
+<button id="skinsdemo-randomizeattachments">Random Attachments</button>
 
+<button id="skinsdemo-swingsword">Swing Sword</button><br>
 
+<input id="skinsdemo-randomizeskins" type="checkbox" checked=true></input> Randomize skin
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>

+ 6 - 7
spine-ts/webgl/demos/spritesheet.html
View File 

@@ -1,4 +1,5 @@
 
 <html>
 
 <html>
 
+<title>Vs Sprite Sheets - Spine Demo</title>
 
 <link rel="stylesheet" href="demos.css">
 
 <link rel="stylesheet" href="demos.css">
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
@@ -6,14 +7,12 @@
 
 <script src="spritesheet.js"></script>
 
 <script src="spritesheet.js"></script>
 
 <body>
 
 <body>
 
 
 
-<canvas id="spritesheetdemo-canvas"></canvas>
 
 <center>
 
 <center>
 
-<div style="position: fixed; top: 0; width: 100%">
 
-	<button id="spritesheetdemo-roar">Roar</button>						
-	<button id="spritesheetdemo-jump">Jump</button>			
-	<br>Time multiplier
 
-	<div id="spritesheetdemo-timeslider" class="slider filled"></div>
 
-</div>
 
+<div class="aspect"><div><canvas id="spritesheetdemo-canvas"></canvas></div></div>
 
+<button id="spritesheetdemo-roar">Roar</button>
 
+<button id="spritesheetdemo-jump">Jump</button><br>
 
+Time multiplier
 
+<div id="spritesheetdemo-timeslider" class="slider filled"></div>
 
 </center>
 
 </center>
 
 
 
 <script>	
 <script>

+ 3 - 4
spine-ts/webgl/demos/stretchy.html
View File 

@@ -1,4 +1,5 @@
 
 <html>
 
 <html>
 
+<title>Strechyman - Spine Demo</title>
 
 <link rel="stylesheet" href="demos.css">
 
 <link rel="stylesheet" href="demos.css">
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
@@ -6,11 +7,9 @@
 
 <script src="stretchy.js"></script>
 
 <script src="stretchy.js"></script>
 
 <body>
 
 <body>
 
 
 
-<canvas id="stretchydemo-canvas"></canvas>
 
 <center>
 
 <center>
 
-<div style="position: fixed; top: 0; width: 100%">
 
-	<div><input id="stretchydemo-drawbones" type="checkbox"></input> Display bones</div>
 
-</div>
 
+<div class="aspect"><div><canvas id="stretchydemo-canvas"></canvas></div></div>
 
+<input id="stretchydemo-drawbones" type="checkbox"></input> Display bones
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>

+ 5 - 6
spine-ts/webgl/demos/tank.html
View File 

@@ -1,4 +1,5 @@
 
 <html>
 
 <html>
 
+<title>Tank - Spine Demo</title>
 
 <link rel="stylesheet" href="demos.css">
 
 <link rel="stylesheet" href="demos.css">
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
@@ -6,13 +7,11 @@
 
 <script src="tank.js"></script>
 
 <script src="tank.js"></script>
 
 <body>
 
 <body>
 
 
 
-<canvas id="tankdemo-canvas"></canvas>
 
 <center>
 
 <center>
 
-<div style="position: fixed; top: 0; width: 100%">	
-	<div><input id="tankdemo-drawbones" type="checkbox"></input> Display bones</div>
 
-	<input id="tankdemo-playbutton" type="button" value="Pause"></input>
 
-	<div id="tankdemo-timeline" class="slider"></input>
 
-</div>
 
+<div class="aspect"><div><canvas id="tankdemo-canvas"></canvas></div></div>
 
+<div id="tankdemo-timeline" class="slider"></div>
 
+<input id="tankdemo-playbutton" type="button" value="Pause"></input><br>
 
+<input id="tankdemo-drawbones" type="checkbox"></input> Display bones
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>

+ 6 - 7
spine-ts/webgl/demos/transformconstraint.html
View File 

@@ -1,4 +1,5 @@
 
 <html>
 
 <html>
 
+<title>Transform Constraints - Spine Demo</title>
 
 <link rel="stylesheet" href="demos.css">
 
 <link rel="stylesheet" href="demos.css">
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
@@ -6,14 +7,12 @@
 
 <script src="transformconstraint.js"></script>
 
 <script src="transformconstraint.js"></script>
 
 <body>
 
 <body>
 
 
 
-<canvas id="transformdemo-canvas"></canvas>
 
 <center>
 
 <center>
 
-<div style="position: fixed; top: 0; width: 100%">
 
-	Rotation offset
 
-	<div id="transformdemo-rotationoffset" class="slider filled"></div>
 
-	Translation mix
 
-	<div id="transformdemo-translationmix" class="slider filled"></div>		
-</div>
 
+<div class="aspect"><div><canvas id="transformdemo-canvas"></canvas></div></div>
 
+Rotation offset
 
+<div id="transformdemo-rotationoffset" class="slider filled"></div><br>
 
+Translation mix
 
+<div id="transformdemo-translationmix" class="slider filled"></div>		
 </center>
 
 </center>
 
 
 
 <script>	
 <script>

+ 4 - 5
spine-ts/webgl/demos/transitions.html
View File 

@@ -1,4 +1,5 @@
 
 <html>
 
 <html>
 
+<title>Transitions - Spine Demo</title>
 
 <link rel="stylesheet" href="demos.css">
 
 <link rel="stylesheet" href="demos.css">
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="../../build/spine-webgl.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 
@@ -6,12 +7,10 @@
 
 <script src="transitions.js"></script>
 
 <script src="transitions.js"></script>
 
 <body>
 
 <body>
 
 
 
-<canvas id="transitionsdemo-canvas"></canvas>
 
 <center>
 
 <center>
 
-<div style="position: fixed; top: 0; width: 100%">
 
-	Time multiplier
 
-	<div id="transitionsdemo-timeslider" class="slider"></div></br>
 
-</div>
 
+<div class="aspect"><div><canvas id="transitionsdemo-canvas"></canvas></div></div>
 
+Time multiplier
 
+<div id="transitionsdemo-timeslider" class="slider filled"></div>
 
 </center>
 
 </center>
 
 
 
 <script>
 
 <script>