Skip to content

Commit

Permalink
github octicons for the detail page. fixes biojs#11
Browse files Browse the repository at this point in the history
  • Loading branch information
wilzbach committed Sep 10, 2014
1 parent c602df5 commit eab0042
Show file tree
Hide file tree
Showing 198 changed files with 1,657 additions and 12 deletions.
3 changes: 2 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"moment": "~2.8.1",
"angular-mocks": "~1.2.21",
"angular-route": "~1.2.21",
"marked": "~0.3.2"
"marked": "~0.3.2",
"octicons": "~2.1.2"
}
}
19 changes: 10 additions & 9 deletions client/component-detail/component-detail.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h2 style="margin-top: 0; white-space: nowrap;">{{ c.name }}</h2>

<div class="col-xs-2 valueBtn">
<a href=" {{ c.src }}">
<value-display value="View Code" glyph="search"></value-display>
<value-display value="View Code" octicon="mark-github"></value-display>
</a>
<!--<div class="glyphicon glyphicon-search"></div>-->
<!--<div style="text-align: center;">Code</div>-->
Expand All @@ -34,17 +34,17 @@ <h2 style="margin-top: 0; white-space: nowrap;">{{ c.name }}</h2>
<div class="panel panel-default" style="margin-top: 20px">
<div class="panel-heading"><h3 style="margin: 0">Social</h3></div>
<div class="panel-body row" ng-init="socialValues = [
{ name: 'stars', glyph: 'star' },
{ name: 'downloads', glyph: 'download-alt' },
{ name: 'watchers', glyph: 'eye-open' },
{ name: 'commits', glyph: 'flash' },
{ name: 'forks', glyph: 'random' },
{ name: 'contributors', glyph: 'user' }
{ name: 'stars', octicon: 'star' },
{ name: 'downloads', octicon: 'cloud-download' },
{ name: 'watchers', octicon: 'eye' },
{ name: 'commits', octicon: 'history' },
{ name: 'forks', octicon: 'repo-forked' },
{ name: 'contributors', octicon: 'organization' }
]">
<div class="col-xs-2" ng-repeat="v in socialValues">
<value-display name="{{ v.name }}"
value="{{ c[v.name] }}"
glyph="{{ v.glyph }}"></value-display>
octicon="{{ v.octicon }}"></value-display>
</div>
</div>
</div>
Expand All @@ -56,12 +56,13 @@ <h2 style="margin-top: 0; white-space: nowrap;">{{ c.name }}</h2>
{ name: 'strModified', glyph: 'time', prefix: 'modified ', postfix: ' ' },
{ name: 'strCreated', glyph: 'time', prefix: 'created ', postfix: ' ' },
{ name: 'releases', glyph: 'flag' },
{ name: 'issues', glyph: 'comment', postfix: ' open issues' }
{ name: 'issues', octicon: 'issue-opened', postfix: ' open issues' }
]">
<div class="col-xs-2" ng-repeat="v in timeStatsValues">
<value-display name="{{ v.name }}"
value="{{ c[v.name] }}"
glyph="{{ v.glyph }}"
octicon="{{ v.octicon }}"
prefix="{{ v.prefix }}"
postfix="{{ v.postfix }}"></value-display>
</div>
Expand Down
1 change: 1 addition & 0 deletions client/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="lib/octicons/octicons/octicons.css">

<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<script src="lib/angular/angular.js"></script>
Expand Down
38 changes: 38 additions & 0 deletions client/lib/octicons/.bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"name": "octicons",
"description": "GitHub's icon font",
"license": "SIL OFL 1.1, MIT",
"homepage": "http://octicons.github.com",
"authors": [
"GitHub <[email protected]>"
],
"main": [
"octicons/sprockets-octicons.scss",
"octicons/octicons.eot",
"octicons/octicons.svg",
"octicons/octicons.ttf",
"octicons/octicons.woff"
],
"keywords": [
"GitHub",
"icons",
"font",
"web font",
"icon font"
],
"ignore": [
"**/.*",
"bower_components"
],
"version": "2.1.2",
"_release": "2.1.2",
"_resolution": {
"type": "version",
"tag": "v2.1.2",
"commit": "0af5befb63798321e05901518796288a3932d226"
},
"_source": "git://github.com/github/octicons.git",
"_target": "~2.1.2",
"_originalSource": "octicons",
"_direct": true
}
7 changes: 7 additions & 0 deletions client/lib/octicons/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
## 2.0.1 (June 16, 2014)

- Add mention of github.com/logos to the license

## 2.0.0 (June 16, 2014)

- Hello world
3 changes: 3 additions & 0 deletions client/lib/octicons/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
The contents of */octicons* */svg* are generated by an automated process. Changes to these files may be accepted, but may also be overwritten.

Octicons is GitHub's icon font. At this time, new icons will only add icons when they are needed for GitHub products.
9 changes: 9 additions & 0 deletions client/lib/octicons/LICENSE.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
(c) 2012-2014 GitHub

When using the GitHub logos, be sure to follow the GitHub logo guidelines (https://github.com/logos)

Font License: SIL OFL 1.1 (http://scripts.sil.org/OFL)
Applies to all font files

Code License: MIT (http://choosealicense.com/licenses/mit/)
Applies to all other files
127 changes: 127 additions & 0 deletions client/lib/octicons/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
# Octicons!

This is the [Bower][bower] package for [GitHub Octicons][octicons].

## Add Octicons to your project

1. Create a new file called *bower.json* (if you don't have one already).

2. Add a new line for the Octicon dependency, pointing to the correct repository:

``` json
{
"name": "my_great_project",
"dependencies": {
"octicons": "*"
}
}
```

3. Run `bower install`. The Octicons styles will be downloaded to *bower_components/octicons*.

4. Link to the `octicons.css` stylesheet in the `<head>` of your `<html>` page:

``` html
<link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">
```

4. Simply use an icon in your HTML page:

``` html
<span class="octicon octicon-microscope"></span>
```

### Rails' asset pipeline

Octicons includes a stylesheet specifically for [Rails 4/Sprockets][sprockets].

1. Create a new file called *vendor/assets/bower.json* (if you don't have one already).

2. Add a new line for the Octicon dependency, pointing to the correct repository:

``` json
{
"name": "my_great_project",
"dependencies": {
"octicons": "*"
}
}
```

3. `cd` into `vendor/assets` and run `bower install`. The Octicons styles will be downloaded to *vendor/assets/bower_components/octicons*.

4. Open your config/application.rb, and add this line inside your Application:

``` ruby
config.assets.precompile += %w(*.svg *.eot *.woff *.ttf)
```

5. In your application stylesheet, require `sprockets-octicons`:

``` css
/*
= require sprockets-octicons
*/
```

6. Simply use an icon in your HTML page:

``` html
<span class="octicon octicon-flame"></span>
```

7. If you want a view helper, add something like this to *app/helpers/application_helper.rb*:

``` ruby
def octicon(code)
content_tag :span, '', :class => "octicon octicon-#{code.to_s.dasherize}"
end
```

## Best practices

- Octicons look best in sizes that are multiples of 16px. You can update the size using the `font-size` CSS property. For example:

``` css
.octicon {
font-size: 32px;
}
```

- Octicons are not monospaced. This lets them work well next to type, but it means they won’t stack nicely by default. If you intend to stack octicons, such as in navigation, you will want to add some CSS to make them the same width, and centered. For example:

``` css
.navigation .octicon {
width: 16px;
text-align: center;
}
```

### Resources

- [octicons.github.com](http://octicons.github.com/) - the Octicons website
- Read why [icon fonts are awesome](http://css-tricks.com/examples/IconFont/)
- How to compose your [HTML for icon font usage](http://css-tricks.com/html-for-icon-font-usage/)

## Why can't I see the characters in Font Book??

Give this a try, you should be all set:

![](http://cl.ly/image/2r1B1F2l3Q0D/content#png)

## FAQ

Check out [issues with the FAQ label](https://github.com/github/octicons/issues?q=is%3Aclosed+is%3Aissue+label%3AFAQ).

## Versions

Octicons operates similarly to [Semver](http://semver.org/) with the following version convention:

- Major: Breaking changes — removed icons, markup changes, unicode switches, css renames, icon redesigns
- Minor: Non-breaking changes — new icons, new aliases, minor icon changes
- Patch: Unnoticeable tweaks — slight visual changes, package updates


[octicons]: http://octicons.github.com
[bower]: http://bower.io/
[sprockets]: http://guides.rubyonrails.org/asset_pipeline.html
27 changes: 27 additions & 0 deletions client/lib/octicons/bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "octicons",
"description": "GitHub's icon font",
"license": "SIL OFL 1.1, MIT",
"homepage": "http://octicons.github.com",
"authors": [
"GitHub <[email protected]>"
],
"main": [
"octicons/sprockets-octicons.scss",
"octicons/octicons.eot",
"octicons/octicons.svg",
"octicons/octicons.ttf",
"octicons/octicons.woff"
],
"keywords": [
"GitHub",
"icons",
"font",
"web font",
"icon font"
],
"ignore": [
"**/.*",
"bower_components"
]
}
1 change: 1 addition & 0 deletions client/lib/octicons/octicons/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
If you intend to install Octicons locally, install `octicons-local.ttf`. It should appear as “github-octicons” in your font list. It is specially designed not to conflict with GitHub's web fonts.
Binary file added client/lib/octicons/octicons/octicons-local.ttf
Binary file not shown.
Loading

0 comments on commit eab0042

Please sign in to comment.