Skip to content

Commit 95ead80

Browse files
ShMcKShMcK
committed
hover png -> gif in docs
1 parent 61b6146 commit 95ead80

12 files changed

+36
-16
lines changed

‎_includes/docs/js.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,3 +82,22 @@
8282
}(jQuery);
8383
});
8484
</script>
85+
86+
<script>
87+
$(function(){
88+
$('.gif').hover(function(){
89+
// on mouse enter
90+
console.log($(this));
91+
var path = $(this).attr('src');
92+
console.log('path', path);
93+
var gif = path.substring(0, path.lastIndexOf('.')) + '.gif';
94+
console.log('gif', gif);
95+
$(this).attr('src', gif);
96+
}, function(){
97+
// on mouse leave
98+
var path = $(this).attr('src');
99+
var png = path.substring(0, path.lastIndexOf('.')) + '.png';
100+
$(this).attr('src', png);
101+
});
102+
});
103+
</script>

‎_includes/docs/nav.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<link rel="stylesheet" type="text/css" href="/css/docs.min.css"/>
1+
<link rel="stylesheet" type="text/css" href="/css/docs.css"/>
22
<link rel="stylesheet" type="text/css" href="/css/dark-syntax.css"/>
33

44
<!-- Navigation -->

‎_posts/2016-01-01-installation.md

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,28 @@ But to build a tutorial, you'll also need the **CodeRoad-CLI**.
1111

1212
### Atom CodeRoad
1313

14-
Use [Atom CodeRoad](https://github.com/coderoad/atom-coderoad) to view and play your tutorial
14+
Use [Atom CodeRoad](https://github.com/coderoad/atom-coderoad) to view and play your tutorial.
1515

16-
* Download the [Atom](https://atom.io/) editor
16+
You'll need to download the [Atom](https://atom.io/) editor and install *Atom Shell Commands*.
1717

18-
* Install the *Atom-CodeRoad* package, or use the [apm](https://github.com/atom/apm) command-line tool
18+
Install the *Atom-CodeRoad* package: `> apm install atom-coderoad`
1919

20-
`> apm install atom-coderoad`
20+
For an example of how to do this, *hover* over the image below:
2121

22-
You may also want to install [terminal-plus](https://atom.io/packages/terminal-plus).
22+
![Install atom-coderoad](/img/gif/install-atom-coderoad.png){: .gif}
2323

24-
* Toggle open *Atom-CodeRoad* in *Atom* using the "packages" menu or press *ctrl-alt-0*.
24+
You may also want to install [terminal-plus](https://atom.io/packages/terminal-plus) used in the example above.
25+
26+
Toggle open *Atom-CodeRoad* using the *Packages* menu or press *ctrl-alt-0*.
2527

2628

2729

2830
### Tutorial
2931

3032
To install a tutorial, setup a *package.json* file and save the tutorial as a dependency. Make sure [NodeJS](nodejs.org) is already installed.
3133

34+
![Install a Tutorial](/img/gif/install-tutorial.png){: .gif}
35+
3236
You can setup a project quickly by typing `npm init --y` into the command line in your project's folder. This agrees to all of the defaults for your newly created *package.json* file.
3337

3438
Now you can install a tutorial. Run `npm install --save-dev $THE-PACKAGE-NAME$` to save the tutorial as a package development dependency. If you run *Atom-CodeRoad* you should see the tutorial appear on the first screen.
@@ -47,6 +51,6 @@ Install *CodeRoad-CLI*. Make sure [NodeJS](nodejs.org) is already installed
4751

4852
It's recommended you also enable *autosave* in Atom.
4953

50-
![Enable autosave in Atom](/img/gif/autosave.gif)
54+
![Enable autosave in Atom](/img/gif/autosave.png){: .gif}
5155

5256
Tutorials run unit tests on save, *autosave* can speed up the process.

‎_posts/2016-01-02-development.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,6 @@ Inside of your demo root directory, connect the link.
8080

8181
Open *Atom-Coderoad* to view your tutorial. Your package should appear as a loaded package. Click on it.
8282

83-
![CodeRoad Loaded Packages](/img/docs/loaded-packages.png)
84-
8583
Reload *Atom* to view changes. You can use the Atom [command-palette](https://atom.io/docs/latest/getting-started-atom-basics#command-palette) to find "reload" or simply use the reload hot-key.
8684

8785
* Windows & Linux: alt-ctrl-r

‎_posts/2016-01-07-test-snippets.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@ Test Runners may have pre-made [Atom snippets](https://atom.io/docs/latest/using
1212

1313
For example, typing the snippet `mochacr-f` will generate an entire set of tests for a *mocha-coderoad* function. See an example:
1414

15-
![Mocha Coderoad Test Snippets](/img/gif/snippets.gif)
15+
![Mocha Coderoad Test Snippets](/img/gif/snippets.png){: .gif}

‎css/docs.css

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,17 @@
77
@viewport {
88
width: device-width
99
}
10-
1110
body {
1211
width: 100%;
1312
height: 100%;
1413
position: relative;
1514
}
16-
1715
.navbar {
1816
margin-bottom: 0;
1917
}
20-
2118
#content:focus {
2219
outline: 0
2320
}
24-
2521
.bs-docs-sidebar.affix {
2622
position: static
2723
}
@@ -125,7 +121,6 @@ body {
125121
.bs-docs-section:last-child {
126122
margin-bottom: 0
127123
}
128-
129124
#docs code {
130125
padding: 0;
131126
}
@@ -138,3 +133,7 @@ body {
138133
#docs ul li {
139134
list-style-type: circle;
140135
}
136+
.gif {
137+
display: block;
138+
margin: 20px auto;
139+
}

‎img/gif/autosave.png

1.84 MB
Loading

‎img/gif/install-atom-coderoad.gif

-123 KB
Loading

‎img/gif/install-atom-coderoad.png

3.58 MB
Loading

‎img/gif/install-tutorial.gif

-768 KB
Loading

‎img/gif/install-tutorial.png

3.59 MB
Loading

‎img/gif/snippets.png

3.07 MB
Loading

0 commit comments

Comments
 (0)