Adding in markup and styling for new layout of hubs list view

app/assets/stylesheets/darkswarm/hub_node.css.sass

@@ -10,23 +10,33 @@
       overflow-x: hidden
       overflow-y: visible
 
-    //Hub icon styline
+    //Generic text link style
+    a:hover, a:active, a:focus
+      color: $clr-brick-bright
+
+    //Hub and Producer icons
     // i.ofn-i_040-hub
-    i.ofn-i_063-hub
+    i.ofn-i_063-hub, i.ofn-i_064-hub-reversed, i.ofn-i_059-producer, i.ofn-i_060-producer-reversed
       font-size: 2rem
       display: inline-block
       margin-right: 0.25rem
       float: left
       @media all and (max-width: 768px) 
-        font-size: 1rem
+        // font-size: 1rem
     
-    //Generic text link style
-    a:hover, a:active, a:focus
-      color: $clr-brick-bright
+    //Closed & Open column
+    .open_closed
+      i
+        font-size: 2rem
+        float: right
+        margin-left: 0.5rem
 
-    .hub span.hub-name-listing
-      margin-top: 0.5rem
+    span.margin-top
+      margin-top: 0.5rem    
       display: inline-block
+
+    //Hub Name 
+    span.hub-name-listing
       float: left
       font-weight: 700
 
@@ -42,38 +52,35 @@
         &.closed, &.open
           .active_table_row:first-child .skinny-head
             background-color: white
-    
+      &.current
+        &.closed, &.open
+          .active_table_row:first-child .skinny-head
+            background-color: $clr-brick-bright
+      &.current
+        &.inactive
+          &.closed, &.open
+            .active_table_row:first-child .skinny-head
+              background-color: #555
+
     //Inactive row
     &.inactive, &.inactive strong
       color: $disabled-dark
-
       &, & *
         color: $disabled-dark
 
       a i.ofn-i_040-hub
         color: $disabled-dark
-
-      &.current
+    &.current
+      &.inactive
         &.closed, &.open
-          
-          a, a strong, a span, a i
-            color: $disabled-dark
-            &:hover, &:focus, &:active
-              color: $disabled-dark
-
-          a i.ofn-i_040-hub
-            color: white
+          .active_table_row:first-child
             background-color: $disabled-dark
-          a:hover, a:focus, a:active
-            color: $disabled-dark
-            i.ofn-i_040-hub
-              background-color: $disabled-dark
-      
+            &, & *
+              color: white
       &.closed
         &:hover, &:active, &:focus
           border: none
           color: $disabled-dark
-
       &.open
         .active_table_row:first-child
           color: $disabled-dark
@@ -86,7 +93,7 @@
         .active_table_row:nth-child(2)
           background-color: rgba(255, 255, 255, 0)
 
-    //Open row
+    //Padding second row
     &.open
       .active_table_row:nth-child(2)
         padding-bottom: 0.75rem
@@ -94,18 +101,19 @@
     //Current selected row
     &.current
       //overwrites active_table
-      &.closed
-        &, & *
-          color: white
-
       &.closed, &.open
-        div.active_table_row
+        .active_table_row:first-child
           background-color: $clr-brick
-        a:hover, a:focus, a:active
-          strong, span
-            color: $clr-brick-light
-
-
-
-
+          opacity: 1
+          &:hover, &:focus, &:active
+            opacity: 0.9
+          &, & *
+            color: white
+      &.open, &.closed
+        .active_table_row
+          border-color: $clr-brick
+      &.inactive
+        &.open, &.closed
+          .active_table_row
+            border-color: $disabled-dark
 

app/views/home/_skinny.html.haml

@@ -3,21 +3,21 @@
     %a.hub{"bo-href" => "hub.path", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-empties-cart" => "hub"}
       %i{ ng: { class: "{'ofn-i_063-hub': hub.can_aggregate, 'ofn-i_059-producer': !hub.can_aggregate}" } }
       / %i.ofn-i_063-hub
-      %span.hub-name-listing {{ hub.name | truncate:40}}
+      %span.margin-top.hub-name-listing {{ hub.name | truncate:40}}
   .columns.small-4.medium-2.large-2
-    {{ hub.address.city }}
+    %span.margin-top {{ hub.address.city }}
   .columns.small-2.medium-1.large-1
-    {{ hub.address.state_name | uppercase }}
+    %span.margin-top {{ hub.address.state_name | uppercase }}
 
   .columns.small-6.medium-3.large-4.text-right{"bo-if" => "hub.active"}
-    %a.hub{"bo-href" => "hub.path", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-empties-cart" => "hub"}
+    %a.hub.open_closed{"bo-href" => "hub.path", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-empties-cart" => "hub"}
       %i.ofn-i_033-open-sign
-      %span {{ hub.orders_close_at | sensible_timeframe }} 
+      %span.margin-top {{ hub.orders_close_at | sensible_timeframe }} 
 
   .columns.small-6.medium-3.large-4.text-right{"bo-if" => "!hub.active"}
-    %a.hub{"bo-href" => "hub.path", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-empties-cart" => "hub"}
+    %a.hub.open_closed{"bo-href" => "hub.path", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-empties-cart" => "hub"}
       %i.ofn-i_032-closed-sign
-      %span Orders closed
+      %span.margin-top Orders closed