diff --git a/scss/components/listing.scss b/scss/components/listing.scss index b27a75dde4..1e6bc7cdfe 100644 --- a/scss/components/listing.scss +++ b/scss/components/listing.scss @@ -9,6 +9,8 @@ table.listing { color: $medium-gray; border: 1px solid $light-brown; border-style: solid none; + height: 64px; + padding-top: 38px; a { color: $medium-gray; @@ -39,21 +41,33 @@ table.listing { 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; - min-height: 64px; - padding: 38px 144px 0 56px; + &.room-for-numbers { + padding-right: 144px; + } .owner a { color: $medium-gray; position: relative; z-index: 2; } - span { - white-space: nowrap; - } .status-icon { font-size: 12px; padding: 0; } + .description { + & * { display: inline; } + } } .numbers { position: absolute; 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/pages/search.scss b/scss/pages/search.scss index 40d9a40be8..0f09183524 100644 --- a/scss/pages/search.scss +++ b/scss/pages/search.scss @@ -1,31 +1,31 @@ -.search-box { - input { - width: 136px; - } -} +#search { -.search-results { - .mini-user { - margin: 2px; + form { + text-align: center; + margin: 0 0 40px; + button { + font: normal 14pt/20pt $Ideal; + padding: 4pt 10pt; + height: 26pt; + } + input { + font: normal 16pt/20pt $Ideal; + width: 50%; + height: 24pt; + } } -} -.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; + .sorry { + text-align: center; + font: normal 12px/15px $Ideal; + color: $medium-gray; } - .col-right { - margin-left: 74px; + + h2 { + margin-top: 4em; } - .excerpt { - font-size: 80%; - line-height: 130%; - padding: 0.5em 0 0 1em; + + .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 26b96b2531..30ea3a2ebe 100644 --- a/www/assets/gratipay.css.spt +++ b/www/assets/gratipay.css.spt @@ -53,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 3400824913..6033f7df2b 100644 --- a/www/index.html.spt +++ b/www/index.html.spt @@ -104,7 +104,7 @@ page_id = "homepage"
{{ team.name }} -
+
{{ i }} · - - - -{% endblock %} - +{% 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 name", - "Found matching project names", - len(projects)) }}

-
- {% for result in projects %} - - - - {{ result.name }} +

{{ 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 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 usernames %} -

{{ ngettext("Found a matching username", - "Found matching usernames", - len(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 emails %} -

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

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

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

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

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

+

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

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