Skip to content

Commit a0e355d

Browse files
willeastcottwilleastcott
authored
Move example CSS into CSS file (#121)
* Move example CSS into CSS file * Tweaks
1 parent b169322 commit a0e355d

20 files changed

+54
-59
lines changed

‎examples/animation.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,6 @@
5757
</pc-entity>
5858
</pc-scene>
5959
</pc-app>
60-
<script type="module" src="js/example-ui.mjs"></script>
60+
<script type="module" src="js/example.mjs"></script>
6161
</body>
6262
</html>

‎examples/annotations.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,6 @@
115115
</pc-entity>
116116
</pc-scene>
117117
</pc-app>
118-
<script type="module" src="js/example-ui.mjs"></script>
118+
<script type="module" src="js/example.mjs"></script>
119119
</body>
120120
</html>

‎examples/basic-shapes.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,6 @@
8585
</pc-entity>
8686
</pc-scene>
8787
</pc-app>
88-
<script type="module" src="js/example-ui.mjs"></script>
88+
<script type="module" src="js/example.mjs"></script>
8989
</body>
9090
</html>

‎examples/car-configurator.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,6 @@
6666
</pc-entity>
6767
</pc-scene>
6868
</pc-app>
69-
<script type="module" src="js/example-ui.mjs"></script>
69+
<script type="module" src="js/example.mjs"></script>
7070
</body>
7171
</html>

‎examples/css/example.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,34 @@ body {
1414
canvas {
1515
touch-action: none;
1616
}
17+
18+
.example-button-container {
19+
position: absolute;
20+
bottom: max(16px, env(safe-area-inset-bottom));
21+
right: max(16px, env(safe-area-inset-right));
22+
display: flex;
23+
gap: 8px;
24+
}
25+
26+
.example-button {
27+
display: flex;
28+
position: relative;
29+
width: 40px;
30+
height: 40px;
31+
background: rgba(255, 255, 255, 0.9);
32+
border: 1px solid #ddd;
33+
border-radius: 8px;
34+
cursor: pointer;
35+
align-items: center;
36+
justify-content: center;
37+
padding: 0;
38+
margin: 0;
39+
backdrop-filter: blur(8px);
40+
-webkit-backdrop-filter: blur(8px);
41+
transition: background-color 0.2s;
42+
color: #2c3e50;
43+
}
44+
45+
.example-button:hover {
46+
background: rgba(255, 255, 255, 1);
47+
}

‎examples/fps-controller.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,6 @@
4848
</pc-entity>
4949
</pc-scene>
5050
</pc-app>
51-
<script type="module" src="js/example-ui.mjs"></script>
51+
<script type="module" src="js/example.mjs"></script>
5252
</body>
5353
</html>

‎examples/glb.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,6 @@
5757
</pc-entity>
5858
</pc-scene>
5959
</pc-app>
60-
<script type="module" src="js/example-ui.mjs"></script>
60+
<script type="module" src="js/example.mjs"></script>
6161
</body>
6262
</html>

‎examples/js/example-ui.mjs‎ renamed to ‎examples/js/example.mjs‎

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -12,58 +12,22 @@ document.addEventListener('DOMContentLoaded', async () => {
1212

1313
// Create container for buttons
1414
const container = document.createElement('div');
15-
Object.assign(container.style, {
16-
position: 'absolute',
17-
bottom: 'max(16px, env(safe-area-inset-bottom))',
18-
right: 'max(16px, env(safe-area-inset-right))',
19-
display: 'flex',
20-
gap: '8px'
21-
});
15+
container.classList.add('example-button-container');
2216

2317
function createButton({ icon, title, onClick }) {
2418
const button = document.createElement('button');
2519
button.innerHTML = icon;
2620
button.title = title;
21+
button.classList.add('example-button');
2722

28-
Object.assign(button.style, {
29-
display: 'flex',
30-
position: 'relative',
31-
width: '40px',
32-
height: '40px',
33-
background: 'rgba(255, 255, 255, 0.9)',
34-
border: '1px solid #ddd',
35-
borderRadius: '8px',
36-
cursor: 'pointer',
37-
alignItems: 'center',
38-
justifyContent: 'center',
39-
padding: '0',
40-
margin: '0',
41-
backdropFilter: 'blur(8px)',
42-
WebkitBackdropFilter: 'blur(8px)',
43-
transition: 'background-color 0.2s',
44-
color: '#2c3e50'
45-
});
46-
47-
const svg = button.querySelector('svg');
48-
if (svg) {
49-
svg.style.display = 'block';
50-
svg.style.margin = 'auto';
23+
if (onClick) {
24+
button.onclick = onClick;
5125
}
5226

53-
button.onmouseenter = () => {
54-
button.style.background = 'rgba(255, 255, 255, 1)';
55-
};
56-
57-
button.onmouseleave = () => {
58-
button.style.background = 'rgba(255, 255, 255, 0.9)';
59-
};
60-
61-
if (onClick) button.onclick = onClick;
62-
6327
return button;
6428
}
6529

66-
/** @type {import('../../dist/pwc.mjs').CameraComponentElement*/
30+
/** @type {import('../../dist/pwc.mjs').CameraComponentElement} */
6731
const cameraElement = await document.querySelector('pc-camera').ready();
6832
const clearColor = new Color();
6933
let originalSkyType = null;

‎examples/physics.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,6 @@
7070
</pc-entity>
7171
</pc-scene>
7272
</pc-app>
73-
<script type="module" src="js/example-ui.mjs"></script>
73+
<script type="module" src="js/example.mjs"></script>
7474
</body>
7575
</html>

‎examples/positional-sound.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,6 @@
5454
</pc-entity>
5555
</pc-scene>
5656
</pc-app>
57-
<script type="module" src="js/example-ui.mjs"></script>
57+
<script type="module" src="js/example.mjs"></script>
5858
</body>
5959
</html>

0 commit comments

Comments
 (0)