New inbox view

app/assets/stylesheets/application.scss

@@ -28,6 +28,7 @@
 //= require ./views/_home-thumbnail-grid
 //= require ./views/_listings
 //= require ./views/_message
+//= require ./views/_conversation
 //= require ./views/_listing-image-fileupload
 //= require ./views/_listing-image-carousel
 //= require ./views/_thumbnail-stripe

app/assets/stylesheets/main.css.scss

@@ -880,102 +880,6 @@ a.lightbox-x {
 
 }
 
-.homepage-feed {
-
-  @include media(tablet) {
-    // Makes space for search
-    padding-top: lines(3);
-  }
-
-}
-
-.feed-item {
-  position: relative;
-  padding: lines(0.5) lines(0.5) lines(0.5) lines(0.5);
-  border: 1px dotted $border;
-  border-width: 1px 0 0;
-
-  h2 {
-    line-height: em(21);
-    margin: 0;
-  }
-
-  small {
-    margin-top: lines(0.25, 13);
-  }
-
-  .feed-content {
-    margin: em(-3) lines(3.25) 0 lines(2);
-    padding: 0;
-    max-width: lines(20);
-    .author {
-      @include small-type;
-      margin-bottom: lines(0.25);
-    }
-  }
-
-  .feed-author-avatar {
-    position: absolute;
-    width: lines(1.5);
-    height: lines(1.5);
-    img {
-      @include border-radius(em(5));
-      width: lines(1.5);
-      height: lines(1.5);
-    }
-  }
-
-  .feed-listing-icon {
-    display: inline-block;
-    margin-right: lines(1);
-  }
-
-  // Used only if there is an image for the listing
-  .content-with-image {
-    min-height: lines(3);
-  }
-
-  // Used only if there is an image for the listing,
-  // with profile listing
-  .profile-content-with-image {
-    min-height: lines(2.5);
-  }
-
-  @include media(tablet) {
-    padding: lines(1) lines(0);
-
-    .feed-content {
-      margin: em(-3) lines(6) 0 lines(2.25);
-    }
-
-    .feed-excerpt {
-      color: $aside;
-      font-style: italic;
-
-      a {
-        color: $aside;
-        &:hover { color: darken($aside, 10%); }
-      }
-    }
-
-    small {
-      @include normal-type;
-      margin-top: lines(0.25);
-    }
-
-    // Used only if there is an image for the listing
-    .content-with-image {
-      min-height: lines(5);
-    }
-
-    // Used only if there is an image for the listing,
-    // with profile listing
-    .profile-content-with-image {
-      min-height: lines(4.5);
-    }
-  }
-}
-
 .view-item {
 
   .item-description {
@@ -1544,49 +1448,6 @@ a.lightbox-x {
   -----------
 */
 
-.inbox-feed {
-
-  p {
-    padding: lines(0.25) lines(0.5) 0 lines(0.5);
-  }
-
-  .inbox-feed-item {
-    padding: lines(0.75) 0 lines(0.5) 0;
-    .feed-author-avatar {
-      left: lines(0.75);
-    }
-    .feed-content {
-      max-width: lines(30);
-      margin: em(-3) 0 0 lines(3);
-    }
-    small {
-      display: block;
-      position: relative;
-    }
-    .status-links {
-      padding-bottom: lines(0.5);
-    }
-
-  }
-
-  span.header-info {
-    display: inline-block;
-    vertical-align: top;
-    padding-top: em(21);
-    margin-left: lines(0.25);
-  }
-
-  @include media(tablet) {
-    p {
-      padding: 0;
-    }
-    .inbox-feed-item {
-
-    }
-  }
-
-}
-
 .conversation-status {
 
   .status-links {

app/assets/stylesheets/mixins/_grid.scss

@@ -42,3 +42,17 @@ $grid-1-4-width: lines(10.75) - ($grid-1-4-padding * 2);
     padding-right: lines(0.5);
   }
 }
+
+/**
+  Undo the mobile margin set by .wrapper
+  This is cubersome, because the .wrapper is in the main layout and not per page
+*/
+@mixin undo-mobile-wrapper-margin($mobilePadding: lines(0.5)) {
+  margin-left: -1 * $mobilePadding;
+  margin-right: -1 * $mobilePadding;
+
+  @include media(tablet) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}

app/assets/stylesheets/mixins/_utils.css.scss

@@ -18,12 +18,22 @@
 
 /**
   Use icon-fix to correctly vertical align SS-pika icons
+
+  Deprecated: Use icon-fix-rel
 */
 @mixin icon-fix {
   position: relative;
   top: 2px;
 }
 
+/**
+  Icon fix relative to the font-size
+*/
+@mixin icon-fix-rel {
+  position: relative;
+  top: em(2);
+}
+
 /**
   Some icons, e.g. dropdown icon needs to be a bit lower
 */

app/assets/stylesheets/mixins/_vertical-centering.css.scss

@@ -59,6 +59,5 @@
 
 @mixin vertical-centering-table-content {
   display: table-cell;
-  text-align: center;
   vertical-align: middle;
 }

app/assets/stylesheets/mixins/default-colors.scss

@@ -52,6 +52,7 @@ $green:       hsl($notification-hue, 73.4%, 28.2%);
 $light-green: hsl(110, 38%, 76%);
 $red:         hsl($error-hue, 73.4%, 38.2%);
 $error-red:   hsl($error-hue, 73.4%, 45.2%);
+$yellow:      #D1C905;
 
 $cover-photo-url: "/assets/cover_photos/header/default.jpg";
 $small-cover-photo-url: "/assets/cover_photos/header/default.jpg";

app/assets/stylesheets/partials/_fluid-grid.css.scss

@@ -13,6 +13,11 @@ $bottom-gutter: lines(0.5);
   @for $i from 1 through $cols {
     .#{$prefix}-#{$i} {
       width: 100%;
+      margin-bottom: lines(0.5);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
 
       // Set min-height 1px, so that the element will be rendered, even though it's empty.
       // This reduces load time flickering.
@@ -24,6 +29,7 @@ $bottom-gutter: lines(0.5);
         float: left;
         padding-left: $gutter;
         padding-right: $gutter;
+        margin-bottom: 0;
       }
     }
   }

app/assets/stylesheets/partials/_utils.css.scss

@@ -12,6 +12,10 @@
   @include icon-fix;
 }
 
+.icon-fix-rel {
+  @include icon-fix-rel;
+}
+
 /**
   Use icon-fix to correctly vertical align SS-pika icons (3px)
 */

app/assets/stylesheets/views/_conversation.css.scss

@@ -0,0 +1,83 @@
+@import "mixins/all";
+
+.conversation-details-container {
+  position: relative;
+}
+
+.conversation-row {
+  padding: lines(0.5);
+  position: relative;
+}
+
+.conversation-details {
+  padding-left: em(48) + lines(0.5);
+}
+
+.conversation-avatar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: em(48);
+  height: em(48);
+  @include border-radius($default-border-radius);
+}
+
+.conversation-title-link {
+  font-weight: bold;
+  display: block;
+  @include ellipsis;
+}
+
+.conversation-title-link-text {
+  &:before, &:after {
+    content: "\"";
+  }
+}
+
+.conversation-context {
+  @include small-type;
+  line-height: lines(1, $small-type)
+}
+
+.conversation-list-status-container {
+  position: relative;
+  @include vertical-centering-table-container;
+}
+
+.conversation-list-status-icon {
+  height: 48px;
+  width: em(40, $large-type);
+  @include large-type;
+  line-height: 48px;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  & > .waiting-you {
+    color: $yellow;
+  }
+
+  & > .waiting-other {
+    color: $aside;
+  }
+
+  & > .confirmed {
+    color: $green;
+  }
+
+  & > .canceled {
+    color: $red;
+  }
+
+  & > .rejected {
+    color: $red;
+  }
+}
+
+.conversation-list-status {
+  padding-left: em(40);
+  height: 48px;
+  @include vertical-centering-table-content;
+
+}

app/assets/stylesheets/views/_layout.css.scss

@@ -13,4 +13,8 @@
 
 .wrapper {
   @include wrapper;
+}
+
+.undo-mobile-wrapper-margin {
+  @include undo-mobile-wrapper-margin;
 }

app/helpers/application_helper.rb

@@ -42,7 +42,7 @@ module ApplicationHelper
       "dislike" => "ss-dislike",
       "calendar" => "ss-calendar",
       "phone" => "ss-phone",
-      "clock" => "ss-alarmclock",
+      "clock" => "ss-clock",
       "eye" => "ss-view",
       "cross" => "ss-delete",
       "chat_bubble" => "ss-chat",