Skip to content
This repository
Browse code

Fixing toolbar and bringing back feature test page

  • Loading branch information...
commit 7fb73018252d7eca6a680635db5008385402523b 1 parent 949eb8a
Jake Archibald authored
10 www/assets/7/script/Toolbar.js
@@ -3,11 +3,11 @@ spriteCow.Toolbar = (function() {
3 3 var toolbar = this,
4 4 $container = $('' +
5 5 '<div class="toolbar">' +
6   - '<div role="button" class="open-img"><div>Open</div></div>' +
7   - '<div role="button" class="no-label reload-img"><div>Reload current image</div></div>' +
8   - '<div role="button" class="select-sprite active"><div>Select Sprite</div></div>' +
9   - '<div role="button" class="pick-bg"><div>Pick Background</div></div>' +
10   - '<div role="button" class="no-label invert-bg"><div>Toggle Dark Background</div></div>' +
  6 + '<div role="button" class="open-img">Open</div>' +
  7 + '<div role="button" class="no-label reload-img">Reload current image</div>' +
  8 + '<div role="button" class="select-sprite active">Select Sprite</div>' +
  9 + '<div role="button" class="pick-bg">Pick Background</div>' +
  10 + '<div role="button" class="no-label invert-bg">Toggle Dark Background</div>' +
11 11 '<span class="feedback"></span>' +
12 12 '</div>' +
13 13 '').appendTo( $appendToElm ),
65 www/assets/7/style/_components.scss
@@ -164,6 +164,7 @@
164 164 padding: 20px 30px;
165 165 overflow: auto;
166 166 position: relative;
  167 + tab-size: 4;
167 168
168 169 .intro & {
169 170 height: 0;
@@ -182,11 +183,10 @@
182 183 display: inline-block;
183 184
184 185 &::before {
185   - outline: 1px dotted #fff;
  186 + border-bottom: 1px dotted #fff;
186 187 position: absolute;
187   - top: -3px;
188 188 left: 0;
189   - bottom: -4px;
  189 + bottom: -3px;
190 190 right: 0;
191 191 content: "";
192 192 }
@@ -232,12 +232,18 @@
232 232 border: 1px solid #888;
233 233 border-radius: 4px;
234 234 cursor: pointer;
  235 + padding: 4px 10px 4px 26px;
  236 + position: relative;
235 237
236 238 @include linear-gradient((top, #fefefe, #b8b8b8));
237 239
238 240 &::before {
239 241 content: '';
240   - padding: 4px 10px 4px 26px;
  242 + width: 16px;
  243 + height: 17px;
  244 + position: absolute;
  245 + top: 4px;
  246 + left: 5px;
241 247 background: url('imgs/sprites1.png') no-repeat;
242 248 }
243 249 &.active {
@@ -245,7 +251,7 @@
245 251 box-shadow: inset 0 3px 7px rgba(0,0,0,0.6);
246 252 color: #fff;
247 253 }
248   - &.no-label::before {
  254 + &.no-label {
249 255 width: 26px;
250 256 padding: 4px 0;
251 257 text-indent: -5000px;
@@ -256,7 +262,7 @@
256 262 margin-right: 0;
257 263 }
258 264 &.select-sprite::before {
259   - background-position: -863px 3px;
  265 + background-position: -4px -2px;
260 266 }
261 267 &.pick-bg {
262 268 border-radius: 0 4px 4px 0;
@@ -264,16 +270,16 @@
264 270 border-left-width: 0;
265 271 }
266 272 &.pick-bg::before {
267   - background-position: -864px -79px;
  273 + background-position: -50px -3px;
268 274 }
269 275 &.open-img::before {
270   - background-position: -864px -37px;
  276 + background-position: -26px -2px;
271 277 }
272 278 &.invert-bg::before {
273   - background-position: -867px -121px;
  279 + background-position: -99px -2px;
274 280 }
275 281 &.reload-img::before {
276   - background-position: -867px -164px;
  282 + background-position: -75px -2px;
277 283 }
278 284 }
279 285 & .feedback {
@@ -338,6 +344,45 @@
338 344 // Feature tests
339 345 .feature-test {
340 346 display: none;
  347 + width: 800px;
  348 + margin: 0 auto;
  349 + text-align: center;
  350 +
  351 + .not-supported & {
  352 + display: block;
  353 + }
  354 + & h1 {
  355 + font: normal 2.5em sans-serif;
  356 + margin: 0;
  357 + padding: 40px 0;
  358 + }
  359 + & ul {
  360 + display: inline-block;
  361 + *display: inline;
  362 + zoom: 1;
  363 + }
  364 + & li {
  365 + margin: 10px auto;
  366 + font-size: 1.1em;
  367 + overflow: hidden;
  368 + text-align: left;
  369 + }
  370 + & p {
  371 + width: 600px;
  372 + margin: 0 auto 20px;
  373 + font-size: 1.1em;
  374 + text-align: left;
  375 + }
  376 + & .pass,
  377 + & .fail {
  378 + float: left;
  379 + width: 50px;
  380 + font-weight: bold;
  381 + color: #5f5;
  382 + }
  383 + & .fail {
  384 + color: #f55;
  385 + }
341 386 }
342 387 // Intro copy
343 388 .intro-copy {
3  www/assets/7/style/_structure.scss
@@ -34,6 +34,9 @@
34 34 & > * {
35 35 display: table-row;
36 36 }
  37 + .not-supported & {
  38 + display: none;
  39 + }
37 40 }
38 41 // Main header
39 42 .main-header {
132 www/assets/7/style/all.css
@@ -161,21 +161,24 @@ body {
161 161 /* line 34, _structure.scss */
162 162 .container > * {
163 163 display: table-row; }
  164 + /* line 37, _structure.scss */
  165 + .not-supported .container {
  166 + display: none; }
164 167
165   -/* line 39, _structure.scss */
  168 +/* line 42, _structure.scss */
166 169 .main-header {
167 170 display: table-cell;
168 171 text-align: center;
169 172 height: 0; }
170   - /* line 44, _structure.scss */
  173 + /* line 47, _structure.scss */
171 174 .main-header .h-main {
172 175 display: none; }
173 176
174   -/* line 51, _structure.scss */
  177 +/* line 54, _structure.scss */
175 178 .intro .further-detail {
176 179 height: 0; }
177 180
178   -/* line 56, _structure.scss */
  181 +/* line 59, _structure.scss */
179 182 .toolbar-container {
180 183 display: table-row;
181 184 position: relative;
@@ -372,28 +375,28 @@ body {
372 375 background: rgba(0, 0, 0, 0.1);
373 376 padding: 20px 30px;
374 377 overflow: auto;
375   - position: relative; }
376   - /* line 168, _components.scss */
  378 + position: relative;
  379 + tab-size: 4; }
  380 + /* line 169, _components.scss */
377 381 .intro .css-output {
378 382 height: 0;
379 383 padding-top: 0;
380 384 padding-bottom: 0;
381 385 overflow: hidden; }
382   - /* line 175, _components.scss */
  386 + /* line 176, _components.scss */
383 387 .css-output code {
384 388 font-size: 1.2em;
385 389 line-height: 1; }
386   - /* line 180, _components.scss */
  390 + /* line 181, _components.scss */
387 391 .css-output .file-path {
388 392 position: relative;
389 393 display: inline-block; }
390   - /* line 184, _components.scss */
  394 + /* line 185, _components.scss */
391 395 .css-output .file-path::before {
392   - outline: 1px dotted #fff;
  396 + border-bottom: 1px dotted #fff;
393 397 position: absolute;
394   - top: -3px;
395 398 left: 0;
396   - bottom: -4px;
  399 + bottom: -3px;
397 400 right: 0;
398 401 content: ""; }
399 402 /* line 194, _components.scss */
@@ -439,72 +442,78 @@ body {
439 442 border: 1px solid #888;
440 443 border-radius: 4px;
441 444 cursor: pointer;
  445 + padding: 4px 10px 4px 26px;
  446 + position: relative;
442 447 background: -webkit-linear-gradient(top, #fefefe, #b8b8b8);
443 448 background: -moz-linear-gradient(top, #fefefe, #b8b8b8);
444 449 background: -ms-linear-gradient(top, #fefefe, #b8b8b8);
445 450 background: -o-linear-gradient(top, #fefefe, #b8b8b8);
446 451 background: linear-gradient(top, #fefefe, #b8b8b8); }
447   - /* line 238, _components.scss */
  452 + /* line 240, _components.scss */
448 453 .toolbar [role=button]::before {
449 454 content: '';
450   - padding: 4px 10px 4px 26px;
  455 + width: 16px;
  456 + height: 17px;
  457 + position: absolute;
  458 + top: 4px;
  459 + left: 5px;
451 460 background: url("imgs/sprites1.png") no-repeat; }
452   - /* line 243, _components.scss */
  461 + /* line 249, _components.scss */
453 462 .toolbar [role=button].active {
454 463 background: #707070;
455 464 box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.6);
456 465 color: #fff; }
457   - /* line 248, _components.scss */
458   - .toolbar [role=button].no-label::before {
  466 + /* line 254, _components.scss */
  467 + .toolbar [role=button].no-label {
459 468 width: 26px;
460 469 padding: 4px 0;
461 470 text-indent: -5000px; }
462   - /* line 253, _components.scss */
  471 + /* line 259, _components.scss */
463 472 .toolbar [role=button].select-sprite {
464 473 border-width: 1px;
465 474 border-radius: 4px 0 0 4px;
466 475 margin-right: 0; }
467   - /* line 258, _components.scss */
  476 + /* line 264, _components.scss */
468 477 .toolbar [role=button].select-sprite::before {
469   - background-position: -863px 3px; }
470   - /* line 261, _components.scss */
  478 + background-position: -4px -2px; }
  479 + /* line 267, _components.scss */
471 480 .toolbar [role=button].pick-bg {
472 481 border-radius: 0 4px 4px 0;
473 482 margin-right: 5px;
474 483 border-left-width: 0; }
475   - /* line 266, _components.scss */
  484 + /* line 272, _components.scss */
476 485 .toolbar [role=button].pick-bg::before {
477   - background-position: -864px -79px; }
478   - /* line 269, _components.scss */
  486 + background-position: -50px -3px; }
  487 + /* line 275, _components.scss */
479 488 .toolbar [role=button].open-img::before {
480   - background-position: -864px -37px; }
481   - /* line 272, _components.scss */
  489 + background-position: -26px -2px; }
  490 + /* line 278, _components.scss */
482 491 .toolbar [role=button].invert-bg::before {
483   - background-position: -867px -121px; }
484   - /* line 275, _components.scss */
  492 + background-position: -99px -2px; }
  493 + /* line 281, _components.scss */
485 494 .toolbar [role=button].reload-img::before {
486   - background-position: -867px -164px; }
487   - /* line 279, _components.scss */
  495 + background-position: -75px -2px; }
  496 + /* line 285, _components.scss */
488 497 .toolbar .feedback {
489 498 float: left;
490 499 padding: 5px;
491 500 color: #555;
492 501 opacity: 0; }
493 502
494   -/* line 287, _components.scss */
  503 +/* line 293, _components.scss */
495 504 .main-footer {
496 505 overflow: hidden;
497 506 background: rgba(0, 0, 0, 0.23); }
498   - /* line 291, _components.scss */
  507 + /* line 297, _components.scss */
499 508 .main-footer p {
500 509 float: right;
501 510 padding: 15px 29px 0;
502 511 margin: 0;
503 512 white-space: nowrap; }
504   - /* line 297, _components.scss */
  513 + /* line 303, _components.scss */
505 514 .intro .main-footer p {
506 515 padding: 12px 16px 0; }
507   - /* line 301, _components.scss */
  516 + /* line 307, _components.scss */
508 517 .main-footer .the-team-logo {
509 518 background: url("imgs/sprites1.png") no-repeat -4px -29px;
510 519 width: 88px;
@@ -513,17 +522,17 @@ body {
513 522 text-indent: -5000px;
514 523 vertical-align: top;
515 524 margin: -1px 0 0 4px; }
516   - /* line 310, _components.scss */
  525 + /* line 316, _components.scss */
517 526 .main-footer ul {
518 527 float: left;
519 528 padding: 16px 30px; }
520   - /* line 314, _components.scss */
  529 + /* line 320, _components.scss */
521 530 .intro .main-footer ul {
522 531 padding: 13px 16px; }
523   - /* line 318, _components.scss */
  532 + /* line 324, _components.scss */
524 533 .main-footer li {
525 534 display: inline; }
526   - /* line 322, _components.scss */
  535 + /* line 328, _components.scss */
527 536 .main-footer li a:link, .main-footer li a:visited {
528 537 font-weight: normal;
529 538 color: #fff;
@@ -531,16 +540,53 @@ body {
531 540 padding: 0 10px 0 0;
532 541 margin: 0 10px 0 0;
533 542 border-right: 1px solid #fff; }
534   - /* line 331, _components.scss */
  543 + /* line 337, _components.scss */
535 544 .main-footer li:last-child a:link, .main-footer li:last-child a:visited {
536 545 padding: 0;
537 546 margin: 0;
538 547 border: none; }
539 548
540   -/* line 339, _components.scss */
  549 +/* line 345, _components.scss */
541 550 .feature-test {
542   - display: none; }
543   -
544   -/* line 343, _components.scss */
  551 + display: none;
  552 + width: 800px;
  553 + margin: 0 auto;
  554 + text-align: center; }
  555 + /* line 351, _components.scss */
  556 + .not-supported .feature-test {
  557 + display: block; }
  558 + /* line 354, _components.scss */
  559 + .feature-test h1 {
  560 + font: normal 2.5em sans-serif;
  561 + margin: 0;
  562 + padding: 40px 0; }
  563 + /* line 359, _components.scss */
  564 + .feature-test ul {
  565 + display: inline-block;
  566 + *display: inline;
  567 + zoom: 1; }
  568 + /* line 364, _components.scss */
  569 + .feature-test li {
  570 + margin: 10px auto;
  571 + font-size: 1.1em;
  572 + overflow: hidden;
  573 + text-align: left; }
  574 + /* line 370, _components.scss */
  575 + .feature-test p {
  576 + width: 600px;
  577 + margin: 0 auto 20px;
  578 + font-size: 1.1em;
  579 + text-align: left; }
  580 + /* line 377, _components.scss */
  581 + .feature-test .pass, .feature-test .fail {
  582 + float: left;
  583 + width: 50px;
  584 + font-weight: bold;
  585 + color: #5f5; }
  586 + /* line 383, _components.scss */
  587 + .feature-test .fail {
  588 + color: #f55; }
  589 +
  590 +/* line 388, _components.scss */
545 591 .intro-copy {
546 592 display: none; }
4 www/unmin.html
@@ -62,8 +62,8 @@ <h1 class="cow-logo">Sprite Cow</h1>
62 62 <h1>Sorry, it isn't working out between us</h1>
63 63 <p>
64 64 It's not you, I just can't get along with your browser.
65   - Maybe if things change in the future... maybe if you bring a newish
66   - version of <a href="http://www.google.com/chrome/">Chrome</a>,
  65 + Maybe if things change in the future... maybe if you bring
  66 + <a href="http://www.google.com/chrome/">Chrome</a>,
67 67 <a href="http://www.mozilla.com/en-US/firefox/new/">Firefox</a>,
68 68 <a href="http://www.opera.com/">Opera</a> or even
69 69 <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">IE10</a>

0 comments on commit 7fb7301

Please sign in to comment.
Something went wrong with that request. Please try again.