user blogging WIP

app/views/ublog/index.scala

@@ -27,7 +27,7 @@ object index {
               newPostLink
             )
         ),
-        div(cls := "ublog-index__posts infinite-scroll")(
+        div(cls := "ublog-index__posts ublog-post-cards infinite-scroll")(
           posts.currentPageResults map { postView.card(_) },
           pagerNext(posts, np => s"${routes.Ublog.index(user.username, np).url}")
         )
@@ -47,7 +47,7 @@ object index {
             newPostLink
           )
         ),
-        div(cls := "ublog-index__posts ublog-index__posts--drafts infinite-scroll")(
+        div(cls := "ublog-index__posts ublog-index__posts--drafts ublog-post-cards infinite-scroll")(
           posts.currentPageResults map { postView.card(_, postView.editUrlOf) },
           pagerNext(posts, np => s"${routes.Ublog.drafts(user.username, np).url}")
         )

app/views/ublog/post.scala

@@ -38,7 +38,7 @@ object post {
             span(cls := "ublog-post__meta__date")(semanticDate(date))
           }
         ),
-        div(cls := "ublog-post__image"),
+        imageOf(post)(cls := "ublog-post__image"),
         strong(cls := "ublog-post__intro")(post.intro),
         div(cls := "ublog-post__markup")(markup)
       )
@@ -59,41 +59,28 @@ object post {
   def editUrlOf(post: UblogPost) = routes.Ublog.edit(usernameOrId(post.user), post.id.value)
 
   def thumbnailOf(post: UblogPost) = {
-    val (w, h) = (400, 200)
+    val (w, h) = (600, 200)
     post.image match {
       case Some(image) =>
-        img(
+        baseImg(src := picfitUrl(image).thumbnail(w, h))
-          width := w,
-          height := h,
-          cls := "ublog-post-image",
-          src := picfitUrl(image).thumbnail(w, h)
-        )
       case _ =>
-        img(
+        div(cls := "ublog-post-image-default")
-          width := w,
-          height := h,
-          cls := "default image",
-          src := assetUrl("images/placeholder.png"),
-          alt := "Default blog post image"
-        )
     }
   }
 
-  def imageOf(post: UblogPost, height: Int = 300) =
+  def imageOf(post: UblogPost, height: Int = 400) =
     post.image match {
       case Some(image) =>
-        img(
+        baseImg(
-          attr("height") := height,
+          heightA := height,
-          cls := "ublog-post-image",
           src := picfitUrl(image).resize(Right(height))
         )
       case _ =>
-        img(
+        baseImg(
-          attr("height") := height,
+          heightA := height,
-          cls := "default image",
+          src := assetUrl("images/placeholder.png")
-          src := assetUrl("images/placeholder.png"),
-          alt := "Default blog post image"
         )
     }
 
+  private val baseImg = img(cls := "ublog-post-image")
 }

ui/site/css/build/_ublog.scss

@@ -1,4 +1,3 @@
 @import '../../../common/css/plugin';
 @import '../../../common/css/form/form3';
 @import '../ublog/ublog';
-@import '../ublog/form';

ui/site/css/ublog/_card.scss

@@ -0,0 +1,58 @@
+.ublog-post {
+  &-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
+    grid-gap: 3vmin;
+  }
+  &-card {
+    @extend %box-neat-force;
+
+    @include transition;
+
+    background: $c-bg-zebra;
+    color: $c-font;
+    position: relative;
+
+    &:hover {
+      box-shadow: 0 0 5px $c-link, 0 0 20px $c-link;
+    }
+
+    time {
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: 0.2em 0.5em;
+      background: #111;
+      color: #ddd;
+      border-radius: 0 0 $box-radius-size 0;
+      opacity: 1;
+    }
+
+    &__image {
+      height: 200px;
+      &.ublog-post-image-default {
+        background-image: img-url('placeholder-margin.png');
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
+    &__content {
+      padding: 2vmin;
+      display: block;
+    }
+
+    &__title {
+      font-size: 1.3em;
+      color: $c-font-clear;
+      display: block;
+    }
+
+    &__intro {
+      @extend %roboto;
+
+      margin-top: 2vmin;
+      display: block;
+    }
+  }
+}

ui/site/css/ublog/_ublog.scss

@@ -1,13 +1,11 @@
+@import 'card';
+@import 'form';
+
 .ublog {
   &-index {
     .box__top__actions {
       @extend %flex-center;
     }
-    &__posts {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
-      grid-gap: 3vmin;
-    }
   }
   &-post {
     &__header {
@@ -39,53 +37,4 @@
       font-size: 1.2em;
     }
   }
-  &-post-card {
-    @extend %box-neat-force;
-
-    @include transition;
-
-    background: $c-bg-zebra;
-    color: $c-font;
-    position: relative;
-
-    &:hover {
-      box-shadow: 0 0 5px $c-link, 0 0 20px $c-link;
-    }
-
-    time {
-      position: absolute;
-      top: 0;
-      left: 0;
-      padding: 0.2em 0.5em;
-      background: #111;
-      color: #ddd;
-      border-radius: 0 0 $box-radius-size 0;
-      opacity: 1;
-    }
-
-    &__image {
-      width: 100%;
-      height: 10vh;
-      background: $c-bg-zebra;
-      background: #888;
-    }
-
-    &__content {
-      padding: 2vmin;
-      display: block;
-    }
-
-    &__title {
-      font-size: 1.3em;
-      color: $c-font-clear;
-      display: block;
-    }
-
-    &__intro {
-      @extend %roboto;
-
-      margin-top: 2vmin;
-      display: block;
-    }
-  }
 }