Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

First pass at badge improvements

  • Loading branch information...
commit 03ad9a619132637800a6710394b187f5aa0274cb 1 parent 20eed50
@darkwing darkwing authored
Showing with 459 additions and 334 deletions.
  1. +1 −8 apps/devmo/templates/devmo/profile.html
  2. +1 −1  media/css/demos.css
  3. +0 −7 media/css/jqueryui/moz-jquery-plugins.css
  4. +28 −4 media/redesign/js/badges.js
  5. +1 −1  media/redesign/js/components.js
  6. +273 −72 media/redesign/stylus/badges.styl
  7. +1 −1  media/redesign/stylus/components.styl
  8. +19 −0 media/redesign/stylus/jquery-ui-customizations.styl
  9. +1 −1  scripts/compile-stylesheets
  10. +1 −0  settings.py
  11. +17 −20 templates/badger/award_delete.html
  12. +23 −69 templates/badger/award_detail.html
  13. +1 −5 templates/badger/awards_by_badge.html
  14. +1 −5 templates/badger/awards_by_user.html
  15. +6 −9 templates/badger/awards_list.html
  16. +26 −75 templates/badger/badge_detail.html
  17. +7 −7 templates/badger/badges_list.html
  18. +0 −8 templates/badger/base.html
  19. +24 −20 templates/badger/includes/award_full.html
  20. +9 −6 templates/badger/includes/awards_as_badges_list.html
  21. +1 −1  templates/badger/includes/awards_list.html
  22. +1 −1  templates/badger/includes/badges_list.html
  23. +1 −1  templates/badger/includes/macros.html
  24. +15 −11 templates/badger/includes/recent_badge_awards.html
  25. +1 −1  templates/base.html
View
9 apps/devmo/templates/devmo/profile.html
@@ -115,14 +115,7 @@ <h1 class="page-title"><span class="nickname">{{ profile.user.username }}</span>
{% if waffle.flag('badger') and award_list %}
<section id="profile-badges" class="profile-section">
- <header>
- <h2 class="count">{{_("Recent Badge Awards")}}
- <small>(
- <a href="{{ url('badger.views.awards_by_user', profile.user.username) }}">{{ _("More...") }}</a>
- <a href="{{ url('badger.feeds.awards_by_user', 'atom', profile.user.username) }}"><img src="{{MEDIA_URL}}/img/feed-icon-14x14.png" /></a>
- )</small>
- </h2>
- </header>
+ <h2>{{_("Recent Badge Awards")}}</h2>
{% include "badger/includes/awards_as_badges_list.html" %}
</section>
{% endif %}
View
2  media/css/demos.css
@@ -368,7 +368,7 @@
/* @Gallery @Head *********/
.gallery-head { clear: both; position: relative; z-index: 11; }
.gallery-head:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
-.gallery-head .count { font-size: 1.428em; float: left; }
+.gallery-head .count { float: left; }
.gallery-head .count .button { font-size: .636em; margin-left: 15px; position: relative; top: -2px; }
.gallery-head .sort { float: right; font-size: .786em; margin: .5em 0 0; }
.gallery-head .sort li { display: inline; padding: 0; margin: 0 0 0 20px; background: none; }
View
7 media/css/jqueryui/moz-jquery-plugins.css
@@ -19,11 +19,4 @@
background-image: url(images/mozAutocompleteSpinner.gif) !important;
background-position: 97% 5px !important;
background-repeat: no-repeat !important;
-}
-
-/* dialog updates */
-.ui-dialog-titlebar {
- background: none !important;
- background-color: #000 !important;
- border-color: #999;
}
View
32 media/redesign/js/badges.js
@@ -1,8 +1,32 @@
(function ($) {
- $('#recent_badge_awards .close').on('click', function() {
- $('#recent_badge_awards').hide();
- });
+ // Show the dialog immediately if the new badge is present!
+ (function() {
+ var $badgesTray = $('#badges-tray');
+ var showFn = function() {
+ $badgesTray.removeClass('show');
+ };
+ var timeout;
+ var delay = 5000;
+
+ if($badgesTray.length) {
+ $badgesTray.addClass('show');
+ timeout = setTimeout(showFn, delay);
+ }
+
+ $badgesTray
+ .on('mouseenter', function() {
+ clearTimeout(timeout);
+ })
+ .on('mouseleave', function() {
+ setTimeout(showFn, delay / 2);
+ })
+ .on('transitionend webkitTransitionEnd', function(a, b, c) {
+ if(!parseInt($badgesTray.css('opacity'), 10)) {
+ $badgesTray.addClass('hidden');
+ }
+ });
+ })();
$('form.obi_issuer button.issue').on('click', function() {
// Grab the hosted assertion URL from the header link.
@@ -22,4 +46,4 @@
return false;
});
-})(jQuery);
+})(jQuery);
View
2  media/redesign/js/components.js
@@ -294,4 +294,4 @@
});
};
-})(jQuery);
+})(jQuery);
View
345 media/redesign/stylus/badges.styl
@@ -1,79 +1,280 @@
-.cf:before, .cf:after { content: ""; display: table; }
-.cf:after { clear: both; }
-.cf { zoom: 1; }
-
-ul.badges li { border-radius: 8px 8px 8px 8px; border: 1px solid #EEEEEE; list-style: none outside none; margin: 0pt 0.75em 0.75em 0pt; padding: 0pt; }
-ul.badges li img { border-radius: 8px 8px 8px 8px; display: block; }
-
-/* HACK: Undo what bootstrap does */
-.badge, .badge:hover { padding: 0; font-size: inherit; font-weight: inherit; color: inherit; background-color: transparent; border-radius: inherit; cursor: default; white-space: inherit }
-
-li.badge { display: block; float: left; position: relative; }
-li.badge a.image { display: block; }
-li.badge a.label { background: #222222; border-radius: 0pt 0pt 8px 8px; bottom: 0pt; color: #FFFFFF; display: block; opacity: 0.85; padding: 0.25em 0pt; position: absolute; text-align: center; white-space: normal; font-size: 0.85em; text-decoration: none; width: 128px; }
-li.badge a.label:before { content: "✸ "; font-size: 1.5em; }
-li.badge a.label .title { display: inline; color: #fff; font-weight: normal }
-li.badge span.badge_title, li.badge span.relation, li.badge span.user { display: block; padding: 2px; }
-
-ul.awards { margin: 0pt; padding: 0pt; }
-ul.awards li.award { border-radius: 8px 8px 8px 8px; border: 1px solid #DDDDDD; float: left; height: 128px; list-style: none outside none; margin: 0pt 0.75em 0.75em 0pt; position: relative; width: 256px; }
-ul.awards li.award img { border-radius: 8px 8px 8px 8px; }
-ul.awards li.award a.avatar_image { position: absolute; right: 0pt; }
-ul.awards li.award a.award_image { position: absolute; left: 0pt; }
-ul.awards li.award span.badge_title, li.award span.relation, li.award span.user { background: none repeat scroll 0pt 0pt #000000; border-radius: 8px 8px 8px 8px; font-size: 0.85em; color: #FFFFFF; display: block; opacity: 0.75; padding: 0.25em 0pt; position: absolute; text-align: center; text-decoration: none; z-index: 10; }
-
-ul.awards li.award span.badge_title { border-radius: 0pt 0pt 8px 8px; bottom: 0pt; left: 0pt; width: 128px; white-space: normal }
-
-ul.awards li.award span.badge_title:before { content: "✸ "; font-size: 1.25em; }
-
-ul.awards li.award span.relation { border-radius: 8px 8px 8px 8px; top: 0.25em; left: 80px; opacity: 0.75; width: 96px; }
-
-ul.awards li.award span.relation:after { content: " ⇨"; font-size: 1.25em; }
-ul.awards li.award span.user { border-radius: 0pt 0pt 8px 8px; bottom: 0pt; right: 0pt; width: 128px; white-space: normal }
-ul.awards li.award span.user:before { content: "☺ "; font-size: 1.25em; }
-ul.awardees { margin: 0pt; padding: 0pt; }
-
-ul.awardees li.awardee {
- float: left;
- height: 128px;
- list-style: none outside none;
- margin: 0pt 0.75em 0.75em 0pt;
- position: relative;
- width: 128px;
+@import 'vars';
+@import 'mixins';
+
+.badges {
+ li {
+ border-radius: 8px;
+ border: 1px solid #ddd;
+ padding: 0;
+ display: inline-block;
+ position: relative;
+
+ .badge_title, .relation, .user {
+ display: block;
+ padding: 2px;
+ }
+
+ .image {
+ display: block;
+ }
+
+ .label {
+ background: #222;
+ border-radius: 0 0 8px 8px;
+ bottom: 0;
+ color: #fff;
+ display: block;
+ opacity: 0.85;
+ padding: 4px 0;
+ position: absolute;
+ text-align: center;
+ white-space: normal;
+ text-decoration: none;
+ width: 128px;
+ font-size: smaller-font-size;
+
+ &:before {
+ content: '✸ ';
+ }
+
+ .title {
+ display: inline;
+ color: #fff;
+ font-weight: normal;
+ }
+ }
+
+ img {
+ border-radius: 8px;
+ display: block;
+ }
+ }
+}
+
+
+.awards {
+ li {
+ border-radius: 8px;
+ border: 1px solid #ddd;
+ height: 128px;
+ position: relative;
+ width: 256px;
+ display: inline-block;
+
+ img {
+ border-radius: 8px;
+ }
+
+ .avatar_image {
+ position: absolute;
+ right: 0;
+ }
+
+ .award_image {
+ position: absolute;
+ left: 0;
+ }
+
+ .badge_title, .relation, .user {
+ background: #000;
+ border-radius: 8px;
+ color: #fff;
+ display: block;
+ opacity: 0.75;
+ padding: 4px;
+ position: absolute;
+ text-align: center;
+ text-decoration: none;
+ z-index: 10;
+ }
+
+ .badge_title {
+ border-radius: 0 0 8px 8px;
+ bottom: 0;
+ left: 0;
+ width: 128px;
+ white-space: normal;
+
+ &:before {
+ content: '✸ ';
+ }
+ }
+
+ .relation {
+ border-radius: 8px;
+ left: 80px;
+ opacity: 0.75;
+ width: 96px;
+
+ &:after {
+ content: ' ⇨';
+ }
+ }
+
+ .user {
+ border-radius: 0 0 8px 8px;
+ bottom: 0;
+ right: 0;
+ width: 128px;
+ white-space: normal;
+
+ &:before {
+ content: '☺ ';
+ }
+ }
+ }
+}
+
+.awardees {
+ margin: 0;
+ padding: 0;
+
+ .awardee {
+ display: inline-block;
+ height: 128px;
+ list-style: none outside none;
+ position: relative;
+ width: 128px;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+
+ .avatar_image img {
+ border-radius: 8px;
+ }
+
+ .user {
+ white-space: normal;
+ }
+
+ .label {
+ background: none repeat scroll 0 0 #000000;
+ border-radius: 0 0 8px 8px;
+ bottom: 0;
+ color: #FFFFFF;
+ left: 0;
+ opacity: 0.8;
+ position: absolute;
+ text-align: center;
+ text-decoration: none;
+ width: 128px;
+ z-index: 10;
+
+ &:before {
+ content: '☺ ';
+ }
+ }
+ }
+}
+
+dl.badge a.image img, dl.profile img.avatar {
+ border-radius: 8px;
}
-ul.awardees li.awardee .avatar_image img { border-radius: 8px 8px 8px 8px; }
-ul.awardees li.awardee a.label span.user { white-space: normal; }
-
-ul.awardees li.awardee .label {
- font-size: 0.85em;
- background: none repeat scroll 0pt 0pt #000000;
- border-radius: 0pt 0pt 8px 8px;
- bottom: 0pt;
- color: #FFFFFF;
- left: 0pt;
- opacity: 0.8;
- padding: 0.25em 0pt;
- position: absolute;
- text-align: center;
- text-decoration: none;
- width: 128px;
- z-index: 10;
+dl.badge img.avatar, dl.award img.avatar, dl.nomination img.avatar {
+ width: 64px;
+ height: 64px;
+ border-radius: 4px;
+ padding: 0;
+ vertical-align: text-top;
+ display: block;
+}
+
+dl.award dd.awarded_to img.avatar {
+ width: 160px;
+ height: 160px;
+}
+
+#recent_badge_awards {
+ display: none;
}
-ul.awardees li.awardee .label:before { content: "☺ "; font-size: 1.25em; }
+input[type="submit"].delete-badge {
+ margin: 0 auto;
+ display: inherit;
+}
+
+
+/* notifications display */
+#badges-tray {
+ vendorize(transition-property, opacity);
+ vendorize(transition-duration, 1s);
+ width: 300px;
+ position: fixed;
+ top: (grid-spacing / 2);
+ right: (grid-spacing / 2);
+ z-index: 9999;
+ opacity: 0;
+
+ &.show {
+ opacity: 1;
+ }
+
+ li {
+ margin-bottom: (grid-spacing / 2);
+ width: 100%;
+ }
+
+ .badge-notify {
+ color: text-color;
+ text-transform: uppercase;
+ }
+
+ .badge-text {
+ font-weight: bold;
+ font-size: 18px;
+ line-height: 20px;
+ }
+}
+
+/* general badge list display */
+.badge-list {
+
+ li {
+ margin: 0 (grid-spacing / 2) (grid-spacing / 2) 0;
+ width: 300px;
+ display: inline-block;
+ vertical-align: text-top;
+ }
+
+ img {
+ width: 60px;
+ float: left;
+ margin: 0 (grid-spacing / 2) 0 0;
+ }
+
+ a {
+ overflow: auto;
+ display: block;
+ padding: (grid-spacing / 2);
+ background: #f4f7f8;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+
+ &:hover {
+ border: 1px solid #ccc;
+ text-decoration: none;
+ }
+ }
+
+ span {
+ display: block;
+ }
-dl.badge a.image img, dl.profile img.avatar { border-radius: 8px; }
+ .badge-notify {
+ font-weight: bold;
+ font-size: smaller-font-size;
+ text-transform: uppercase;
+ }
-dl.badge img.avatar, dl.award img.avatar, dl.nomination img.avatar { width: 64px; height: 64px; border-radius: 4px; margin: 0.5em 0.5em 0 0; padding: 0; vertical-align: text-top; display: block }
-dl.award dd.awarded_to a { }
-dl.award dd.awarded_to img.avatar { width: 160px; height: 160px; }
+ .badge-text {
+ line-height: 18px;
+ }
-#recent_badge_awards { position: absolute; left: 25%; width: 50%; z-index: 100; opacity: 0.9; background: #000; color: #fff; text-align: center; }
-#recent_badge_awards .inner { position: relative; }
-#recent_badge_awards h2 { width: 100%; margin: 1em;}
-#recent_badge_awards .close { position: absolute; padding: 0; margin: 0; top: 0em; right: 0em; font-size: 2em; }
-#recent_badge_awards .badges { padding: 0.5em; }
-#recent_badge_awards .badges .badge { float: left; margin: 0.125em; }
-#recent_badge_awards .badges .badge .image { display: block; }
-#recent_badge_awards .more { clear: both; }
+ .badge-headline {
+ font-weight: bold;
+ color: text-color;
+ font-size: 18px;
+ font-weight: bold;
+ line-height: 22px;
+ }
+}
View
2  media/redesign/stylus/components.styl
@@ -181,4 +181,4 @@ component-submenu-method(menu-width, num-columns, background-color, arrow-border
}
}
}
-}
+}
View
19 media/redesign/stylus/jquery-ui-customizations.styl
@@ -0,0 +1,19 @@
+@import 'vars'
+
+.ui-dialog {
+ .ui-widget-content {
+ background: #fff;
+ color: text-color;
+ }
+
+ .ui-dialog-titlebar.ui-widget-header {
+ background: #eaeff2;
+ border: 0;
+ }
+
+ .ui-dialog-titlebar-close {
+ background: #0095dd;
+ border: 0;
+ box-shadow: none;
+ }
+}
View
2  scripts/compile-stylesheets
@@ -15,7 +15,7 @@ if [ ! -d "$CSSDIR" ]; then
mkdir $CSSDIR
fi
-FILENAMES=(main wiki demo-studio profile search zones home wiki-syntax users error error-404 promote sphinx dashboards diff calendar newsletter badges wiki-editor)
+FILENAMES=(main wiki demo-studio profile search zones home wiki-syntax users error error-404 promote sphinx dashboards diff calendar newsletter badges jquery-ui-customizations wiki-editor)
STYLESHEETS=$(printf "$STYLUSDIR/%s.styl " "${FILENAMES[@]}")
if [ $WATCH ]; then
echo Watching and automatically compiling stylesheets
View
1  settings.py
@@ -555,6 +555,7 @@ def JINJA_CONFIG():
'jquery-ui': (
'js/libs/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.min.css',
'css/jqueryui/moz-jquery-plugins.css',
+ 'redesign/css/jquery-ui-customizations.css',
),
'demostudio': (
'css/demos.css',
View
37 templates/badger/award_delete.html
@@ -1,4 +1,5 @@
{% extends "badger/base.html" %}
+{% import "badger/includes/macros.html" as macros %}
{% set user = award.user %}
{% set award_url = request.build_absolute_uri(url('badger.views.award_detail', award.badge.slug, award.id)) %}
@@ -13,30 +14,26 @@
{% block pageid %}award_delete{% endblock %}
-{% block intro %}
- {{ _('Badges:') }}
- <b>{{ _("Delete Award") }}</b>
-{% endblock %}
-
{% block subcontent %}
-<section class="row-fluid">
-
- <section class="badge span4">
- {% include "badger/includes/badge_full.html" %}
- </section>
- <section class="award span8">
+<h1>{{ _('Badges: Delete Award') }}</h1>
+<div class="column-container">
+ <div class="column-strip">
+ <a href="{{ badge.get_absolute_url() }}" class="image">{{ macros.badge_image(badge, MEDIA_URL, 256) }}</a>
<form id="delete_award" method="POST" action="" enctype="multipart/form-data">
{{ csrf() }}
- <p><strong>{{ _("Delete this award, are you sure?") }}</strong></p>
- <ul>
- <li><input type="submit" class="btn btn-large btn-danger submit" value="{{ _("Yes, delete award") }}"></li>
- </ul>
+ <input type="submit" class="button negative delete-badge" value="{{ _("Delete this award") }}">
</form>
-
- {% include "badger/includes/award_full.html" %}
- </section>
-
-</section>
+ </div>
+ <div class="column-main">
+ {% if badge.description %}
+ <p>{{ badge.description }}</p>
+ {% endif %}
+
+ <section class="award span8">
+ {% include "badger/includes/award_full.html" %}
+ </section>
+ </div>
+</div>
{% endblock %}
View
92 templates/badger/award_detail.html
@@ -1,4 +1,5 @@
{% extends "badger/base.html" %}
+{% import "badger/includes/macros.html" as macros %}
{% set user = award.user %}
{% set award_url = request.build_absolute_uri(url('badger.views.award_detail', award.badge.slug, award.id)) %}
@@ -35,83 +36,36 @@
{% endblock %}
{% block intro %}
- {{ _('Badge award:') }} <b>{{ badge.title }}</b>
+
{% endblock %}
{% block subcontent %}
-<section class="row-fluid">
- <section class="badge span4">
- {% include "badger/includes/badge_full.html" %}
- </section>
-
- <section class="award span8">
- {% include "badger/includes/award_full.html" %}
- <dl class="share">
- <dt>{{ _('Share:') }}</dt>
- <dd><ul>
-
- {% if award.user == request.user %}
- <li><form class="obi_issuer">
- <button class="btn issue" style="width: 18em"><img class="obi_icons" width="32" style="margin: 0 0em 0em 0; float: left" src="http://openbadges.org/wp-content/themes/openbadges2/media/images/content-background.png" />
- <strong>{{_("Add this to your Mozilla&nbsp;Badge&nbsp;Backpack") | safe}}</strong></button>
- </form></li>
- {% endif %}
-
- {% if award.user == request.user %}
- <li><a href="https://twitter.com/share" class="twitter-share-button"
- data-text="I earned the badge &quot;{{ badge.title }}&quot; on {{ settings.SITE_TITLE }}!"
- data-size="large"
- data-url="{{ award_url }}" data-hashtags="badgus">...</a></li>
- {% else %}
- <li><a href="https://twitter.com/share" class="twitter-share-button"
- data-text="{{ award.user }} earned the badge &quot;{{ badge.title }}&quot; on {{ settings.SITE_TITLE }}!"
- data-size="large"
- data-url="{{ award_url }}" data-hashtags="badgus">...</a></li>
- {% endif %}
-
- <li><div class="g-plus" data-href="{{ award_url }}" data-action="share"
- data-annotation="bubble" data-height="24"></div></li>
-
- <li><div class="fb-like" data-href="{{ award_url }}" data-send="true"
- data-width="450" data-show-faces="false"></div></li>
-
- </ul></dd>
- </dl>
- </section>
-
-</section>
-
-<div id="fb-root"></div>
-<script>
- window.fbAsyncInit = function() {
- FB.init({
- appId : '235454449896211', // App ID
- channelUrl : '{{ request.build_absolute_uri('/media/fb-channel.html') }}', // Channel File
- status : true, // check login status
- cookie : true, // enable cookies to allow the server to access the session
- xfbml : true // parse XFBML
- });
- // Additional initialization code here
- };
-
- // Load the SDK Asynchronously
- (function(d){
- var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
- if (d.getElementById(id)) {return;}
- js = d.createElement('script'); js.id = id; js.async = true;
- js.src = "//connect.facebook.net/en_US/all.js";
- ref.parentNode.insertBefore(js, ref);
- }(document));
-</script>
+<h1>{{ _('Badge award:') }} {{ badge.title }}</h1>
+<div class="column-container">
+ <div class="column-strip">
+ <a href="{{ badge.get_absolute_url() }}" class="image">{{ macros.badge_image(badge, MEDIA_URL, 256) }}</a>
+ {% if award.user == request.user %}
+ <form class="obi_issuer">
+ <button class="btn issue"><img class="obi_icons" width="32" style="margin: 0 0em 0em 0; float: left" src="http://openbadges.org/wp-content/themes/openbadges2/media/images/content-background.png" />
+ <strong>{{_("Add this to your Mozilla&nbsp;Badge&nbsp;Backpack") | safe}}</strong></button>
+ </form>
+ {% endif %}
+ </div>
+ <div class="column-main">
+ {% if badge.description %}
+ <p>{{ badge.description }}</p>
+ {% endif %}
+
+ <section class="award span8">
+ {% include "badger/includes/award_full.html" %}
+ </section>
+ </div>
+</div>
{% endblock %}
{% block js %}
<script type="text/javascript"
src="{{ settings.OBI_BASE_URL }}issuer.js"></script>
- <script type="text/javascript"
- src="//platform.twitter.com/widgets.js"></script>
- <script type="text/javascript"
- src="https://apis.google.com/js/plusone.js"></script>
{% endblock %}
View
6 templates/badger/awards_by_badge.html
@@ -8,12 +8,8 @@
href="{{ url('badger.feeds.awards_by_badge', 'atom', badge.slug) }}" />
{% endblock %}
-{% block intro %}
- {{ _('Badges:') }}
- <b>{{ _("Awards for {title}") | f(title=badge.title) }}</b>
-{% endblock %}
-
{% block subcontent %}
+<h1>{{ _('Badges:') }} {{ _("Awards for {title}") | f(title=badge.title) }}</h1>
<section class="row-fluid">
<section>
{% include "badger/includes/badge_full.html" %}
View
6 templates/badger/awards_by_user.html
@@ -8,12 +8,8 @@
href="{{ url('badger.feeds.awards_by_user', 'atom', user.username) }}" />
{% endblock %}
-{% block intro %}
- {{ _('Badges:') }}
- <b>{{ _("Awards for {user}") | f(user=user) }}</b>
-{% endblock %}
-
{% block subcontent %}
+<h1>{{ _("Awards for {user}") | f(user=user) }}</h1>
<section class="awards_list">
{% include "badger/includes/awards_as_badges_list.html" %}
</section>
View
15 templates/badger/awards_list.html
@@ -8,17 +8,14 @@
href="{{ url('badger.feeds.awards_recent', 'atom') }}" />
{% endblock %}
-{% block intro %}
- {{ _('Badges:') }}
- {% if badge %}
- <b>{{ _("Awards for {badge}") | f(badge=badge) }}</b>
- {% else: %}
- <b>{{ _("All awards") }}</b>
- {% endif %}
-{% endblock %}
-
{% block subcontent %}
<section class="awards_list" class="item_flow">
+ <h1>{{ _('Badges:') }}
+ {% if badge %}
+ {{ _("Awards for {badge}") | f(badge=badge) }}
+ {% else %}
+ {{ _("All awards") }}
+ {% endif %}</h1>
{% include "badger/includes/awards_list.html" %}
</section>
{% endblock %}
View
101 templates/badger/badge_detail.html
@@ -28,34 +28,38 @@
{% endfor %}
{% endblock %}
-{% block intro %}
- {{ _('Badge:') }}
- <b class="badge-title">{{ badge.title }}</b>
-{% endblock %}
-
{% block subcontent %}
-<section class="row-fluid">
- <section class="span4" id="detail">
- <header class="page-header">
- </header>
- {% include "badger/includes/badge_full.html" %}
- </section>
+<h1>{{ _('Badge: ') }} {{ badge.title }}</h1>
+<div class="column-container">
+ <div class="column-strip">
+ <a href="{{ badge.get_absolute_url() }}" class="image">{{ macros.badge_image(badge, MEDIA_URL, 256) }}</a>
+ </div>
+ <div class="column-main">
+ {% if badge.description %}
+ <p>{{ badge.description }}</p>
+ {% endif %}
+
+ {% if badge.tags and badge.tags.count() %}
+ <ul class="tags">
+ {% for tag in badge.tags.all() %}
+ <li><a class="tag" href="{{ url('badger.badges_list', tag_name=tag.name) }}"><i class="icon-tag icon-white"></i> {{ tag.name }}</a></li>
+ {% endfor %}
+ </ul>
+ {% endif %}
- {% if award_list %}
- <section class="span4">
-
+ {% if award_list | length %}
<section id="recent_awardees" class="item_flow">
<header class="page-header">
- <h2>
- <span>{{ _("Recent awardees") }}</span>
+ <h3>
+ <span>{{ _('Recent awardees') }}</span>
<small>(
- <a href="{{ url('badger.views.awards_list', badge.slug) }}">{{ _("More...") }}</a>
+ <a href="{{ url('badger.views.awards_list', badge.slug) }}">{{ _('More...') }}</a>
<a href="{{ url('badger.feeds.awards_by_badge', 'atom', badge.slug) }}"><img src="{{MEDIA_URL}}/img/feed-icon-14x14.png" /></a>
)</small>
- </h2>
+ </h3>
</header>
- <ul class="awardees cf">
+ <ul class="awardees clear">
{% for award in award_list %}
<li class="awardee">
<a href="{{ award.user.get_absolute_url() }}" class="avatar_image"><img src="{{ user_avatar(award.user) }}"
@@ -66,61 +70,8 @@
{% endfor %}
</ul>
</section>
-
- </section>
- {% endif %}
-
- <section>
- {% if not award %}
- <dl class="share">
- <dt>{{ _('Share:') }}</dt>
- <dd><ul>
- <li><a href="https://twitter.com/share" class="twitter-share-button"
- data-text="&quot;{{ badge.title }}&quot; on {{ settings.SITE_TITLE }}!"
- data-size="large"
- data-url="{{ badge_url }}" data-hashtags="badgus">...</a></li>
-
- <li><div class="g-plus" data-href="{{ badge_url }}" data-action="share"
- data-annotation="bubble" data-height="24"></div></li>
-
- <li><div class="fb-like" data-href="{{ badge_url }}" data-send="true"
- data-width="450" data-show-faces="false"></div></li>
-
- </ul></dd>
- </dl>
{% endif %}
- </section>
-
-</section>
-
-<div id="fb-root"></div>
-<script>
- window.fbAsyncInit = function() {
- FB.init({
- appId : '235454449896211', // App ID
- channelUrl : '{{ request.build_absolute_uri('/media/fb-channel.html') }}', // Channel File
- status : true, // check login status
- cookie : true, // enable cookies to allow the server to access the session
- xfbml : true // parse XFBML
- });
- // Additional initialization code here
- };
+ </div>
+</div>
- // Load the SDK Asynchronously
- (function(d){
- var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
- if (d.getElementById(id)) {return;}
- js = d.createElement('script'); js.id = id; js.async = true;
- js.src = "//connect.facebook.net/en_US/all.js";
- ref.parentNode.insertBefore(js, ref);
- }(document));
-</script>
-
-{% endblock %}
-
-{% block js %}
- <script type="text/javascript"
- src="//platform.twitter.com/widgets.js"></script>
- <script type="text/javascript"
- src="https://apis.google.com/js/plusone.js"></script>
-{% endblock %}
+{% endblock %}
View
14 templates/badger/badges_list.html
@@ -2,18 +2,18 @@
{% block pageid %}badges{% endblock %}
-{% block intro %}
- {{ _('Badges:') }}
+{% block subcontent %}
+
+ <h1>
{% if tag_name %}
- <b>{% trans %}Badges tagged <a href="" class="tag"><i class="icon-tag icon-white"></i> {{tag_name}}</a>{% endtrans %}</b>
+ {% trans %}Badges tagged <a href="" class="tag">{{tag_name}}</a>{% endtrans %}
{% elif query_string %}
- <b>{{ _('Badges matching "{query_string}"') | f(query_string=query_string) }}</b>
+ {{ _('Badges matching "{query_string}"') | f(query_string=query_string) }}
{% else %}
- <b>{{ _("All badges") }}</b>
+ {{ _("All Badges") }}
{% endif %}
-{% endblock %}
+ </h1>
-{% block subcontent %}
{% include "badger/includes/badges_list.html" %}
{% if award_list %}
<h2>{{ _('Recent awards for these badges') }}</h2>
View
8 templates/badger/base.html
@@ -1,13 +1,5 @@
{% extends "base.html" %}
{% block content %}
-<header id="section-head">
-<div class="wrap">
- <h1 class="intro">{% block intro %}{{ _("Badger: <b>...</b>" | safe) }}{% endblock %}</h1>
-</div>
-</header>
-
-<section id="content">
{% block subcontent %}{% endblock %}
-</section>
{% endblock %}
View
44 templates/badger/includes/award_full.html
@@ -1,22 +1,26 @@
{% import 'badger/includes/macros.html' as macros %}
-<dl class="award">
- <dt>{{_("Awarded to:")}}</dt>
- <dd class="awarded_to">
- <a href="{{ award.user.get_absolute_url() }}" class="username"><img src="{{ user_avatar(award.user) }}" class="avatar" alt="{{ award.user }}" width="128" height="128" />{{ award.user }}</a>
- {% if request.user == award.user %}
- <strong>{{ _("(That's you!)") }}</strong>
- {% endif %}
- </dd>
- {% if award.creator %}
- <dt>{{_("Awarded by:")}}</dt>
- <dd class="awarded_by"><a href="{{ award.creator.get_absolute_url() }}"
+
+<div class="column-container">
+ <div class="column-half">
+ <h2>{{ _('Awarded to')}}</h2>
+ <p>
+ <a href="{{ award.user.get_absolute_url() }}" class="username"><img src="{{ user_avatar(award.user) }}" class="avatar" alt="{{ award.user }}" width="128" height="128" /><br />{{ award.user }}</a>
+ {% if request.user == award.user %}
+ <strong>{{ _("(That's you!)") }}</strong>
+ {% endif %}
+ </p>
+ </div>
+ <div class="column-half">
+ {% if award.creator %}
+ <h2>{{ _('Awarded by')}}</h2>
+ <p><a href="{{ award.creator.get_absolute_url() }}"
class="username"><img src="{{ user_avatar(award.creator) }}" class="avatar"
- alt="{{ award.creator }}" width="128" height="128" />{{ award.creator }}</a></dd>
- {% endif %}
- <dt>{{_("Awarded at:")}}</dt>
- <dd class="issued">{{ award.created }}</dd>
- {% if award.description %}
- <dt>{{_("Explanation:")}}</dt>
- <dd class="description">{{ award.description }}</dd>
- {% endif %}
-</dl>
+ alt="{{ award.creator }}" width="128" height="128" /><br />{{ award.creator }}</a></p>
+ {% endif %}
+ </div>
+</div>
+
+{% if award.description %}
+ <h3>Awarded for</h3>
+ <p>{{ award.description }}</p>
+{% endif %}
View
15 templates/badger/includes/awards_as_badges_list.html
@@ -1,10 +1,13 @@
{% import 'badger/includes/macros.html' as macros %}
-<ul class="badges cf">
+
+<ul class="badge-list">
{% for award in award_list %}
- <li class="badge">
- <a href="{{ award.get_absolute_url() }}" class="image">{{ macros.badge_image(award.badge, MEDIA_URL) }}</a>
- <a href="{{ award.get_absolute_url() }}" class="label"><span class="title">{{ award.badge.title }}</span></a>
- </li>
+ <li class="badge-item"><a href="{{ award.get_absolute_url() }}">
+ {{ macros.badge_image(award.badge, MEDIA_URL) }}
+ <span class="badge-headline">{{ award.badge.title }}</span>
+ <span class="badge-text">{{ award.badge.description }}</span>
+ </a></li>
{% endfor %}
</ul>
-{% include "badger/includes/pagination.html" %}
+
+{% include "badger/includes/pagination.html" %}
View
2  templates/badger/includes/awards_list.html
@@ -1,5 +1,5 @@
{% import 'badger/includes/macros.html' as macros %}
-<ul class="awards cf">
+<ul class="awards clear">
{% for award in award_list %}
<li class="award">
<a href="{{ award.get_absolute_url() }}" class="award_image">{{ macros.badge_image(badge, MEDIA_URL) }}</a>
View
2  templates/badger/includes/badges_list.html
@@ -1,5 +1,5 @@
{% import 'badger/includes/macros.html' as macros %}
-<ul class="badges cf">
+<ul class="badges clear">
{% for badge in badge_list %}
<li class="badge">
<a href="{{ badge.get_absolute_url() }}" class="image">{{ macros.badge_image(badge, MEDIA_URL) }}</a>
View
2  templates/badger/includes/macros.html
@@ -12,5 +12,5 @@
{%- endmacro -%}
{% macro badge_image(badge, MEDIA_URL, size=128) -%}
<img src="{{ badge_image_url(badge, MEDIA_URL) }}" alt="{{ badge.title }}"
- width="{{ size }}" height="{{ size }}" /></a>
+ width="{{ size }}" height="{{ size }}" />
{%- endmacro %}
View
26 templates/badger/includes/recent_badge_awards.html
@@ -1,15 +1,19 @@
+{% import 'badger/includes/macros.html' as macros %}
+
{% set recent_awards = request.recent_badge_awards.get_queryset() %}
+
{% if recent_awards %}
{% set award_ct = recent_awards | count %}
- <section id="recent_badge_awards"><div class="inner">
- <a class="close" href="#">X</a>
- <h2>{{ _("You've earned some new badges!") }}</h2>
+ <div id="badges-tray">
{% set award_list = recent_awards[:5] %}
- {% include "badger/includes/awards_as_badges_list.html" %}
- <div class="more">
- {% if award_ct > 5 %}
- <p><a href="{{ url('badger.views.awards_by_user', request.user.username) }}">And {{ award_ct - 5 }} more...</a></p>
- {% endif %}
- </div>
- </div></section>
-{% endif %}
+ <ul class="badge-list">
+ {% for award in award_list %}
+ <li class="badge-item"><a href="{{ award.get_absolute_url() }}">
+ {{ macros.badge_image(award.badge, MEDIA_URL) }}
+ <span class="badge-notify">{{ _("You've earned a badge!") }}</span>
+ <span class="badge-text">{{ award.badge.title }}</span>
+ </a></li>
+ {% endfor %}
+ </ul>
+ </div>
+{% endif %}
View
2  templates/base.html
@@ -185,4 +185,4 @@
{% block js %}{% endblock %}
</body>
-</html>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.