Skip to content

Commit 061c274

Browse files
mrdoobmrdoob
authored
Design: Improved mobile support (#65)
* Design: Improved mobile support * Removed unneeded <div> * Clean up.
1 parent bd04f86 commit 061c274

File tree

2 files changed

+80
-58
lines changed

2 files changed

+80
-58
lines changed

‎server/assets/gallery.html

Lines changed: 59 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,63 +4,86 @@
44
<head>
55
<title>GLSL Sandbox Gallery</title>
66
<meta charset="utf-8">
7-
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<style>
99
body {
1010
background-color: #000000;
11-
font: 13px Tahoma, Arial, Helvetica, sans-serif;
12-
margin: 3em 4em;
1311
color: #888;
12+
font: 13px Arial, Helvetica, sans-serif;
13+
line-height: 1.6;
14+
padding: 40px;
1415
}
15-
a{
16-
color: #aaa;
16+
a {
17+
color: #009DE9;
1718
text-decoration: none;
1819
}
19-
a:hover{
20-
color: #009DE9;
20+
a:hover {
21+
color: #FFF;
22+
}
23+
h1 {
24+
color: #FFF;
25+
margin-top: 0px;
26+
margin-bottom: 20px;
27+
}
28+
h1, h1 a {
29+
color: #FFF;
30+
font: 28px Arial, Helvetica, sans-serif;
2131
}
22-
23-
h1, h1 a, h2{
32+
button {
33+
background-color: transparent;
34+
border: none;
2435
color: #009DE9;
25-
font: 28px Tahoma, Arial, Helvetica, sans-serif;
26-
font-weight: normal;
27-
margin-bottom: 7px;
36+
cursor: pointer;
37+
padding: 4px 8px;
38+
border: 1px solid #009DE9;
39+
border-radius: 4px;
40+
text-transform: uppercase;
2841
}
29-
h2{
30-
font-size: 22px;
31-
margin-top: 2em;
42+
button:hover {
43+
color: #FFF;
44+
border-color: #FFF;
3245
}
33-
#gallery{
46+
#github {
47+
fill: #009DE9;
48+
margin-left: 8px;
49+
margin-bottom: -2px;
50+
}
51+
#github:hover {
52+
fill: #FFF
53+
}
54+
#gallery {
3455
width: 100%;
35-
margin-top: 4em;
56+
margin-top: 2em;
57+
margin-bottom: 2em;
3658
}
37-
#gallery>a{
59+
#gallery>a {
3860
border: none;
3961
}
40-
#gallery img{
41-
margin-right: 2em;
62+
#gallery img {
4263
width: 200px;
4364
height: 100px;
44-
border: 1px solid #212121;
65+
background-color: #222;
66+
border: 1px solid #222;
67+
border-radius: 4px;
4568
}
46-
#gallery img:hover{
47-
box-shadow: 0px 0px 24px 10px #263D65;
48-
border: 1px solid #316FAE;
69+
#gallery img:hover {
70+
border: 1px solid #FFF;
4971
}
5072
.effect {
5173
display: inline-block;
52-
margin-bottom: 2em;
74+
margin-right: 4px;
75+
margin-bottom: 4px;
5376
}
5477
form {
5578
margin-bottom: 2em;
5679
}
57-
label{
80+
label {
5881
margin-top: 1.4em;
5982
margin-bottom: 0.6em;
6083
font-size: 14px;
6184
color: #009DE9;
6285
}
63-
input, textarea{
86+
input, textarea {
6487
background: #222;
6588
font-size: 14px;
6689
color: #ccc;
@@ -69,21 +92,20 @@
6992
outline: none;
7093
cursor: pointer;
7194
}
72-
input[type=submit]:hover{
95+
input[type=submit]:hover {
7396
color: #009DE9;
7497
}
7598
</style>
7699
<script>function $(id,m){document.getElementById(id).style.display= m?'block':'none';}</script>
77100
</head>
78101
<body>
79102

80-
<div id="header">
81-
<h1><a href="/">GLSL Sandbox</a></h1>
82-
<a href="/e">Create new effect!</a> &nbsp;&nbsp;/&nbsp;
83-
<a href="https://github.com/mrdoob/glsl-sandbox">github</a> &nbsp;&nbsp;/&nbsp;
84-
gallery by <a href="http://twitter.com/thevaw">@thevaw</a> and <a href="http://twitter.com/feiss">@feiss</a> &nbsp;/&nbsp; editor by <a href="http://twitter.com/mrdoob">@mrdoob</a>, <a href="http://twitter.com/mrkishi">@mrkishi</a>, <a href="http://twitter.com/p01">@p01</a>, <a href="http://twitter.com/alteredq">@alteredq</a>, <a href="http://twitter.com/kusmabite">@kusmabite</a> and <a href="http://twitter.com/emackey">@emackey</a>
85-
</div>
86-
103+
<h1><a href="/" style="text-transform:uppercase">GLSL Sandbox</a> <a href="https://github.com/mrdoob/glsl-sandbox"><svg id="github" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-4.466 19.59c-.405.078-.534-.171-.534-.384v-2.195c0-.747-.262-1.233-.55-1.481 1.782-.198 3.654-.875 3.654-3.947 0-.874-.312-1.588-.823-2.147.082-.202.356-1.016-.079-2.117 0 0-.671-.215-2.198.82-.64-.18-1.324-.267-2.004-.271-.68.003-1.364.091-2.003.269-1.528-1.035-2.2-.82-2.2-.82-.434 1.102-.16 1.915-.077 2.118-.512.56-.824 1.273-.824 2.147 0 3.064 1.867 3.751 3.645 3.954-.229.2-.436.552-.508 1.07-.457.204-1.614.557-2.328-.666 0 0-.423-.768-1.227-.825 0 0-.78-.01-.055.487 0 0 .525.246.889 1.17 0 0 .463 1.428 2.688.944v1.489c0 .211-.129.459-.528.385-3.18-1.057-5.472-4.056-5.472-7.59 0-4.419 3.582-8 8-8s8 3.581 8 8c0 3.533-2.289 6.531-5.466 7.59z"/></svg></a></h1>
104+
gallery by <a href="https://twitter.com/thevaw">@thevaw</a>, <a href="https://twitter.com/feiss">@feiss</a> and
105+
<a href="https://twitter.com/mrdoob">@mrdoob</a><br/>
106+
editor by <a href="https://twitter.com/mrdoob">@mrdoob</a>, <a href="https://twitter.com/mrkishi">@mrkishi</a>, <a href="https://twitter.com/p01">@p01</a>, <a href="https://twitter.com/alteredq">@alteredq</a>, <a href="https://twitter.com/kusmabite">@kusmabite</a> and <a href="https://twitter.com/emackey">@emackey</a>
107+
<br/><br/>
108+
<a href="/e"><button>new shader</button></a>
87109
<div id="gallery">
88110

89111
{{ if .Admin }}
@@ -122,7 +144,7 @@ <h1><a href="/">GLSL Sandbox</a></h1>
122144

123145
<div id="paginate">
124146
{{ if .IsPrevious }}
125-
<a href='{{ .PreviousPage }}'>Previous page</a>
147+
<a href='{{ .PreviousPage }}'><button>Previous page</button></a>
126148

127149
{{ if .IsNext }}
128150
&nbsp;&nbsp;
@@ -131,7 +153,7 @@ <h1><a href="/">GLSL Sandbox</a></h1>
131153
{{ end }}
132154

133155
{{ if .IsNext }}
134-
<a href='{{ .NextPage }}'>Next page</a>
156+
<a href='{{ .NextPage }}'><button>Next page</button></a>
135157
{{ end }}
136158
</div>
137159

‎static/index.html

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<title>GLSL Sandbox</title>
55
<meta charset="utf-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<style>
88

99
body {
@@ -307,7 +307,7 @@
307307
alert("WebGL not supported, but code will be shown.");
308308

309309
} else {
310-
310+
311311
// enable dFdx, dFdy, fwidth
312312
gl.getExtension('OES_standard_derivatives');
313313

@@ -360,7 +360,7 @@
360360
event.preventDefault();
361361
}
362362
}, false );
363-
363+
364364
if (gl) {
365365

366366
var surfaceMouseDown = function ( event ) {
@@ -396,7 +396,7 @@
396396
canvas.addEventListener( 'contextmenu', noContextMenu, false);
397397
panButton.addEventListener( 'contextmenu', noContextMenu, false);
398398
}
399-
399+
400400
var clientXLast, clientYLast;
401401

402402
document.addEventListener( 'mousemove', function ( event ) {
@@ -413,10 +413,10 @@
413413
stopHideUI();
414414

415415
var codeElement, dx, dy;
416-
416+
417417
parameters.mouseX = clientX / window.innerWidth;
418418
parameters.mouseY = 1 - clientY / window.innerHeight;
419-
419+
420420
if (resizer.isResizing) {
421421

422422
resizer.currentWidth = Math.max(Math.min(clientX - resizer.offsetMouseX, resizer.maxWidth), resizer.minWidth);
@@ -526,9 +526,9 @@
526526
if (gl) {
527527

528528
surface.width = surface.height * parameters.screenWidth / parameters.screenHeight;
529-
529+
530530
var halfWidth = surface.width * 0.5, halfHeight = surface.height * 0.5;
531-
531+
532532
gl.bindBuffer( gl.ARRAY_BUFFER, surface.buffer );
533533
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( [
534534
surface.centerX - halfWidth, surface.centerY - halfHeight,
@@ -551,11 +551,11 @@
551551
}
552552

553553
function compile() {
554-
554+
555555
if (!gl) {
556-
556+
557557
if (!getWebGL) {
558-
558+
559559
getWebGL = true;
560560
compileButton.addEventListener( 'click', function ( event ) {
561561

@@ -566,10 +566,10 @@
566566
compileButton.style.color = '#ff0000';
567567
compileButton.textContent = 'WebGL not supported!';
568568
set_save_button('hidden');
569-
569+
570570
}
571571
return;
572-
572+
573573
}
574574

575575
var program = gl.createProgram();
@@ -645,7 +645,7 @@
645645
}
646646

647647
function compileScreenProgram() {
648-
648+
649649
if (!gl) { return; }
650650

651651
var program = gl.createProgram();
@@ -749,7 +749,7 @@
749749

750750

751751
//
752-
752+
753753
function htmlEncode(str){
754754

755755
return String(str)
@@ -764,7 +764,7 @@
764764
//
765765

766766
function createShader( src, type ) {
767-
767+
768768
var shader = gl.createShader( type );
769769
var line, lineNum, lineError, index = 0, indexEnd;
770770

@@ -782,7 +782,7 @@
782782
if ( !gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) {
783783

784784
var error = gl.getShaderInfoLog( shader );
785-
785+
786786
// Remove trailing linefeed, for FireFox's benefit.
787787
while ((error.length > 1) && (error.charCodeAt(error.length - 1) < 32)) {
788788
error = error.substring(0, error.length - 1);
@@ -860,11 +860,11 @@
860860
computeSurfaceCorners();
861861

862862
if (gl) {
863-
863+
864864
gl.viewport( 0, 0, canvas.width, canvas.height );
865865

866866
createRenderTargets();
867-
867+
868868
}
869869
}
870870

@@ -895,7 +895,7 @@
895895

896896
gl.bindBuffer( gl.ARRAY_BUFFER, surface.buffer );
897897
gl.vertexAttribPointer( surface.positionAttribute, 2, gl.FLOAT, false, 0, 0 );
898-
898+
899899
gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
900900
gl.vertexAttribPointer( vertexPosition, 2, gl.FLOAT, false, 0, 0 );
901901

@@ -918,7 +918,7 @@
918918

919919
gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
920920
gl.vertexAttribPointer( screenVertexPosition, 2, gl.FLOAT, false, 0, 0 );
921-
921+
922922
gl.activeTexture( gl.TEXTURE1 );
923923
gl.bindTexture( gl.TEXTURE_2D, frontTarget.texture );
924924

0 commit comments

Comments
 (0)