Skip to content
This repository

add mobile support #7

Closed
wants to merge 1 commit into from

2 participants

Len Chris Aniszczyk
Len
0xlen commented

oops , sorry ...

I had been created new branch to merge for yours :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Jun 24, 2012
Len 0xlen initial mobile branch f988adc
This page is out of date. Refresh to see the latest.

Showing 3 changed files with 322 additions and 0 deletions. Show diff stats Hide diff stats

  1. +69 0 assets/mobile.css
  2. +6 0 index.html
  3. +247 0 mobile.htm
69 assets/mobile.css
... ... @@ -0,0 +1,69 @@
  1 +
  2 + html {
  3 + width: 100%;
  4 + }
  5 + #logo {
  6 + margin: 20px auto;
  7 + }
  8 + #wrapper {
  9 + width: 100%;
  10 + text-align: center;
  11 + }
  12 + #main {
  13 + height: 100%;
  14 + }
  15 + div.header {
  16 + width: 95%;
  17 + height: 100%;
  18 + }
  19 + div, ol {
  20 + float: none;
  21 + height: 100%;
  22 + }
  23 + .grid {
  24 + width: 98%;
  25 + }
  26 + .grid-1, .grid-2, .grid-3, .grid-4 {
  27 + float:left;
  28 + }
  29 + .grid .grid-1 {
  30 + width: 98%;
  31 + height: 100%;
  32 + margin-left: 1%;
  33 + }
  34 +
  35 + .grid .grid-2 {
  36 + width: 98%;
  37 + height: 100%;
  38 + margin: 0 1% 20px;
  39 + }
  40 +
  41 + .grid .grid-3 {
  42 + width: 98%;
  43 + height: 100%;
  44 + }
  45 +
  46 + .grid .grid-4 {
  47 + width: 98%;
  48 + height: 100%;
  49 + }
  50 + #main p {
  51 + font-size: 200%;
  52 + }
  53 + h1,h2 {
  54 + font-size: 800%;
  55 + min-width: 100%;
  56 + }
  57 + a,p {
  58 + min-width: 100%;
  59 + font-size: 300%;
  60 + }
  61 + #num-repos,#num-members {
  62 + font-size: 180%;
  63 + }
  64 + #recently-updated h1 a {
  65 + font-size: 50%;
  66 + }
  67 + li.repo h2, li.repo h3, li.repo p{
  68 + font-size: 100%;
  69 + }
6 index.html
@@ -6,6 +6,12 @@
6 6 <link rel="stylesheet" type="text/css" href="assets/reset.css">
7 7 <link rel="stylesheet" type="text/css" href="assets/grid.css">
8 8 <link rel="stylesheet" type="text/css" href="assets/style.css">
  9 + <link rel="stylesheet" type="text/css" href="assets/mobile.css" media="only screen and (min-device-width : 320px)
  10 +and (max-device-width : 480px)">
  11 + <link rel="stylesheet" type="text/css" href="assets/mobile.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5),
  12 +only screen and (min-device-pixel-ratio : 1.5)">
  13 + <link rel="stylesheet" type="text/css" href="assets/mobile.css" media="only screen and (max-width: 767px)">
  14 + <link rel="stylesheet" type="text/css" href="assets/mobile.css" media="only screen and (min-width: 768px) and (max-width: 979px)">
9 15 <script type="text/javascript" src="assets/jquery-1.7.1.min.js"></script>
10 16 <script type="text/javascript" src="assets/strftime.js"></script>
11 17 <script type="text/javascript">
247 mobile.htm
... ... @@ -0,0 +1,247 @@
  1 +<!DOCTYPE html>
  2 +
  3 +<html>
  4 + <head>
  5 + <title>Len's Open Source</title>
  6 + <link href='http://0xlen.github.com/favicon.ico' rel='icon' type='image/x-icon'/>
  7 + <link rel="stylesheet" type="text/css" href="assets/reset.css">
  8 + <link rel="stylesheet" type="text/css" href="assets/grid.css">
  9 + <link rel="stylesheet" type="text/css" href="assets/style.css">
  10 + <link rel="stylesheet" type="text/css" href="assets/mobile.css">
  11 + <script type="text/javascript" src="assets/jquery-1.7.1.min.js"></script>
  12 + <script type="text/javascript" src="assets/strftime.js"></script>
  13 + <script type="text/javascript">
  14 + (function ($, undefined) {
  15 +
  16 + // Put custom repo URL's in this object, keyed by repo name.
  17 + var repoUrls = {
  18 + "bootstrap": "http://twitter.github.com/bootstrap/",
  19 + "finagle": "http://twitter.github.com/finagle/",
  20 + "hogan.js": "http://twitter.github.com/hogan.js/"
  21 + };
  22 +
  23 + function repoUrl(repo) {
  24 + return repoUrls[repo.name] || repo.html_url;
  25 + }
  26 +
  27 + // Put custom repo descriptions in this object, keyed by repo name.
  28 + var repoDescriptions = {
  29 + "bootstrap": "An HTML, CSS, and JS toolkit designed to kickstart development of webapps and sites",
  30 + "naggati2": "A protocol builder for Netty using Scala 2.8"
  31 + };
  32 +
  33 + function repoDescription(repo) {
  34 + return repoDescriptions[repo.name] || repo.description;
  35 + }
  36 +
  37 + function addRecentlyUpdatedRepo(repo) {
  38 + var $item = $("<li>");
  39 +
  40 + var $name = $("<a>").attr("href", repo.html_url).text(repo.name);
  41 + $item.append($("<span>").addClass("name").append($name));
  42 +
  43 + var $time = $("<a>").attr("href", repo.html_url + "/commits").text(strftime("%h %e, %Y", repo.pushed_at));
  44 + $item.append($("<span>").addClass("time").append($time));
  45 +
  46 + $item.append('<span class="bullet">&sdot;</span>');
  47 +
  48 + var $watchers = $("<a>").attr("href", repo.html_url + "/watchers").text(repo.watchers + " watchers");
  49 + $item.append($("<span>").addClass("watchers").append($watchers));
  50 +
  51 + $item.append('<span class="bullet">&sdot;</span>');
  52 +
  53 + var $forks = $("<a>").attr("href", repo.html_url + "/network").text(repo.forks + " forks");
  54 + $item.append($("<span>").addClass("forks").append($forks));
  55 +
  56 + $item.appendTo("#recently-updated-repos");
  57 + }
  58 +
  59 + function addRepo(repo) {
  60 + var $item = $("<li>").addClass("repo grid-1 " + (repo.language || '').toLowerCase());
  61 + var $link = $("<a>").attr("href", repoUrl(repo)).appendTo($item);
  62 + $link.append($("<h2>").text(repo.name));
  63 + $link.append($("<h3>").text(repo.language));
  64 + $link.append($("<p>").text(repoDescription(repo)));
  65 + $item.appendTo("#repos");
  66 + }
  67 +
  68 + $.getJSON("https://api.github.com/orgs/twitter/repos?callback=?", function (result) {
  69 + var repos = result.data;
  70 +
  71 + $(function () {
  72 + $("#num-repos").text(repos.length);
  73 +
  74 + // Convert pushed_at to Date.
  75 + $.each(repos, function (i, repo) {
  76 + repo.pushed_at = new Date(repo.pushed_at);
  77 +
  78 + var weekHalfLife = 1.146 * Math.pow(10, -9);
  79 +
  80 + var pushDelta = (new Date) - Date.parse(repo.pushed_at);
  81 + var createdDelta = (new Date) - Date.parse(repo.created_at);
  82 +
  83 + var weightForPush = 1;
  84 + var weightForWatchers = 1.314 * Math.pow(10, 7);
  85 +
  86 + repo.hotness = weightForPush * Math.pow(Math.E, -1 * weekHalfLife * pushDelta);
  87 + repo.hotness += weightForWatchers * repo.watchers / createdDelta;
  88 + });
  89 +
  90 + // Sort by highest # of watchers.
  91 + repos.sort(function (a, b) {
  92 + if (a.hotness < b.hotness) return 1;
  93 + if (b.hotness < a.hotness) return -1;
  94 + return 0;
  95 + });
  96 +
  97 + $.each(repos, function (i, repo) {
  98 + addRepo(repo);
  99 + });
  100 +
  101 + // Sort by most-recently pushed to.
  102 + repos.sort(function (a, b) {
  103 + if (a.pushed_at < b.pushed_at) return 1;
  104 + if (b.pushed_at < a.pushed_at) return -1;
  105 + return 0;
  106 + });
  107 +
  108 + $.each(repos.slice(0, 3), function (i, repo) {
  109 + addRecentlyUpdatedRepo(repo);
  110 + });
  111 + });
  112 + });
  113 +
  114 + $.getJSON("https://api.github.com/orgs/twitter/members?callback=?", function (result) {
  115 + var members = result.data;
  116 +
  117 + $(function () {
  118 + $("#num-members").text(members.length);
  119 + });
  120 +
  121 + });
  122 +
  123 + function randomItem(array) {
  124 + return array[Math.floor(Math.random() * array.length)];
  125 + }
  126 +
  127 + var $flyzone;
  128 +
  129 + function flyzone() {
  130 + if (!$flyzone) {
  131 + $flyzone = $("<div>").attr("id", "flyzone").prependTo(document.body);
  132 + }
  133 +
  134 + return $flyzone;
  135 + }
  136 +
  137 + var sizes = ["smaller", "small", "medium", "large", "fat"];
  138 +
  139 + var sizeDimensions = {
  140 + "smaller": 50,
  141 + "small": 80,
  142 + "medium": 130,
  143 + "large": 200,
  144 + "fat": 300
  145 + };
  146 +
  147 + function randomOpacity(threshold) {
  148 + var opacity = Math.random();
  149 +
  150 + while (opacity < threshold) {
  151 + opacity = Math.random();
  152 + }
  153 +
  154 + return opacity;
  155 + }
  156 +
  157 + function makeLarry(sizeName, speed) {
  158 + var size = sizeDimensions[sizeName];
  159 + var top = Math.floor((flyzone().height() - size) * Math.random());
  160 +
  161 + var $img = $("<img>")
  162 + .addClass("larry size-" + sizeName)
  163 + .attr("src", "assets/larry.png")
  164 + .attr("width", size)
  165 + .attr("height", size)
  166 + .css({
  167 + position: "absolute",
  168 + opacity: randomOpacity(0.4),
  169 + top: top,
  170 + left: -size
  171 + });
  172 +
  173 + $img.prependTo(flyzone());
  174 +
  175 + var left = flyzone().width() + size;
  176 +
  177 + $img.animate({left: left}, speed, function () {
  178 + $img.remove();
  179 + makeRandomLarry();
  180 + });
  181 +
  182 + return $img;
  183 + }
  184 +
  185 + function makeRandomLarry() {
  186 + var size = randomItem(sizes);
  187 + var speed = Math.floor(Math.random() * 20000) + 15000;
  188 + return makeLarry(size, speed);
  189 + }
  190 +
  191 + $(function () {
  192 + $("#logo").click(function () {
  193 + makeRandomLarry();
  194 + });
  195 + });
  196 +
  197 + var match = (/\blarry(=(\d+))?\b/i).exec(window.location.search);
  198 +
  199 + if (match) {
  200 + var n = parseInt(match[2]) || 20;
  201 +
  202 + $(function () {
  203 + for (var i = 0; i < n; ++i) {
  204 + setTimeout(makeRandomLarry, Math.random() * n * 500);
  205 + }
  206 + });
  207 + }
  208 +
  209 + })(jQuery);
  210 + </script>
  211 + </head>
  212 + <body>
  213 + <a href="index.html">web</a>
  214 + <span style="
  215 + font-size: 200%;
  216 +"> | </span>
  217 + <a href="mobile.htm">mobile</a>
  218 + <div id="wrapper" class="grid clearfix">
  219 + <div id="main" class="grid-1">
  220 + <div id="logo"><h1>Twitter Open Source</h1></div>
  221 + <h1>Twitter is built on open source software.</h1>
  222 + <p>Want to help? <a href="https://twitter.com/jobs">Join the Flock</a></p>
  223 + <p>Visit <a href="https://dev.twitter.com/">dev.twitter.com</a></p>
  224 + <p><a href="https://twitter.com/about/resources">Logos and other goodies</a></p>
  225 + </div>
  226 +
  227 + <div class="grid grid-3">
  228 + <div id="statistics" class="grid-1 alpha header">
  229 + <h1>Statistics</h1>
  230 + <p>
  231 + <a href="https://github.com/twitter/repositories"><span id="num-repos">&nbsp;</span> public repos</a>
  232 + <br>
  233 + <a href="https://github.com/twitter"><span id="num-members">&nbsp;</span> members</a>
  234 + </p>
  235 + <p class="email"><a href="mailto:opensource@twitter.com">opensource@twitter.com</a></p>
  236 + </div>
  237 +
  238 + <div id="recently-updated" class="grid-2 omega header">
  239 + <h1>Recently updated <a href="https://github.com/twitter/repositories">View All on GitHub</a></h1>
  240 + <ol id="recently-updated-repos"></ol>
  241 + </div>
  242 + </div>
  243 +
  244 + <ol id="repos"></ol>
  245 + </div>
  246 + </body>
  247 +</html>

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.