Permalink
Browse files

Added list view

  • Loading branch information...
1 parent f5c9cc0 commit 21a77af89efa4aea3a8c9bfdb1f55a35f455bf71 @Randgalt Randgalt committed Nov 14, 2012
Showing with 314 additions and 217 deletions.
  1. BIN assets/glyphicons_114_list.png
  2. BIN assets/glyphicons_156_show_thumbnails.png
  3. +47 −1 css/style.css
  4. +7 −216 index.html
  5. +260 −0 js/nf.js
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -34,7 +34,7 @@ body
font-size: 150%;
}
-#repo-content
+#repo-content, #repo-list-content
{
position: relative;
overflow: auto;
@@ -380,3 +380,49 @@ body
clear: both;
margin-bottom: 3px;
}
+
+#repo-heading img
+{
+ margin-left: 10px;
+}
+
+#repo-heading span
+{
+ margin-right: 10px;
+}
+
+.repo-list-item-container
+{
+ margin: 10px;
+ background-color: #EEE;
+ box-shadow: 2px 2px 2px #888;
+ padding: 10px;
+ cursor: pointer;
+}
+
+.repo-list-item-anchor:link, .repo-list-item-anchor:visited, .repo-list-item-anchor:active
+{
+ text-decoration: none;
+ color: #B9090B;
+ font-weight: bold;
+ text-transform: capitalize;
+ font-size: 1.25em;
+ margin-bottom: 3px;
+}
+
+.repo-list-item-description
+{
+ margin-bottom: 8px;
+ font-style: italic;
+}
+
+.repo-list-item-label
+{
+ float: left;
+ width: 100px;
+}
+
+repo-list-item-value
+{
+ clear: both;
+}
View
@@ -35,221 +35,7 @@
}
</script>
<script type="text/javascript" src="http://githubproxy-942908148.us-east-1.elb.amazonaws.com/REST/v1/repos?jsonp=repos"></script>
-
- <script type="text/javascript">
- var ignoreRepos = {
- 'netflix.github.com': true
- };
- var showingBalloonIndex = -1;
- var shouldBeShowingBalloonIndex = -1;
-
- function removeBalloon()
- {
- $('#balloon-container').hide();
- $('#balloon-arrow-left').hide();
- $('#balloon-arrow-right').hide();
- showingBalloonIndex = -1;
- }
-
- function displayBalloon(index)
- {
- if ( showingBalloonIndex === index )
- {
- return;
- }
- showingBalloonIndex = index;
-
- var thisRepo = reposTab[index];
- var updatedAt = parseISO8601(thisRepo.updated_at);
- var updatedStr = $.format.date(updatedAt, "MM/dd/yy") + ' ' + $.format.date(updatedAt, "@HH:mm:ss");
-
- $('#balloon-heading').text(thisRepo.name);
- $('#balloon-description').html(thisRepo.description + ' ' + '<span class="more-info"><a href="' + thisRepo.html_url + '">More&nbsp;Info</a></span>');
- $('#balloon-watchers').text(thisRepo.watchers);
- $('#balloon-forks').text(thisRepo.forks);
- $('#balloon-language').text(thisRepo.language);
- $('#balloon-issues').text(thisRepo.open_issues);
- $('#balloon-updated').text(updatedStr);
-
- var windowWidth = $(window).width();
- var offset = $('#repo-id-' + index).offset();
- var width = $('#repo-id-' + index).width();
-
- if ( offset.left < (windowWidth - 600) )
- {
- $('#balloon-container').css('left', offset.left + width + 52);
- $('#balloon-container').css('top', offset.top + 10);
- $('#balloon-arrow-left').css('left', offset.left + width + 5);
- $('#balloon-arrow-left').css('top', offset.top + 50);
-
- $('#balloon-container').show();
- $('#balloon-arrow-left').show();
- $('#balloon-arrow-right').hide();
- }
- else
- {
- $('#balloon-container').css('left', offset.left - 329);
- $('#balloon-container').css('top', offset.top + 10);
- $('#balloon-arrow-right').css('left', offset.left - 38);
- $('#balloon-arrow-right').css('top', offset.top + 50);
-
- $('#balloon-container').show();
- $('#balloon-arrow-left').hide();
- $('#balloon-arrow-right').show();
- }
- }
-
- function showBalloon(index)
- {
- shouldBeShowingBalloonIndex = index;
- }
-
- function hideBalloon()
- {
- shouldBeShowingBalloonIndex = -1;
- }
-
- function adjustBalloon()
- {
- if ( shouldBeShowingBalloonIndex != showingBalloonIndex )
- {
- if ( shouldBeShowingBalloonIndex < 0 )
- {
- removeBalloon();
- }
- else
- {
- displayBalloon(shouldBeShowingBalloonIndex);
- }
- }
- }
-
- function showListContent()
- {
- $('#tab-content-repo').hide();
- $('#tab-content-timeline').hide();
- $('#tab-content-lists').show();
- }
-
- function showRepoContent()
- {
- $('#tab-content-lists').hide();
- $('#tab-content-timeline').hide();
- $('#tab-content-repo').show();
- resizeRepoContent();
- }
-
- function showTimelineContent() {
- $('#tab-content-repo').hide();
- $('#tab-content-lists').hide();
- $('#tab-content-timeline').show();
- }
-
- function parseISO8601(value) {
- a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
- if (a)
- return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6]));
-
- if (value.slice(0, 5) === 'Date(' && value.slice(-1) === ')') {
- var d = new Date(value.slice(5, -1));
-
- if (d)
- return d;
- }
- return new Date();
- }
-
- function resizeRepoContent()
- {
- $('#repo-content').css({'height':(($(window).height())-320)+'px'});
- }
-
- $(function(){
- var imageUrl, imageFileName, boxArtOverride, i;
- var projectsToBoxArtOverrides = {
- 'astyanax': 'Sci-Fi-and-Fantasy.jpg',
- 'archaius': 'Anime-and-Animation.jpg',
- 'asgard': 'Family-Animation.jpg',
- 'aws-autoscaling': 'Kids-Music.jpg',
- 'CassJMeter': 'Comedy.jpg',
- 'curator': 'Documentary.jpg',
- 'edda': 'Classics.jpg',
- 'eureka': 'Action-Adventure.jpg',
- 'exhibitor': 'Drama.jpg',
- 'frigga': 'Music-and-Musicals.jpg',
- 'governator': 'Crime-Action.jpg',
- 'Priam': 'Romantic-Comedies.jpg',
- 'servo': 'Animal-Tales.jpg',
- 'SimianArmy': 'Mobster.jpg'
- };
- var repoContent = "";
- var boxArtIndex = 0;
- for (i = 0; i < reposTab.length; ++i )
- {
- var thisRepo = reposTab[i];
- if ( !thisRepo.private && !ignoreRepos[thisRepo.name] )
- {
- boxArtOverride = projectsToBoxArtOverrides[thisRepo.name];
- if (boxArtOverride) {
- imageFileName = boxArtOverride;
- } else {
- imageFileName = 'box-art-' + boxArtIndex + '.jpg'
- boxArtIndex++;
- if (boxArtIndex > 8) {
- boxArtIndex = 0;
- }
- }
- imageUrl = 'assets/' + imageFileName;
-
- repoContent += '<a class="repo-item-anchor" href="' + thisRepo.html_url + '">';
- repoContent += '<div class="repo-item-container">';
- repoContent += '<div id="repo-container-id-' + i + '" class="repo-item-name">' + thisRepo.name + '</div>';
- repoContent += '<div id="repo-id-' + i + '" class="repo-item" style="background-image: url(' + imageUrl + ')">';
- repoContent += '<div id="repo-cover-id-' + i + '" class="repo-item-cover"><div class="repo-item-shadow"></div></div>';
- repoContent += '<div id="repo-button-id-' + i + '" class="repo-item-button"></div>';
- repoContent += '</div></a>';
- repoContent += '</div>';
- }
- }
- $('#repo-content').html(repoContent);
-
- for ( i = 0; i < reposTab.length; ++i )
- {
- var coverId = '#repo-cover-id-' + i;
- var buttonId = '#repo-button-id-' + i;
- $('#repo-id-' + i).data('cover-id', coverId);
- $('#repo-id-' + i).data('button-id', buttonId);
- $('#repo-id-' + i).data('index', i);
- $('#repo-id-' + i).hover(function(){
- var coverId = $(this).data('cover-id');
- var buttonId = $(this).data('button-id');
- var index = $(this).data('index');
- $(coverId).show();
- $(buttonId).show();
- showBalloon(index);
- }, function(){
- var coverId = $(this).data('cover-id');
- var buttonId = $(this).data('button-id');
- $(coverId).hide();
- $(buttonId).hide();
- hideBalloon();
- });
- }
-
- $(window).resize(function(){
- hideBalloon();
- resizeRepoContent();
- });
- resizeRepoContent();
-
- window.setInterval("adjustBalloon()", 500);
- $('#balloon-container').hover(function(){
- shouldBeShowingBalloonIndex = showingBalloonIndex;
- },function(){
- shouldBeShowingBalloonIndex = -1;
- });
- });
- </script>
+ <script type="text/javascript" src="js/nf.js"></script>
</head>
<body>
@@ -283,11 +69,16 @@
<div id="tab-content-repo">
<div id="repo-heading">
- <a href="https://github.com/netflix">Our Repositories</a>
+ <span><a href="https://github.com/netflix">Our Repositories</a></span>
+ <a href="javascript:repoView(true);"><img src="assets/glyphicons_156_show_thumbnails.png" width="22" height="22" alt="Thumbnails" border="0"></a>
+ <a href="javascript:repoView(false);"><img src="assets/glyphicons_114_list.png" width="22" height="22" alt="List" border="0"></a>
</div>
<div id="repo-content">
</div>
+ <div id="repo-list-content">
+
+ </div>
</div>
<div id="tab-content-timeline">
Oops, something went wrong.

0 comments on commit 21a77af

Please sign in to comment.