Groups index page styling for responsive use cases.

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

@@ -13,12 +13,27 @@
     &:hover, &:focus, &:active
       text-decoration: underline
 
+  .groups-icons
+    text-align: right
+    a
+      font-size: 1.5em
+  
+  .groups-header
+    border: 2px solid $clr-brick-light-bright
+    @include border-radius-mixed(0.5em, 0.5em, 0, 0)
+    margin: -1rem 0 1rem
+    padding: 1rem 0.9375rem
+    @media screen and (min-width: 640px)   
+      border: 0 none
+      @include border-radius(0)
+      margin: 0
+      padding: 0
+
 .group
   padding-bottom: 0.5em
   .row div
     font-size: 110%
   .row a
-    font-weight: 500
     vertical-align: middle
   .ofn-i_035-groups
     font-size: 120%

app/views/groups/index.html.haml

@@ -8,30 +8,27 @@
     .small-12.columns
       %h1 Groups / regions
       / TODO: Maikel this search input still doesn't work.
-      / %p
-      /   %input.animate-show{type: :text,
-      /   "ng-model" => "query",
-      /   placeholder: "Search name or keyword",
-      /   "ng-debounce" => "150",
-      /   "ofn-disable-enter" => true}
+      %p
+        %input.animate-show{type: :text,
+        "ng-model" => "query",
+        placeholder: "Search name or keyword",
+        "ng-debounce" => "150",
+        "ofn-disable-enter" => true}
 
   .group{"ng-repeat" => "group in groups = (Groups.groups | groups:query | orderBy:order)",
         name: "group{{group.id}}",
         id: "group{{group.id}}"}
     .row.pad-top{bindonce: true}
       .small-12.medium-6.columns
-        %a{"ng-href" => "groups/{{group.id}}"}
-          %i.ofn-i_035-groups
-          %span.group-name
-            {{ group.name }}
-          / %br
-          / %small
-          /   %em
-          /     {{ group.description }}
-      .small-4.medium-2.columns
+        .groups-header
+          %a{"ng-href" => "groups/{{group.id}}"}
+            %i.ofn-i_035-groups
+            %span.group-name
+              {{ group.name }}
+      .small-3.medium-2.columns
         %p
           {{ group.state }}
-      .small-8.medium-4.columns.text-right
+      .small-9.medium-4.columns.groups-icons
         %p
           %link-to-service.ofn-i_050-mail-circle{service: '""', ref: 'group.email.split("").reverse().join("")', mailto: true}
           %link-to-service.ofn-i_049-web{service: '"http://"', ref: 'group.website'}