Revisit layout and table styles

* Move mixins above non-mixins, so you can use it in any file * Overwrite main $gutter for better padding * Add new font and weights * Update colors for nice table design * Update table styles with lighter design * Center layout, with "floating" sidebar. Inspired by heroku's dashboard * Make entire table rows clickable on index pages * Convert all SASS to SCSS so we can use Hound * Use overflow-y: auto for better scrollbar behavior Resources: https://css-tricks.com/snippets/sass/material-shadows-mixin/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
thoughtbot · May 30, 2015 · 997e90d · 997e90d
1 parent aef663b
commit 997e90d
Show file tree

Hide file tree

Showing 37 changed files with 383 additions and 119 deletions.
diff --git a/app/assets/images/dropdown.svg b/app/assets/images/dropdown.svg
diff --git a/app/assets/javascripts/components/table.js b/app/assets/javascripts/components/table.js
@@ -0,0 +1,17 @@
+$(function() {
+  var keycodes = { space: 32, enter: 13 };
+
+  var visitDataUrl = function(event) {
+    if (event.type=="click" ||
+        event.keyCode == keycodes.space ||
+        event.keyCode == keycodes.enter) {
+
+      if(!event.target.href) {
+        window.location = $(event.target).closest("tr").data("url");
+      }
+    }
+  };
+
+  $("table").on("click", ".table-row", visitDataUrl);
+  $("table").on("keydown", ".table-row", visitDataUrl);
+});
diff --git a/app/assets/stylesheets/_sidebar.sass b/app/assets/stylesheets/_sidebar.sass
diff --git a/app/assets/stylesheets/_sidebar.scss b/app/assets/stylesheets/_sidebar.scss
@@ -0,0 +1,48 @@
+.sidebar {
+  flex: 0 0 280px;
+  height: 100%;
+  overflow-y: auto;
+
+  &-logo {
+    align-items: center;
+    display: flex;
+    height: 6em;
+    justify-content: space-between;
+    padding: 0 1em;
+
+    img {
+      display: block;
+      height: 80%;
+      padding-top: 1em;
+    }
+
+    &-heading {
+      color: $grey-0;
+      font-size: 1.6em;
+    }
+  }
+
+  &-list {
+    @include fill-parent;
+  }
+
+  a {
+    @include fill-parent;
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+    color: $grey-0;
+    display: block;
+    padding: 0.5em 1em;
+    transition: background-color 0.05s linear;
+
+    &.active {
+      @include card(1);
+      background-color: $sidebar-active-color;
+    }
+
+    &:hover {
+      @include card(1);
+      background-color: $sidebar-hover-color;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -4,9 +4,12 @@
 @import "bourbon";
 @import "base/grid-settings";
 @import "neat";
+@import "mixins/mixins";
 @import "base/base";
 @import "refills/flashes";
 
 @import "layout";
 @import "sidebar";
 @import "show";
+
+@import "components/components";
diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss
@@ -1,5 +1,6 @@
 button,
-input[type="submit"] {
+input[type="submit"],
+.button {
   @extend %button;
   @include appearance(none);
   border: none;

diff --git a/app/assets/stylesheets/base/_forms.scss b/app/assets/stylesheets/base/_forms.scss
@@ -28,7 +28,7 @@ label {
 
 textarea,
 #{$all-text-inputs},
-select[multiple=multiple] {
+select {
   @include box-sizing(border-box);
   @include transition(border-color);
   background-color: white;
@@ -72,7 +72,7 @@ input[type="file"] {
 }
 
 select {
+  @include appearance(none);
+  background: image-url("dropdown.svg") no-repeat 97% 50% / 10px;
   margin-bottom: $base-spacing;
-  max-width: 100%;
-  width: auto;
 }
diff --git a/app/assets/stylesheets/base/_grid-settings.scss b/app/assets/stylesheets/base/_grid-settings.scss
@@ -2,10 +2,11 @@
 
 // Neat Overrides
 // $column: 90px;
-// $gutter: 30px;
 // $grid-columns: 12;
 // $max-width: em(1088);
 
+$gutter: 2em;
+
 // Neat Breakpoints
 $medium-screen: em(640);
 $large-screen: em(860);

diff --git a/app/assets/stylesheets/base/_tables.scss b/app/assets/stylesheets/base/_tables.scss
@@ -1,26 +1,72 @@
 table {
-  border-collapse: collapse;
+  border: $base-border;
+  border-collapse: separate;
+  border-radius: $base-border-radius;
   margin: ($base-spacing / 2) 0;
   table-layout: fixed;
   width: 100%;
 }
 
+thead {
+  background-color: $grey-0;
+}
+
 th {
-  border-bottom: 1px solid darken($base-border-color, 15);
-  font-weight: bold;
+  border-bottom: $dark-border;
+  color: $grey-4;
+  font-size: $small-font-size;
+  font-weight: $normal-font-weight;
+  letter-spacing: 0.0357em;
   padding: ($base-spacing / 2) 0;
   text-align: left;
+  text-transform: uppercase;
 }
 
 td {
   border-bottom: $base-border;
+  overflow: hidden;
   padding: ($base-spacing / 2) 0;
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
   word-wrap: normal;
 }
 
+tr {
+  &:first-child {
+    td {
+      &:first-child {
+        border-top-left-radius: $base-border-radius;
+      }
+
+      &:last-child {
+        border-top-right-radius: $base-border-radius;
+      }
+    }
+  }
+
+  &:last-child {
+    td {
+      border-bottom: 0;
+
+      &:first-child {
+        border-bottom-left-radius: $base-border-radius;
+      }
+
+      &:last-child {
+        border-bottom-right-radius: $base-border-radius;
+      }
+    }
+  }
+}
+
+
+td,
+th {
+  &:first-child {
+    padding-left: 1em;
+  }
+}
+
 tr,
 td,
 th {

diff --git a/app/assets/stylesheets/base/_variables.scss b/app/assets/stylesheets/base/_variables.scss
@@ -1,18 +1,24 @@
 // Typography
-$sans-serif: $helvetica;
+$sans-serif: "Lato", $helvetica;
 $serif: $georgia;
 $base-font-family: $sans-serif;
 $header-font-family: $base-font-family;
 
 // Font Sizes
 $base-font-size: 1em;
+$small-font-size: 0.875em;
 $h1-font-size: $base-font-size * 2.25;
 $h2-font-size: $base-font-size * 2;
 $h3-font-size: $base-font-size * 1.75;
 $h4-font-size: $base-font-size * 1.5;
 $h5-font-size: $base-font-size * 1.25;
 $h6-font-size: $base-font-size;
 
+// Font Weights
+$light-font-weight: 300;
+$normal-font-weight: 400;
+$bold-font-weight: 900;
+
 // Line height
 $base-line-height: 1.5;
 $header-line-height: 1.25;
@@ -22,37 +28,59 @@ $base-border-radius: 3px;
 $base-spacing: $base-line-height * 1em;
 $base-z-index: 0;
 
+// Transitions
+$base-easing: cubic-bezier(0.215, 0.610, 0.355, 1);
+$base-timing: 0.25s;
+$base-transition: all $base-timing $base-easing;
+
 // Colors
-$blue: #477DCA;
-$dark-gray: #333;
-$medium-gray: #999;
-$light-gray: #DDD;
-$light-red: #FBE3E4;
-$light-yellow: #FFF6BF;
-$light-green: #E6EFC2;
+$dark-blue: #293f53;
+$blue: #2a94d6;
+$light-blue: #4eb1cb;
+$light-red: #cf5c60;
+$light-yellow: #f3ae4e;
+$light-green: #4ab471;
+
+$form-field-background-color: #fff;
+$white: #fff;
+$grey-0: #f6f7f7;
+$grey-1: #dfe0e1;
+$grey-2: #cfd8dc;
+$grey-3: #90acad;
+$grey-4: #7b808c;
+$grey-5: #4e6a68;
+$grey-6: #344346;
+$grey-7: #293f54;
 
 // Background Color
-$base-background-color: white;
+$base-background-color: $dark-blue;
 
 // Font Colors
-$base-font-color: $dark-gray;
+$base-font-color: $grey-7;
 $base-accent-color: $blue;
 
 // Link Colors
-$base-link-color: $base-accent-color;
-$hover-link-color: darken($base-accent-color, 15);
+$base-link-color: $blue;
+$hover-link-color: shade($blue, 10);
 $base-button-color: $base-link-color;
 $hover-button-color: $hover-link-color;
 
+// Sidebar Colors
+$sidebar-active-color: $base-link-color;
+$sidebar-hover-color: $hover-link-color;
+
 // Flash Colors
 $alert-color: $light-yellow;
 $error-color: $light-red;
 $notice-color: lighten($base-accent-color, 40);
 $success-color: $light-green;
 
 // Border color
-$base-border-color: $light-gray;
-$base-border: 1px solid $base-border-color;
+$base-border-color: $grey-1;
+$base-border-size: 1px;
+$base-border: $base-border-size solid $base-border-color;
+$dark-border-color: $grey-2;
+$dark-border: $base-border-size solid $dark-border-color;
 
 // Forms
 $form-border-color: $base-border-color;

diff --git a/app/assets/stylesheets/base/extends/_button.scss b/app/assets/stylesheets/base/extends/_button.scss
@@ -9,6 +9,7 @@
   line-height: 1;
   padding: 0.75em 1em;
   text-decoration: none;
+  transition: background-color $base-timing $base-easing;
 
   &:hover {
     background-color: $hover-button-color;

diff --git a/app/assets/stylesheets/components/_components.scss b/app/assets/stylesheets/components/_components.scss
@@ -0,0 +1,3 @@
+@import "form";
+@import "header";
+@import "table";
diff --git a/app/assets/stylesheets/components/_form.scss b/app/assets/stylesheets/components/_form.scss
@@ -0,0 +1,31 @@
+.form {
+  &-actions {
+    margin-left: 12em;
+  }
+
+  &-heading {
+    font-size: 1.75em;
+    margin: 0;
+    padding-bottom: 0.5em;
+  }
+
+  &-field {
+    align-items: baseline;
+    display: flex;
+    justify-content: flex-start;
+    margin: 1.2em 0;
+    width: 100%;
+
+    label {
+      margin-right: 2em;
+      text-align: right;
+      width: 10em;
+    }
+
+    input,
+    select {
+      background-color: $form-field-background-color;
+      max-width: 30em;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/_header.scss b/app/assets/stylesheets/components/_header.scss
@@ -0,0 +1,10 @@
+.header {
+  @include display(flex);
+  @include justify-content(space-between);
+  @include align-items(flex-end);
+  padding: $base-spacing 0;
+
+  &-heading {
+    margin-top: 0;
+  }
+}
diff --git a/app/assets/stylesheets/components/_table.scss b/app/assets/stylesheets/components/_table.scss
@@ -0,0 +1,11 @@
+.table-row {
+  background-color: $white;
+  border-left: 2px solid transparent;
+  transition: $base-transition;
+
+  &:hover {
+    background-color: $grey-0;
+    border-left-color: $blue;
+    cursor: pointer;
+  }
+}