user blogging WIP

app/controllers/Ublog.scala

@@ -86,11 +86,12 @@ final class Ublog(env: Env) extends LilaController(env) {
         _ ?? { post =>
           ctx.body.body.file("image") match {
             case Some(image) =>
-              env.ublog.api.uploadImage(post, image) recover { case e: Exception =>
-                BadRequest(html.ublog.form.edit(me, post, env.ublog.form.edit(post)))
-                  .flashFailure(e.getMessage)
-              } inject Redirect(editUrlOf(post))
-            case None => fuccess(Redirect(editUrlOf(post)))
+              env.ublog.api.uploadImage(post, image) map { newPost =>
+                Ok(html.ublog.form.formImage(newPost))
+              } recover { case e: Exception =>
+                BadRequest(e.getMessage)
+              }
+            case None => BadRequest("Missing image").fuccess
           }
         }
       }

app/templating/FormHelper.scala

@@ -237,8 +237,9 @@ trait FormHelper { self: I18nHelper =>
       )
 
     object file {
-      def image(name: String): Frag = st.input(tpe := "file", st.name := name, accept := "image/*")
-      def pgn(name: String): Frag   = st.input(tpe := "file", st.name := name, accept := ".pgn")
+      def image(name: String): Frag =
+        st.input(tpe := "file", st.name := name, accept := "image/png, image/jpeg")
+      def pgn(name: String): Frag = st.input(tpe := "file", st.name := name, accept := ".pgn")
     }
   }
 }

app/views/ublog/form.scala

@@ -16,7 +16,7 @@ object form {
 
   def create(user: User, f: Form[UblogPostData])(implicit ctx: Context) =
     views.html.base.layout(
-      moreCss = frag(cssTag("ublog")),
+      moreCss = cssTag("ublog"),
       title = s"${user.username} blog • New post"
     ) {
       main(cls := "box box-pad page ublog-post-form")(
@@ -27,7 +27,8 @@ object form {
 
   def edit(user: User, post: UblogPost, f: Form[UblogPostData])(implicit ctx: Context) =
     views.html.base.layout(
-      moreCss = frag(cssTag("ublog")),
+      moreCss = cssTag("ublog"),
+      moreJs = jsModule("ublog"),
       title = s"${user.username} blog • ${post.title}"
     ) {
       main(cls := "box box-pad page ublog-post-form")(
@@ -47,17 +48,16 @@ object form {
       enctype := "multipart/form-data"
     )(
       form3.split(
-        div(cls := "form-group form-half")(
-          postView.imageOf(post, height = 300)
-        ),
+        div(cls := "form-group form-half")(formImage(post)),
         div(cls := "form-group form-half")(
           p(trans.streamer.maxSize(s"${lila.memo.PicfitApi.uploadMaxMb}MB.")),
-          form3.file.image("image"),
-          submitButton(cls := "button")(trans.streamer.uploadPicture())
+          form3.file.image("image")
         )
       )
     )
 
+  def formImage(post: UblogPost) = postView.imageOf(post, height = 300)
+
   private def inner(user: User, form: Form[UblogPostData], post: Option[UblogPost])(implicit
       ctx: Context
   ) =

app/views/ublog/post.scala

@@ -38,7 +38,9 @@ object post {
             span(cls := "ublog-post__meta__date")(semanticDate(date))
           }
         ),
-        imageOf(post)(cls := "ublog-post__image"),
+        div(cls := "ublog-post__image-wrap")(
+          imageOf(post, 400)(cls := "ublog-post__image", heightA := 400)
+        ),
         strong(cls := "ublog-post__intro")(post.intro),
         div(cls := "ublog-post__markup")(markup)
       )
@@ -59,7 +61,7 @@ object post {
   def editUrlOf(post: UblogPost) = routes.Ublog.edit(usernameOrId(post.user), post.id.value)
 
   def thumbnailOf(post: UblogPost) = {
-    val (w, h) = (600, 200)
+    val (w, h) = (600, 300)
     post.image match {
       case Some(image) =>
         baseImg(src := picfitUrl(image).thumbnail(w, h))
@@ -68,11 +70,10 @@ object post {
     }
   }
 
-  def imageOf(post: UblogPost, height: Int = 400) =
+  def imageOf(post: UblogPost, height: Int) =
     post.image match {
       case Some(image) =>
         baseImg(
-          heightA := height,
           src := picfitUrl(image).resize(Right(height))
         )
       case _ =>

modules/ublog/src/main/UblogApi.scala

@@ -35,9 +35,9 @@ final class UblogApi(coll: Coll, picfitApi: PicfitApi)(implicit ec: ExecutionCon
   def draftByUser(user: User, page: Int): Fu[Paginator[UblogPost]] =
     paginatorByUser(user, false, page)
 
-  def uploadImage(post: UblogPost, picture: PicfitApi.Uploaded) =
+  def uploadImage(post: UblogPost, picture: PicfitApi.Uploaded): Fu[UblogPost] =
     picfitApi.upload(s"ublog:${post.id}", picture, userId = post.user).flatMap { image =>
-      coll.update.one($id(post.id), $set("image" -> image.id)).void
+      coll.update.one($id(post.id), $set("image" -> image.id)) inject post.copy(image = image.id.some)
     }
 
   private def paginatorByUser(user: User, live: Boolean, page: Int): Fu[Paginator[UblogPost]] =

ui/common/src/xhr.ts

@@ -16,6 +16,7 @@ export const xhrHeader = {
 function ensureOk(res: Response): Response {
   if (res.ok) return res;
   if (res.status == 429) throw new Error('Too many requests');
+  if (res.status == 413) throw new Error('The uploaded file is too large');
   throw new Error(`Error ${res.status}`);
 }
 

ui/site/css/ublog/_card.scss

@@ -29,7 +29,7 @@
     }
 
     &__image {
-      height: 200px;
+      width: 100%;
       &.ublog-post-image-default {
         background-image: img-url('placeholder-margin.png');
         background-size: cover;

ui/site/css/ublog/_form.scss

@@ -2,4 +2,7 @@
   &__publish {
     margin: 3vh 0;
   }
+  .ublog-post-image {
+    max-width: 100%;
+  }
 }

ui/site/css/ublog/_ublog.scss

@@ -23,10 +23,13 @@
       }
     }
     &__image {
-      width: 100%;
+      max-width: 100%;
       height: 30vh;
       background: #888;
-      margin-bottom: 6vh;
+      margin: 0 auto 6vh auto;
+      &-wrap {
+        text-align: center;
+      }
     }
     &__intro {
       font-size: 1.2em;

ui/site/rollup.config.js

@@ -227,4 +227,8 @@ export default rollupProject({
     input: 'src/tvGames.ts',
     output: 'tvGames',
   },
+  ublog: {
+    input: 'src/ublog.ts',
+    output: 'ublog',
+  },
 });

ui/site/src/ublog.ts

@@ -0,0 +1,12 @@
+import * as xhr from 'common/xhr';
+
+lichess.load.then(() => {
+  $('.ublog-post-form__image').each(function (this: HTMLFormElement) {
+    const form = this;
+    $(form)
+      .find('input[name="image"]')
+      .on('change', () => {
+        xhr.formToXhr(form).then(html => $(form).find('img.ublog-post-image').replaceWith(html), alert);
+      });
+  });
+});