Factor out homepage listing styles

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

Hide file tree

Showing 4 changed files with 105 additions and 104 deletions.
diff --git a/scss/components/listing.scss b/scss/components/listing.scss
@@ -0,0 +1,102 @@
+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;
+
+        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/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/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";

diff --git a/www/index.html.spt b/www/index.html.spt
@@ -97,10 +97,10 @@ page_id = "homepage"
     </ul>
 
     {% for tab in tabs %}
-    <table class="teams tab" data-tab="{{ tab }}">
+    <table class="listing tab" data-tab="{{ tab }}">
         {% for i, team in enumerate(tabs[tab]['teams'], start=1) %}
         <tr>
-            <td class="team">
+            <td class="item">
                 <img src="{{ team.get_image_url('small') }}">
                 <a class="name" href="/{{ team.slug }}/">{{ team.name }}</a>