Ensure tables scale regardless of text size or length

pypi · Sep 4, 2019 · 46420fb · 46420fb
1 parent f888866
commit 46420fb
Show file tree

Hide file tree

Showing 14 changed files with 318 additions and 672 deletions.
diff --git a/warehouse/static/js/warehouse/index.js b/warehouse/static/js/warehouse/index.js
@@ -143,18 +143,18 @@ docReady(() => {
 });
 
 docReady(() => {
-  let changeRoleForms = document.querySelectorAll("form.change-role");
+  let changeRoleForms = document.querySelectorAll("form.table__change-role");
 
   if (changeRoleForms) {
     for (let form of changeRoleForms) {
-      let changeButton = form.querySelector("button.change-button");
-      let changeSelect = form.querySelector("select.change-field");
+      let changeButton = form.querySelector("button.table__change-button");
+      let changeSelect = form.querySelector("select.table__change-field");
 
       changeSelect.addEventListener("change", function (event) {
         if (event.target.value === changeSelect.dataset.original) {
           changeButton.style.display = "none";
         } else {
-          changeButton.style.display = "inline-block";
+          changeButton.style.display = "block";
         }
       });
     }

diff --git a/warehouse/static/sass/blocks/_breadcrumbs.scss b/warehouse/static/sass/blocks/_breadcrumbs.scss
@@ -15,8 +15,8 @@
 /*
   Navigation breadcrumbs.
 
-  <nav aria-label="Breadcrumb">
-    <ul class="breadcrumbs">
+  <nav aria-label="Breadcrumb" class="breadcrumbs">
+    <ul>
       <li class="breadcrumbs__breadcrumb"></li>
       <li class="breadcrumbs__breadcrumb"></li>
     </ul>
@@ -25,9 +25,13 @@
 
 
 .breadcrumbs {
-  margin: 0;
-  padding: 0;
-  @include clearfix;
+  padding-bottom: ($spacing-unit / 2);
+
+  ul {
+    margin: 0;
+    padding: 0;
+    @include clearfix;
+  }
 
   &__breadcrumb {
     list-style-type: none;

diff --git a/warehouse/static/sass/blocks/_button.scss b/warehouse/static/sass/blocks/_button.scss
@@ -41,6 +41,7 @@
   border: 1px solid $accessible-border-color;
   border-radius: 3px;
   display: inline-block;
+  text-align: center;
   @include link-without-underline;
 
   i.fa {

diff --git a/warehouse/static/sass/blocks/_project-description.scss b/warehouse/static/sass/blocks/_project-description.scss
@@ -153,8 +153,44 @@
   }
 
   table {
-    @include table;
+    @include card;
+    @include border-width(1px null);
+    border-collapse: collapse;
+    border-spacing: 0;
+    text-align: left;
+    width: 100%;
     margin: $spacing-unit 0 0;
+
+    tr {
+      border-bottom: 1px solid $border-color;
+    }
+
+    th,
+    td {
+      margin: 0;
+      border: 0;
+      padding: 10px 7px;
+      border-right: 1px solid $border-color;
+    }
+
+    thead tr {
+      background-color: $white;
+
+      th {
+        vertical-align: bottom;
+        font-weight: $bold-font-weight;
+      }
+    }
+
+    tbody {
+      tr {
+        background-color: darken($background-color, 0.75);
+      }
+
+      tr:nth-child(even) {
+        background-color: darken($background-color, 2);
+      }
+    }
   }
 
   hr {