This commit is contained in:
Paul Osman 2010-12-31 23:51:35 -05:00
Родитель 632281af2f a0b564379a
Коммит 8f21f34844
8 изменённых файлов: 107 добавлений и 45 удалений

Просмотреть файл

@ -685,29 +685,34 @@ header {}
}
#project_gallery{}
#project_gallery h1{
#user_list{}
/* generalized layout of card lists, by using a '.card-list' class on the body of project_gallery and user_list */
.card-list h1{
font-weight: normal;
margin-bottom: 32px;
}
#project_gallery section{
border-top: 1px solid #bebebe;
.card-list section{
border-top: 1px solid #bebebe;
padding-bottom: 72px;
}
#project_gallery section h1{
.card-list section > h1{
text-align: center;
margin-top: -0.65em;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
#project_gallery section h1 span{
.card-list section h1 span{
background: #F3F4F6;
-webkit-box-shadow: 0 0 5px #f7f7f7 ;
padding: 0 6px;
}
#project_gallery .project-list{
.card-list .project-list,
.card-list .user-list{
list-style: none;
margin: 0; padding: 0;
}
#project_gallery .project-list li{
.card-list .project-list li,
.card-list .user-list li{
display: inline-block;
width: 215px;
vertical-align: top;
@ -726,10 +731,11 @@ header {}
-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2);
behavior: url("/media/css/PIE.htc");
}
#project_gallery .project-list li:nth-child(4n){
.card-list .project-list li:nth-child(4n),
.card-list .user-list li:nth-child(4n){
margin-right: 0;
}
#project_gallery .project-list li .project.card{
.card-list .card{
padding: 8px;
border: 1px solid #525252;
border-radius: 3px;
@ -738,7 +744,7 @@ header {}
-webkit-border-radius:3px;
background: #fff;
}
#project_gallery .project-list li .project.card img{
.card-list .card img{
margin-bottom: 0.5em;
box-shadow: white 1px 1px 1px;
-moz-box-shadow: white 1px 1px 1px;
@ -750,21 +756,35 @@ header {}
-webkit-border-radius: 5px;
behavior: url("/media/css/PIE.htc");
}
#project_gallery .project-list li .project.card h3{
.card-list .project.card h1{
margin: 0 0 0.5em;
font-size: 14px;
line-height: 18px;
font-weight: bold;
}
.card-list .user.card img{
float: left;
vertical-align: middle;
}
.card-list .user.card h1{
margin: 18px 0 9px 65px;
font-size: 18px;
font-weight: bold;
min-height: 38px;
}
/* TODO: set a charachter maximum for project.description that works
* with this layout at /project/list/ */
#project_gallery .project-list li .project.card .description{
.card-list .card .description{
font-size: 12px;
line-height: 1.5;
height: 7.5em;
overflow: hidden;
text-overflow: ellipsis;
}
#project_gallery .project-list li .project.card .meta{
.card-list .user.card .description {
height: 6em;
}
.card-list .card .meta{
background: #f4f4f4;
padding: 8px;
margin: 1em -8px -8px;
@ -777,22 +797,22 @@ header {}
-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,1);
}
#project_gallery .project-list li .project.card dl{
.card-list .card dl{
display: inline-block;
width: 32%;
}
#project_gallery .project-list li .project.card dd,
#project_gallery .project-list li .project.card dt{
.card-list .card dd,
.card-list .card dt{
font-size: 11px;
line-height: 14px;
text-shadow: 1px 1px #fff;
-moz-text-shadow: 1px 1px #fff;
-webkit-text-shadow: 1px 1px #fff;
}
#project_gallery .project-list li .project.card dd{
.card-list .card dd{
font-weight:bold;
}
#project_gallery .project-list li .project.card dt{
.card-list .card dt{
color: #919191;
}
@ -811,7 +831,7 @@ header {}
-o-border-radius: 6px;
-webkit-border-radius: 6px;
min-height: 56px;
margin: 0 0 20px;
margin: 0 0 9px;
border: 1px solid #c6c6c6;
border-bottom: 2px solid #c6c6c6;
padding: 8px;

Просмотреть файл

@ -1,5 +1,6 @@
<footer>
<div class="container">
<!-- TODO: wire up this form -->
<form id="newsletter" action="#" method="post">
<input type="email" placeholder="Sign up for our newsletter!" value=""/>
<button type="submit" value="Go">Go</button>
@ -18,6 +19,7 @@
</nav>
</div>
<div id="legal" class="container">
<!-- TODO: is there a more specific license we should be linking to in the footer? Right now just linking to creativecommons.org/ root -->
<p>Portions of this content are &copy; 2010 by individual drumbeat.org contributors. Content available under a <a href="http://creativecommons.org/" title="Creative Commons">Creative Commons license</a>.</p>
</div>
</footer>

Просмотреть файл

@ -11,16 +11,19 @@
</div>
<header id="intro">
<div class="container">
<h1>Open collaboration<br>
for an open Web
</h1>
<h2>Drumbeat provides tools to empower everybody to create, discover, and collaborate on projects that promote and grow the open web.</h2>
<hgroup>
<h1>Open collaboration<br>
for an open Web
</h1>
<h2>Drumbeat provides tools to empower everybody to create, discover, and collaborate on projects that promote and grow the open web.</h2>
</hgroup>
<img src="{{ MEDIA_URL }}/images/drumbeat-logo-splash.png" width="300" height="282" alt="Drumbeat Logo"/>
</div>
</header> <!-- /#intro -->
<section id="calls">
<ul class="buttons container">
<li><a class="button submit" href="{% locale_url users_register %}">Sign Up</a></li>
<!-- TODO: create About page, link to it here. -->
<li><a class="button" href="#About">Learn More</a></li>
<li><a class="button" href="https://donate.mozilla.org/page/contribute/openwebfund">Donate</a></li>
</ul>
@ -36,8 +39,12 @@
<asside>
<section id="featured_project">
<h1>Featured Project</h1>
<!-- TODO: Re-use /projects/_project_card.html here with featured project -->
<!-- TODO: Re-use /projects/_project_card.html here with featured project. Note the 'with' statement can be considered psudo-code if the view wants to just pass 'project' that is fine -->
{# {% with featured_project as project %} #}
{# {% include "projects/_project_card.html" %} #}
{# {% endwith %} #}
</section>
<!-- TODO: add live rss feed -->
<section id="planet_drumbeat">
<h1>Planet Drumbeat <a href="#rssfeed" title="Subscribe to the Planet Drumbeat rss feed">rss feed</a></h1>
<article>

Просмотреть файл

@ -1,15 +1,17 @@
{% load l10n_tags %}
<div class="project card">
<article class="project card">
<figure>
<!-- TODO: add support for project images. -->
<!-- TODO: add a default image for projects -->
{% if project.image %}
<img src="" width="195" height="120" alt="project image"/>
{% else %}
<img src="/media/images/project-missing.png" width="197" height="120" alt="project image"/>
{% endif %}
<a href="{% locale_url projects_show slug=project.slug %}">
<!-- TODO: add support for project images. -->
<!-- TODO: add a default image for projects -->
{% if project.image %}
<img src="" width="195" height="120" alt="project image"/>
{% else %}
<img src="/media/images/project-missing.png" width="197" height="120" alt="project image"/>
{% endif %}
</a>
</figure>
<h3><a href="{% locale_url projects_show slug=project.slug %}">{{ project.name }}</a></h3>
<h1><a href="{% locale_url projects_show slug=project.slug %}">{{ project.name }}</a></h1>
<!--
! TODO: set a character maximum for project.description that works
! with this layout. See also /media/css/batucada.css line ~485
@ -29,4 +31,4 @@
<dt>{{ _('Created') }}</dt>
</dl>
</div>
</div>
</article>

Просмотреть файл

@ -2,6 +2,7 @@
{% load l10n_tags %}
{% block title %}{{ _('Projects') }}{% endblock %}
{% block bodyid %}project_gallery{% endblock %}
{% block bodyclasses %}card-list{% endblock %}
{% block breadcrumbs %}
<div class="container">
<nav>
@ -50,4 +51,5 @@
</ul>
</section>
{% endif %}
{% include "_footer.html" %}
{% endblock %}

Просмотреть файл

@ -0,0 +1,24 @@
{% load l10n_tags %}
<article class="user vcard card">
<figure>
<a href="{{ person.get_absolute_url }}">
<img class="member-picture" src="{{ MEDIA_URL }}{{ person.image_or_default }}" height="54" width="54">
</a>
</figure>
<h1 class="fn"><a href="{{ person.get_absolute_url }}">{{ person.name }}</a></h1>
<div class="description">{{person.bio}}</div>
<div class="meta">
<dl class="followers">
<dd>{{person.followers|length}}</dd>
<dt>{{ _('Followers') }}</dt>
</dl>
<dl class="following">
<dd>{{ person.following|length }}</dd>
<dt>{{ _('Following') }}</dt>
</dl>
<dl class="updates">
<dd>{{ person.status_set.count }}</dd>
<dt>{{ _('Updates') }}</dt>
</dl>
</div>
</article>

Просмотреть файл

@ -12,9 +12,9 @@
{% block breadcrumbs %}
<div class="container">
<nav>
<a href="{% locale_url users_user_list %}">{{ _('Users') }}</a>
<a href="{% locale_url users_user_list %}">{{ _('People') }}</a>
<span class="arrow">&rsaquo;</span>
<span>All Users</span>
<span>All</span>
<span class="arrow">&rsaquo;</span>
<a href="{{ profile.get_absolute_url }}">{{ profile.username }}</a>
</nav>

Просмотреть файл

@ -2,8 +2,9 @@
{% load l10n_tags %}
{% block title %}Users{% endblock %}
{% block title %}{{ _('People') }}{% endblock %}
{% block bodyid %}user_list{% endblock %}
{% block bodyclasses %}card-list{% endblock %}
{% block breadcrumbs %}
<div class="container">
<nav>
@ -14,30 +15,34 @@
{% block body %}
<h1>{{ _('Browse <b>People</b>') }}</h1>
{% if featured %}
<section>
<h1><span>{{ _('Featured') }}</span></h1>
<ul class="user-list">
{% for person in featured %}
<li><a href="{{ person.get_absolute_url }}">{{ person.name }}</a> &ndash; {{ person.followers|length }} &ndash; {{ person.status_set.count }} </li>
<li>{% include "users/_user_card.html" %}</li>
{% endfor %}
</ul>
</section>
<section>
<h1><span>{{ _('Popular') }}</span></h1>
{% endif %}
{% if popular %}
<section>
<h1><span>{{ _('Popular this Week') }}</span></h1>
<ul class="user-list">
{% if popular %}
{% for person in popular %}
<li><a href="{{ person.get_absolute_url }}">{{ person.name }}</a> &ndash; {{ person.followers|length }} &ndash; {{ person.status_set.count }} </li>
<li>{% include "users/_user_card.html" %}</li>
{% endfor %}
{% endif %}
</ul>
</section>
{% endif %}
<section>
<h1><span>{{ _('Newest Users') }}</span></h1>
<h1><span>{{ _('New People') }}</span></h1>
<ul class="user-list">
{% for person in new %}
<li><a href="{{ person.get_absolute_url }}">{{ person.name }}</a> &ndash; {{ person.followers|length }} &ndash; {{ person.status_set.count }} </li>
<li>{% include "users/_user_card.html" %}</li>
{% endfor %}
</ul>
</section>
{% include "_footer.html" %}
{% endblock %}