Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Some a styling #150

Closed
wants to merge 4 commits into from

2 participants

Visnu Pitiyanuvath isaacs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 5, 2012
  1. Visnu Pitiyanuvath

    clean up the home page lists

    visnup authored
  2. Visnu Pitiyanuvath
Commits on Sep 6, 2012
  1. Visnu Pitiyanuvath

    work without downloads

    visnup authored
  2. Visnu Pitiyanuvath
This page is out of date. Refresh to see the latest.
2  models/downloads.js
View
@@ -83,7 +83,7 @@ function load (k, cb) {
return set
}, {})
else if (pkg)
- data = data.rows.reduce(function (set, row) {
+ data = (data.rows || []).reduce(function (set, row) {
var h = row.key[0]
set[h] = row.value
return set
244 stylus/index.styl
View
@@ -171,6 +171,7 @@ form {
}
#page {
+ line-height: 150%;
margin-left 120px + 80px;
margin-right: 220px + 40px;
@@ -194,120 +195,6 @@ form {
}
}
-#package {
- width:490px;
- > h1 {
- font: 28px Georgia, serif;
- border-bottom: solid 1px #000;
- }
- .row {
- padding:0.75em 0;
- border-top: solid 1px #ccc;
- }
- p.description {
- font: 18px Georgia, serif;
- }
- table.metadata {
- margin: 1em 0;
- width: 100%;
- }
- tr {
- border-top: solid 1px #ccc;
- }
- th, td {
- padding: 0.75em 0;
- vertical-align: baseline;
- }
- th {
- color: #000;
- font-weight: normal;
- text-align: left;
- width: 120px;
- }
- b {
- color: #000;
- font-weight: bold;
- font-size: 14px;
- }
- .details {
- ul.toc {
- padding: 0;
- margin-bottom: 0;
- font-size: 16px;
- li {
- display: inline-block;
- padding: 0.5em 32px 0.5em 16px;
- &:first-child {
- background-color: #fff;
- }
- }
- }
-
- section {
- padding: 16px;
- background-color: #fff;
- margin-right: -260px;
-
- &#readme {
- h1 { font-size: 24px; }
- img {
- max-width:100%;
- }
- pre {
- max-width:100%;
- overflow:auto;
- font-family: Monaco, monospace;
- background-color: #f9f9f8;
- padding: 16px;
- }
- }
- }
- }
-}
-
-.user {
- padding-left: 32px;
- position: relative;
-
- .username {
- font-weight: bold;
- }
-
- .avatar {
- position: absolute;
- top: -4px;
- left: 0;
- width: 25px;
- height: 25px;
- }
-}
-
-#package .user {
- padding: 1px;
-
- .avatar {
- position:relative;
- top:0;
- display:inline-block;
- vertical-align:middle;
- width: 32px;
- height: 32px;
- }
-}
-
-.showprofile {
- position: relative;
-
- .avatar-large {
- display:block;
- position:absolute;
- width:248px;
- height:248px;
- top:0;
- right:-260px;
- }
-}
-
#footer {
width: 953px;
font-size:12px;
@@ -375,3 +262,132 @@ form {
}
}
}
+
+.user {
+ padding-left: 32px;
+ position: relative;
+
+ .username {
+ font-weight: bold;
+ }
+
+ .avatar {
+ position: absolute;
+ top: -4px;
+ left: 0;
+ width: 25px;
+ height: 25px;
+ }
+}
+
+#index {
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ tr {
+ vertical-align: top;
+ }
+ h2 {
+ white-space: nowrap;
+ }
+ }
+}
+
+#package, #profile {
+ width:490px;
+ > h1 {
+ font: 28px Georgia, serif;
+ border-bottom: solid 1px #000;
+ }
+ .row {
+ padding:0.75em 0;
+ border-top: solid 1px #ccc;
+ }
+ p.description {
+ font: 18px Georgia, serif;
+ }
+ table.metadata {
+ margin: 1em 0;
+ width: 100%;
+ tr {
+ border-top: solid 1px #ccc;
+ }
+ th, td {
+ padding: 0.5em 0;
+ vertical-align: baseline;
+ }
+ th {
+ color: #000;
+ font-weight: normal;
+ text-align: left;
+ width: 120px;
+ }
+ b {
+ color: #000;
+ font-weight: bold;
+ font-size: 14px;
+ }
+ }
+ .details {
+ ul.toc {
+ padding: 0;
+ margin-bottom: 0;
+ font-size: 16px;
+ li {
+ display: inline-block;
+ padding: 0.5em 32px 0.5em 16px;
+ &:first-child {
+ background-color: #fff;
+ }
+ }
+ }
+
+ section {
+ padding: 16px;
+ background-color: #fff;
+ margin-right: -260px;
+
+ &#readme {
+ h1 { font-size: 24px; }
+ img {
+ max-width:100%;
+ }
+ pre {
+ max-width:100%;
+ overflow:auto;
+ font-family: Monaco, monospace;
+ background-color: #f9f9f8;
+ padding: 16px;
+ }
+ }
+ }
+ }
+ .user {
+ padding: 1px;
+
+ .avatar {
+ position:relative;
+ top:0;
+ display:inline-block;
+ vertical-align:middle;
+ width: 32px;
+ height: 32px;
+ }
+ }
+}
+
+#profile {
+ position: relative;
+
+ .avatar-large {
+ display:block;
+ position:absolute;
+ width:248px;
+ height:248px;
+ top:0;
+ right:-260px;
+ }
+ table.metadata tr:first-child {
+ border-top: none;
+ }
+}
227 templates/index.ejs
View
@@ -1,119 +1,122 @@
<%- include('header.ejs', locals) %>
-<h1>Node Packaged Modules</h1>
-
-<% if (totalPackages) { %>
-<p>Total Packages: <%= totalPackages %></p>
-<% } %>
-
-<p class="downloads">
- <%= dlDay %> downloads in the last day<br>
- <%= dlWeek %> downloads in the last week<br>
- <%= dlMonth %> downloads in the last month</p>
-
-<p><a href="https://github.com/isaacs/npm-www">Patches welcome!</a></p>
-
-<p>Any package can be installed by using <code>
- <a href="/doc/install.html">npm install</a></code>.</p>
-
-<p>Add your programs to this index by using <code>
- <a href="/doc/publish.html">npm publish</a></code>.</p>
-
-<!-- tables fer layout omigosh! whatever, it works. -->
-<table style="width:100%" border=0 cellpadding=0 cellspacing=0>
-<tr>
-
- <td>
- <h2>Recently Updated</h2>
- <ul>
- <%
- var now = Date.now()
- updated.forEach(function (p) {
- var m = now - (new Date(p.value).getTime())
- m = Math.floor(m / (1000 * 60))
- %><li><%= m %>m <a href="<%= p.url %>"><%= p.name %></a></li>
+
+<div id="index">
+ <h1>Node Packaged Modules</h1>
+
+ <% if (totalPackages) { %>
+ <p>Total Packages: <%= totalPackages %></p>
+ <% } %>
+
+ <p class="downloads">
+ <%= dlDay %> downloads in the last day<br>
+ <%= dlWeek %> downloads in the last week<br>
+ <%= dlMonth %> downloads in the last month</p>
+
+ <p><a href="https://github.com/isaacs/npm-www">Patches welcome!</a></p>
+
+ <p>Any package can be installed by using <code>
+ <a href="/doc/install.html">npm install</a></code>.</p>
+
+ <p>Add your programs to this index by using <code>
+ <a href="/doc/publish.html">npm publish</a></code>.</p>
+
+ <!-- tables fer layout omigosh! whatever, it works. -->
+ <table>
+ <tr>
+
+ <td>
+ <h2>Recently Updated</h2>
+ <ul>
<%
- })
- %>
- <li><a href="/browse/updated">More...</a></li>
- </ul>
- </td>
-
- <td>
- <h2>Most Depended Upon</h2>
- <ul>
- <%
- depended.forEach(function (p) {
- %><li><%= p.value %> <a href="/package/<%= p.name
- %>"><%= p.name %></a></li>
+ var now = Date.now()
+ updated.forEach(function (p) {
+ var m = now - (new Date(p.value).getTime())
+ m = Math.floor(m / (1000 * 60))
+ %><li><%= m %>m <a href="<%= p.url %>"><%= p.name %></a></li>
+ <%
+ })
+ %>
+ <li><a href="/browse/updated">More...</a></li>
+ </ul>
+ </td>
+
+ <td>
+ <h2>Most Depended Upon</h2>
+ <ul>
<%
- })
- %>
- <li><a href="/browse/depended">More...</a></li>
- </ul>
- </td>
-
-</tr>
-<tr>
-
- <td>
- <h2>Most Starred</h2>
- <ul>
- <%
- starred.forEach(function (p) {
- %><li><%= p.value %> <a href="/package/<%= p.name
- %>"><%= p.name %></a></li>
+ depended.forEach(function (p) {
+ %><li><%= p.value %> <a href="/package/<%= p.name
+ %>"><%= p.name %></a></li>
+ <%
+ })
+ %>
+ <li><a href="/browse/depended">More...</a></li>
+ </ul>
+ </td>
+
+ </tr>
+ <tr>
+
+ <td>
+ <h2>Most Starred</h2>
+ <ul>
<%
- })
- %>
- <li><a href="/browse/star">More...</a></li>
- </ul>
- </td>
-
- <td>
- <h2>Most Prolific Authors</h2>
- <ul>
- <%
- authors.forEach(function (p) {
- %><li><%= p.value %> <a href="/~<%= p.name
- %>"><%= p.name %></a></li>
+ starred.forEach(function (p) {
+ %><li><%= p.value %> <a href="/package/<%= p.name
+ %>"><%= p.name %></a></li>
+ <%
+ })
+ %>
+ <li><a href="/browse/star">More...</a></li>
+ </ul>
+ </td>
+
+ <td>
+ <h2>Most Prolific Authors</h2>
+ <ul>
<%
- })
- %>
- <li><a href="/browse/author">More...</a></li>
- </ul>
- </td>
-
-</tr>
-<tr>
-
- <td>
- <h2>npm Stuff</h2>
- <ul>
- <li><a href="/doc/faq.html">FAQ</a></li>
- <li><a href="/doc/README.html">Readme</a></li>
- <li><a href="/doc/disputes.html">Handling Disputes</a></li>
- <li><a href="https://github.com/isaacs/npm/issues">npm Bugs</a></li>
- <li><a href="https://github.com/isaacs/npm-www/issues">Website Bugs</a></li>
- <li><a href="https://groups.google.com/group/npm-">Mailing List</a></li>
- <li><a href="/about">More about this site</a></li>
- </ul>
- </td>
-
- <td>
- <h2>Profile Stuff</h2>
-
- <ul>
- <li><a href="/signup">Create a profile</a></li>
- <li><a href="/~">View your profile</a></li>
- <li><a href="/~ry">View someone else's profile</a></li>
- <li><a href="/profile-edit">Edit your profile</a></li>
- <li><a href="/password">Change your password</a></li>
- <li><a href="/forgot">Reset a forgotten password</a></li>
- <li><a href="/logout">Log out</a></li>
- </ul>
- </td>
-
-</tr>
-</table>
+ authors.forEach(function (p) {
+ %><li><%= p.value %> <a href="/~<%= p.name
+ %>"><%= p.name %></a></li>
+ <%
+ })
+ %>
+ <li><a href="/browse/author">More...</a></li>
+ </ul>
+ </td>
+
+ </tr>
+ <tr>
+
+ <td>
+ <h2>npm Stuff</h2>
+ <ul>
+ <li><a href="/doc/faq.html">FAQ</a></li>
+ <li><a href="/doc/README.html">Readme</a></li>
+ <li><a href="/doc/disputes.html">Handling Disputes</a></li>
+ <li><a href="https://github.com/isaacs/npm/issues">npm Bugs</a></li>
+ <li><a href="https://github.com/isaacs/npm-www/issues">Website Bugs</a></li>
+ <li><a href="https://groups.google.com/group/npm-">Mailing List</a></li>
+ <li><a href="/about">More about this site</a></li>
+ </ul>
+ </td>
+
+ <td>
+ <h2>Profile Stuff</h2>
+
+ <ul>
+ <li><a href="/signup">Create a profile</a></li>
+ <li><a href="/~">View your profile</a></li>
+ <li><a href="/~ry">View someone else's profile</a></li>
+ <li><a href="/profile-edit">Edit your profile</a></li>
+ <li><a href="/password">Change your password</a></li>
+ <li><a href="/forgot">Reset a forgotten password</a></li>
+ <li><a href="/logout">Log out</a></li>
+ </ul>
+ </td>
+
+ </tr>
+ </table>
+</div>
<%- include('footer.ejs', locals) %>
128 templates/profile.ejs
View
@@ -1,6 +1,6 @@
<%- include('header.ejs', locals) %>
-<div class="showprofile">
+<div id="profile">
<% if (showprofile.isSelf) { %>
<a href="http://en.gravatar.com/emails/"
title="edit avatar at gravatar.com">
@@ -24,76 +24,78 @@
}
%>
-<table width="100%">
-<%
-fields.forEach(function (field) {
- %>
- <tr>
- <th><%= field.title %></th>
- <td><%- field.show || '' %></td>
- </tr>
+ <table class="metadata">
<%
-})
-%>
-</table>
-
-</div>
+ fields.forEach(function (field) {
+ if (field.show) {
+ %>
+ <tr>
+ <th><%= field.title %></th>
+ <td><%- field.show || '' %></td>
+ </tr>
+ <%
+ }
+ })
+ %>
+ </table>
-<% if (packages && packages.length) {
- %><h2>Packages by <%= showprofile.name %></h2>
- <ul><%
- var l = packages.length;
- var max = 20;
- if (l > max) {
- // get a random assortment each time.
- packages = packages.sort(function (a, b) {
- return Math.random() * 2 - 1
- }).slice(0, max)
- packages.push({
- url: '/browse/author/' + showprofile.name,
- name: 'and ' + (l-max) + ' more',
- description: ''
+ <% if (packages && packages.length) {
+ %><h2>Packages by <%= showprofile.name %></h2>
+ <ul><%
+ var l = packages.length;
+ var max = 20;
+ if (l > max) {
+ // get a random assortment each time.
+ packages = packages.sort(function (a, b) {
+ return Math.random() * 2 - 1
+ }).slice(0, max)
+ packages.push({
+ url: '/browse/author/' + showprofile.name,
+ name: 'and ' + (l-max) + ' more',
+ description: ''
+ })
+ }
+ packages.forEach(function (d, i) {
+ %><li><a href="<%= d.url %>"><%= d.name %></a>
+ <%= d.description %></li><%
})
+ %></ul><%
}
- packages.forEach(function (d, i) {
- %><li><a href="<%= d.url %>"><%= d.name %></a>
- <%= d.description %></li><%
- })
- %></ul><%
-}
-%>
+ %>
-<% if (starred && starred.length) {
- %>
- <h2>Packages Starred by <%= showprofile.name %></h2>
- <ul>
- <%
- var l = starred.length;
- var max = 20;
- if (l > max) {
- // get a random assortment each time.
- starred = starred.sort(function (a, b) {
- return Math.random() * 2 - 1
- }).slice(0, max)
- starred.push({
- url: '/browse/userstar/' + showprofile.name,
- name: 'and ' + (l-max) + ' more',
- description: ''
+ <% if (starred && starred.length) {
+ %>
+ <h2>Packages Starred by <%= showprofile.name %></h2>
+ <ul>
+ <%
+ var l = starred.length;
+ var max = 20;
+ if (l > max) {
+ // get a random assortment each time.
+ starred = starred.sort(function (a, b) {
+ return Math.random() * 2 - 1
+ }).slice(0, max)
+ starred.push({
+ url: '/browse/userstar/' + showprofile.name,
+ name: 'and ' + (l-max) + ' more',
+ description: ''
+ })
+ }
+ starred.forEach(function (d, i) {
+ %><li><a href="<%= d.url %>"><%= d.name %></a>
+ <%= d.description %></li><%
})
+ %></ul><%
}
- starred.forEach(function (d, i) {
- %><li><a href="<%= d.url %>"><%= d.name %></a>
- <%= d.description %></li><%
- })
- %></ul><%
-}
-%>
+ %>
-<% if (profile) {
+ <% if (profile) {
+ %>
+ <a href='/logout/?done=/profile/<%= showprofile.name %>'>log out</a>
+ <%
+ }
%>
- <a href='/logout/?done=/profile/<%= showprofile.name %>'>log out</a>
- <%
-}
-%>
+</div>
+
<%- include('footer.ejs', locals) %>
Something went wrong with that request. Please try again.