Restyle search results page to look like homepage

gratipay · Dec 15, 2016 · c7d0647 · c7d0647
1 parent d15bab1
commit c7d0647
Show file tree

Hide file tree

Showing 9 changed files with 206 additions and 200 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -85,7 +85,7 @@ <h1><a href="/"><img src="{{ website.asset('gratipay.svg') }}"
             {% if not suppress_sidebar %}
             <div id="sidebar">{% block sidebar %}{% endblock %}</div>
             {% endif %}
-            <div id="content">
+            <div id="content"{% if suppress_sidebar %} class="without-sidebar"{% endif %}>
                 {% block subnav %}{% endblock %}
                 {% if title %}<h1>{{ title }}</h1>{% endif %}
                 {% block content %}{% endblock %}

diff --git a/templates/list-participants.html 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) %}
+    <table class="listing">
+        {% for i, (participant, excerpts) in enumerate(participants_and_excerpts, start=1) %}
+        <tr>
+            <td class="item">
+                {{ avatar_img(participant) }}
+                <a class="name" href="/~{{ participant.username }}/">{{ participant.username }}</a>
+
+                <div class="details">
+                    <span class="i">{{ i }}</span>
+                    <span class="ctime">&middot; {{ _("joined {ago}",
+                        ago=to_age(participant.claimed_time, add_direction=True)) }}</span>
+                    {% if show_emails %}<span class="email">&middot;
+                        <a href="mailto:{{ participant.email_address }}">{{
+                            participant.email_address }}</a></span>{% endif %}
+                    {% if excerpts %}
+                    <span class="description">
+                        {{ process_excerpt('&hellip; ' + excerpts[0]['excerpt'] + ' &hellip;') }}
+                    </span>
+                    {% else %}
+                    <span class="description">{{ get_processed_excerpt(participant) }}</span>
+                    {% endif%}
+                </div>
+            </td>
+        </tr>
+        {% endfor %}
+    </table>
+{% endmacro %}
diff --git 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
@@ -104,7 +104,7 @@ page_id = "homepage"
                 <img src="{{ team.get_image_url('small') }}">
                 <a class="name" href="/{{ team.slug }}/">{{ team.name }}</a>
 
-                <div class="details">
+                <div class="details room-for-numbers">
                     <span class="i">{{ i }}</span>
                     <span class="status">&middot;
                         <a href="{{ team.review_url }}"><span