Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-resource.min.js"></script>
<script src="angular.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
<meta charset=utf-8 />
<title>Responsive </title>
</head>
<body>
  
  <div ng-app="gitRepos" ng-controller="gitReposController">
    <table ng-if="layout == 'big' && !loading " class="big">
        <thead>
            <tr>
                <th>Repo</th>
                <th>Watchers</th>
                <th>Forks</th>
                <th>Size</th>
                <th>Open Issues</th>
                <th>Owner</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="repo in repos">
                <td><a ng-href="{{repo.html_url}}" target="_blank">{{repo.name}}</a></td>
                <td>{{repo.watchers}}</td>
                <td>{{repo.forks}}</td>
                <td>{{repo.size}}</td>
                <td>{{repo.open_issues}}</td>
                <td><a ng-href="{{repo.owner.html_url}}" title="Repo owner" target="_blank">{{repo.owner.login}}</a></td>
            </tr>
        </tbody>
    </table>
    
    <div ng-if="layout == 'small' && !loading"> <!-- Wrapper required to avoid multiple-directioves/transclusion error. See https://github.com/angular-ui/angular-ui/issues/481 -->
        <article class="small" ng-repeat="repo in repos">
            <h1><a ng-href="{{repo.html_url}}" target="_blank">{{repo.name}}</a></h1>
            <h2>Owner: <a ng-href="{{repo.owner.html_url}}" title="Repo owner" target="_blank">{{repo.owner.login}}</a></h2>
            <dl>
                <dt>Watchers</dt><dd>{{repo.watchers}}</dd>
                <dt>Forks</dt><dd>{{repo.forks}}</dd>
                <dt>Size</dt><dd>{{repo.size}}</dd>
                <dt>Open Issues</dt><dd>{{repo.open_issues}}</dd>
            </dl>
        </article>
    </div>
    <div ng-show="loading" class="loading" >
        Loading...  
    </div>
</div>
​
</body>
</html>
 
    .loading {
        position: fixed;
        width: 10em;
        height: 10em;
        line-height: 10em;
        background-color: #444;
        color: #eee;
        margin: auto;
        top: 0; left: 0; bottom: 0; right: 0;
    }
    /* starting animations */
    .loading.ng-hide-add,
    .loading.ng-hide-remove {
      -webkit-transition:0.5s linear all;
      -moz-transition:0.5s linear all;
      -o-transition:0.5s linear all;
      transition:0.5s linear all;
      display:block!important;
    }
    .loading.ng-hide-remove {
      opacity:0;
    }
    .loading.ng-hide-remove.ng-hide-remove-active {
      opacity:1;
    }
    .loading.ng-hide-add {
      opacity:1;
    }
    .loading.ng-hide-add.ng-hide-add-active {
      opacity:0;
    }
 
​
​
// Define a new module. This time we declare a dependency on
// the ngResource module, so we can work with the Instagram API
​
var app = angular.module("gitRepos", ['ngResource', 'ngAnimate']);
​
app.factory('github', function($resource){
    return {
        fetch: function(callback){
            var api = $resource("http://query.yahooapis.com/v1/public/yql?q=select%20name%2Cowner.login%2C%20owner.html_url%2Chtml_url%2Csize%2Cwatchers%2Cforks%2Copen_issues%20from%20github.repo%20where%20(repo%3D'bootstrap'%20and%20id%3D'twbs')%20OR%20(repo%3D'node'%20and%20id%3D'joyent')%20OR%20(repo%3D'jquery'%20and%20id%3D'jquery')%20%20OR%20(repo%3D'html5-boilerplate'%20and%20id%3D'h5bp')%20OR%20(repo%3D'rails'%20and%20id%3D'rails')&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=JSON_CALLBACK", null, {
                fetch:{method:'JSONP'}
            });
            api.fetch(function(response){
              callback(response.query.results.json);
            });
        }
    };
​
});
​
function gitReposController($scope, github){
    $scope.repos = [];
    $scope.loading = true;
  
    if (window.matchMedia) {
        var widthQuery = window.matchMedia("(min-width: 44.375em)");
        var setSizeAppropriateTemplate = function (mql) {
            if (mql.matches) {
                $scope.layout = 'big';
            } else {
                $scope.layout = 'small';
            }
            if(!$scope.$$phase) { //prevents it from unnecessarily calling $scope.$apply when the page first runs
                $scope.$apply(); //triggers the digest cycle
            }
        };
        widthQuery.addListener(setSizeAppropriateTemplate);
        setSizeAppropriateTemplate(widthQuery);
    } else {
        $scope.layout = 'big'; //IE9 and older
    }
    
    github.fetch(function(data){
        $scope.repos = data;
        $scope.loading = false;
    });
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers