diff --git a/js/gratipay/jump.js b/js/gratipay/jump.js deleted file mode 100644 index 73ec2c78ba..0000000000 --- a/js/gratipay/jump.js +++ /dev/null @@ -1,10 +0,0 @@ -$(document).ready(function() { - $('.jump-box').submit(function (e) { - e.preventDefault(); - e.stopPropagation(); - - var platform = Gratipay.trim($('.jump-box select').val()), - val = Gratipay.trim($('.jump-box input').val()); - if (val) window.location = '/on/' + platform + '/' + val + '/'; - }); -}); diff --git a/scss/components/listing.scss b/scss/components/listing.scss new file mode 100644 index 0000000000..f40bb2f8c2 --- /dev/null +++ b/scss/components/listing.scss @@ -0,0 +1,121 @@ +table.listing { + width: 100%; + + tr:first-child td { border-top: 0; } + tr:last-child td { border-bottom: 0; } + + td.item { + position: relative; + color: $medium-gray; + border: 1px solid $light-brown; + border-style: solid none; + height: 64px; + padding-top: 35px; + + a { + color: $medium-gray; + position: relative; + z-index: 2; + } + a:hover { + background: none !important; + color: $green !important; + } + img { + width: 48px; + height: 48px; + position: absolute; + top: 8px; + left: 0; + } + .name { + display: block; + color: $black; + font: bold 20px/24px $Ideal; + position: absolute; + z-index: 1; + top: 0; + left: 56px; + padding: 12px 0 0; + width: 100%; + height: 100%; + } + .details { + display: block; + + /* duplicate width/max-width from layouts#wrapper to get overflow to work */ + width: 98vw; + max-width: 576px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + padding-left: 56px; + + font: normal 12px/15px $Ideal; + &.room-for-numbers { + padding-right: 80px; + } + .owner a { + color: $medium-gray; + position: relative; + z-index: 2; + } + .status-icon { + font-size: 12px; + padding: 0; + } + .description { + & * { display: inline; } + } + } + &:hover { + .room-for-numbers { + padding-right: 144px; + } + } + .numbers { + position: absolute; + bottom: 8px; + right: 0; + z-index: 0; + font-size: 11px; + line-height: 13px; + th { + text-align: right; + border-bottom: 1px solid transparent; + } + .label { + text-align: left; + } + td { + text-align: right; + padding: 1px 0 0 12px; + &:first-child { + padding-left: 0; + } + } + th, .label { + color: $medium-gray; + visibility: hidden; + } + } + + &:hover { + color: $black; + .status a { + color: $black; + } + .owner a { + color: $black; + } + th, .label { + visibility: visible; + } + th { + border-bottom: 1px solid $light-brown; + } + } + } +} + diff --git a/scss/fragments/mini-user.scss b/scss/fragments/mini-user.scss deleted file mode 100644 index 6a956f5ee5..0000000000 --- a/scss/fragments/mini-user.scss +++ /dev/null @@ -1,65 +0,0 @@ -.mini-user, .search-result { - background: white !important; - border: 4px solid #DEE0E0; - box-shadow: inset 0 0 0 1px #B6B7B9; - display: block; - overflow: hidden; - @include border-radius(3px); - &:hover { - border-color: $light-brown; - box-shadow: inset 0 0 0 1px $brown; - text-decoration: none; - } -} - -.mini-user { - float: left; - width: $people-column-width - 4px; - - span.inner { - display: block; - min-height: 50px; - padding: 5px; - - span.avatar { - background: transparent url('avatar-default.png') center center no-repeat; - background-size: cover; - display: block; - height: 66px; - position: relative; - } - span.age, - span.money { - color: $black; - display: block; - font: bold 16px $Ideal; - margin: 7px 0 5px 0; - } - span.age { - font-size: 11px; - } - span.name { - display: block; - font: normal 11px $Ideal; - margin: 3px 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - - &.anonymous { - opacity: 0.33; - } -} -a.mini-user { - span.name { - color: $green; - } -} -span.mini-user { - border-color: white; - span.name { - color: $black; - } -} diff --git a/scss/layouts/layout.scss b/scss/layouts/layout.scss index 886bb640dd..9043f318de 100644 --- a/scss/layouts/layout.scss +++ b/scss/layouts/layout.scss @@ -1,8 +1,5 @@ -body { - padding: 0 12px; -} - #wrapper { + width: 98vw; max-width: 576px; margin: 0 auto; } @@ -85,6 +82,10 @@ body { #content { width: 384px; display: table-cell; + &.without-sidebar { + width: auto; + } + vertical-align: top; font: 300 14px/24px $Chronicle; diff --git a/scss/layouts/responsiveness.scss b/scss/layouts/responsiveness.scss index a524a8c395..c13bdf90e1 100644 --- a/scss/layouts/responsiveness.scss +++ b/scss/layouts/responsiveness.scss @@ -89,6 +89,9 @@ margin: 10px 0 40px; min-height: 0; } + #search form { + margin-top: 50px !important; /* compensate for smaller #main margin */ + } #sidebar { padding-top: 20px; } diff --git a/scss/pages/homepage.scss b/scss/pages/homepage.scss index ed9ae1da9c..f8010fdff8 100644 --- a/scss/pages/homepage.scss +++ b/scss/pages/homepage.scss @@ -11,106 +11,4 @@ top: 0; right: 0; } - - table.teams { - width: 100%; - - tr:first-child td { border-top: 0; } - tr:last-child td { border-bottom: 0; } - - td.team { - position: relative; - color: $medium-gray; - border: 1px solid $light-brown; - border-style: solid none; - - a { - color: $medium-gray; - position: relative; - z-index: 2; - } - a:hover { - background: none !important; - color: $green !important; - } - img { - width: 48px; - height: 48px; - position: absolute; - top: 8px; - left: 0; - } - .name { - display: block; - color: $black; - font: bold 20px/24px $Ideal; - position: absolute; - z-index: 1; - top: 0; - left: 56px; - padding: 12px 0 0; - width: 100%; - height: 100%; - } - .details { - font: normal 12px/15px $Ideal; - min-height: 64px; - padding: 38px 144px 0 56px; - .owner a { - color: $medium-gray; - position: relative; - z-index: 2; - } - span { - white-space: nowrap; - } - .status-icon { - font-size: 12px; - padding: 0; - } - } - .numbers { - position: absolute; - bottom: 8px; - right: 0; - z-index: 0; - font-size: 11px; - line-height: 13px; - th { - text-align: right; - border-bottom: 1px solid transparent; - } - .label { - text-align: left; - } - td { - text-align: right; - padding: 1px 0 0 12px; - &:first-child { - padding-left: 0; - } - } - th, .label { - color: $medium-gray; - visibility: hidden; - } - } - - &:hover { - color: $black; - .status a { - color: $black; - } - .owner a { - color: $black; - } - th, .label { - visibility: visible; - } - th { - border-bottom: 1px solid $light-brown; - } - } - } - } } diff --git a/scss/pages/search.scss b/scss/pages/search.scss index 889accc6a7..9275a7eff8 100644 --- a/scss/pages/search.scss +++ b/scss/pages/search.scss @@ -1,35 +1,35 @@ -.search-box { - input { - width: 136px; - } -} +#search #content { -.search-results { - .mini-user { - margin: 2px; + form { + text-align: center; + margin: 20px 0 60px; + button { + font: normal 14pt/20pt $Ideal; + padding: 4pt 10pt; + height: 26pt; + } + input { + font: normal 16pt/20pt $Ideal; + width: 50%; + height: 24pt; + margin-right: 8px; + } } -} -.search-result { - margin-bottom: 0.8em; - padding-left: 0.5em; - @include clearfix; - .avatar { - float: left; - margin: 0.5em 0; - max-height: 66px; - max-width: 66px; - } - .col-right { - margin-left: 74px; + .sorry { + text-align: center; + font: normal 12px/15px $Ideal; + color: $medium-gray; } - .excerpt { - font-size: 80%; - line-height: 130%; - padding: 0.5em 0 0 1em; + + h2 { + margin-top: 4em; + &:first-of-type { + margin-top: 0; + } } -} -.jump-box { - margin-top: 40px; + .description strong { + font-weight: bold; + } } diff --git a/templates/base.html b/templates/base.html index 46b251f2f5..c836761f9d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -85,7 +85,7 @@

{% block sidebar %}{% endblock %} {% endif %} -
+
{% block subnav %}{% endblock %} {% if title %}

{{ title }}

{% endif %} {% block content %}{% endblock %} diff --git a/templates/list-participants.html b/templates/list-participants.html new file mode 100644 index 0000000000..1fc18c6a72 --- /dev/null +++ b/templates/list-participants.html @@ -0,0 +1,29 @@ +{% from 'templates/avatar-url.html' import avatar_url, avatar_img with context %} +{% macro list_participants(participants_and_excerpts, show_emails) %} + + {% for i, (participant, excerpts) in enumerate(participants_and_excerpts, start=1) %} + + + + {% endfor %} +
+ {{ avatar_img(participant) }} + {{ participant.username }} + +
+ {{ i }} + · {{ _("joined {ago}", + ago=to_age(participant.claimed_time, add_direction=True)) }} + {% if show_emails %}{% endif %} + {% if excerpts %} + + {{ process_excerpt('… ' + excerpts[0]['excerpt'] + ' …') }} + + {% else %} + {{ get_processed_excerpt(participant) }} + {% endif%} +
+
+{% endmacro %} diff --git a/www/assets/gratipay.css.spt b/www/assets/gratipay.css.spt index d0d63664a2..30ea3a2ebe 100644 --- a/www/assets/gratipay.css.spt +++ b/www/assets/gratipay.css.spt @@ -34,6 +34,7 @@ @import "scss/components/emails"; @import "scss/components/js-edit"; @import "scss/components/linear_gradient"; +@import "scss/components/listing"; @import "scss/components/loading-indicators"; @import "scss/components/long-form"; @import "scss/components/memberships"; @@ -52,7 +53,6 @@ @import "scss/fragments/accounts"; @import "scss/fragments/members"; -@import "scss/fragments/mini-user"; @import "scss/fragments/notifications"; @import "scss/fragments/pagination"; diff --git a/www/index.html.spt b/www/index.html.spt index a82af8d7d5..6033f7df2b 100644 --- a/www/index.html.spt +++ b/www/index.html.spt @@ -97,14 +97,14 @@ page_id = "homepage" {% for tab in tabs %} - +
{% for i, team in enumerate(tabs[tab]['teams'], start=1) %} -
+ {{ team.name }} -
+
{{ i }} · - - - - -
-

{{ _("Looking for a specific user of a social network?") }}

-

{{ _("{0} on {1}", - """"""|safe, - """"""|safe) }} -

-
-{% endblock %} +def empty_excerpts(): + + # Part of MacGyvering result descriptions. It's ... wow, actually. When the + # list_participants template macro sees None for excerpt, it will fall + # through to the full participant statement, the beginning of which will be + # excerpted. + + while 1: + yield None + +suppress_sidebar = True +page_id = "search" +zip = zip +[---] text/html +{% extends "templates/base.html" %} +{% from 'templates/list-participants.html' import list_participants with context %} {% block content %} - {% set usernames = results.get('usernames') %} +
+ + +
+ + {% set usernames = zip(results.get('usernames', []), empty_excerpts()) %} {% set statements = results.get('statements') %} - {% set emails = results.get('emails') %} + {% set emails = zip(results.get('emails', []), empty_excerpts()) %} + {% set projects = results.get('projects') %} + + {% if projects %} +

{{ ngettext("Found a matching project", + "Found matching projects", + len(projects)) }}

+ + {% for i, team in enumerate(projects, start=1) %} + + + {% endfor %} - +
+ + {{ team.name }} + +
+ {{ i }} + · + {{ status_icons[team.status]|safe }}{{ i18ned_statuses[team.status] }} + + · {{ _("created {ago}", + ago=to_age(team.ctime, add_direction=True)) }} + · + {{ _( "owned by {a}{owner}{_a}" + , owner='~'+team.owner + , a=(''|safe).format(team.owner) + , _a=''|safe + ) }} + +
- {% if usernames %} -

{{ ngettext("Found a matching username", - "Found matching usernames", - len(usernames)) }}

-
- {% for result in usernames %} - - - - {{ result.username }} - - + {% if team.status == 'approved' %} + + + + + + + + + + + +
{{ _("Weekly") }}Σ  n
{{ _("Receiving") }}{{ format_currency(team.receiving, 'USD') + if team.receiving else '-  '|safe }}{{ team.nreceiving_from if team.nreceiving_from else '-' }}
+ {% endif %} +
{% endif %} - {% if emails %} -

{{ ngettext("Found a matching email address", - "Found matching email addresses", - len(usernames)) }}

-
- {% for result in emails %} - - - - {{ result.username }} - - - {% endfor %} -
+ {% if usernames %} +

{{ ngettext("Found a matching username", + "Found matching usernames", + len(usernames)) }}

+ {{ list_participants(usernames) }} {% endif %} {% if statements %} -
-

{{ ngettext("Found a matching user statement", - "Found matching user statements", - len(statements)) }}

- {% for result in statements %} -
- {{ avatar_img(result) }} -
- {{ result.username }} - {% if len(result.excerpts) == 1 %} -
{{ - markdown.render(result.excerpts[0].excerpt) - }}
- {% endif %} -
-
- {% endfor %} -
+

{{ ngettext("Found a matching user statement", + "Found matching user statements", + len(statements)) }}

+ {{ list_participants(statements, extract_statement) }} {% endif %} - {% if query and not (usernames or statements or emails) %} -

{{ _("Sorry, we didn't find anything matching your query.") }}

+ {% if emails %} +

{{ ngettext("Found a matching email address", + "Found matching email addresses", + len(emails)) }}

+ {{ list_participants(emails, show_emails=True) }} {% endif %} -{% endblock %} + {% if query and not (usernames or statements or emails or projects) %} +

{{ _("Sorry, we didn't find anything matching your query.") }}

+ {% endif %} -{% block scripts %} - {% endblock %} [---] application/json via json_dump results