Merge pull request #4222 from gratipay/search-projects

Make search search teams as well
gratipay · Dec 16, 2016 · 513beb7 · 513beb7
2 parents 9261d10 + 4da2981
commit 513beb7
Show file tree

Hide file tree

Showing 12 changed files with 357 additions and 329 deletions.
diff --git a/js/gratipay/jump.js b/js/gratipay/jump.js
diff --git a/scss/components/listing.scss 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
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/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
@@ -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;
-                }
-            }
-        }
-    }
 }